[Feat]: Email verification result page between verify and login redirect#33
Conversation
Issue #9: after clicking the verification link, Better Auth 302s to the configured callbackURL (default '/') and verified users land on the bare sign-in form with no feedback that their email just got verified. Two config changes + a new page make the success UX reachable: - verificationRedirectUrl(rawUrl) uses the URL API to swap ONLY the callbackURL query param to '/login/verified'. Touching the path would skip /api/auth/verify-email entirely — the token would never be consumed and verification would silently fail. - emailVerification.autoSignInAfterVerification is now on. Better Auth 1.6.x defaults this to falsy, which combined with the bare-URL redirect means /login/verified receives no token AND no session, hitting the !token && !session fallback and bouncing users back to /login. - New page mirrors the better-auth-ui card pattern (CardHeader centered icon, CardTitle, FieldDescription). CTA uses Button asChild size='lg' with MessagesSquareIcon to match components/landing/hero-cta.tsx. Tests cover URL transform (callbackURL=/, callbackURL=/login/sign-in, missing param, path preservation, token preservation, URL encoding) and the two CTA branches (hasSession=true → /chat, false → /login). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Local visual verification screenshots. Matches the existing convention with /.verify and /.observability-screens — chrome-devtools MCP screenshots land here when verifying auth UI changes. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
![claude[bot]](https://avatars.githubusercontent.com/in/1236702?s=60&v=4){kind=small}
Review summaryVerified the flow end-to-end against the CLAUDE.md rules and the existing auth code. The fix is sound — the One real issue worth fixing before merge (inline comment on Other items, all minor (inline):
No CLAUDE.md rule violations: this is auth UI, not tool-UI, so rules 6/7 about flush cards / text-only buttons don't apply. The icon+text CTA matches the existing |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
Review-driven cleanup from PR #33. claude[bot] and greptile both flagged the same guard: if (!token && !session) redirect('/login') The token check is meaningless here: Better Auth consumes the token server-side at /api/auth/verify-email and the 302 to callbackURL is the bare URL value, so searchParams.token is never set in the normal flow. Any visitor with ?token=foo bypassed the redirect and rendered the success view with hasSession=false, which then misleads the user via the 'Chat Now → /login' CTA. Drop the token lookup entirely. session is the only reliable signal; autoSignInAfterVerification is on, so a verified user always lands here with a real cookie. Also: - Adopt getSessionFromHeaders() from lib/auth/queries (claude[bot] style nit; matches app/chat/page.tsx and sidesteps Next.js dynamic-API double-await if the call later gets wrapped in cache()). - Add vi.useFakeTimers() countdown test — assert router.replace fires with /chat after the 5 ticks (claude[bot] test gap). - Pin the 'You're signed in.' / 'You can now sign in.' copy on both branches. - Fix the verification endpoint path in lib/auth/config.ts comment ('/verify-email' → '/api/auth/verify-email') — the function only touches callbackURL so behavior is correct, prose just matched the test fixtures (claude[bot] doc nit). Reject greptile's 'Chat Now' misleading label: copy matches components/landing/hero-cta.tsx by design, and the page no longer renders the no-session branch anyway. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
PR review for #33: solid, well-tested, follows the repo auth conventions. Greptile's two flagged issues were already addressed in commit 711937d (dropped token guard, adopted getSessionFromHeaders, fixed config doc, added countdown test). A few minor follow-ups below. app/login/verified/verified-view.tsx — dead hasSession=false branch The server component always passes hasSession (shorthand for true) and the !session path redirects to /login before this view renders. The hasSession=false branch is dead code that's still exported and tested. It carries two minor inconsistencies that would surface if someone later re-wires the page guard: copy says 'You can now sign in.' but the branch is rendered for direct visitors, not verified-but-not-signed-in users, and the CTA 'Chat Now' with MessagesSquareIcon → /login reads as a contradiction on a success page. The landing-hero parallel justifies the pattern for unauthenticated visitors who expect a 'Chat now → login' bounce; on a post-verification success view it's misleading. Cheapest fix: tighten the prop to hasSession: true and drop the false branch (and its two tests). Removes the misleading surface and the test maintenance burden. tests/api/auth/verify-email.test.ts — comment drift The config doc was updated to use /api/auth/verify-email but the test header comment still describes the URL as /verify-email with token and callbackURL query params. Functionally fine because the transform is path-agnostic, but the prose should match the actual route. Bonus: add a single assertion that u.pathname === '/api/auth/verify-email' so a future regression that accidentally rewrites the path is caught (the path-preservation test currently only checks /verify-email). lib/auth/config.ts — autoSignInAfterVerification: true (observation, not a blocker) This makes the email link itself sufficient to mint a session cookie. Consistent with Better Auth default-flow UX, but worth a conscious note: any actor with read access to the inbox (shared device, mail-forwarding rule, intercepted message) gets a fully-authenticated session rather than just a verified email. The PR comment already acknowledges this; flagging it explicitly so it stays a deliberate choice. What's good: getSessionFromHeaders helper matches app/chat/page.tsx; verificationRedirectUrl is a pure function with 6 unit tests covering path/token preservation, missing-callbackURL, and URL encoding; the 5s countdown correctly clears the timer on unmount so router.replace won't double-fire; docs/AUTH.md Routes table updated; comments are why-style throughout. CLAUDE.md compliance: rules 1 (docs in sync), 2 (TDD with tests for new modules), 5 (why-comments), and 9 (withAuth wrapping) all satisfied. |
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
3 issues found across 3 files (changes from recent commits).
Prompt for AI agents (unresolved issues)
Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.
<file name="app/login/verified/page.tsx">
<violation number="1" location="app/login/verified/page.tsx:21">
P3: The verified page now always renders `VerifiedView` with `hasSession=true`, making the component's `false` branch—and the newly expanded fallback tests—unreachable in the application. Since this is the only production call site, simplifying `VerifiedView` to remove the prop and `/login` fallback would avoid maintaining behavior that cannot run.</violation>
</file>
<file name="tests/frontend/login/verified-view.test.tsx">
<violation number="1" location="tests/frontend/login/verified-view.test.tsx:53">
P3: This “after the 5s countdown” test advances six seconds before asserting, so a one-second redirect regression would still pass even though the UI promises 5s. Advancing exactly five 1-second ticks would pin the advertised behavior; the current effect reaches zero and invokes `replace` on that fifth tick.</violation>
</file>
<file name="lib/auth/config.ts">
<violation number="1" location="lib/auth/config.ts:108">
P3: The `/api/auth` prefix comes from Better Auth's default `basePath`, not from the catch-all route; `app/api/auth/[...all]/route.ts` only mounts `auth.handler` via `toNextJsHandler` and does not rewrite or prepend the path. Naming the actual source here would keep this routing explanation accurate if `basePath` is later configured.</violation>
</file>
Reply with feedback, questions, or to request a fix.
Fix all with cubic | Re-trigger cubic
… docs Review-driven cleanup from PR #33's second wave (claude[bot], greptile, cubic re-triggered after the 711937d push). - Drop the `hasSession` prop from `VerifiedView` (cubic 3560907467, claude[bot] 3560868790/3560871871). The page redirects to /login when !session, so the false branch is unreachable in production. Removing it also deletes the misleading 'Chat Now → /login' and 'You can now sign in.' surface that greptile flagged in 3560735456. - Tighten the countdown test: advance 5 ticks (i < 5), not 6 (cubic 3560907477). The 6th tick was defensive padding; with it, a 1-second redirect regression would still pass. - Update `lib/auth/config.ts` doc comment: `/api/auth` prefix is Better Auth's default `basePath`, the catch-all route is just a mount point (cubic 3560907491). - Sync the test docblock + URL fixtures in `tests/api/auth/verify-email.test.ts` to `/api/auth/verify-email` (claude[bot] 3560868448/3560868562) so the prose matches the actual endpoint the function sees at runtime. Reject claude[bot] 3560868685 (autoSignIn security observation): the trade-off is already called out in the ponytail comment above the flag in `lib/auth/config.ts`. Email link is the auth token either way; the behavior matches Better Auth's docs and the project's CLAUDE.md security model. No follow-up. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
PR review — verification result page (#33)Reviewed all changes end-to-end against the CLAUDE.md rules and the surrounding auth flow (lib/auth/config.ts, app/chat/page.tsx, app/login/[[...path]]/page.tsx, docs/APIS.md, docs/AUTH.md). Inline comments are attached to specific lines; this is the summary. Verdict: looks shippable, but two issues deserve a conscious decision before merge.1. Security — the threat-model widening comment is wrong (inline at lib/auth/config.ts:72).
2. UX / semantics — /login/verified is publicly reachable by any signed-in user (inline at app/login/verified/page.tsx:14). The page is gated on Things I checked and did NOT find issues with
One minor on docs (not blocking)The PR updates docs/AUTH.md (Routes table) but docs/APIS.md only mentions /api/auth/verify-email as "verify via a one-time token" with no mention of the new side effect (it now also sets a session cookie under autoSignInAfterVerification: true). Per CLAUDE.md rule #1 ("any change to API request/response/status/semantics updates docs/APIS.md"), this API semantic PROBABLY deserves a one-line note in the /api/auth/verify-email row. If the team considers lib/auth/config.ts outside the API surface (no route.ts touched), the change may not need it — but the BEHAVIOR is observable from the client. Inline comments posted
Otherwise looks good. Tests pass (764), typecheck clean, docs updated for the route, visual verification done. |
There was a problem hiding this comment.
1 issue found across 5 files (changes from recent commits).
Prompt for AI agents (unresolved issues)
Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.
<file name="app/login/verified/page.tsx">
<violation number="1" location="app/login/verified/page.tsx:21">
P2: This page is accessible to any signed-in user (it gates on session existence, not on a recent verification event). A user who bookmarks `/login/verified` or follows a shared link will see "Your email is confirmed" even though no verification happened in their current session. Consider either redirecting already-verified users directly to `/chat`, or softening the copy to "You're signed in" so it doesn't assert a verification that may not have just occurred.</violation>
</file>
Tip: Review your code locally with the cubic CLI to iterate faster.
Fix all with cubic | Re-trigger cubic
1 participant
Closes #9
Problem
After a new user clicks the verification link in their inbox, Better Auth consumes the token and 302s to the default
callbackURL(/), which silently bounces them to the bare sign-in form with no indication that verification just succeeded. Confusing.What changed
lib/auth/config.tsverificationRedirectUrl(rawUrl)pure function uses theURLAPI to swap ONLY thecallbackURLquery param to/login/verified. The/api/auth/verify-emailpath MUST stay intact — replacing it would skip verification entirely (the token would never be consumed).emailVerification.autoSignInAfterVerification: true. Better Auth 1.6.x defaults this to falsy; combined with the bare-URL redirect that means/login/verifiedreceives no token AND no session, hitting a!token && !sessionfallback that bounces users right back to/login. Flipping this on makes the success page reachable.app/login/verified/page.tsx+verified-view.tsxNew page mirroring the better-auth-ui card pattern (
Card+ centeredCircleCheckIcon+CardTitle+FieldDescription). Server component reads?token=..., checks session, redirects to/loginif neither. CTA usesButton asChild size="lg"withMessagesSquareIconto matchcomponents/landing/hero-cta.tsx. Target routes to/chatif a session is established (the typical case now that auto-signin is on) or/loginotherwise.Tests
tests/api/auth/verify-email.test.ts— 6 cases: callbackURL=/, callbackURL=/login/sign-in, missing callbackURL, path preservation, token preservation, URL encoding.tests/frontend/login/verified-view.test.tsx— 3 cases: bothhasSessionbranches + success icon.pnpm test: 764 pass.pnpm typecheckclean.Visual verification
Chrome DevTools MCP screenshot confirms icon centering, Card layout consistency with the existing auth UI, and the CTA matching the landing HeroCta pattern.
Docs
docs/AUTH.mdRoutes table updated to include/login/verified, thecallbackURLrewrite note, and theautoSignInAfterVerificationflag.🤖 Generated with Claude Code
Summary by cubic
Adds a post-verification success page at
/login/verifiedand routes verification callbacks there to give clear feedback after email confirm (addresses #9). Requires a real session after verification and auto-redirects users to/chat.New Features
/login/verifiedwith a 5s auto-redirect to/chat; direct visits without a session redirect to/login.verificationRedirectUrl(rawUrl)to rewrite onlycallbackURLto/login/verified, preserving/api/auth/verify-emailand thetoken.emailVerification.autoSignInAfterVerification: true.Refactors
getSessionFromHeaders(); removed token checks.hasSessionbranch fromVerifiedView; tightened the countdown test to assert redirect exactly at 5 ticks and clarified docs around/api/auth/verify-email.Written for commit 8523375. Summary will update on new commits.
Greptile Summary
This PR adds a
/login/verifiedsuccess page that sits between Better Auth's email-verification 302 and the final/chatdestination, giving new users clear confirmation that their email was confirmed.autoSignInAfterVerification: trueis enabled so the 302 arrives with a real session cookie, and the server component uses that session as the sole gate — closing the previous?token=bypass cleanly.lib/auth/config.ts:verificationRedirectUrlrewrites only thecallbackURLquery param (preserving the/api/auth/verify-emailpath and thetoken), andautoSignInAfterVerification: trueensures users arrive at/login/verifiedwith a session.app/login/verified/: Server component redirects sessionless visitors straight to/login; client component shows a 5-second countdown and auto-redirects to/chatviarouter.replace.docs/AUTH.mdroutes table is updated.Confidence Score: 5/5
Safe to merge — the verification flow is well-guarded, previously flagged issues are fully addressed, and the change is covered by unit tests.
The session-only gate in the server component correctly handles the case where Better Auth never forwards the token in the 302.
verificationRedirectUrlis a pure function with six dedicated tests that lock the critical invariants (path preservation, token preservation, callbackURL rewrite). The countdown/redirect logic in the client component is straightforward and is tested end-to-end with fake timers. No auth bypass surface, no data mutation, no API route changes.No files require special attention.
Important Files Changed
Sequence Diagram
%%{init: {'theme': 'neutral'}}%% sequenceDiagram participant Email as Email Client participant BA as Better Auth<br/>/api/auth/verify-email participant Page as VerifiedPage<br/>(server component) participant View as VerifiedView<br/>(client component) participant Chat as /chat Email->>BA: "GET /api/auth/verify-email?token=...&callbackURL=/login/verified" Note over BA: Token consumed<br/>autoSignInAfterVerification=true<br/>Session cookie set BA-->>Email: 302 → /login/verified (with session cookie) Email->>Page: GET /login/verified Page->>Page: getSessionFromHeaders() alt no session Page-->>Email: redirect → /login else session exists Page->>View: render VerifiedView View->>View: countdown 5s View->>Chat: router.replace("/chat") end%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%% sequenceDiagram participant Email as Email Client participant BA as Better Auth<br/>/api/auth/verify-email participant Page as VerifiedPage<br/>(server component) participant View as VerifiedView<br/>(client component) participant Chat as /chat Email->>BA: "GET /api/auth/verify-email?token=...&callbackURL=/login/verified" Note over BA: Token consumed<br/>autoSignInAfterVerification=true<br/>Session cookie set BA-->>Email: 302 → /login/verified (with session cookie) Email->>Page: GET /login/verified Page->>Page: getSessionFromHeaders() alt no session Page-->>Email: redirect → /login else session exists Page->>View: render VerifiedView View->>View: countdown 5s View->>Chat: router.replace("/chat") endReviews (3): Last reviewed commit: "refactor(auth): remove dead hasSession b..." | Re-trigger Greptile
Context used: