Improve 2FA flow

[carlosmonastyrski]

Description 📣

Improved 2FA flow to be more intuitive, separated the recovery tokens from the normal 2FA token (previously check both on the same flow). Also force users to download the recovery codes in order to minimize the possibility of locked users.

Type ✨

• Bug fix
• New feature
• Improvement
• Breaking change
• Documentation

Tests 🛠️

# Here's some code block to paste some code snippets

---

• I have read the contributing guide, agreed and acknowledged the code of conduct. 📝

[maidul98]

🎉 Snyk checks have passed. No issues have been found so far.

✅ security/snyk check is complete. No issues have been found. (View Details)

[greptile-apps]

Greptile Summary

This PR significantly improves the 2FA authentication flow by separating recovery code verification from regular TOTP verification, creating a more intuitive and secure user experience. The changes span both frontend and backend components to implement a comprehensive redesign of the 2FA system.

Backend Changes:

• Added a new dedicated endpoint /api/v2/auth/mfa/verify/recovery-code for recovery code verification, separating it from the general MFA verification flow
• Enhanced the verifyMfaToken service to accept an isRecoveryCode parameter, allowing different handling logic for regular TOTP codes vs recovery codes
• Modified the TOTP registration service to return recovery codes after successful verification, eliminating the need for separate API calls
• Updated API schemas to properly expose recovery codes in responses

Frontend Changes:

• Redesigned the main MFA component (Mfa.tsx) to provide separate input modes for TOTP codes (6 digits) and recovery codes (8 characters), with a toggle button to switch between them
• Added a new RecoveryCodesDownload.tsx component that enforces mandatory download of recovery codes before users can complete 2FA setup, preventing account lockouts
• Enhanced the TOTP registration flow to automatically display recovery codes after verification and require download before completion
• Improved responsive design and user messaging throughout the 2FA components

The changes integrate seamlessly with the existing authentication system while providing clearer separation of concerns. The mandatory recovery code download addresses a critical UX issue where users could get locked out of their accounts, reducing support burden and improving security practices. The separation of verification flows enables better error messaging and user guidance during authentication.

Confidence score: 4/5

• This PR is safe to merge with minimal risk, implementing well-structured improvements to the 2FA flow
• Score reflects solid implementation with good separation of concerns, though the extensive changes across authentication components warrant careful testing
• Pay close attention to the new recovery code verification endpoint and the mandatory download flow to ensure they work correctly in production

_{10 files reviewed, 3 comments}

_{Edit Code Review Bot Settings | Greptile}

[scott-ray-wilson]

much better! few comments

[scott-ray-wilson]

two last small comments

[scott-ray-wilson]

LGTM