{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "two-factor-setup", "type": "registry:ui", "title": "Two-factor Setup", "description": "Scan, verify and save recovery codes in one card that glides between steps.", "categories": [ "onboarding" ], "dependencies": [ "@base-ui/react", "@number-flow/react", "motion" ], "registryDependencies": [ "https://www.stealth.pm/r/tokens.json", "https://www.stealth.pm/r/cn.json", "https://www.stealth.pm/r/icons.json", "https://www.stealth.pm/r/motion.json", "https://www.stealth.pm/r/use-controllable-state.json", "https://www.stealth.pm/r/copy-button.json" ], "files": [ { "path": "components/ui/two-factor-setup.tsx", "content": "\"use client\";\nimport { Checkbox } from \"@base-ui/react/checkbox\";\nimport { Collapsible } from \"@base-ui/react/collapsible\";\nimport { Field } from \"@base-ui/react/field\";\nimport { OTPField } from \"@base-ui/react/otp-field\";\nimport NumberFlow from \"@number-flow/react\";\nimport { AnimatePresence, animate, motion, useIsPresent, useReducedMotion, type AnimationPlaybackControls } from \"motion/react\";\nimport { Fragment, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport { CopyButton } from \"@/components/ui/copy-button\";\nimport { cn } from \"@/lib/cn\";\nimport { Alert, ArrowLeft, ChevronDown, Download } from \"@/lib/icons\";\nimport { ease, spring, stagger } from \"@/lib/motion\";\nimport { useControllableState } from \"@/lib/use-controllable-state\";\n\nexport type TwoFactorStep = \"scan\" | \"verify\" | \"recovery\" | \"done\";\nconst order: TwoFactorStep[] = [\"scan\", \"verify\", \"recovery\", \"done\"];\n\n/** \"JBSWY3DPEHPK3PXP\" → \"JBSW Y3DP EHPK 3PXP\", so a key typed by hand can be checked in chunks. */\nexport const formatSecret = (secret: string) => secret.replace(/\\s+/g, \"\").replace(/(.{4})/g, \"$1 \").trim();\n\nexport type TwoFactorSetupProps = Omit, \"children\"> & {\n /** The base32 secret, for people who can't scan. */\n secret: string;\n /** Shown on the scan step and in the downloaded file, e.g. \"Northwind\". */\n issuer?: string;\n /** The account the authenticator will label, e.g. the email. */\n account?: string;\n /** Your real QR code (an or of the otpauth URL). Without it a placeholder is drawn from the secret. */\n qrCode?: React.ReactNode;\n /** Check the code. Resolve the recovery codes (or nothing, to use `recoveryCodes`); throw with a message to show it. */\n onVerify: (code: string) => Promise | string[] | void;\n recoveryCodes?: string[];\n onDone?: () => void;\n step?: TwoFactorStep;\n defaultStep?: TwoFactorStep;\n onStepChange?: (step: TwoFactorStep) => void;\n codeLength?: number;\n};\n\nexport function TwoFactorSetup({\n secret,\n issuer = \"your account\",\n account,\n qrCode,\n onVerify,\n recoveryCodes: codesProp = [],\n onDone,\n step: stepProp,\n defaultStep = \"scan\",\n onStepChange,\n codeLength = 6,\n className,\n ...rest\n}: TwoFactorSetupProps) {\n const reduce = useReducedMotion();\n const uid = useId();\n const [step, setStep] = useControllableState({ value: stepProp, defaultValue: defaultStep, onChange: onStepChange });\n const [code, setCode] = useState(\"\");\n const [busy, setBusy] = useState(false);\n const [error, setError] = useState(null);\n const [rejected, setRejected] = useState(false);\n const [codes, setCodes] = useState(codesProp);\n const [saved, setSaved] = useState(false);\n const [nudge, setNudge] = useState(false);\n const [announce, setAnnounce] = useState(\"\");\n\n const [shownStep, setShownStep] = useState(step);\n const [dir, setDir] = useState(1);\n if (shownStep !== step) {\n setShownStep(step);\n setDir(order.indexOf(step) >= order.indexOf(shownStep) ? 1 : -1);\n }\n\n const ticket = useRef(0);\n const clearTimer = useRef(undefined);\n useEffect(() => () => window.clearTimeout(clearTimer.current), []);\n\n // Card height glides between steps; at rest it's auto so errors grow it freely.\n const card = useRef(null);\n const scanRef = useRef(null);\n const verifyRef = useRef(null);\n const recoveryRef = useRef(null);\n const doneRef = useRef(null);\n const stepEl = (s: TwoFactorStep) => ({ scan: scanRef, verify: verifyRef, recovery: recoveryRef, done: doneRef })[s].current;\n const settled = useRef(0);\n const moving = useRef(null);\n const lastStep = useRef(step);\n useEffect(() => {\n const el = card.current;\n if (!el) return;\n const ro = new ResizeObserver(() => {\n if (!moving.current) settled.current = el.offsetHeight;\n });\n ro.observe(el);\n return () => ro.disconnect();\n }, []);\n useLayoutEffect(() => {\n if (lastStep.current === step) return;\n lastStep.current = step;\n const el = card.current;\n const target = stepEl(step);\n const header = el?.querySelector(\"[data-progress]\");\n if (!el || !target || reduce) return;\n const cs = getComputedStyle(el);\n const chrome = [\"paddingTop\", \"paddingBottom\", \"borderTopWidth\", \"borderBottomWidth\", \"rowGap\"].reduce((n, k) => n + (parseFloat(cs[k as \"paddingTop\"]) || 0), 0);\n const from = moving.current ? el.offsetHeight : settled.current;\n const to = chrome + (header?.offsetHeight ?? 0) + target.offsetHeight;\n moving.current?.stop();\n if (!from || Math.abs(from - to) < 1) return;\n const controls = animate(el, { height: [from, to] }, { duration: 0.36, ease: ease.inOut });\n moving.current = controls;\n controls.then(() => {\n if (moving.current !== controls) return;\n moving.current = null;\n el.style.height = \"\";\n settled.current = el.offsetHeight;\n });\n }, [step, reduce]);\n\n const focusedStep = useRef(step);\n useEffect(() => {\n if (focusedStep.current === step) return;\n focusedStep.current = step;\n stepEl(step)?.querySelector(\"[data-autofocus]\")?.focus({ preventScroll: true });\n }, [step]);\n\n const go = (next: TwoFactorStep) => {\n setError(null);\n setRejected(false);\n setStep(next);\n };\n\n async function verify(value: string) {\n if (busy) return;\n if (value.length < codeLength) return setError(`Enter all ${codeLength} digits`);\n const mine = ++ticket.current;\n setBusy(true);\n setError(null);\n try {\n const result = await onVerify(value);\n if (mine !== ticket.current) return;\n setBusy(false);\n if (Array.isArray(result)) setCodes(result);\n go(\"recovery\");\n setAnnounce(\"Code accepted. Save your recovery codes.\");\n } catch (err) {\n if (mine !== ticket.current) return;\n setBusy(false);\n setError(err instanceof Error && err.message ? err.message : \"That code didn’t match. Codes change every 30 seconds; try the current one.\");\n setRejected(true);\n // Leave the wrong code up long enough to read, then clear it for the next one.\n clearTimer.current = window.setTimeout(() => {\n if (mine !== ticket.current) return;\n setCode(\"\");\n setRejected(false);\n verifyRef.current?.querySelector(\"[data-autofocus]\")?.focus();\n }, 900);\n }\n }\n\n function download() {\n const lines = [\n `${issuer} recovery codes${account ? ` for ${account}` : \"\"}`,\n `Saved ${new Date().toLocaleString()}`,\n \"\",\n ...codes,\n \"\",\n \"Each code works once. Keep this file somewhere only you can reach.\",\n ];\n const url = URL.createObjectURL(new Blob([lines.join(\"\\n\")], { type: \"text/plain\" }));\n const a = document.createElement(\"a\");\n a.href = url;\n a.download = `${issuer.toLowerCase().replace(/[^a-z0-9]+/g, \"-\")}-recovery-codes.txt`;\n a.click();\n window.setTimeout(() => URL.revokeObjectURL(url), 1000);\n markSaved();\n }\n // Copying or downloading counts as saving: the box ticks itself, and can still be unticked.\n const markSaved = () => {\n setSaved(true);\n setNudge(false);\n };\n\n const index = Math.min(order.indexOf(step), 2);\n const secretId = `${uid}-secret`;\n\n return (\n \n \n\n
\n \n {step === \"scan\" && (\n \n
\n
\n
\n {qrCode ?? }\n
\n
\n \n \n Can’t scan it? Enter a key instead\n \n \n \n
\n
\n \n {formatSecret(secret)}\n \n \n
\n

Time-based, 6 digits. Spaces don’t matter.

\n
\n \n \n go(\"verify\")}>Continue\n \n )}\n\n {step === \"verify\" && (\n \n
\n {\n e.preventDefault();\n verify(code);\n }}\n aria-busy={busy || undefined}\n className=\"flex flex-col gap-4\"\n >\n \n Authenticator code\n {\n setCode(v);\n if (error && !rejected) setError(null);\n }}\n onComplete={verify}\n busy={busy}\n rejected={rejected}\n reduce={!!reduce}\n />\n \n \n \n Verify\n \n \n
\n {\n ticket.current++;\n setBusy(false);\n setCode(\"\");\n go(\"scan\");\n }}\n className=\"group/back\"\n >\n \n Back to the QR code\n \n
\n \n )}\n\n {step === \"recovery\" && (\n \n \n
\n
    \n {codes.map((c, i) => (\n \n \n {i + 1}\n \n {c}\n \n ))}\n
\n
\n \n \n
\n
\n \n \n

\n \n Copy or download the codes first. You won’t see them again.\n

\n \n {\n if (!saved) return setNudge(true);\n go(\"done\");\n setAnnounce(\"Two-factor authentication is on.\");\n }}\n >\n Finish setup\n \n \n )}\n\n {step === \"done\" && (\n \n \n
\n

\n Two-factor authentication is on\n

\n

\n Next time you sign in on a new device, {issuer} will ask for a code from your authenticator.\n

\n
\n {onDone && (\n \n Done\n \n )}\n \n )}\n \n
\n \n {announce}\n \n \n );\n}\n\n// Three segments; the current one fills from the left. Done fills them all.\nfunction Progress({ index, done, reduce }: { index: number; done: boolean; reduce: boolean }) {\n const labels = [\"Scan\", \"Verify\", \"Save codes\"];\n return (\n
\n
\n \n {done ? (\n \"Complete\"\n ) : (\n <>\n Step of 3\n \n )}\n \n {done ? \"\" : labels[index]}\n
\n
\n {labels.map((l, i) => (\n \n \n \n ))}\n
\n
\n );\n}\n\ntype StepProps = { direction: number; reduce: boolean; className?: string; children: React.ReactNode; ref?: React.Ref };\n\nfunction Step({ direction, reduce, className, children, ref }: StepProps) {\n const present = useIsPresent();\n const variants = {\n enter: (d: number) => (reduce ? { opacity: 0 } : { opacity: 0, x: 20 * d, filter: \"blur(2px)\" }),\n center: { opacity: 1, x: 0, filter: \"blur(0px)\" },\n exit: (d: number) =>\n reduce ? { opacity: 0, transition: { duration: 0.1 } } : { opacity: 0, x: -12 * d, filter: \"blur(2px)\", transition: { duration: 0.14, ease: ease.in } },\n };\n return (\n \n {children}\n \n );\n}\n\nfunction Header({ title, description, autoFocus }: { title: string; description: string; autoFocus?: boolean }) {\n return (\n
\n

\n {title}\n

\n

{description}

\n
\n );\n}\n\n// A stand-in QR drawn from the secret: finder squares in three corners and a\n// stable scatter of modules, so it looks right without encoding anything.\nfunction QrPlaceholder({ seed, reduce }: { seed: string; reduce: boolean }) {\n const clip = useId();\n const n = 25;\n const d = useMemo(() => {\n let h = 2166136261;\n for (const ch of seed) h = Math.imul(h ^ ch.charCodeAt(0), 16777619);\n const rand = () => {\n h ^= h << 13;\n h ^= h >>> 17;\n h ^= h << 5;\n return ((h >>> 0) % 1000) / 1000;\n };\n const inFinder = (x: number, y: number) => (x < 8 && y < 8) || (x >= n - 8 && y < 8) || (x < 8 && y >= n - 8);\n let path = \"\";\n for (let y = 0; y < n; y++)\n for (let x = 0; x < n; x++) {\n if (inFinder(x, y)) continue;\n const timing = (x === 6 || y === 6) && (x + y) % 2 === 0;\n if (timing || rand() < 0.46) path += `M${x} ${y}h1v1h-1z`;\n }\n for (const [fx, fy] of [[0, 0], [n - 7, 0], [0, n - 7]])\n path += `M${fx} ${fy}h7v7h-7zM${fx + 1} ${fy + 1}v5h5v-5zM${fx + 2} ${fy + 2}h3v3h-3z`;\n return path;\n }, [seed]);\n return (\n \n \n \n {/* Draws in top to bottom once, like it's being printed for you. Same first frame on server and client. */}\n \n \n \n \n \n );\n}\n\nfunction CodeCells({\n id,\n length,\n value,\n onChange,\n onComplete,\n busy,\n rejected,\n reduce,\n}: {\n id: string;\n length: number;\n value: string;\n onChange: (v: string) => void;\n onComplete: (v: string) => void;\n busy: boolean;\n rejected: boolean;\n reduce: boolean;\n}) {\n const [active, setActive] = useState(null);\n const group = length % 3 === 0 && length > 3 ? 3 : 0;\n return (\n onChange(v)}\n onValueComplete={(v) => onComplete(v)}\n readOnly={busy || rejected}\n className=\"flex w-full items-center gap-1.5 sm:gap-2\"\n >\n {Array.from({ length }, (_, i) => {\n const char = value[i] ?? \"\";\n return (\n \n {group > 0 && i > 0 && i % group === 0 && }\n
\n setActive(i)}\n onBlur={() => setActive((a) => (a === i ? null : a))}\n className={cn(\n \"block size-full rounded-lg border bg-raised text-center text-transparent caret-transparent outline-none selection:bg-transparent! selection:text-transparent!\",\n \"transition-[border-color,background-color,box-shadow] duration-150 ease-out read-only:cursor-default\",\n rejected\n ? \"border-danger/60 bg-danger-soft\"\n : cn(\"hover:border-fg-4 focus:border-fg-3 focus:ring-3 focus:ring-fg/8\", char ? \"border-fg-4\" : \"border-line-2\"),\n )}\n />\n \n \n {char && (\n \n {char}\n \n )}\n \n {active === i && !char && !busy && }\n \n
\n \n );\n })}\n \n );\n}\n\nfunction Collapse({ open, reduce, className, children }: { open: boolean; reduce: boolean; className?: string; children: React.ReactNode }) {\n return (\n \n {open && (\n \n {children}\n \n )}\n \n );\n}\n\nfunction Message({ message, reduce }: { message?: string; reduce: boolean }) {\n return (\n \n \n \n {message}\n \n \n );\n}\n\nfunction PrimaryButton({ busy = false, className, children, type = \"button\", onClick, ...rest }: React.ComponentProps<\"button\"> & { busy?: boolean }) {\n return (\n (busy ? e.preventDefault() : onClick?.(e))}\n className={cn(\n \"relative grid h-9 w-full select-none place-items-center rounded-lg bg-fg px-3 text-[13px] font-medium tracking-[-0.005em] text-frame outline-none pointer-coarse:h-11\",\n \"transition-[background-color,scale] duration-150 ease-out hover:bg-fg/90 active:scale-[0.985] active:duration-75\",\n \"focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-fg-3\",\n \"data-busy:cursor-default data-busy:bg-fg/85 data-busy:active:scale-100\",\n className,\n )}\n {...rest}\n >\n {children}\n \n {busy && (\n \n \n \n \n )}\n \n {busy && Checking…}\n \n );\n}\n\nfunction TextButton({ className, children, ...rest }: React.ComponentProps<\"button\">) {\n return (\n \n {children}\n \n );\n}\n\n// Matches the copy button beside it: the arrow drops into the tray, then a tick.\nfunction DownloadButton({ onDownload }: { onDownload: () => void }) {\n const reduce = useReducedMotion();\n const [done, setDone] = useState(false);\n const timer = useRef(undefined);\n useEffect(() => () => window.clearTimeout(timer.current), []);\n return (\n {\n onDownload();\n setDone(true);\n window.clearTimeout(timer.current);\n timer.current = window.setTimeout(() => setDone(false), 2000);\n }}\n className={cn(\n \"group/dl inline-flex h-8 w-full select-none items-center justify-center gap-2 rounded-lg border border-line-2 bg-raised px-2.5 text-[12.5px] font-medium text-fg shadow-[var(--shadow)] outline-none\",\n \"transition-[background-color,border-color,scale] duration-150 ease-out hover:border-fg-4 hover:bg-hover active:scale-[0.97] active:duration-75\",\n \"focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-fg-3\",\n )}\n >\n \n \n \n {done ? (\n \n \n \n ) : (\n \n )}\n \n \n \n \n {[\"Download\", \"Downloaded\"].map((l) => (\n \n {l}\n \n ))}\n {done ? \"Downloaded\" : \"Download\"}\n \n \n {done ? \"Recovery codes downloaded\" : \"\"}\n \n \n );\n}\n\nfunction DoneMark({ reduce }: { reduce: boolean }) {\n return (\n \n \n {/* A shield with a tick: the account is protected now. */}\n \n \n \n \n );\n}\n", "type": "registry:ui" } ], "docs": "https://www.stealth.pm/ui/two-factor-setup" }