6f:I[8513,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ScrollBar"] 84:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:"#f0f4f9" 54:["$","div","color-border",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-border",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#dce4ef"}]]}] 55:["$","div","color-border-strong",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-border-strong",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#c5d1e1"}]]}] 56:["$","div","color-code-bg",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-code-bg",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#f0f4f9"}]]}] 57:["$","div","color-code-fg",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-code-fg",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#2a3444"}]]}] 58:["$","div","color-error",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-error",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#d92d4a"}]]}] 59:["$","div","color-error-foreground",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-error-foreground",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#ffffff"}]]}] 5a:["$","div","color-fg",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-fg",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#101828"}]]}] 5b:["$","div","color-fg-secondary",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-fg-secondary",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#344054"}]]}] 5c:["$","div","color-focus",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-focus",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#315fea"}]]}] 5d:["$","div","color-info",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-info",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#087dbd"}]]}] 5e:["$","div","color-info-foreground",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-info-foreground",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#ffffff"}]]}] 5f:["$","div","color-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#667085"}]]}] 60:["$","div","color-neutral",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-neutral",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#475467"}]]}] 61:["$","div","color-neutral-foreground",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-neutral-foreground",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#ffffff"}]]}] 62:["$","div","color-secondary-accent",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-secondary-accent",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#009fb3"}]]}] 63:["$","div","color-signature",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-signature",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#e9564a"}]]}] 64:["$","div","color-success",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-success",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#128a55"}]]}] 65:["$","div","color-success-foreground",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-success-foreground",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#ffffff"}]]}] 66:["$","div","color-surface",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-surface",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#ffffff"}]]}] 67:["$","div","color-surface-2",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-surface-2",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#f8fafd"}]]}] 68:["$","div","color-warning",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-warning",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#b86e00"}]]}] 69:["$","div","color-warning-foreground",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-warning-foreground",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#ffffff"}]]}] 6a:["$","$L6f",null,{"orientation":"horizontal"}] 6b:["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Dark Mode"}],["$","div",null,{"children":["$","$L52",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","color-accent",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-accent",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#4f7cff"}]]}],["$","div","color-accent-fg",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-accent-fg",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#080c14"}]]}],["$","div","color-accent-hover",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-accent-hover",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#6f91ff"}]]}],["$","div","color-accent-text",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-accent-text",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#7f9fff"}]]}],["$","div","color-bg",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-bg",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#080c14"}]]}],["$","div","color-bg-elevated",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-bg-elevated",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#0d1420"}]]}],["$","div","color-bg-secondary",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-bg-secondary",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#0d1420"}]]}],["$","div","color-border",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-border",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#263449"}]]}],["$","div","color-border-strong",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-border-strong",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#354863"}]]}],["$","div","color-code-bg",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-code-bg",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#0d1420"}]]}],["$","div","color-code-fg",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-code-fg",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"$L70"}]]}],"$L71","$L72","$L73","$L74","$L75","$L76","$L77","$L78","$L79","$L7a","$L7b","$L7c","$L7d","$L7e","$L7f","$L80","$L81","$L82"]}],"$L83"]}]}]]}] 6c:null 6d:null 85:Tad3d,"use client"; import * as React from "react"; import { motion, AnimatePresence, type Transition } from "motion/react"; import { cn } from "@/lib/utils"; import { useReducedMotion, useControllableState, useCopy, statusVars, type StatusTone, } from "@/lib/motiq"; /* -------------------------------------------------------------------------- * TwoFactorSetupFlow — presentation + orchestration for adding a SECOND * authentication factor to an already-signed-in account. This component DOES * NOT implement cryptography, TOTP/HOTP, WebAuthn, SMS delivery, or any * verification: it never generates a shared secret, never derives or checks a * one-time code, never sends anything, and never decides that setup succeeded. * The APPLICATION performs every real operation (secret generation, code * delivery, verification, recovery-code issuance) and feeds the resulting phase * back in through the controlled `state` prop; the component only renders that * state and emits intent via callbacks. * * It keeps an alternative factor in reach, surfaces the honest failure detail * the app provides, applies no countdown / time pressure, and — critically — * never claims the account is "secure" merely because setup completed. Copy is * deliberately accurate: a second factor reduces risk, it does not make an * account unbreakable, and SMS/email are described as options with tradeoffs * (the app supplies the tradeoff text), never recommended as universally safe. * Clean-room original; a sibling of PasskeySetupFlow with no overlapping code. * ----------------------------------------------------------------------- */ /** * The kind of second factor being set up. The component renders each honestly; * it does not rank them or imply one is universally best. Use `custom` for a * factor the component doesn't model, and pass its copy via `methods`. */ export type TwoFactorMethodKind = | "authenticator" | "security-key" | "sms" | "email" | "recovery-codes" | "custom"; /** App-supplied descriptor for one selectable factor. */ export interface TwoFactorMethod { kind: TwoFactorMethodKind; /** Short label, e.g. "Authenticator app". */ label: string; /** One-line description of how it works. */ description?: string; /** Honest tradeoff note the APP supplies (e.g. "SMS can be intercepted"). */ tradeoff?: string; /** The app marks a factor unusable here (unsupported device, not configured). */ unavailable?: boolean; /** Why it's unavailable — shown so the choice isn't a dead end. */ unavailableReason?: string; /** Marks the app's suggested default; never implies "most secure". */ recommended?: boolean; } /** * App-driven phases. Every transition is owned by the host app (it advances the * flow only after the real operation resolves). */ export type TwoFactorState = | "introduction" | "method-selection" | "preparing" | "secret-or-QR-ready" | "waiting-for-code" | "verifying" | "success" | "invalid-code" | "expired-code" | "method-unavailable" | "cancelled" | "recovery-codes" | "complete"; /** Honest, app-supplied error detail. No error is invented by the component. */ export interface TwoFactorError { /** Machine code from the app (e.g. "code_mismatch", "code_expired"). */ code?: string; /** Short human title; falls back to a neutral default per state. */ title?: string; /** The specific detail the user needs to understand and act on. */ message: string; } /** * Enrollment material the APP prepared for the chosen factor. The component only * displays what it is given; it never generates any of this. In production the * secret is real setup data — treat it as sensitive. In demos it MUST be a * clearly-fake placeholder. */ export interface TwoFactorSetupData { /** A pre-rendered QR image (data URL / URL) the app produced. Optional. */ qrImageUrl?: string; /** Custom QR node (e.g. an

Two-factor setup

{relyingPartyName ? `Add a second step to sign in to ${relyingPartyName}` : "Add a second sign-in step"}

{userIdentifier ? (

For {userIdentifier}

) : null}

{/* ordered step semantics */} {showStepper ? (

{status === "complete" ? : i + 1} {stepLabel} {status === "complete" ? "(completed)" : status === "current" ? "(current step)" : "(upcoming)"}

) : null} {/* phase body */}

{state === "preparing" || state === "verifying" ? ( ) : ( )}

{copyText.title}

{copyText.body}

{/* method selection — a real radio group, keyboard-navigable */} {state === "method-selection" ? (

{methods.map((m) => { const isSel = m.kind === chosen; const disabled = !!m.unavailable; return ( ); })}

) : null} {/* secret / QR ready — app-supplied material, never generated here */} {state === "secret-or-QR-ready" ? (

{setupData?.qrNode || setupData?.qrImageUrl ? (

{setupData.qrNode ?? ( // eslint-disable-next-line @next/next/no-img-element QR code to scan with your authenticator app

)}

Scan this with your authenticator app{setupData.accountLabel ? ` to add ${setupData.accountLabel}` : ""}. Can't scan? Use the setup key below.

) : null} {setupData?.setupKey ? (

Setup key - sensitive, enter it only in your authenticator app


                            {setupData.setupKey}

{copied ? "Setup key copied to clipboard." : ""}

) : null}

) : null} {/* delivery target for sms/email codes */} {(state === "waiting-for-code" || state === "invalid-code" || state === "expired-code") && setupData?.deliveryTarget ? (

We sent a code to {setupData.deliveryTarget}.

) : null} {/* code entry — normal input; paste + autofill handled by the platform */} {(state === "waiting-for-code" || state === "invalid-code" || state === "expired-code") ? (

Enter the {codeLength}-digit code setCodeValue(e.target.value.replace(/[^\d]/g, ""))} onKeyDown={(e) => { if (e.key === "Enter" && codeReady && !busy) { e.preventDefault(); submitCode(); } }} placeholder={"0".repeat(codeLength)} spellCheck={false} className="w-full rounded-lg border border-[var(--color-border)] bg-[var(--color-surface)] px-3 py-2 font-mono text-[15px] tracking-[0.3em] text-[var(--color-fg)] outline-none placeholder:text-[var(--color-muted)] placeholder:tracking-[0.3em] focus-visible:border-[var(--color-accent)] focus-visible:ring-2 focus-visible:ring-[var(--color-accent)] disabled:cursor-not-allowed disabled:opacity-60" />

) : null} {/* honest error detail, associated with the input / retry control */} {isErrorState && error ? (

{error.title ?? defaultErrorTitle(state)}

{error.message}

{error.code ? (

Reason: {error.code}

) : null}

) : null} {/* recovery codes — SENSITIVE; selectable; confirmation-gated */} {state === "recovery-codes" ? (

Save these recovery codes now

Each code works once if you lose access to your second factor. Store them somewhere safe and private - they won't be shown in full again.

{recoveryCodes && recoveryCodes.length > 0 ? (

{rc}

) : null} setSavedAck(e.target.checked)} className="mt-0.5 h-4 w-4 shrink-0 accent-[var(--color-accent)]" /> I've saved my recovery codes somewhere safe.

) : null} {/* introduction — honest framing, no security absolutes */} {state === "introduction" ? (

A second step means a stolen password alone isn't enough to sign in.
It lowers risk - no method removes it entirely. Keep a recovery option too.

) : null}

