[Bug] Two-Factor Authentication (2FA) Setup Verification Zod Message is incorrect

Is there an existing issue for this?

Yes, I have searched the existing issues and none of them match my problem.

Product Variant

Current Behavior

Upon setting up a TOTP device, you must "Enter the 6-digit code from your authenticator app to verify that 2FA has been setup correctly." However, if you submit an incorrect code, the message displayed in the FormMessage component is a strange 6-character string.

As an example, I created a dummy account and put in just the first 5 digits of the 2FA code (I've since deleted the account so this screenshot isn't at risk of revealing anything sensitive.)

Expected Behavior

The error message should read "Code must be exactly 6 digits long.", as defined in the Zod schema.

Steps To Reproduce

Go to User settings while logged-in
Disable 2FA (if already enabled).
Click "Enable 2FA"
Setup your TOTP device.
Enter an incorrect code into the "Code" field on the dialogue which reads "Enter the 6-digit code from your authenticator app to verify that 2FA has been setup correctly."

What browsers are you seeing the problem on?

Firefox

What template are you using?

None

Anything else?

I've had a glance over the associated Zod schema. The only thing I see that might be causing this bug is the usage of the Lingui translate macro t. It's worth noting that the t-call-in-function ESLint rule is being ignored for this line of the Zod schema, which may be producing strange behaviour.

I tried to recreate but I am getting this

Although, it could happen since the error message is not passed for the length check.

Reactive-Resume/libs/dto/src/auth/two-factor.ts

Lines 7 to 8 in a578bd1

    
           .length(6) 
        
           .regex(/^[0-9]+$/, { message: "code must be a 6 digit number" }),

Hey, I don't think that's the same form / Zod schema as the one I experienced the bug with.

It seems to only be present in the form for verifying the 2FA code the very first time.

There's a link in my original post to the Zod schema in question. It uses a custom regex rather than a .length(6) call.

Oh, you mean this guy?

Reactive-Resume/apps/client/src/pages/dashboard/settings/_dialogs/two-factor.tsx

Line 50 in a578bd1

    
           code: z.literal("").or(z.string().regex(/^\d{6}$/, t`Code must be exactly 6 digits long.`)),

My bad.

Yeah that's the one. No worries!

This happens only on https://rxresu.me, I cannot recreate it even in a production build locally, but as per Lingui docs, a lazy translation should solve the issue here without using t. The lazy translation works on a production build I ran locally, but we'll have to deploy it and see if it works on https://rxresu.me.

	.length(6)
	.regex(/^[0-9]+$/, { message: "code must be a 6 digit number" }),