4f:I[707087,["/_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"],"RegistryDependencies"] 50: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"] 51:T475d,"use client"; import { useEffect, useId, useRef, useState, type ComponentProps, type CSSProperties, type FormEvent, } from "react"; import { REGEXP_ONLY_DIGITS } from "input-otp"; import { Loader2 } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Checkbox } from "@/components/ui/checkbox"; import { Input } from "@/components/ui/input"; import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, } from "@/components/ui/input-otp"; import { Label } from "@/components/ui/label"; import { cn } from "@/lib/utils"; export type TwoFactorMethod = "authenticator" | "backup"; export type OtpTwoFactorValues = { method: TwoFactorMethod; /** Six digits for the authenticator, or the 8-character backup code (upper case, no hyphen). */ code: string; trustDevice: boolean; }; export type OtpTwoFactorProps = { /** Product name shown in the wordmark. */ brand?: string; title?: string; description?: string; /** Signed-in account, shown in mono. */ account?: string; /** Number of days "Trust this device" lasts. */ trustDays?: number; supportHref?: string; signInHref?: string; continueHref?: string; /** Called with the method, code and trust choice. Throw to show an error. */ onSubmit?: (values: OtpTwoFactorValues) => void | Promise; /** Panel ink. Defaults to a pale blue tint. */ panel?: string; /** Text colour on `panel`. Defaults to near-black. */ panelForeground?: string; /** Wordmark square and button ink. Defaults to Devsloka blue. */ accent?: string; /** Text colour on `accent`. */ accentForeground?: string; } & Omit, "onSubmit">; const DEFAULTS = { brand: "Larch", title: "Two-step verification", description: "Open your authenticator app and enter the 6-digit code for Larch.", account: "priya@fieldwork.org", panel: "#E8F0FF", panelForeground: "#0A0A0A", accent: "#0A6EFF", accentForeground: "#FFFFFF", }; const CODE_LENGTH = 6; const BACKUP_PATTERN = /^[A-Z0-9]{8}$/; const normalizeBackup = (value: string) => value.replace(/[\s-]/g, "").toUpperCase(); function validate(method: TwoFactorMethod, code: string, backup: string) { if (method === "authenticator") { if (code.length < CODE_LENGTH) return `Enter all ${CODE_LENGTH} digits from your authenticator app.`; return undefined; } const normalized = normalizeBackup(backup); if (!normalized) return "Enter one of your saved backup codes."; if (!BACKUP_PATTERN.test(normalized)) return "Backup codes are 8 letters and numbers, like 4F7K-29QD."; return undefined; } /** Placeholder until you pass `onSubmit`: waits briefly, then succeeds. */ const defaultSubmit: (values: OtpTwoFactorValues) => Promise = () => new Promise((resolve) => setTimeout(resolve, 800)); function AuthenticatorMark() { return ( ); } export function OtpTwoFactor({ brand = DEFAULTS.brand, title = DEFAULTS.title, description = DEFAULTS.description, account = DEFAULTS.account, trustDays = 30, supportHref = "#", signInHref = "#", continueHref = "#", onSubmit = defaultSubmit, panel = DEFAULTS.panel, panelForeground = DEFAULTS.panelForeground, accent = DEFAULTS.accent, accentForeground = DEFAULTS.accentForeground, className, style, ...props }: OtpTwoFactorProps) { const id = useId(); const titleId = `${id}-title`; const codeId = `${id}-code`; const backupId = `${id}-backup`; const trustId = `${id}-trust`; const errorId = `${id}-error`; const hintId = `${id}-hint`; const codeRef = useRef(null); const backupRef = useRef(null); const successHeadingRef = useRef(null); const focusAfterSwitch = useRef(false); const [method, setMethod] = useState("authenticator"); const [code, setCode] = useState(""); const [backup, setBackup] = useState(""); const [trustDevice, setTrustDevice] = useState(false); const [error, setError] = useState(); const [submitted, setSubmitted] = useState(false); const [status, setStatus] = useState<"idle" | "submitting" | "success">("idle"); const [announcement, setAnnouncement] = useState(""); useEffect(() => { if (status === "success") successHeadingRef.current?.focus(); }, [status]); useEffect(() => { if (!focusAfterSwitch.current) return; focusAfterSwitch.current = false; (method === "authenticator" ? codeRef : backupRef).current?.focus(); }, [method]); const focusField = () => (method === "authenticator" ? codeRef : backupRef).current?.focus(); const switchMethod = () => { focusAfterSwitch.current = true; setMethod((current) => (current === "authenticator" ? "backup" : "authenticator")); setError(undefined); setSubmitted(false); setAnnouncement(""); }; const handleSubmit = async (event: FormEvent) => { event.preventDefault(); if (status === "submitting") return; setSubmitted(true); const nextError = validate(method, code, backup); setError(nextError); if (nextError) { focusField(); return; } setStatus("submitting"); setAnnouncement("Checking the code…"); try { await onSubmit({ method, code: method === "authenticator" ? code : normalizeBackup(backup), trustDevice, }); setStatus("success"); setAnnouncement("Verified. You are signed in."); } catch { setStatus("idle"); setAnnouncement(""); setError( method === "authenticator" ? "That code didn’t work. Codes change every 30 seconds, so wait for the next one and try again." : "That backup code isn’t valid or has already been used. Each code works once." ); focusField(); } }; const describedBy = [hintId, error ? errorId : undefined].filter(Boolean).join(" "); return (

Step 2 / 2

Any authenticator app works. The code refreshes every 30 seconds and never leaves your phone.

{status === "success" ? (

Verified

Signed in

{trustDevice ? `We won’t ask for a code on this browser for ${trustDays} days. You can revoke it in Settings → Security.` : "We’ll ask for a code again next time you sign in on this browser."}

) : (

Signing in as {account}

{title}

{method === "authenticator" ? description : "Enter one of the 8-character backup codes you saved when you turned on two-step verification. Each code works once."}

{method === "authenticator" ? (

Authentication code { setCode(value); if (error) setError(undefined); }} readOnly={status === "submitting"} aria-invalid={error ? true : undefined} aria-describedby={describedBy} containerClassName="gap-3" > {[0, 1, 2].map((index) => ( ))} {[3, 4, 5].map((index) => ( ))}

) : (

Backup code setBackup(event.target.value)} onBlur={() => { if (submitted) setError(validate("backup", code, backup)); }} readOnly={status === "submitting"} aria-invalid={error ? true : undefined} aria-describedby={describedBy} className="max-w-60 font-mono tracking-widest uppercase" />

)} {error ? (

{error}

) : null}

setTrustDevice(checked === true)} className="mt-0.5" />

Trust this device for {trustDays} days

Only on a computer you don’t share.

Lost access? Contact support

Not you?{" "} Sign in with a different account

)}

{announcement}

); } 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","input-otp",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/input-otp","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"input-otp"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L4f",null,{"namespace":"@devsloka","registryDependencies":["button","checkbox","input","input-otp","label"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"src/registry/blocks/auth/otp-two-factor.tsx","content":"$51","type":"registry:block"}],"className":"h-[70svh] min-h-80"}]]}]