{/* actions — a calm footer: an in-flight status line on its own row, then a button row with the low-emphasis escape hatch on the left and the primary action cluster (secondary → primary) right-aligned. */}

{state === "preparing" || state === "verifying" ? ( {state === "preparing" ? "Preparing your setup…" : "Checking your code…"} ) : null}

{/* escape hatch — low emphasis, left; offered before completion */} {state !== "success" && state !== "complete" && state !== "recovery-codes" && onUseAlternative ? ( onUseAlternative()}>{alternativeLabel} ) : null} {/* right-aligned action cluster: secondary first, primary rightmost */}

{(state === "waiting-for-code" || state === "invalid-code") && onResend ? ( onResend()}>Resend code ) : null} {(state === "preparing" || state === "secret-or-QR-ready" || state === "waiting-for-code" || state === "verifying" || state === "invalid-code" || state === "expired-code") && onCancel ? ( onCancel()}>Cancel ) : null} {state === "introduction" ? ( onBegin?.()} busy={busy}> Get started ) : null} {state === "method-selection" ? ( onBegin?.()} busy={busy} disabled={!!selectedMeta?.unavailable}> Continue ) : null} {state === "secret-or-QR-ready" ? ( onBegin?.()} busy={busy}> I've added it - enter a code ) : null} {(state === "waiting-for-code" || state === "invalid-code") ? ( Verify ) : null} {state === "expired-code" ? ( onResend?.()} busy={busy}> Send a new code ) : null} {state === "method-unavailable" ? ( onRetry?.()} busy={busy}> Choose another method ) : null} {state === "success" ? ( onComplete?.()}> {recoveryCodes && recoveryCodes.length > 0 ? "Continue" : "Done"} ) : null} {state === "recovery-codes" ? ( onConfirmRecoveryCodes?.()} disabled={!savedAck} aria-describedby={ackId}> Finish setup ) : null} {state === "complete" ? onComplete?.()}>Done : null} {state === "cancelled" ? onRetry?.()}>Try again : null}

{/* honest, non-absolute completion note — never "your account is secure" */} {state === "success" || state === "complete" ? (

Two-factor is on for this account. It reduces risk but doesn't make the account impossible to breach - keep your recovery codes and password safe.

) : null} {state === "method-unavailable" ? (

This method isn't available right now, but your account isn't blocked - pick another method above.

) : null}

{/* polite live region — status in text, never colour alone, no countdown */}

{copyText.announce}

); } /* -- phase copy ---------------------------------------------------------- */ function defaultErrorTitle(state: TwoFactorState): string { switch (state) { case "invalid-code": return "That code didn't match"; case "expired-code": return "That code has expired"; case "method-unavailable": return "This method isn't available"; default: return "Something went wrong"; } } function stateCopy( state: TwoFactorState, site: string, method?: TwoFactorMethod, setupData?: TwoFactorSetupData, ): StateCopy { const methodLabel = method?.label?.toLowerCase() ?? "second factor"; switch (state) { case "introduction": return { title: "Add a second step to sign in", body: `After your password, ${site} will ask for a second confirmation. It only takes a minute to set up.`, announce: "Two-factor setup started. Review what it does, then continue.", tone: "active", }; case "method-selection": return { title: "Choose how you'll confirm", body: "Pick the method that fits you. Each has different tradeoffs - you can change or add more later.", announce: "Choose a second factor to set up.", tone: "active", }; case "preparing": return { title: "Preparing your setup", body: `Setting up your ${methodLabel}. This takes a moment.`, announce: "Preparing your two-factor setup.", tone: "active", }; case "secret-or-QR-ready": return { title: setupData?.deliveryTarget ? "We sent you a code" : "Add this to your app", body: setupData?.deliveryTarget ? "Enter the code we sent to finish connecting this method." : "Scan the QR code with your authenticator app, or enter the setup key manually. Then continue to verify.", announce: "Setup material is ready. Add it to your authenticator, then verify a code.", tone: "info", }; case "waiting-for-code": return { title: "Enter a code to confirm", body: "Type the current code from your method. There's no rush - enter it whenever you're ready.", announce: "Enter a verification code to confirm your second factor.", tone: "active", }; case "verifying": return { title: "Checking your code", body: "Confirming the code with your account.", announce: "Checking your verification code.", tone: "active", }; case "success": return { title: "Second factor added", body: `${site} will now ask for this step when you sign in. It lowers risk - it doesn't make the account impossible to breach.`, announce: "Your second factor was added successfully.", tone: "success", }; case "invalid-code": return { title: "That code didn't match", body: "Double-check the current code and try again. Codes change often, so make sure you're using the latest one.", announce: "The code didn't match. Enter the current code and try again.", tone: "error", }; case "expired-code": return { title: "That code has expired", body: "Codes are only valid briefly. Request a new one, then enter it here.", announce: "The code expired. Request a new code and try again.", tone: "warning", }; case "method-unavailable": return { title: "This method isn't available", body: "We couldn't set up this method right now. You can choose another - your account isn't blocked.", announce: "This method is unavailable. Choose another method.", tone: "warning", }; case "cancelled": return { title: "Setup cancelled", body: "Nothing was changed. You can set up a second step whenever you like.", announce: "Two-factor setup was cancelled. Nothing was saved.", tone: "neutral", }; case "recovery-codes": return { title: "Save your recovery codes", body: "These are your way back in if you lose your second factor. Save them before you finish.", announce: "Save your recovery codes to finish setup.", tone: "warning", }; case "complete": return { title: "You're all set", body: `Two-factor is on for ${site}. Keep your recovery codes and password safe.`, announce: "Two-factor setup is complete.", tone: "success", }; default: return { title: "Two-factor setup", body: "", announce: "", tone: "neutral" }; } } /* -- controls ------------------------------------------------------------ */ interface PrimaryButtonProps { onClick: () => void; children: React.ReactNode; busy?: boolean; disabled?: boolean; tone?: StatusTone; "aria-describedby"?: string; } function PrimaryButton({ onClick, children, busy, disabled, tone = "active", ...rest }: PrimaryButtonProps) { const v = statusVars(tone); return ( ); } function SecondaryButton({ onClick, children, className, }: { onClick: () => void; children: React.ReactNode; className?: string; }) { return ( ); } // Low-emphasis "escape hatch" action (e.g. "Use a different method") — a quiet // text button that never competes with the primary/secondary actions. function GhostButton({ onClick, children, className }: { onClick: () => void; children: React.ReactNode; className?: string }) { return ( ); } function Spinner({ reduce, light }: { reduce?: boolean; light?: boolean }) { const stroke = light ? "white" : "currentColor"; if (reduce) { return ( ); } return ( ); } export default TwoFactorSetupFlow; 6e:["$","$L84",null,{"files":[{"path":"registry/security/two-factor-setup-flow.tsx","content":"$85","type":"registry:component","target":"components/motiq/two-factor-setup-flow.tsx"}],"className":"h-[70svh] min-h-80"}]