🔒 feat: Two-Factor Authentication with Backup Codes & QR support #5685

rubentalstra · 2025-02-06T15:22:45Z

Summary

Closes: #5681

This PR introduces two-factor authentication (2FA) functionality to the application. The changes include:

Backend Enhancements:
- Added a new TOTP service for generating TOTP secrets and codes using Base32 encoding.
- Implemented controllers for 2FA enabling, verification (both via TOTP code and backup codes), confirmation, disabling, and backup code regeneration.
- Extended the user schema to store TOTP-related fields such as totpEnabled, totpSecret, and backupCodes.
- Created a temporary 2FA token using JWT to handle 2FA during login.
- Updated the authentication flow in the login controller to handle 2FA pending states.
Frontend Enhancements:
- Developed a new TwoFactorScreen component to handle 2FA verification during login.
- Integrated 2FA settings into the Account settings UI, including a QR code display for scanning and backup code download functionality.
- Updated routing and localization files to support the new 2FA endpoints and UI messages.
- Enhanced the React Query data-provider with new endpoints and mutations for 2FA actions.
General:
- Updated package dependencies (e.g., added passport-totp) and adjusted API endpoints accordingly.
- Added tests (or prepared the code for local unit testing) ensuring the new 2FA functionality works as expected.
✅ Status: Ready for review.

Change Type

New feature (non-breaking change which adds functionality)

Testing

///

Checklist

My code adheres to this project's style guidelines.
I have performed a self-review of my own code.
I have commented in any complex areas of my code.
I have made pertinent documentation changes.
My changes do not introduce new warnings.
I have written tests demonstrating that my changes are effective or that my feature works.
Local unit tests pass with my changes.
Any changes dependent on mine have been merged and published in downstream modules.
A pull request for updating the documentation has been submitted.

rubentalstra · 2025-02-06T21:02:06Z

better error handling
add option to refresh backup codes
add option to disable 2FA with backup codes
(optional) maybe show the user which backup codes have already been used?
2FA only an option when the user provider is local @berry-13

