Enhancement: Implement 2FA

[rubentalstra]

What features would you like to see added?

Description

Enhance authentication security by implementing Two-Factor Authentication (2FA) with QR code generation via qrcode.react. Users will be required to enter a Time-based One-Time Password (TOTP) generated by an authenticator app (e.g., Google Authenticator, Authy) in addition to their password.

Expected Behavior

• Users can enable 2FA in their account settings.
• A QR code is generated using qrcode.react, allowing users to scan and set up 2FA in an authenticator app.
• Upon login, users must enter their TOTP along with their password if 2FA is enabled.
• Users should have an option to disable 2FA.
• (Optional) Provide backup codes in case the user loses access to their authenticator app.

Proposed Solution

1. Generate and securely store TOTP secrets internally instead of using an external library like Speakeasy.
2. Use qrcode.react to generate the QR code for users to scan.
3. Modify the authentication strategy to require a TOTP code during login when 2FA is enabled.
4. Allow users to disable 2FA from account settings.
5. Provide backup codes for account recovery.

More details

• Reference: Passport-TOTP Documentation
• QR Code Generation: qrcode.react
• TOTP secrets will be generated and managed internally without external dependencies.
• Ensure secure storage of secrets and enforce 2FA authentication flow without disrupting existing login mechanisms.

Which components are impacted by your request?

UI, General

Pictures

No response

Code of Conduct

• I agree to follow this project's Code of Conduct