The Auth Flow

The page, section by section

1. 01

   Welcome back

   Account Chooser

   Saved accounts with when each was last used, so a returning person is one tap from their workspace.

2. 02

   Sign in

   Mono Sign-in

   Providers first with the last one used marked, then email; the password field opens only once the email checks out.

3. 03

   Forgot password

   Envelope Reset

   The reset you can watch leave: the form folds into an envelope, so people trust the email is on its way.

4. 04

   Create account

   Handle Sign-up

   Three short steps with live handle availability and free alternatives, so the hardest choice in sign-up takes seconds.

5. 05

   Verify

   Code Cascade Verify

   Paste-friendly code cells with a clear wrong state and a resend button that shows its own countdown.

Change first

The first things to replace to make this page yours.

1. Wire the providers to your real OAuth apps and the email path to your auth backend; keep only the providers your users actually have.
2. Decide what the account chooser remembers on a shared computer, and how someone removes themselves from it.
3. Set the handle rules to yours: length, allowed characters, reserved names, and what the availability check calls.
4. Match the reset link's expiry, the code length and the resend cooldown to your provider, and say them on screen.

Paste it into Claude, Cursor or ChatGPT with the component files, and ask for your own version: your name, your work, your product. It names each component and where to copy it from.

# Build brief: The Auth Flow

Welcome back, sign in, reset, sign up and verify, built as one product's flow rather than five borrowed screens.
For: Teams building the account screens for a product, who want every step to look and sound like the same company.

Scenario: The account flow for a team product, async stand-ups for remote teams: choose a saved account, sign in with a provider or email, reset a forgotten password, create an account with a handle teammates can @mention, and confirm a one-time code.

## Direction
- Light and calm: warm paper (#f4f2ec), white cards and deep green ink (#14201d), which also fills every primary button; one brand green (#0e6b5e) for focus, success and the wordmark's dot.
- One typeface (Geist) across all five screens, set on each component's root, and the same tight lowercase wordmark on each.
- Returning people first: the flow opens on the saved accounts, because most visits to an account screen are someone coming back.
- Each component is themed through its own colour tokens, never by editing its internals; where a component hard-codes a colour (Handle Sign-up's glow), override that one property and note it.
- Brand strings are props, not copy to edit: Envelope Reset takes product and exampleEmail, Code Cascade Verify and Account Chooser take product. Choose components whose fixed copy fits the product.


## Making five components one product
- Pick one theme (paper or night) for every screen before adjusting anything, then set each component's tokens to the same few values: page, card, ink, muted, line, accent, success, error.
- Check the parts tokens don't reach: hard-coded glows, shadows and fonts. Override those as single properties from your own stylesheet, scoped to the component's root class.
- Read every component's fixed text aloud in your product's voice. If a line doesn't fit, choose a different component rather than patching its internals.
- The links between screens are plain hrefs; point them at your real routes and test the whole loop, not each screen alone.

## Page map
1. Welcome back: Account Chooser. Saved accounts with when each was last used, so a returning person is one tap from their workspace.
2. Sign in: Mono Sign-in. Providers first with the last one used marked, then email; the password field opens only once the email checks out.
3. Forgot password: Envelope Reset. The reset you can watch leave: the form folds into an envelope, so people trust the email is on its way.
4. Create account: Handle Sign-up. Three short steps with live handle availability and free alternatives, so the hardest choice in sign-up takes seconds.
5. Verify: Code Cascade Verify. Paste-friendly code cells with a clear wrong state and a resend button that shows its own countdown.

## Change first
- Wire the providers to your real OAuth apps and the email path to your auth backend; keep only the providers your users actually have.
- Decide what the account chooser remembers on a shared computer, and how someone removes themselves from it.
- Set the handle rules to yours: length, allowed characters, reserved names, and what the availability check calls.
- Match the reset link's expiry, the code length and the resend cooldown to your provider, and say them on screen.

## Components
Copy each component's files from its page (Code tab) into your project before you start, and use them as given: change props and content, not internals.
- Account Chooser: https://tryvitrine.dev/components/account-chooser (“Choose an account”, where the account you pick stays the same object: its avatar, name and email lift out of the list and travel up into the password step's header while the other accounts step away, and Back runs it in reverse.)
- Mono Sign-in: https://tryvitrine.dev/components/mono-sign-in (A stark black-and-white sign-in.)
- Envelope Reset: https://tryvitrine.dev/components/envelope-reset (A password reset you can watch leave.)
- Handle Sign-up: https://tryvitrine.dev/components/handle-sign-up (Sign-up in three short steps.)
- Code Cascade Verify: https://tryvitrine.dev/components/code-cascade-verify (A one-time-code screen where a pasted code drops into its six cells one after another, a wrong code sends a damped wave along the row from the cell you were on, and a right one rolls the digits away into a single Verified pill.)

## Build
- Next.js (App Router), TypeScript, Tailwind CSS. No extra UI libraries.
- Write real content for this site: real names, dates, numbers and sentences. No lorem ipsum, no "Feature one".
- Compose the sections in the order of the page map. Keep each component's own spacing; add page rhythm with consistent section padding.
- Mobile first: every section must work at 375px wide without horizontal scrolling.
- Respect prefers-reduced-motion everywhere; every Vitrine component already does.

## Before you ship
- Run `/component-adaptation` (https://tryvitrine.dev/workshop/skills/component-adaptation): Five components from different sets have to share one palette, wordmark, typeface and voice; this is the recipe's main job.
- Run `/interface-copy` (https://tryvitrine.dev/workshop/skills/interface-copy): Auth is mostly error, empty and expired states; each needs a plain sentence and a next step.
- Run `/conversion-ux-review` (https://tryvitrine.dev/workshop/skills/conversion-ux-review): Every extra field or step in sign-up costs accounts; this checks what can wait until later.
- Run `/responsive-audit` (https://tryvitrine.dev/workshop/skills/responsive-audit): The split sign-in stacks on phones and the code cells must fit 375px without shrinking below a thumb.
- Run `/accessibility-pass` (https://tryvitrine.dev/workshop/skills/accessibility-pass): Labels, announced errors, focus moved to each new step, and a code input that takes paste and the keyboard.

Direction

• Light and calm: warm paper (#f4f2ec), white cards and deep green ink (#14201d), which also fills every primary button; one brand green (#0e6b5e) for focus, success and the wordmark's dot.
• One typeface (Geist) across all five screens, set on each component's root, and the same tight lowercase wordmark on each.
• Returning people first: the flow opens on the saved accounts, because most visits to an account screen are someone coming back.
• Each component is themed through its own colour tokens, never by editing its internals; where a component hard-codes a colour (Handle Sign-up's glow), override that one property and note it.
• Brand strings are props, not copy to edit: Envelope Reset takes product and exampleEmail, Code Cascade Verify and Account Chooser take product. Choose components whose fixed copy fits the product.

Making five components one product

• Pick one theme (paper or night) for every screen before adjusting anything, then set each component's tokens to the same few values: page, card, ink, muted, line, accent, success, error.
• Check the parts tokens don't reach: hard-coded glows, shadows and fonts. Override those as single properties from your own stylesheet, scoped to the component's root class.
• Read every component's fixed text aloud in your product's voice. If a line doesn't fit, choose a different component rather than patching its internals.
• The links between screens are plain hrefs; point them at your real routes and test the whole loop, not each screen alone.