…pport (#5684) * working version for generating TOTP and authenticate. * better looking UI * refactored + better TOTP logic * fixed issue with UI * fixed issue: remove initial setup when closing window before completion. * added: onKeyDown for verify and disable * refactored some code and cleaned it up a bit. * refactored some code and cleaned it up a bit. * refactored some code and cleaned it up a bit. * refactored some code and cleaned it up a bit. * fixed issue after updating to new main branch * updated example

…ult:

- (optional) maybe show the user which backup codes have already been used?

rubentalstra · 2025-02-10T23:07:24Z

@berry-13 it’s now your turn to do your magic. After Berry is done with the UI it’s ready for Merge.

rubentalstra · 2025-02-14T15:45:57Z

@danny-avila conflicts has been resolved. is ready!

api/models/schema/userSchema.js

packages/data-provider/src/react-query/react-query-service.ts

danny-avila · 2025-02-17T16:21:01Z

Please see my review comments and unmark as draft when complete. Thank you for your work on this, excited to use it.

…TOTP secret query

packages/data-provider/src/react-query/react-query-service.ts

danny-avila · 2025-02-17T20:54:44Z

api/models/schema/userSchema.js

+    },
+    backupCodes: {
+      type: [backupCodeSchema],
+      default: [],


can we remove the default?

no we can not. this is used to check if the user has backupCodes or not. I'm sorry. it's part of the login controller logic as well

It can be removed, I'll do it

I know I wrote it to you 😀. Thank you.

…rollers

… 2FA components

… from path mapping

…FactorControllers test files

… for two-factor authentication

danny-avila · 2025-02-17T22:43:25Z

api/models/schema/userSchema.js

+    },
+    backupCodes: {
+      type: [backupCodeSchema],
+      default: [],


It can be removed, I'll do it

api/server/controllers/TwoFactorController.js

…er, LoginController, and jwtStrategy

…e default array in user schema

…or handling and loading state management, prevent redirect to /login

berry-13 marked this pull request as draft February 6, 2025 15:26

rubentalstra and others added 12 commits February 7, 2025 23:21

refactored controllers

8544629

removed passport-totp not used.

46a28f9

update the generateBackupCodes function to generate 10 codes by defa…

6dd6d74

…ult:

update the backup codes to an object.

57d7f71

fixed issue with backup codes not working

3ca2b7a

be able to disable 2FA with backup codes.

05c87d9

removed new env. replaced with JWT_SECRET

3d35cf2

✨ style: improved a11y and style for TwoFactorAuthentication

9c329ea

🔒 fix: small types checks

6387cce

✨ feat: improve 2FA UI components

3cc612a

fix: remove unnecessary console log

20dfbd4

rubentalstra force-pushed the feat/2fa branch from 9a7f854 to 20dfbd4 Compare February 7, 2025 22:21

rubentalstra added the ✨ enhancement New feature or request label Feb 8, 2025

rubentalstra added 6 commits February 9, 2025 15:28

add option to disable 2FA with backup codes

84d0cda

- add option to refresh backup codes

af32d56

- (optional) maybe show the user which backup codes have already been used?

removed text to be able to merge the main.

33a9e2d

removed eng tx to be able to merge

150661c

Merge branch 'main' into feat/2fa

0f34c1a

fix: migrated lang to new format.

5903c4d

rubentalstra assigned rubentalstra and berry-13 Feb 10, 2025

berry-13 and others added 4 commits February 11, 2025 23:54

feat: rewrote whole 2FA UI + refactored 2FA backend

802720e

chore: resolving conflicts

aff9709

chore: resolving conflicts

910eb19

Merge branch 'main' into feat/2fa

2040635

Repository owner deleted a comment from github-actions bot Feb 12, 2025

rubentalstra and others added 2 commits February 14, 2025 17:15

Merge branch 'main' into feat/2fa

24aa99a

fix: add disabled opacity to the verify button in TwoFactorScreen

5364777

danny-avila requested changes Feb 17, 2025

View reviewed changes

api/models/schema/userSchema.js Outdated Show resolved Hide resolved

packages/data-provider/src/react-query/react-query-service.ts Outdated Show resolved Hide resolved

danny-avila marked this pull request as draft February 17, 2025 16:21

rubentalstra added 2 commits February 17, 2025 21:07

⚙ fix: update 2FA logic to rely on backup codes instead of TOTP status

d8c55ee

Merge branch 'main' into feat/2fa

d4864cf

berry-13 changed the title ~~🔒feat: add Two-Factor Authentication (2FA) with backup codes & QR support~~ 🔒 feat: add Two-Factor Authentication (2FA) with backup codes & QR support Feb 17, 2025

⚙️ fix: Simplify user retrieval in 2FA logic by removing unnecessary …

1c038fe

…TOTP secret query

rubentalstra marked this pull request as ready for review February 17, 2025 20:19

danny-avila requested changes Feb 17, 2025

View reviewed changes

danny-avila marked this pull request as draft February 17, 2025 20:55

rubentalstra added 8 commits February 17, 2025 21:58

⚙️ test: Add unit tests for TwoFactorAuthController and twoFactorCont…

4ad677f

…rollers

⚙️ fix: Ensure backup codes are validated as an array before usage in…

9726d6e

… 2FA components

⚙️ fix: Update module path mappings in tests to use relative paths

fb69668

⚙️ fix: Update moduleNameMapper in jest.config.js to remove the caret…

93daf7e

… from path mapping

⚙️ refactor: Simplify import paths in TwoFactorAuthController and two…

db5a2f5

…FactorControllers test files

⚙️ test: Mock twoFactorService methods in twoFactorControllers tests

b6fdf56

⚙️ refactor: Comment out unused imports and mock setups in test files…

52d3502

… for two-factor authentication

⚙️ refactor: removed files

cc4c3f9

rubentalstra marked this pull request as ready for review February 17, 2025 21:44

rubentalstra requested a review from danny-avila February 17, 2025 21:44

danny-avila requested changes Feb 17, 2025

View reviewed changes

danny-avila added 3 commits February 17, 2025 18:07

refactor: Exclude totpSecret from user data retrieval in AuthControll…

5c9c4ba

…er, LoginController, and jwtStrategy

refactor: Consolidate backup code verification to apply DRY and remov…

59e6256

…e default array in user schema

refactor: Enhance two-factor authentication ux/flow with improved err…

be1cb7a

…or handling and loading state management, prevent redirect to /login

danny-avila changed the title ~~🔒 feat: add Two-Factor Authentication (2FA) with backup codes & QR support~~ 🔒 feat: Two-Factor Authentication with Backup Codes & QR support Feb 18, 2025

danny-avila merged commit f0f0913 into main Feb 18, 2025
7 checks passed

danny-avila deleted the feat/2fa branch February 18, 2025 00:09

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

🔒 feat: Two-Factor Authentication with Backup Codes & QR support #5685

🔒 feat: Two-Factor Authentication with Backup Codes & QR support #5685

rubentalstra commented Feb 6, 2025 •

edited

Loading

rubentalstra commented Feb 6, 2025 •

edited by berry-13

Loading

rubentalstra commented Feb 10, 2025

rubentalstra commented Feb 14, 2025

danny-avila commented Feb 17, 2025

danny-avila Feb 17, 2025

rubentalstra Feb 17, 2025

danny-avila Feb 17, 2025

rubentalstra Feb 17, 2025

danny-avila Feb 17, 2025

🔒 feat: Two-Factor Authentication with Backup Codes & QR support #5685

🔒 feat: Two-Factor Authentication with Backup Codes & QR support #5685

Conversation

rubentalstra commented Feb 6, 2025 • edited Loading

Summary

Change Type

Testing

Checklist

rubentalstra commented Feb 6, 2025 • edited by berry-13 Loading

rubentalstra commented Feb 10, 2025

rubentalstra commented Feb 14, 2025

danny-avila commented Feb 17, 2025

danny-avila Feb 17, 2025

Choose a reason for hiding this comment

rubentalstra Feb 17, 2025

Choose a reason for hiding this comment

danny-avila Feb 17, 2025

Choose a reason for hiding this comment

rubentalstra Feb 17, 2025

Choose a reason for hiding this comment

danny-avila Feb 17, 2025

Choose a reason for hiding this comment

rubentalstra commented Feb 6, 2025 •

edited

Loading

rubentalstra commented Feb 6, 2025 •

edited by berry-13

Loading