2FA
Summary by CodeRabbit
-
New Features
- Introduced two-factor authentication (2FA) support, allowing users to enable, confirm, and disable 2FA for their accounts.
- Added dedicated UI components and modals for managing 2FA setup, code entry, and recovery.
- Implemented a two-factor challenge page during login for users with 2FA enabled.
- Users receive email notifications when 2FA is enabled or disabled.
-
Enhancements
- Updated account security settings to include 2FA management.
- Improved error handling and user feedback for 2FA-related login scenarios.
- Added seamless 2FA cookie handling and authentication flow integration.
- Enhanced user data fetching with revalidation support.
-
Bug Fixes
- Ensured proper redirect and access control for the two-factor challenge flow.
-
Chores
- Added the "otpauth" dependency for TOTP-based authentication.
The latest updates on your projects. Learn more about Vercel for Git ↗︎
| Name | Status | Preview | Updated (UTC) |
|---|---|---|---|
| dub | ✅ Ready (Inspect) | Visit Preview | Jun 28, 2025 9:38am |
[!IMPORTANT]
Review skipped
Draft detected.
Please check the settings in the CodeRabbit UI or the
.coderabbit.yamlfile in this repository. To trigger a single review, invoke the@coderabbitai reviewcommand.You can disable this status message by setting the
reviews.review_statustofalsein the CodeRabbit configuration file.
Walkthrough
This update introduces two-factor authentication (2FA) throughout the web application. It extends the user model and authentication logic to support enabling, confirming, and disabling 2FA, integrates TOTP-based code verification, and adds new UI components and modals for 2FA setup and management. Email notifications and error handling for 2FA events are also implemented.
Changes
| File(s) | Change Summary |
|---|---|
packages/prisma/schema/schema.prisma |
Added twoFactorSecret, twoFactorConfirmedAt, and twoFactorRecoveryCodes to the User model. |
apps/web/lib/types.ts |
Extended UserProps with twoFactorConfirmedAt and twoFactorRecoveryCodes. |
apps/web/app/api/user/route.ts |
Included 2FA fields in user selection and response. |
apps/web/lib/auth/constants.ts |
Added TWO_FA_COOKIE_NAME constant. |
apps/web/lib/auth/totp.ts |
Introduced TOTP secret generation and instance creation utilities. |
apps/web/lib/auth/options.ts |
Added 2FA cookie handling, 2FA challenge provider, and 2FA checks to credentials provider. |
apps/web/lib/actions/auth/enable-two-factor-auth.ts |
New action to initiate enabling 2FA, generating secret and QR code. |
apps/web/lib/actions/auth/confirm-two-factor-auth.ts |
New action to confirm 2FA setup with OTP validation and email notification. |
apps/web/lib/actions/auth/disable-two-factor-auth.ts |
New action to disable 2FA, clear secrets, and send notification email. |
apps/web/lib/swr/use-user.ts |
Switched to useSWR, exposing mutate for user data refresh. |
apps/web/lib/middleware/app.ts |
Allowed unauthenticated access to /two-factor-challenge route. |
apps/web/app/app.dub.co/(dashboard)/account/settings/security/page-client.tsx |
Always renders main content; adds TwoFactorAuth component. |
apps/web/app/app.dub.co/(dashboard)/account/settings/security/two-factor-auth.tsx |
New TwoFactorAuth component for managing 2FA settings and modals. |
apps/web/app/app.dub.co/(auth)/two-factor-challenge/form.tsx |
New TwoFactorChallengeForm for submitting 2FA codes. |
apps/web/app/app.dub.co/(auth)/two-factor-challenge/page.tsx |
New challenge page; redirects if 2FA cookie missing. |
apps/web/ui/auth/login/email-sign-in.tsx |
Redirects to /two-factor-challenge on 2FA-required error. |
apps/web/ui/auth/login/login-form.tsx |
Added 2FA-related error codes to error message mapping. |
apps/web/ui/modals/enable-two-factor-auth-modal.tsx |
New modal and hook for enabling 2FA, including QR code and OTP input. |
apps/web/ui/modals/disable-two-factor-auth-modal.tsx |
New modal and hook for disabling 2FA with confirmation. |
packages/email/src/templates/two-factor-enabled.tsx |
New email template for 2FA enabled notification. |
packages/email/src/templates/two-factor-disabled.tsx |
New email template for 2FA disabled notification. |
apps/web/package.json |
Added otpauth dependency. |
Sequence Diagram(s)
Two-Factor Authentication Login Flow
sequenceDiagram
participant User
participant LoginForm
participant Server (Credentials Provider)
participant Cookie
participant 2FA Challenge Page
participant Server (2FA Challenge Provider)
User->>LoginForm: Enter email & password
LoginForm->>Server (Credentials Provider): Submit credentials
Server (Credentials Provider)->>Server (Credentials Provider): Validate credentials
alt 2FA enabled
Server (Credentials Provider)->>Cookie: Set 2FA cookie
Server (Credentials Provider)->>LoginForm: Return "two-factor-required" error
LoginForm->>2FA Challenge Page: Redirect
User->>2FA Challenge Page: Enter 2FA code
2FA Challenge Page->>Server (2FA Challenge Provider): Submit code + 2FA cookie
Server (2FA Challenge Provider)->>Server (2FA Challenge Provider): Validate code and cookie
alt Code valid
Server (2FA Challenge Provider)->>2FA Challenge Page: Success (user authenticated)
else Code invalid
Server (2FA Challenge Provider)->>2FA Challenge Page: Error
end
else 2FA not enabled
Server (Credentials Provider)->>LoginForm: Success (user authenticated)
end
Enabling Two-Factor Authentication
sequenceDiagram
participant User
participant SecurityPage
participant Server (Enable 2FA Action)
participant Enable2FAModal
participant Server (Confirm 2FA Action)
participant Email
User->>SecurityPage: Click "Enable 2FA"
SecurityPage->>Server (Enable 2FA Action): Request secret & QR code
Server (Enable 2FA Action)->>SecurityPage: Return secret & QR code URL
SecurityPage->>Enable2FAModal: Open modal with QR code & secret
User->>Enable2FAModal: Enter 6-digit code
Enable2FAModal->>Server (Confirm 2FA Action): Submit code
Server (Confirm 2FA Action)->>Server (Confirm 2FA Action): Validate code
alt Code valid
Server (Confirm 2FA Action)->>Email: Send 2FA enabled notification
Server (Confirm 2FA Action)->>Enable2FAModal: Success
Enable2FAModal->>SecurityPage: Close modal, refresh user
else Code invalid
Server (Confirm 2FA Action)->>Enable2FAModal: Error
end
Disabling Two-Factor Authentication
sequenceDiagram
participant User
participant SecurityPage
participant Disable2FAModal
participant Server (Disable 2FA Action)
participant Email
User->>SecurityPage: Click "Disable 2FA"
SecurityPage->>Disable2FAModal: Open modal
User->>Disable2FAModal: Confirm disable
Disable2FAModal->>Server (Disable 2FA Action): Request disable
Server (Disable 2FA Action)->>Server (Disable 2FA Action): Clear 2FA fields
Server (Disable 2FA Action)->>Email: Send 2FA disabled notification
Server (Disable 2FA Action)->>Disable2FAModal: Success
Disable2FAModal->>SecurityPage: Close modal, refresh user
Poem
Two fluffy ears, a hop, a leap—
Now your logins are twice as deep!
With secret codes and emails bright,
Our carrots guard you day and night.
Enable, confirm, or turn it off—
Two-factor’s here, so hackers scoff!
🥕🔒
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
🪧 Tips
Chat
There are 3 ways to chat with CodeRabbit:
- Review comments: Directly reply to a review comment made by CodeRabbit. Example:
-
I pushed a fix in commit <commit_id>, please review it. -
Explain this complex logic. -
Open a follow-up GitHub issue for this discussion.
-
- Files and specific lines of code (under the "Files changed" tab): Tag
@coderabbitaiin a new review comment at the desired location with your query. Examples:-
@coderabbitai explain this code block. -
@coderabbitai modularize this function.
-
- PR comments: Tag
@coderabbitaiin a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:-
@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase. -
@coderabbitai read src/utils.ts and explain its main purpose. -
@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format. -
@coderabbitai help me debug CodeRabbit configuration file.
-
Support
Need help? Create a ticket on our support page for assistance with any issues or questions.
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.
CodeRabbit Commands (Invoked using PR comments)
-
@coderabbitai pauseto pause the reviews on a PR. -
@coderabbitai resumeto resume the paused reviews. -
@coderabbitai reviewto trigger an incremental review. This is useful when automatic reviews are disabled for the repository. -
@coderabbitai full reviewto do a full review from scratch and review all the files again. -
@coderabbitai summaryto regenerate the summary of the PR. -
@coderabbitai generate docstringsto generate docstrings for this PR. -
@coderabbitai generate sequence diagramto generate a sequence diagram of the changes in this PR. -
@coderabbitai resolveresolve all the CodeRabbit review comments. -
@coderabbitai configurationto show the current CodeRabbit configuration for the repository. -
@coderabbitai helpto get help.
Other keywords and placeholders
- Add
@coderabbitai ignoreanywhere in the PR description to prevent this PR from being reviewed. - Add
@coderabbitai summaryto generate the high-level summary at a specific location in the PR description. - Add
@coderabbitaianywhere in the PR title to generate the title automatically.
CodeRabbit Configuration File (.coderabbit.yaml)
- You can programmatically configure CodeRabbit by adding a
.coderabbit.yamlfile to the root of your repository. - Please see the configuration documentation for more information.
- If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation:
# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json
Documentation and Community
- Visit our Documentation for detailed information on how to use CodeRabbit.
- Join our Discord Community to get help, request features, and share feedback.
- Follow us on X/Twitter for updates and announcements.
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
| Diff | Package | Supply Chain Security |
Vulnerability | Quality | Maintenance | License |
|---|---|---|---|---|---|---|
| otpauth@9.4.0 |
🤖 Bug0 QA Agent
Here are the results of the automated tests for PR #2505:
- ✅ All tests passed
- Tests completed in 3.5m
- View detailed report
To re-run the tests, please comment /bug0 run or push a new commit to this PR.
🤖 Bug0 QA Agent
Here are the results of the automated tests for PR #2505:
- ✅ All tests passed
- Tests completed in 3.4m
- View detailed report
To re-run the tests, please comment /bug0 run or push a new commit to this PR.
🤖 Bug0 QA Agent
Here are the results of the automated tests for PR #2505:
- ✅ All tests passed
- Tests completed in 3.3m
- View detailed report
To re-run the tests, please comment /bug0 run or push a new commit to this PR.
🤖 Bug0 QA Agent
Here are the results of the automated tests for PR #2505:
- ✅ All tests passed
- Tests completed in 3.3m
- View detailed report
To re-run the tests, please comment /bug0 run or push a new commit to this PR.
🤖 Bug0 QA Agent
Here are the results of the automated tests for PR #2505:
- ✅ All tests passed
- Tests completed in 3.4m
- View detailed report
To re-run the tests, please comment /bug0 run or push a new commit to this PR.
🤖 Bug0 QA Agent
Here are the results of the automated tests for PR #2505:
- ✅ All tests passed
- Tests completed in 3.5m
- View detailed report
To re-run the tests, please comment /bug0 run or push a new commit to this PR.
🤖 Bug0 QA Agent
Here are the results of the automated tests for PR #2505:
- ✅ All tests passed
- Tests completed in 3.5m
- View detailed report
To re-run the tests, please comment /bug0 run or push a new commit to this PR.
🤖 Bug0 QA Agent
Here are the results of the automated tests for PR #2505:
- ✅ All tests passed
- Tests completed in 3.3m
- View detailed report
To re-run the tests, please comment /bug0 run or push a new commit to this PR.
🤖 Bug0 QA Agent
Here are the results of the automated tests for PR #2505:
- ✅ All tests passed
- Tests completed in 3.4m
- View detailed report
To re-run the tests, please comment /bug0 run or push a new commit to this PR.
@coderabbitai review
✅ Actions performed
Review triggered.
Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.
@coderabbitai full review
✅ Actions performed
Full review triggered.
🤖 Bug0 QA Agent
Here are the results of the automated tests for PR #2505:
- ✅ All tests passed
- Tests completed in 3.4m
- View detailed report
To re-run the tests, please comment /bug0 run or push a new commit to this PR.
Summary by CodeRabbit
New Features
- Introduced two-factor authentication (2FA) support, allowing users to enable, confirm, and disable 2FA for their accounts.
- Added dedicated UI components and modals for managing 2FA setup, code entry, and recovery.
- Implemented a two-factor challenge page during login for users with 2FA enabled.
- Users receive email notifications when 2FA is enabled or disabled.
Enhancements
- Updated account security settings to include 2FA management.
- Improved error handling and user feedback for 2FA-related login scenarios.
- Added seamless 2FA cookie handling and authentication flow integration.
- Enhanced user data fetching with revalidation support.
Bug Fixes
- Ensured proper redirect and access control for the two-factor challenge flow.
Chores
- Added the "otpauth" dependency for TOTP-based authentication.
Jl2756550
https://github.com/dubinc/dub/commit/97b78a1fa5f50d3e12817f240868b096039bfafe