{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "two-factor-setup", "title": "Two-Factor Setup", "description": "The enable-2FA flow around its one irreversible step — QR plus a copyable manual key, a six-digit check whose attempt budget only ever goes down, and recovery codes rendered once behind a finish button that refuses to fire until they are saved.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.zyeon.ai/r/otp-input.json", "https://ui.zyeon.ai/r/qr-code.json", "https://ui.zyeon.ai/r/use-copy-to-clipboard.json" ], "files": [ { "path": "src/registry/blocks/two-factor-setup.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n ArrowLeft,\n Check,\n Copy,\n Download,\n KeyRound,\n LoaderCircle,\n ShieldCheck,\n Smartphone,\n TriangleAlert,\n} from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { useCopyToClipboard } from \"@/hooks/use-copy-to-clipboard\"\nimport { OtpInput } from \"@/components/ui/otp-input\"\nimport { QrCode } from \"@/components/ui/qr-code\"\n\n/** TOTP apps and SMS providers both send six digits; the OTP field is sized for it. */\nconst CODE_LENGTH = 6\n/** Manual keys are read four characters at a time — by eye and by screen reader. */\nconst KEY_GROUP_SIZE = 4\n\nexport type TwoFactorMethod = \"authenticator\" | \"sms\"\n\nexport type TwoFactorStep = \"method\" | \"enroll\" | \"verify\" | \"recovery\" | \"done\"\n\n/**\n * What `onVerify` resolves with. A resolved `\"invalid\"` is a wrong code and costs\n * an attempt; a *rejected* promise is a transport failure and costs nothing —\n * spending someone's last attempt because their wifi dropped is how people get\n * locked out of their own account.\n */\nexport type TwoFactorVerifyResult = { status: \"verified\" } | { status: \"invalid\"; message?: string }\n\nexport interface TwoFactorAuthenticatorEnrolment {\n /** Base32 shared secret, generated server-side. Shown grouped, copied raw. */\n secret: string\n /** The `otpauth://` URI the QR encodes — built server-side, never derived here. */\n uri: string\n}\n\nexport interface TwoFactorSmsEnrolment {\n /** Destination shown to the user. Mask it before it leaves your server. */\n phone: string\n /** Sends (and later resends) the code. Reject to surface the failure. */\n onSend: () => Promise\n}\n\nexport interface TwoFactorSetupProps extends React.HTMLAttributes {\n /**\n * Authenticator enrolment material. Omit it and the authenticator branch is\n * not offered at all — which is also why there is no separate `methods` prop:\n * the offer and the data it needs cannot drift apart.\n */\n authenticator?: TwoFactorAuthenticatorEnrolment\n /** SMS enrolment material. Omit it and the SMS branch is not offered. */\n sms?: TwoFactorSmsEnrolment\n /**\n * One-time recovery codes, generated server-side alongside the secret. They\n * are rendered on the last step only and are gone from the DOM the moment it\n * is finished — this component never regenerates or re-reveals them.\n */\n recoveryCodes: string[]\n /** Wrong codes allowed in one enrolment session. Clamped to at least 1. Default 5. */\n maxAttempts?: number\n /** Verifies one code. Resolve `\"invalid\"` for a wrong code, reject for a transport failure. */\n onVerify: (input: { method: TwoFactorMethod; code: string }) => Promise\n /** Fires once, only after the recovery codes have been acknowledged. */\n onComplete?: () => void\n /** Fires when the user confirms they are abandoning setup. */\n onCancel?: () => void\n /** Fires once when `maxAttempts` wrong codes have been entered. */\n onAttemptsExhausted?: () => void\n heading?: string\n description?: string\n /** File name for the recovery-code download. Default `recovery-codes.txt`. */\n downloadFileName?: string\n className?: string\n}\n\nconst STEP_LABELS: Record, string> = {\n method: \"Method\",\n enroll: \"Set up\",\n verify: \"Verify\",\n recovery: \"Save codes\",\n}\n\nconst PRIMARY_BUTTON =\n \"inline-flex h-10 cursor-pointer items-center justify-center gap-2 rounded-lg bg-primary px-4 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none motion-reduce:transition-none\"\n\nconst SECONDARY_BUTTON =\n \"inline-flex h-10 cursor-pointer items-center justify-center gap-2 rounded-lg border border-input bg-background px-4 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none motion-reduce:transition-none\"\n\nconst ICON_BUTTON =\n \"inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-md border border-input bg-background transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none motion-reduce:transition-none [&_svg]:size-4\"\n\n/** A rejection that is not an Error still has to become a sentence a human can read. */\nfunction rejectionText(error: unknown, fallback: string): string {\n if (error instanceof Error && error.message) return error.message\n if (typeof error === \"string\" && error) return error\n return fallback\n}\n\n/** \"JBSWY3DPEHPK3PXP\" → [\"JBSW\", \"Y3DP\", \"EHPK\", \"3PXP\"]. */\nfunction groupSecret(secret: string): string[] {\n const cleaned = secret.replace(/\\s+/g, \"\").toUpperCase()\n const groups: string[] = []\n for (let i = 0; i < cleaned.length; i += KEY_GROUP_SIZE) {\n groups.push(cleaned.slice(i, i + KEY_GROUP_SIZE))\n }\n return groups\n}\n\n/**\n * Clipboard fallback. A rejected write (insecure context, denied permission,\n * Safari's user-gesture rules) must not end in \"nothing happened\" — select the\n * value so Ctrl/Cmd+C still works.\n */\nfunction selectNodeContents(node: HTMLElement | null) {\n if (!node || typeof window === \"undefined\") return\n const selection = window.getSelection()\n if (!selection) return\n const range = document.createRange()\n range.selectNodeContents(node)\n selection.removeAllRanges()\n selection.addRange(range)\n}\n\n/**\n * Copy + manual-selection fallback for one value. `copied` is forced false while\n * the last attempt failed: the hook's flag stays true for two seconds, so a\n * second attempt failing inside that window would otherwise keep reading\n * \"Copied\" — on a value the user cannot ask for again.\n */\nfunction useCopyWithFallback() {\n const { copied, copy } = useCopyToClipboard()\n const [failed, setFailed] = React.useState(false)\n\n /** `fallbackNode` is read at call time by the handler, never during render. */\n const run = async (text: string, fallbackNode: HTMLElement | null) => {\n const ok = await copy(text)\n setFailed(!ok)\n if (!ok) selectNodeContents(fallbackNode)\n }\n\n return { copied: copied && !failed, failed, run }\n}\n\n/**\n * The enable-two-factor flow, end to end: pick a method → enrol (QR + a manual\n * key, or an SMS) → type the six digits → **save the one-time recovery codes** →\n * done.\n *\n * The whole component is organised around the fact that step four is\n * irreversible. Recovery codes are rendered exactly once, the finish button\n * refuses to fire until they are acknowledged, and finishing removes them from\n * the DOM for good. Everything else — attempts that only ever go down, a\n * transport failure that costs no attempt, a manual key that survives a dead\n * Clipboard API — exists so that the user reaches that step with something they\n * can actually keep.\n *\n * It generates nothing: the secret, the `otpauth://` URI and the codes are all\n * server-side facts handed in as props.\n */\nexport const TwoFactorSetup = React.forwardRef(\n (\n {\n authenticator,\n sms,\n recoveryCodes,\n maxAttempts = 5,\n onVerify,\n onComplete,\n onCancel,\n onAttemptsExhausted,\n heading = \"Turn on two-factor authentication\",\n description = \"A second factor means a stolen password is not enough to sign in as you.\",\n downloadFileName = \"recovery-codes.txt\",\n className,\n ...rest\n },\n forwardedRef,\n ) => {\n const baseId = React.useId()\n const headingId = `${baseId}-heading`\n const ackId = `${baseId}-ack`\n\n const offered = React.useMemo(() => {\n const list: TwoFactorMethod[] = []\n if (authenticator) list.push(\"authenticator\")\n if (sms) list.push(\"sms\")\n return list\n }, [authenticator, sms])\n const hasPicker = offered.length > 1\n\n const attemptLimit = Math.max(1, Math.floor(maxAttempts) || 1)\n\n const [method, setMethod] = React.useState(\"authenticator\")\n const [rawStep, setRawStep] = React.useState(hasPicker ? \"method\" : \"enroll\")\n const [code, setCode] = React.useState(\"\")\n const [attemptsUsed, setAttemptsUsed] = React.useState(0)\n const [status, setStatus] = React.useState<\"idle\" | \"pending\" | \"invalid\" | \"error\">(\"idle\")\n const [message, setMessage] = React.useState(null)\n const [sendState, setSendState] = React.useState<\"idle\" | \"pending\" | \"sent\" | \"error\">(\"idle\")\n const [sendMessage, setSendMessage] = React.useState(null)\n const [acknowledged, setAcknowledged] = React.useState(false)\n const [nudge, setNudge] = React.useState(false)\n const [confirmCancel, setConfirmCancel] = React.useState(false)\n\n // Derived, not stored: a props change that removes a method must not strand\n // the flow on a picker with one option or on a branch that no longer exists.\n const activeMethod = offered.includes(method) ? method : (offered[0] ?? \"authenticator\")\n const step = rawStep === \"method\" && !hasPicker ? \"enroll\" : rawStep\n\n const secretNodeRef = React.useRef(null)\n const codesNodeRef = React.useRef(null)\n // Destructured on the spot: the returned `run` closes over the clipboard\n // hook's timer ref, so keeping the object whole would make every read of it\n // a ref access during render.\n const { copied: secretCopied, failed: secretCopyFailed, run: runSecretCopy } = useCopyWithFallback()\n const { copied: codesCopied, failed: codesCopyFailed, run: runCodesCopy } = useCopyWithFallback()\n\n const mountedRef = React.useRef(false)\n // Flipped synchronously at the top of the handler: several presses inside one\n // tick would all read the same stale `status`.\n const pendingRef = React.useRef(false)\n const sendingRef = React.useRef(false)\n // The source of truth for attempts. It is only ever incremented — going back\n // a step or switching method must not hand out a fresh budget.\n const attemptsRef = React.useRef(0)\n const exhaustedRef = React.useRef(false)\n const completedRef = React.useRef(false)\n const objectUrlRef = React.useRef(null)\n const ackRef = React.useRef(null)\n const lockedRef = React.useRef(null)\n\n // Latest-ref: consumers pass inline arrow functions, so these must never sit\n // in a dependency array.\n const callbacksRef = React.useRef({ onVerify, onComplete, onCancel, onAttemptsExhausted, sms })\n React.useEffect(() => {\n callbacksRef.current = { onVerify, onComplete, onCancel, onAttemptsExhausted, sms }\n })\n\n // Where the user actually is when an async send lands — a step captured in the\n // handler's closure is the step they were on when they pressed the button.\n const stepRef = React.useRef(rawStep)\n React.useEffect(() => {\n stepRef.current = rawStep\n })\n\n React.useEffect(() => {\n // Set in the effect BODY, not only cleared in cleanup: StrictMode runs\n // mount → cleanup → mount in dev, so a flag that is merely cleared would\n // read false for the live instance and no result would ever land.\n mountedRef.current = true\n return () => {\n mountedRef.current = false\n }\n }, [])\n\n // The download URL is revoked when it is replaced and when the component\n // goes away; a blob that outlives its component is a leak with the secret\n // still inside it.\n React.useEffect(\n () => () => {\n if (objectUrlRef.current) URL.revokeObjectURL(objectUrlRef.current)\n },\n [],\n )\n\n const attemptsLeft = Math.max(0, attemptLimit - attemptsUsed)\n const locked = attemptsLeft === 0\n\n // The OTP field unmounts when the budget runs out, which would drop focus on\n // . The panel that replaces it takes the focus instead.\n React.useEffect(() => {\n if (locked) lockedRef.current?.focus()\n }, [locked])\n\n const stepOrder = React.useMemo(\n () => (hasPicker ? [\"method\", \"enroll\", \"verify\", \"recovery\"] : [\"enroll\", \"verify\", \"recovery\"]),\n [hasPicker],\n )\n const stepIndex = step === \"done\" ? stepOrder.length : stepOrder.indexOf(step)\n // Once the code has been verified the flow is one-way: the earlier steps are\n // spent, and there is nothing behind them left to change. A used-up attempt\n // budget is terminal for the same reason — stepping back would only lead\n // here again.\n const canNavigateBack = !locked && (step === \"method\" || step === \"enroll\" || step === \"verify\")\n\n const goTo = (next: TwoFactorStep) => {\n setRawStep(next)\n setStatus(\"idle\")\n setMessage(null)\n setConfirmCancel(false)\n }\n\n const chooseMethod = (next: TwoFactorMethod) => {\n setMethod(next)\n // A code minted for one channel is meaningless on the other — but the\n // attempt budget is deliberately untouched.\n setCode(\"\")\n setStatus(\"idle\")\n setMessage(null)\n setSendState(\"idle\")\n setSendMessage(null)\n }\n\n const handleSend = async () => {\n const enrolment = callbacksRef.current.sms\n if (!enrolment || sendingRef.current) return\n sendingRef.current = true\n setSendState(\"pending\")\n setSendMessage(null)\n try {\n await enrolment.onSend()\n } catch (error) {\n sendingRef.current = false\n if (!mountedRef.current) return\n setSendState(\"error\")\n setSendMessage(rejectionText(error, \"We couldn't send the code. Try again.\"))\n return\n }\n sendingRef.current = false\n if (!mountedRef.current) return\n setSendState(\"sent\")\n setSendMessage(null)\n // Advance only the user who is still standing on the step the send was\n // started from: pressing Back while the SMS is in flight must not fling\n // them off the picker and onto the code field when it finally lands.\n if (rawStep === \"enroll\" && stepRef.current === \"enroll\") goTo(\"verify\")\n }\n\n const runVerify = async (value: string) => {\n if (pendingRef.current || locked) return\n if (value.length !== CODE_LENGTH) {\n setStatus(\"invalid\")\n setMessage(`Enter all ${CODE_LENGTH} digits.`)\n return\n }\n\n pendingRef.current = true\n setStatus(\"pending\")\n setMessage(null)\n\n let result: TwoFactorVerifyResult\n try {\n result = await callbacksRef.current.onVerify({ method: activeMethod, code: value })\n } catch (error) {\n pendingRef.current = false\n // Re-check liveness after the await: a late rejection landing on an\n // unmounted instance would setState on a dead component.\n if (!mountedRef.current) return\n // Deliberately no attempt spent — this was the network, not the user.\n setStatus(\"error\")\n setMessage(rejectionText(error, \"We couldn't reach the server.\"))\n return\n }\n pendingRef.current = false\n if (!mountedRef.current) return\n\n if (result.status === \"verified\") {\n setStatus(\"idle\")\n setMessage(null)\n setRawStep(\"recovery\")\n return\n }\n\n attemptsRef.current += 1\n const used = attemptsRef.current\n setAttemptsUsed(used)\n setStatus(\"invalid\")\n // The code stays in the field: retyping five digits to fix one is how\n // people burn their last attempt.\n setMessage(result.message ?? \"That code didn't match.\")\n if (used >= attemptLimit && !exhaustedRef.current) {\n exhaustedRef.current = true\n callbacksRef.current.onAttemptsExhausted?.()\n }\n }\n\n const handleDownload = () => {\n if (recoveryCodes.length === 0 || typeof window === \"undefined\") return\n if (objectUrlRef.current) URL.revokeObjectURL(objectUrlRef.current)\n const blob = new Blob([`${recoveryCodes.join(\"\\n\")}\\n`], { type: \"text/plain;charset=utf-8\" })\n const url = URL.createObjectURL(blob)\n objectUrlRef.current = url\n const anchor = document.createElement(\"a\")\n anchor.href = url\n anchor.download = downloadFileName\n anchor.rel = \"noopener\"\n anchor.click()\n // Downloading *is* saving them, so it satisfies the gate on its own.\n setAcknowledged(true)\n setNudge(false)\n }\n\n const needsAcknowledgement = recoveryCodes.length > 0\n const canFinish = !needsAcknowledgement || acknowledged\n\n const handleFinish = () => {\n if (!canFinish) {\n setNudge(true)\n ackRef.current?.focus()\n return\n }\n if (completedRef.current) return\n completedRef.current = true\n setRawStep(\"done\")\n callbacksRef.current.onComplete?.()\n }\n\n const handleCancel = () => {\n setConfirmCancel(false)\n callbacksRef.current.onCancel?.()\n }\n\n const secretGroups = authenticator ? groupSecret(authenticator.secret) : []\n\n /* ------------------------------------------------------------------ pieces */\n\n const stepper = (\n
    \n {stepOrder.map((entry, index) => {\n const done = index < stepIndex\n const current = index === stepIndex\n const reachable = done && canNavigateBack\n const label = STEP_LABELS[entry as Exclude]\n const body = (\n <>\n \n {done ? : index + 1}\n \n {label}\n \n )\n return (\n
  1. \n {/* Decorative only, and hidden on narrow screens: the row wraps\n there, which would strand a connector at the start of a line. */}\n {index > 0 ? : null}\n {reachable ? (\n goTo(entry)}\n type=\"button\"\n >\n {body}\n \n ) : (\n \n {body}\n \n )}\n
    2. \n )\n })}\n
\n )\n\n const cancelRow =\n step === \"method\" || step === \"enroll\" || step === \"verify\" ? (\n confirmCancel ? (\n \n

\n Two-factor authentication will not be enabled\n and this setup key stops working. Your account keeps its password only; you can start\n again from your security settings.\n

\n
\n \n Leave without enabling\n \n setConfirmCancel(false)}\n type=\"button\"\n >\n Keep setting up\n \n
\n \n ) : (\n setConfirmCancel(true)}\n type=\"button\"\n >\n Cancel setup\n \n )\n ) : null\n\n const methodStep = (\n
\n How do you want to get codes?\n
\n {offered.map(option => {\n const selected = activeMethod === option\n return (\n \n chooseMethod(option)}\n type=\"radio\"\n value={option}\n />\n \n \n {option === \"authenticator\" ? (\n \n ) : (\n \n )}\n {option === \"authenticator\" ? \"Authenticator app\" : \"Text message\"}\n \n \n {option === \"authenticator\"\n ? \"Codes are generated on your device and keep working without signal.\"\n : `A code is texted to ${sms?.phone ?? \"your phone\"} each time you sign in.`}\n \n \n \n )\n })}\n
\n
\n )\n\n const authenticatorEnrol = authenticator ? (\n
\n
\n \n
    \n
  1. Open your authenticator app.
    2. \n
  2. Scan this code, or enter the key below by hand.
    3. \n
  3. The app starts showing a {CODE_LENGTH}-digit code that changes every 30 seconds.
    4. \n
\n
\n\n
\n

Can't scan it? Type this key instead.

\n
\n {/* The groups are separate spans with no whitespace between them, so\n selecting the element yields the raw key rather than a spaced\n copy an authenticator app might reject. aria-hidden because the\n sibling below is the version worth listening to. */}\n \n {secretGroups.map((group, index) => (\n {group}\n ))}\n \n {/* Read as four-character chunks: the comma gives the screen reader a\n pause where the eye gets a gap. */}\n Setup key: {secretGroups.join(\", \")}\n void runSecretCopy(authenticator.secret, secretNodeRef.current)}\n type=\"button\"\n >\n {secretCopied ? : }\n \n
\n

\n {secretCopyFailed ? (\n \n Copy failed — the key is selected, press Ctrl/Cmd+C to copy it manually.\n \n ) : secretCopied ? (\n Setup key copied.\n ) : null}\n

\n
\n
\n ) : null\n\n const smsEnrol = sms ? (\n
\n

\n We'll text a {CODE_LENGTH}-digit code to{\" \"}\n {sms.phone}. It expires in a few\n minutes.\n

\n void handleSend()}\n type=\"button\"\n >\n {sendState === \"pending\" ? (\n \n ) : null}\n {sendState === \"pending\" ? \"Sending…\" : \"Send the code\"}\n \n

\n {sendMessage ? {sendMessage} : null}\n

\n
\n ) : null\n\n const verifyBody = locked ? (\n \n

\n \n Too many incorrect codes\n

\n

\n All {attemptLimit} {attemptLimit === 1 ? \"attempt\" : \"attempts\"} for this setup{\" \"}\n {attemptLimit === 1 ? \"was\" : \"were\"} used, so it has been stopped. Two-factor\n authentication is not enabled. Start again from\n your security settings to get a fresh key.\n

\n \n ) : (\n
\n

\n {activeMethod === \"authenticator\"\n ? `Enter the ${CODE_LENGTH}-digit code your authenticator app is showing now.`\n : `Enter the ${CODE_LENGTH}-digit code we texted to ${sms?.phone ?? \"your phone\"}.`}\n

\n {\n setCode(next)\n if (status === \"invalid\" || status === \"error\") {\n setStatus(\"idle\")\n setMessage(null)\n }\n }}\n onComplete={value => void runVerify(value)}\n value={code}\n />\n {/* Always mounted: a live region inserted at the same moment as its text\n is unreliable in most screen readers. */}\n

\n {message ? (\n \n {message}\n {status === \"invalid\" && attemptsUsed > 0\n ? ` ${attemptsLeft} ${attemptsLeft === 1 ? \"attempt\" : \"attempts\"} left.`\n : \"\"}\n {/* Our sentence, never the host's: a transport failure spends no\n attempt, and saying so must not depend on whatever message the\n rejection happened to carry (or whether it ends in a full stop). */}\n {status === \"error\" ? No attempt was used. : null}\n \n ) : sendState === \"sent\" ? (\n Code sent to {sms?.phone}.\n ) : null}\n

\n {sms && activeMethod === \"sms\" ? (\n void handleSend()}\n type=\"button\"\n >\n {sendState === \"pending\" ? \"Sending…\" : \"Send a new code\"}\n \n ) : null}\n
\n )\n\n const recoveryStep = (\n
\n {recoveryCodes.length > 0 ? (\n <>\n
\n \n

\n This is the only time these codes are shown. Save them now — once you finish, they\n cannot be displayed again, only replaced with a new set.\n

\n
\n\n \n {recoveryCodes.map((entry, index) => (\n // Index keys on purpose: the list is fixed for the lifetime of this\n // step, and two identical codes would otherwise collide.\n \n \n {index + 1}\n \n {entry}\n \n ))}\n \n\n
\n \n void runCodesCopy(recoveryCodes.join(\"\\n\"), codesNodeRef.current)}\n type=\"button\"\n >\n {codesCopied ? (\n \n ) : (\n \n )}\n Copy all\n \n

\n {codesCopyFailed ? (\n \n Copy failed — the codes are selected, press Ctrl/Cmd+C.\n \n ) : codesCopied ? (\n \n Copied. A clipboard is not storage — save them somewhere lasting.\n \n ) : null}\n

\n
\n\n
\n \n {nudge ? (\n

\n Save the codes first — they cannot be shown again.\n

\n ) : null}\n
\n \n ) : (\n

\n No recovery codes were issued for this account. Ask an administrator how to regain access\n if you lose your second factor.\n

\n )}\n
\n )\n\n const doneStep = (\n
\n \n \n \n
\n

Two-factor authentication is on

\n

\n {activeMethod === \"authenticator\"\n ? \"You'll be asked for a code from your authenticator app the next time you sign in.\"\n : `You'll be texted a code at ${sms?.phone ?? \"your phone\"} the next time you sign in.`}{\" \"}\n {recoveryCodes.length > 0\n ? \"Your recovery codes are no longer shown here — generate a new set from your security settings if you lose them.\"\n : \"\"}\n

\n
\n
\n )\n\n /* ------------------------------------------------------------------ shell */\n\n const showBack = (step === \"enroll\" && hasPicker) || (step === \"verify\" && !locked)\n\n return (\n \n
\n
\n

\n {heading}\n

\n {description ?

{description}

: null}\n
\n\n {stepper}\n\n {step === \"method\" ? methodStep : null}\n {step === \"enroll\" ? (activeMethod === \"authenticator\" ? authenticatorEnrol : smsEnrol) : null}\n {step === \"verify\" ? verifyBody : null}\n {step === \"recovery\" ? recoveryStep : null}\n {step === \"done\" ? doneStep : null}\n\n {step !== \"done\" ? (\n
\n {showBack ? (\n goTo(step === \"verify\" ? \"enroll\" : \"method\")}\n type=\"button\"\n >\n \n Back\n \n ) : null}\n\n {step === \"method\" ? (\n \n ) : null}\n\n {step === \"enroll\" && activeMethod === \"authenticator\" ? (\n \n ) : null}\n\n {step === \"verify\" && !locked ? (\n void runVerify(code)}\n type=\"button\"\n >\n {status === \"pending\" ? (\n \n ) : null}\n {status === \"pending\" ? \"Verifying…\" : \"Verify and enable\"}\n \n ) : null}\n\n {step === \"recovery\" ? (\n \n Finish\n \n ) : null}\n
\n ) : null}\n\n {cancelRow}\n
\n \n )\n },\n)\n\nTwoFactorSetup.displayName = \"TwoFactorSetup\"\n\nexport default TwoFactorSetup\n", "type": "registry:block" } ], "type": "registry:block" }