Verify Email

Enter the 6-digit code to confirm your email and enter the right console.

<!-- GENERATED FILE. Do not edit by hand. Source: components/help/content/. Run npm run gen:docs. -->

Purpose & Business Context

Verify Email confirms that a new sign-up controls the address they registered with. It is the bridge between Create Account and the live product: only after the code is accepted is the mock session established and the user routed into their workspace.

Commercially it protects the integrity of the marketplace (genuine, reachable accounts) while staying light. Because it remembers whether the sign-up was a patient or a clinic, it can drop each new user into the right next step without asking again.

Screen Overview

The shared split-screen auth layout with an 'One last step' eyebrow. The card explains that a 6-digit code was sent to the user's email, and for clinics it adds '(clinic account)' to the subtitle.

It contains a single large 6-digit code input, a demo hint, a Verify & continue button, a Resend prompt, and a Back to sign in link. The page reads the role from the URL on the client (inside a Suspense boundary), defaulting to patient.

Controls & Components

• Code input: a single numeric field (inputMode numeric, maxLength 6) styled as a code box; non-digits are stripped as you type and it caps at six characters.
• Demo hint: the line 'Demo: enter any 6 digits to continue.'
• Verify & continue button: the primary submit; dimmed and not actionable until six digits are present.
• Resend prompt: 'Didn't get a code? Resend' (the Resend text is presentational in this build).
• Back to sign in link: returns to /signin.

Field Definitions

• Verification code: Required 6-digit numeric input. As you type, every non-digit is removed and the value is truncated to six characters. Readiness is computed as having at least six digits; in this demo any six digits are accepted.
• Role (from URL): Read from the ?role= query string on the client. 'clinic' selects the clinic path; anything else (including a missing value) defaults to 'patient'. It is not an on-screen field but it determines the destination and the subtitle wording.

User Actions & Workflows

1. Read the subtitle to confirm the code was sent to your email (clinics see a '(clinic account)' note).
2. Type the 6-digit code; only digits register and the field stops at six.
3. When all six digits are in, the Verify & continue button becomes active.
4. Press Verify & continue: this signs you in for your role and redirects you.
5. Patients go to /portal; clinics go to /clinic/onboarding. If a code never arrived, use Resend, or Back to sign in to start over.

Navigation & Relationships

Reached from: Create Account, which pushes /verify?role=patient or /verify?role=clinic on submit.

Leads to: /portal for a verified patient, /clinic/onboarding for a verified clinic, and /signin via the Back to sign in link.

Backed by: lib/auth.tsx signInAs(role), which establishes the session without a password. The page splits into VerifyForm (the UI) and VerifyFormFromQuery (which reads ?role= inside Suspense, a static-export requirement of useSearchParams).

Business Rules & Constraints

• The Verify & continue button is disabled until the code holds at least six digits.
• Only digits are accepted; pasted or typed non-digits are stripped and the value never exceeds six characters.
• In this prototype any six digits verify successfully, mirroring a real one-time-code flow without a backend.
• Verifying calls signInAs(role), so the user is logged in directly, no separate sign-in step is needed afterward.
• The destination is decided solely by the role from the URL: clinic to /clinic/onboarding, patient to /portal.

Data Dependencies

Reads the role from the URL via useSearchParams (in VerifyFormFromQuery) and calls useAuth().signInAs(role) from lib/auth.tsx on success. The accepted code is not stored; only the resulting session is persisted to localStorage by signInAs.

• ?role= query param: selects clinic vs patient (defaults to patient)
• useAuth().signInAs(role): creates the session on verify
• gc_auth (localStorage): where signInAs persists the session

Error Handling & Edge Cases

• Fewer than six digits keeps the button disabled and a submit attempt returns early (no-op).
• Non-numeric input is silently filtered, so the field always contains digits only.
• A missing or unexpected ?role= value safely defaults to the patient path.
• Before the client reads the URL, a Suspense fallback renders the patient verify form, avoiding a blank flash on static export.
• Mobile: the marketing panel is hidden, the code box and button fill the card, and the floating Help button stays top-right.

User Roles & Permissions

• Public (no sign-in required): Reachable without authentication; it is the step that grants the session.
• Patient (?role=patient): Verifying signs the user in as a patient and redirects to /portal.
• Clinic (?role=clinic): Verifying signs the user in as a clinic and redirects to /clinic/onboarding to finish setting up the clinic.

Related Features & Functionalities

Create Account (/register), which sends the user here with their role, the clinic onboarding flow at /clinic/onboarding that verified clinics enter, the Patient Journey at /portal that verified patients enter, and Sign In (/signin) as the fallback. Shares the AuthShell and floating Help button with the other auth screens.

Flow & Screenshots

flowchart LR
  Register[/register/] -->|?role=| Verify[Verify Email]
  Verify --> Code[Enter 6-digit code]
  Code --> Ready{Six digits?}
  Ready -->|no| Wait[Button disabled]
  Ready -->|yes| Continue[Verify & continue]
  Continue -->|patient| Portal[/portal/]
  Continue -->|clinic| Onboard[/clinic/onboarding/]
  Verify -->|Back to sign in| SignIn[/signin/]

Guided Walkthrough Steps

The in-app walkthrough for this screen has 4 steps (auto-advances every 5 seconds; Prev / Pause / Next; click outside to exit):

1. Enter your code ([data-tour="verify.code"])

Type the 6-digit code we sent to your email. Only digits count, and the box stops at six. In this demo any six digits work.

1. Verify & continue ([data-tour="verify.submit"])

Active once all six digits are in. Verifying signs you in: patients go to the Journey dashboard, clinics go to onboarding.

1. No code? ([data-tour="verify.resend"])

If the code never arrives, Resend requests a new one. In this reference build it is a placeholder for the real resend action.

1. Help is always here ([data-tour="topbar.help"])

Open this Help button on any screen for documentation, and press Play to replay a walkthrough like this one.