Passwordless db implementation - example#2718
Merged
Merged
Conversation
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughAdds a new example app for passwordless OTP on database connections, including sign-in, dashboard, QR/MFA flows, app scaffolding, and updated root/example documentation. ChangesPasswordless DB example and documentation
Estimated code review effort: 3 (Moderate) | ~25 minutes Sequence Diagram(s)sequenceDiagram
participant Home
participant PasswordlessDbForm
participant Auth0
participant Dashboard
Home->>Auth0: getSession()
Auth0-->>Home: no session
Home-->>PasswordlessDbForm: render sign-in form
PasswordlessDbForm->>Auth0: challengeWithEmail/challengeWithPhoneNumber
Auth0-->>PasswordlessDbForm: authSession
PasswordlessDbForm->>Auth0: loginWithOtp(authSession, otp)
Auth0-->>PasswordlessDbForm: mfa_required or tokens
PasswordlessDbForm->>Auth0: mfa.verify(oobCode or otp)
Auth0-->>PasswordlessDbForm: tokens
PasswordlessDbForm-->>Dashboard: redirect to /dashboard
Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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. Comment |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #2718 +/- ##
=======================================
Coverage 88.02% 88.02%
=======================================
Files 79 79
Lines 11011 11011
Branches 2277 2276 -1
=======================================
Hits 9692 9692
Misses 1275 1275
Partials 44 44 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
…ES, and example README
pmathew92
reviewed
Jun 29, 2026
pmathew92
reviewed
Jun 29, 2026
pmathew92
reviewed
Jun 29, 2026
Base automatically changed from
feat/passwordless-db-client
to
feat/passwordless-db-server
June 29, 2026 12:24
Base automatically changed from
feat/passwordless-db-server
to
feat/passwordless-db-types-errors
July 1, 2026 13:32
gyaneshgouraw-okta
previously approved these changes
Jul 6, 2026
2 tasks
Piyush-85
dismissed
gyaneshgouraw-okta’s stale review
The base branch was changed.
amitsingh05667
previously approved these changes
Jul 6, 2026
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 7
🧹 Nitpick comments (1)
examples/with-passwordless-db/components/passwordless-db-form.tsx (1)
169-269: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winDuplicate MFA-enroll/MFA-otp render blocks.
The two branches share nearly identical structure (numeric input, error box, submit button, back button with the same inline handler). Consider extracting a shared
MfaCodeFormsub-component parameterized by heading/description/QR-code slot to reduce duplication.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@examples/with-passwordless-db/components/passwordless-db-form.tsx` around lines 169 - 269, The mfa-enroll and mfa-otp branches in passwordless-db-form.tsx duplicate the same form structure, input, error display, submit button, and back action. Extract that shared UI into a reusable MfaCodeForm component (or equivalent helper) and pass in the step-specific title, description, submit label, and optional barcode/QR section so both branches reuse the same logic and markup.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@EXAMPLES.md`:
- Around line 2166-2186: The Server Action example is missing the import needed
for the redirect call, so copying the snippet will fail at runtime. Update the
example around requestOtp and verifyOtp to include the appropriate redirect
import alongside auth0, and ensure the verifyOtp function can call
redirect("/dashboard") without referencing an undefined symbol.
In `@examples/with-passwordless-db/app/dashboard/page.tsx`:
- Around line 5-10: The Dashboard page calls auth0.getSession() without guarding
for SDK failures, so any thrown error can crash the example instead of falling
back cleanly. Update Dashboard to wrap the auth0.getSession() call in try/catch,
then use error.code-based handling to decide whether to redirect, render a
friendly fallback, or rethrow unexpected errors; keep the existing redirect("/")
behavior for the unauthenticated path and preserve the example’s simple flow in
this component.
In `@examples/with-passwordless-db/components/passwordless-db-form.tsx`:
- Around line 281-292: The OTP/MFA/identifier inputs in the passwordless DB form
rely on placeholder text only and need an explicit accessible name. Update the
relevant input fields in passwordless-db-form.tsx, including the OTP input in
the shown block and the other affected inputs around the referenced sections, by
adding proper <label> associations or an aria-label/aria-labelledby tied to each
field. Keep the existing input behavior in the component while ensuring each
field can be reliably identified by assistive technologies.
- Around line 186-198: The mfaCode input in the MFA enroll and MFA otp flows is
accepting non-digit characters because its onChange handler only stores the raw
value. Update both instances of the mfaCode field in PasswordlessDbForm to
sanitize input the same way as the otp field by stripping non-digits and
limiting to 6 characters before calling setMfaCode, so the submit state and
mfa.verify only receive numeric codes.
In `@examples/with-passwordless-db/components/qr-code.tsx`:
- Around line 7-17: The QrCode component only renders the QR canvas and ignores
QRCode.toCanvas failures, so users need a fallback when scanning is unavailable.
Update QrCode to expose the OTP secret as a visible manual-entry value alongside
the canvas, and add an explicit error state in the useEffect/toCanvas flow
instead of swallowing the rejection. Use the QrCode component and its
canvasRef/value handling to surface both the secret and a clear failure message
when QR rendering does not succeed.
In `@examples/with-passwordless-db/package.json`:
- Line 13: The example package.json dependencies are out of sync: `next` is
still pinned to 16.2.5 and `eslint-config-next` is not on the matching 16.2.6
release. Update the version entries in the package manifest for both `next` and
`eslint-config-next` so this example uses the latest 16.2.x patch and keeps the
lint config aligned with Next.js.
In `@examples/with-passwordless-db/README.md`:
- Around line 22-28: Remove the internal tenant feature-flag names from the
public README section in with-passwordless-db so it matches the updated guidance
in EXAMPLES.md. In the “Enable feature flags” content, keep only generic wording
that tells users to contact their Auth0 account team or use internal tooling if
available, and do not expose the specific `allow_otp_database_connection_*`
flags. Update the surrounding text in the README to be consistent with the
public-facing messaging used elsewhere in the docs.
---
Nitpick comments:
In `@examples/with-passwordless-db/components/passwordless-db-form.tsx`:
- Around line 169-269: The mfa-enroll and mfa-otp branches in
passwordless-db-form.tsx duplicate the same form structure, input, error
display, submit button, and back action. Extract that shared UI into a reusable
MfaCodeForm component (or equivalent helper) and pass in the step-specific
title, description, submit label, and optional barcode/QR section so both
branches reuse the same logic and markup.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 22dc6290-7110-471e-af12-0dc01842e7e6
⛔ Files ignored due to path filters (1)
examples/with-passwordless-db/pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (18)
EXAMPLES.mdREADME.mdexamples/with-passwordless-db/README.mdexamples/with-passwordless-db/app/dashboard/page.tsxexamples/with-passwordless-db/app/globals.cssexamples/with-passwordless-db/app/layout.tsxexamples/with-passwordless-db/app/page.tsxexamples/with-passwordless-db/components/passwordless-db-form.tsxexamples/with-passwordless-db/components/qr-code.tsxexamples/with-passwordless-db/lib/auth0.tsexamples/with-passwordless-db/next-env.d.tsexamples/with-passwordless-db/next.config.tsexamples/with-passwordless-db/package.jsonexamples/with-passwordless-db/pnpm-workspace.yamlexamples/with-passwordless-db/postcss.config.mjsexamples/with-passwordless-db/proxy.tsexamples/with-passwordless-db/tailwind.config.tsexamples/with-passwordless-db/tsconfig.json
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@examples/with-passwordless-db/components/qr-code.tsx`:
- Around line 11-21: The QR code error state in qr-code.tsx is sticky because
renderError is only set to true and the canvas is conditionally unmounted, so
later value changes can never recover. Update the useEffect in QRCode rendering
to reset renderError when value changes and keep the canvas mounted (or
otherwise ensure QRCode.toCanvas can run again) so the component can re-render
successfully after a prior failure.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: abda2742-2b0d-4b17-9d96-dfecf183ad05
📒 Files selected for processing (4)
EXAMPLES.mdexamples/with-passwordless-db/README.mdexamples/with-passwordless-db/components/passwordless-db-form.tsxexamples/with-passwordless-db/components/qr-code.tsx
✅ Files skipped from review due to trivial changes (1)
- EXAMPLES.md
🚧 Files skipped from review as they are similar to previous changes (1)
- examples/with-passwordless-db/components/passwordless-db-form.tsx
amitsingh05667
approved these changes
Jul 6, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
📋 Changes
Adds
examples/with-passwordless-db, a Next.js 16 App Router example demonstrating the full passwordless OTP on database connections flow.The example covers the complete happy path:
email or phone identifier input →
passwordless.challengeWithEmail/challengeWithPhoneNumber→ OTP entry →passwordless.loginWithOtp→ session established → dashboard. MFA is fully handled: whenloginWithOtpreturnsmfa_required, the form callsmfa.getAuthenticatorsto determine whether the user needs to enroll (shows a QR code via aqrcodecanvas component) or challenge an existing authenticator (TOTP or OOB).mfa.verifycompletes the flow in both cases.Phone signup is set to
allowSignup: falsesince Auth0 does not support phone OTP signup in non-interactive flows (phone_verifiedmust be true before account creation). Email signup usesallowSignup: true.📎 References
feat/passwordless-db-types-errors,feat/passwordless-db-server,feat/passwordless-db-client🎯 Testing
pnpm typecheckandpnpm buildpass insideexamples/with-passwordless-db. Tested end-to-end against a dev tenant with all required feature flags enabled:PasswordlessDbGetTokenErrorwithinvalid_requestPasswordlessDbChallengeErrorwithinvalid_connectionSummary by CodeRabbit