Lightweight Accounts P1: email capture flow for logged-out consumer actions - #5101
Open
aseckin wants to merge 18 commits into
Open
Lightweight Accounts P1: email capture flow for logged-out consumer actions#5101aseckin wants to merge 18 commits into
aseckin wants to merge 18 commits into
Conversation
…equest action Client-side foundation for the lightweight accounts flow: the gated action type union (post_vote / post_subscribe / forecast), a localStorage-backed pending record store shared across trees via useSyncExternalStore (plus the sessionStorage stash for OAuth carry-through), the wire mapping shared by the email and social paths, and the requestEmailLink API client + server action (Turnstile headers, always-204 anti-enumeration contract). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
BottomDrawer wraps Base UI's Drawer (animated enter/exit even when mounted on demand, swipe-down dismiss, max height capped below the navbar). The capture drawer runs the options/input/sent state machine: subscribe opens on checkbox cards with only 'When it resolves' preselected, vote and forecast go straight to email; includes prefilled repeat state, resend cooldown, Google button with action stash, Turnstile, and per-trigger copy in en.json. Registered as the emailCapture modal type. Non-English locales pending translations:generate. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Post votes, question subscriptions, and question-level forecasts now open the capture drawer with the drafted action attached instead of the signup modal. Forecast makers expose buildForecastPayload so the untouched-slider case falls back to a sign-in-only drawer without clearing pending actions. The consumer Predict button opens the maker for visitors (mobile: bottom drawer instead of the fullscreen overlay; one active drawer at a time), and the new NotifyMeCta gives mobile a subscribe entry point. Group/conditional makers and comment/key-factor gates keep the existing signin modal. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Device-local banner under the top chrome while a capture record is pending; tapping it reopens the drawer in recap state with the resend cooldown. The magic-link failure page gains an inline form that requests a fresh link, re-sending the stored gated action when one exists. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The drawer's Google path stashes the pending action in sessionStorage before the redirect; the callback attaches it to the code exchange (backend applies it best-effort per 9e543e5) with a 15-minute staleness guard, and clears the capture record on success. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Contributor
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughThe PR adds anonymous email capture for gated actions, email-link recovery, subscribe-capture experimentation, responsive mobile drawers, notification CTAs, sharing feedback, gauge layout updates, and translations in six locales. ChangesEmail capture and anonymous actions
Estimated code review effort: 5 (Critical) | ~90 minutes Possibly related PRs
Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 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 |
crypto.randomUUID only exists in secure contexts, so building an OAuth URL crashed the app when the site is accessed over plain http (e.g. LAN device testing against the dev server). getRandomValues has no such restriction. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
aseckin
force-pushed
the
lightweight-accounts-p1
branch
from
July 30, 2026 11:08
0f1ffc3 to
aa83bb1
Compare
Contributor
🚀 Preview EnvironmentYour preview environment is ready!
Details
ℹ️ Preview Environment InfoIsolation:
Limitations:
Cleanup:
|
Mobile capture drawer gets a unified header row: back button or wrapping title inline with the close button at consistent padding (desktop modal unchanged). BinaryCPBar's lg size now draws the SVG at real dimensions instead of a CSS transform, so the layout box matches the visual and the scale-compensation hacks at both call sites are gone. Tighter mobile spacing on consumer question pages (action row, prediction block, notify CTA, drawer paddings) and a consolidated drawer handle gap. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The Share button opens a bottom sheet on mobile (desktop keeps the dropdown): a 2x2 grid of Copy Link / X / Facebook / Embed tiles with pressed-state feedback, toasts on action, and the drawer staying open (Embed hands off to the embed modal). BottomDrawer gains a standard title-plus-close header used by the predict drawer too, and the new DrawerActionButton tile is the building block for future mobile drawers, with share_post_drawer as the reference example. useCopyUrl falls back to execCommand where navigator.clipboard is unavailable (insecure contexts). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Two coherent bundles behind the subscribe_capture_experiment flag: control shows the options step with 'Notify me of updates' copy, test goes straight to the email input under 'Notify me when this resolves' and subscribes to resolution only. Enrollment reuses the anonymous-experiment rails from the autotranslation experiment (middleware evaluation, first-party cookie, same-request header, shared distinct_id) with the variant resolved server-side on the already-dynamic question route so static pages stay static; the root-level drawer falls back to a synchronous cookie read. Exposure registers on surface show, not page load, and capture events carry a captureVariant property. Unenrolled, signed-in, and flag-off all serve the status quo. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Adds es/cs/pt/zh/zh-TW translations for the 62 new keys (email capture
drawer, confirm banner, dead-link recovery, notify CTA, share drawer,
experiment copy). Placeholders and rich-text tags preserved; the
compositional subscribe phrases translated to read grammatically inside
the 'get updates when {a}' sentences.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…magic-link sign-in
The post-sign-in toast now names what the link actually did ("you're now
following this question") and stays until dismissed with its own X, so the
only confirmation the deferred action was applied cannot scroll past unread.
The applied action travels in the redirect URL because the confirm-email
banner clears the device-local record the instant a user appears, before the
destination page mounts; a link opened on another device falls back to the
generic wording. Google sign-in now raises the same toast instead of
completing silently.
Submitting an email is optimistic: the sent state and reminder banner appear
immediately and only a failure pulls the user back, with the address intact
and an error toast. emailSubmitted still fires on confirmed success only, so
the experiment's primary metric cannot count failures.
Turnstile switches to interaction-only, so the widget is invisible unless
Cloudflare demands a challenge while staying mounted to re-issue the
single-use token for resend, which also removes the drawer's overflow. Plus:
terms line on the email step, centered secondary links, no-scrollbar on the
drawer scroller.
Facebook gives up its slot in both auth modals to a magic-link button, the
first route back in for accounts created by email link, which have no
password; it opens the same capture sheet with sign-in copy.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
# Conflicts: # front_end/messages/cs.json # front_end/messages/es.json # front_end/messages/pt.json # front_end/messages/zh-TW.json # front_end/messages/zh.json
… wrapping Logging out is a client-side navigation, so the root layout and its modal state survive it: an open tutorial stayed on screen for a signed-out visitor on the storefront. GlobalModals now refuses to render it without a user, and AuthProvider syncs the server-provided user during render instead of in an effect, since child effects run before parent ones and a page mounting right after logout would otherwise read the signed-out user as still signed in. Arriving by magic link also marks onboarding complete, so a visitor who came to follow a question is not met with a forecaster tutorial. The update is awaited and revalidating: fired-and-forgotten, staleTimes.dynamic serves the destination page a cached payload carrying the old flag and the tutorial opens anyway. Also: Enter submits the capture and recovery email fields, which sit outside a form and did nothing before; and the terms line wraps with text-balance. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
![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: 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 `@front_end/src/components/global_modals.tsx`:
- Around line 140-144: Update the authentication-change handling in global
modals so signing out clears any active onboarding modal from currentModal
state. Preserve the existing rendering guard in the OnboardingModal block, and
ensure the cleanup occurs when user becomes null rather than only hiding the
modal.
🪄 Autofix
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: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: 4c356657-f672-420e-a699-950ce2422ef8
📒 Files selected for processing (5)
front_end/src/app/(main)/auth/email/components/email_link_verify.tsxfront_end/src/components/email_capture/email_capture_drawer.tsxfront_end/src/components/email_link_event_toast.tsxfront_end/src/components/global_modals.tsxfront_end/src/contexts/auth_context.tsx
🚧 Files skipped from review as they are similar to previous changes (2)
- front_end/src/components/email_capture/email_capture_drawer.tsx
- front_end/src/components/email_link_event_toast.tsx
The tutorial fires for any signed-in user whose onboarding flag is unset, and only the magic-link path cleared it: arriving through Google still produced a brand-new un-onboarded account, so the tutorial ambushed the user on the next page that mounted OnboardingCheck. The social callback now marks onboarding complete the same way, awaited and revalidating so the destination page is not server-rendered from a cached payload carrying the old flag. Telling a lightweight sign-in from an ordinary one needs a signal, and the sessionStorage stash was nearly it — except it was only written when a gated action existed, so Google from the sign-in drawer stashed nothing and would have kept the tutorial. The drawer now stashes unconditionally, with a null action when there is none, and the stash's presence is the discriminator. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Refusing to render the tutorial without a user leaves the request itself sitting in modal state, and SimplifiedSignupModal signs a visitor in with a bare setUser while owning its own open state: a stale tutorial would surface the moment a user reappeared, with nothing having asked for it. Clear it when the user goes away. The render guard stays, since the effect runs after paint and would otherwise let a frame of tutorial through. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Contributor
Author
all should be addressed, ty for feedback |
ncarazon
approved these changes
Aug 10, 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
3 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.
Frontend half of Lightweight Accounts P1 (#5045), built against the merged backend (#5052, #5066, #5085, and gated-action support in social auth from 9e543e5).
What this does
When a logged-out visitor takes a consumer action (vote on a question, subscribe to updates, or make a forecast), they get a capture drawer instead of the signup modal: enter an email, receive a magic link, and clicking it verifies the address, signs them in, and applies the action they were trying to take.
Demo
lightweight-accs.mp4
The flow
Mobile share drawer (reusable pattern)
The Share button on question pages now opens a bottom sheet on mobile (desktop keeps the dropdown): a 2x2 grid of Copy Link / X / Facebook / Embed tiles with pressed-state feedback and toasts, the drawer staying open across actions (Embed hands off to the embed modal). This establishes the house pattern for converting desktop interactions into mobile drawers:
BottomDrawerwith thetitleheader +DrawerActionButtontiles, gated at the call site withuseBreakpoint("sm")—share_post_drawer.tsxis the reference example for future drawers.Subscribe-capture A/B experiment
The subscribe flow ships behind a PostHog experiment testing whether the options step earns richer subscriptions or is just friction:
Enrollment reuses the anonymous-experiment infrastructure from #5082: middleware evaluates the flag server-side for eligible anonymous document requests, pins the assignment in a 26-week first-party cookie (plus a same-request header so the first pageview renders correctly), and shares the distinct_id with the autotranslation experiment so one visitor never has two identities. The variant is resolved server-side only on the question route (already dynamic) so static pages stay static.
PostHog setup
subscribe_capture_experiment, variantscontrolandtest, 50/50 split. No targeting conditions needed (the middleware already restricts enrollment to anonymous non-bot visitors).emailSubmittedfiltered totrigger = post_subscribe, relative to exposure.subscribeOptionsContinuedfires only in control and carries theselectedtypes array; test is constant at one type. Also watchcaptureAbandoned(withstep) for where each arm loses people.captureVariantproperty (control/test/none), and bootstrapped flags stamp$feature/subscribe_capture_experimenton every event.Local/staging testing without the flag: pin an arm by setting the cookie
metaculus_subscribe_capture_abtox%3Acontrolorx%3Atestin devtools.Also in this PR
crypto.getRandomValuesbecausecrypto.randomUUIDdoes not exist in insecure contexts and crashed OAuth URL construction (reachable from the signin modal on main too) when the site is served over plain http, e.g. device testing against the dev server.useCopyUrlfalls back todocument.execCommand("copy")wherenavigator.clipboardis unavailable.BinaryCPBarsizelgnow draws the SVG at real dimensions instead of a CSS transform, so its layout box matches the visual and the scale-compensation hacks at both call sites are gone.Verification
bun run lint(0 errors) andbun run buildpass. (Note: the ~37 "Dynamic server usage" logs during build pre-exist on main; verified against clean HEAD, tracked separately.)Summary by CodeRabbit