{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"auth-card","type":"registry:component","title":"Auth card","description":"Sign-in that asks one thing at a time: the email field shrinks into a chip round the address, and your server decides whether a password, a code or a link comes next.","author":"Hairline UI","dependencies":["lucide-react"],"registryDependencies":["https://hairlineui.com/r/code-input.json?as=dependency","https://hairlineui.com/r/text-morph.json?as=dependency","https://hairlineui.com/r/number-roll.json?as=dependency","https://hairlineui.com/r/status-button.json?as=dependency"],"files":[{"path":"registry/auth-card.tsx","type":"registry:component","content":"// Hairline UI · auth-card · MIT License\n// Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components\n\n\"use client\";\n\nimport * as React from \"react\";\nimport { ArrowUpRight, Eye, EyeOff, KeyRound } from \"lucide-react\";\nimport { CodeInput } from \"./code-input\";\nimport { NumberRoll } from \"./number-roll\";\nimport { StatusButton, type ActionStatus } from \"./status-button\";\nimport { TextMorph } from \"./text-morph\";\n\n/* ─────────────────────────────────────────────────────────\n * AUTH CARD: sign-in that asks one thing at a time\n *\n * email sign-in providers, then the email field; your\n * server decides what comes next (a password, a\n * code or a link), the way identifier-first sign-in\n * works at Google and Clerk\n * identity the email field doesn't go anywhere: its frame\n * shrinks round the address into a chip as the\n * providers fold away above it, and \"Change\" opens\n * at its end to take you back\n * step each next step slides in from the right (Change\n * slides back from the left) while the card eases\n * to its new height; titles lift out and in\n * code the code boxes (code input) check as the last\n * digit lands, and resend counts down\n * link \"Check your inbox\", with a button that opens the\n * inbox itself for Gmail, Outlook, iCloud, Yahoo\n * and Proton addresses\n * done a ring draws, a check draws inside it, \"Signed in\"\n *\n * The card never calls a service: every step is one async\n * function, so it fits Better Auth, Clerk, Supabase or Auth.js.\n * ───────────────────────────────────────────────────────── */\n\nexport type AuthNext = \"password\" | \"code\" | \"link\";\nexport type AuthStep = \"email\" | AuthNext | \"reset\" | \"done\";\n\nexport interface AuthProvider {\n id: string;\n label: string;\n icon?: React.ReactNode;\n}\n\nexport interface AuthCardProps extends Omit, \"title\"> {\n mode?: \"sign-in\" | \"sign-up\";\n /** Above the title: your mark. */\n logo?: React.ReactNode;\n /** Words per step: { email: { title, description }, code: { … }, … }. */\n copy?: Partial>;\n providers?: AuthProvider[];\n /** Starts a provider's sign-in; usually it redirects, so the button keeps spinning. */\n onProvider?: (id: string) => Promise | unknown;\n /** Shows \"Sign in with a passkey\". Resolve when signed in. */\n onPasskey?: () => Promise;\n /** Your server says what comes next for this address. Throw to say why not. */\n onEmail: (email: string) => Promise | AuthNext;\n onPassword?: (email: string, password: string) => Promise;\n /** Resolve when the code is right; throw when it isn't. */\n onCode?: (email: string, code: string) => Promise;\n /** Sends the code or link again. */\n onResend?: (email: string) => Promise;\n /** Shows \"Forgot password?\" on the password step; sends a reset link. */\n onForgot?: (email: string) => Promise;\n /** After \"Signed in\" has shown, e.g. to redirect. */\n onSuccess?: () => void;\n defaultEmail?: string;\n codeLength?: number;\n /** Seconds before a code or link can be sent again. */\n resendAfter?: number;\n /** Under the card's content: terms, a link to sign up. */\n footer?: React.ReactNode;\n}\n\nconst EASE = \"cubic-bezier(0.16,1,0.3,1)\";\nconst FOCUS = \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40\";\nconst EMAIL = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\nconst SHAKE = [{ transform: \"none\" }, { transform: \"translateX(-4px)\" }, { transform: \"translateX(4px)\" }, { transform: \"translateX(-2px)\" }, { transform: \"none\" }];\nconst ORDER: AuthStep[] = [\"email\", \"password\", \"code\", \"link\", \"reset\", \"done\"];\nconst INBOXES: [RegExp, string, string][] = [\n [/^(gmail|googlemail)\\.com$/, \"Gmail\", \"https://mail.google.com/mail/u/0/#inbox\"],\n [/^(outlook|hotmail|live|msn)\\.[a-z.]+$/, \"Outlook\", \"https://outlook.live.com/mail/\"],\n [/^(icloud|me|mac)\\.com$/, \"iCloud Mail\", \"https://www.icloud.com/mail\"],\n [/^yahoo\\.[a-z.]+$/, \"Yahoo Mail\", \"https://mail.yahoo.com\"],\n [/^(proton\\.me|protonmail\\.com|pm\\.me)$/, \"Proton Mail\", \"https://mail.proton.me\"],\n];\n\nconst reducedQuery = \"(prefers-reduced-motion: reduce)\";\nconst subscribeReduced = (onChange: () => void) => {\n const query = window.matchMedia(reducedQuery);\n query.addEventListener(\"change\", onChange);\n return () => query.removeEventListener(\"change\", onChange);\n};\nconst useReducedMotion = () =>\n React.useSyncExternalStore(subscribeReduced, () => window.matchMedia(reducedQuery).matches, () => false);\n\nconst message = (e: unknown, fallback: string) => (e instanceof Error && e.message ? e.message : fallback);\nconst inboxFor = (email: string) => {\n const domain = email.split(\"@\")[1]?.toLowerCase() ?? \"\";\n const hit = INBOXES.find(([re]) => re.test(domain));\n return hit ? { name: hit[1], href: hit[2] } : null;\n};\n\n/** A line that changes by lifting the old words out through a blur and the new ones in. */\nfunction Line({ text, className = \"\", reduced, as: Tag = \"p\", id }: { text: string; className?: string; reduced: boolean; as?: \"p\" | \"h2\"; id?: string }) {\n const [shown, setShown] = React.useState(text);\n const [old, setOld] = React.useState<{ key: number; text: string }[]>([]);\n const key = React.useRef(0);\n const ref = React.useRef(null);\n if (text !== shown) {\n if (!reduced && shown) setOld((o) => [...o, { key: ++key.current, text: shown }]);\n setShown(text);\n }\n React.useLayoutEffect(() => {\n if (reduced || !old.length) return;\n ref.current?.animate([{ opacity: 0, transform: \"translateY(0.3em)\", filter: \"blur(4px)\" }, { opacity: 1, transform: \"none\", filter: \"blur(0px)\" }], { duration: 380, delay: 80, easing: EASE, fill: \"backwards\" });\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [shown]);\n return (\n \n \n {shown}\n \n {old.map((o) => (\n setOld((all) => all.filter((x) => x.key !== o.key))}>\n {o.text}\n \n ))}\n \n );\n}\n\nfunction Leaving({ children, onDone }: { children: React.ReactNode; onDone: () => void }) {\n const ref = React.useRef(null);\n React.useLayoutEffect(() => {\n const a = ref.current?.animate([{ opacity: 1, filter: \"blur(0px)\" }, { opacity: 0, transform: \"translateY(-0.3em)\", filter: \"blur(4px)\" }], { duration: 220, easing: EASE, fill: \"forwards\" });\n if (a) a.onfinish = onDone;\n return () => a?.cancel();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n return (\n \n {children}\n \n );\n}\n\nfunction Fold({ open, reduced, children }: { open: boolean; reduced: boolean; children: React.ReactNode }) {\n const kept = React.useRef(children);\n if (open) kept.current = children;\n return (\n
\n
{open ? children : kept.current}
\n
\n );\n}\n\n/** The steps under the identity: the new one slides in from the side you went, the old one out the other way, and the box eases to fit. */\nfunction Slides({ step, dir, reduced, render }: { step: AuthStep; dir: number; reduced: boolean; render: (s: AuthStep) => React.ReactNode }) {\n const [faces, setFaces] = React.useState<{ s: AuthStep; out: boolean; dir: number; enter: boolean }[]>([{ s: step, out: false, dir, enter: false }]);\n const [seen, setSeen] = React.useState(step);\n const boxRef = React.useRef(null);\n const height = React.useRef(0);\n // Clipped only while a step slides; at rest a menu can open past its edge.\n const [moving, setMoving] = React.useState(false);\n React.useEffect(() => {\n if (!moving) return;\n const timer = window.setTimeout(() => setMoving(false), 560);\n return () => window.clearTimeout(timer);\n }, [moving, step]);\n if (seen !== step) {\n setSeen(step);\n if (!reduced) setMoving(true);\n setFaces((f) => [...f.filter((x) => x.out && x.s !== step && x.s !== seen), ...(reduced ? [] : [{ s: seen, out: true, dir, enter: false }]), { s: step, out: false, dir, enter: true }]);\n }\n\n React.useLayoutEffect(() => {\n const el = boxRef.current;\n if (!el) return;\n height.current = el.offsetHeight;\n const observer = new ResizeObserver(() => (height.current = el.offsetHeight));\n observer.observe(el);\n return () => observer.disconnect();\n }, []);\n\n React.useLayoutEffect(() => {\n const el = boxRef.current;\n if (!el || reduced) return;\n const to = el.offsetHeight;\n if (Math.abs(to - height.current) > 0.5) el.animate([{ height: `${height.current}px` }, { height: `${to}px` }], { duration: 460, easing: EASE });\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [step]);\n\n return (\n
\n {faces.map((f) => (\n setFaces((all) => all.filter((x) => !(x.s === f.s && x.out)))}>\n {render(f.s)}\n \n ))}\n
\n );\n}\n\nfunction Face({ out, enter, dir, reduced, onGone, children }: { out: boolean; enter: boolean; dir: number; reduced: boolean; onGone: () => void; children: React.ReactNode }) {\n const ref = React.useRef(null);\n React.useLayoutEffect(() => {\n const el = ref.current;\n if (!el) return;\n // A face that comes back while it was still leaving drops its exit first.\n el.getAnimations().forEach((a) => a.cancel());\n if (reduced) return;\n if (out) {\n const a = el.animate([{ opacity: 1, transform: \"none\", filter: \"blur(0px)\" }, { opacity: 0, transform: `translateX(${-dir * 28}px)`, filter: \"blur(4px)\" }], { duration: 240, easing: EASE, fill: \"forwards\" });\n a.onfinish = onGone;\n return;\n }\n if (!enter) return;\n el.animate([{ opacity: 0, transform: `translateX(${dir * 28}px)`, filter: \"blur(4px)\" }, { opacity: 1, transform: \"none\", filter: \"blur(0px)\" }], { duration: 440, delay: 80, easing: EASE, fill: \"backwards\" });\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [out]);\n return (\n
\n {children}\n
\n );\n}\n\n/** \"Resend in 0:28\", rolling down; then Resend → Sending → Sent, and the clock starts again. */\nfunction Resend({ after, reduced, onResend }: { after: number; reduced: boolean; onResend: () => Promise }) {\n const [since, setSince] = React.useState(() => Date.now());\n const [now, setNow] = React.useState(since);\n const [status, setStatus] = React.useState(\"idle\");\n const left = Math.max(0, since + after * 1000 - now);\n const counting = left > 0;\n React.useEffect(() => {\n if (!counting) return;\n const timer = window.setTimeout(() => setNow(Date.now()), 1000 - (Date.now() % 1000) + 10);\n return () => window.clearTimeout(timer);\n }, [counting, now]);\n React.useEffect(() => {\n if (status !== \"success\" && status !== \"error\") return;\n const timer = window.setTimeout(() => setStatus(\"idle\"), status === \"success\" ? 1400 : 2400);\n return () => window.clearTimeout(timer);\n }, [status]);\n const ready = !counting && status !== \"pending\" && status !== \"success\";\n const label = status === \"pending\" ? \"Sending\" : status === \"success\" ? \"Sent\" : status === \"error\" ? \"Try again\" : counting ? \"Resend in\" : \"Resend\";\n const s = Math.ceil(left / 1000);\n return (\n {\n if (!ready) return;\n setStatus(\"pending\");\n try {\n await onResend();\n setStatus(\"success\");\n setSince(Date.now());\n setNow(Date.now());\n } catch {\n setStatus(\"error\");\n }\n }}\n className={`inline-flex h-7 cursor-pointer items-center rounded-full px-2.5 text-[12px] font-medium whitespace-nowrap tabular-nums transition-colors aria-disabled:cursor-default ${FOCUS} ${\n status === \"error\" ? \"text-red-600 dark:text-red-400\" : ready ? \"text-foreground hover:bg-accent\" : \"text-muted-foreground\"\n }`}\n >\n {label}\n \n \n \n :\n \n \n \n \n \n );\n}\n\n/** A ring that draws itself, then a check inside it. */\nfunction Done({ reduced }: { reduced: boolean }) {\n const ring = React.useRef(null);\n const check = React.useRef(null);\n React.useLayoutEffect(() => {\n if (reduced) return;\n ring.current?.animate([{ strokeDashoffset: 1 }, { strokeDashoffset: 0 }], { duration: 640, delay: 120, easing: EASE, fill: \"backwards\" });\n check.current?.animate([{ strokeDashoffset: 1 }, { strokeDashoffset: 0 }], { duration: 420, delay: 560, easing: EASE, fill: \"backwards\" });\n }, [reduced]);\n return (\n \n \n \n \n \n );\n}\n\nexport function AuthCard({\n mode = \"sign-in\",\n logo,\n copy,\n providers = [],\n onProvider,\n onPasskey,\n onEmail,\n onPassword,\n onCode,\n onResend,\n onForgot,\n onSuccess,\n defaultEmail = \"\",\n codeLength = 6,\n resendAfter = 30,\n footer,\n className = \"\",\n ...props\n}: AuthCardProps) {\n const id = React.useId();\n const reduced = useReducedMotion();\n const [step, setStep] = React.useState(\"email\");\n const [dir, setDir] = React.useState(1);\n const [email, setEmail] = React.useState(defaultEmail);\n const [password, setPassword] = React.useState(\"\");\n const [showPassword, setShowPassword] = React.useState(false);\n const [busy, setBusy] = React.useState(null);\n const [status, setStatus] = React.useState(\"idle\");\n const [error, setError] = React.useState(null);\n const [announce, setAnnounce] = React.useState(\"\");\n const [chipWidth, setChipWidth] = React.useState(0);\n const shellRef = React.useRef(null);\n const emailRef = React.useRef(null);\n const mirrorRef = React.useRef(null);\n const changeRef = React.useRef(null);\n const passwordRef = React.useRef(null);\n const bodyRef = React.useRef(null);\n const identity = step !== \"email\";\n const signUp = mode === \"sign-up\";\n\n const words: Record = {\n email: { title: signUp ? \"Create your account\" : \"Sign in\", description: signUp ? \"Start with your work email.\" : \"Welcome back. Use the email you signed up with.\" },\n password: { title: \"Enter your password\", description: \"\" },\n code: { title: \"Check your email\", description: \"We sent you a code. It works for 10 minutes.\" },\n link: { title: \"Check your inbox\", description: \"We sent you a sign-in link. It works for 10 minutes.\" },\n reset: { title: \"Check your inbox\", description: \"We sent a link to reset your password.\" },\n done: { title: signUp ? \"You're in\" : \"Signed in\", description: \"Taking you to your workspace.\" },\n };\n const title = copy?.[step]?.title ?? words[step].title;\n const description = copy?.[step]?.description ?? words[step].description;\n\n const go = (next: AuthStep) => {\n setDir(ORDER.indexOf(next) >= ORDER.indexOf(step) ? 1 : -1);\n setError(null);\n setStatus(\"idle\");\n setStep(next);\n setAnnounce(copy?.[next]?.title ?? words[next].title);\n };\n\n const shake = (el: Element | null | undefined) => {\n if (!reduced) el?.animate(SHAKE, { duration: 380, easing: \"ease-out\" });\n };\n\n // The chip is as wide as the address plus \"Change\".\n React.useLayoutEffect(() => {\n const m = mirrorRef.current;\n const c = changeRef.current;\n if (!m || !c) return;\n const w = Math.ceil(m.offsetWidth + c.offsetWidth + 6);\n setChipWidth((p) => (p === w ? p : w));\n }, [email, identity]);\n\n // Each step puts focus on the thing to do next.\n React.useEffect(() => {\n const body = bodyRef.current;\n if (step === \"email\") {\n if (dir < 0) emailRef.current?.select();\n return;\n }\n const timer = window.setTimeout(() => {\n if (step === \"password\") passwordRef.current?.focus({ preventScroll: true });\n else body?.querySelector(\"[data-autofocus], input, a[href], button:not([aria-disabled])\")?.focus({ preventScroll: true });\n }, reduced ? 0 : 120);\n return () => window.clearTimeout(timer);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [step]);\n\n React.useEffect(() => {\n if (step !== \"done\" || !onSuccess) return;\n const timer = window.setTimeout(onSuccess, reduced ? 400 : 1300);\n return () => window.clearTimeout(timer);\n }, [step, onSuccess, reduced]);\n\n const submitEmail = async () => {\n if (status === \"pending\") return;\n const value = email.trim();\n if (!EMAIL.test(value)) {\n setError(value ? `“${value}” doesn't look like an email address.` : \"Enter your email address.\");\n shake(shellRef.current);\n emailRef.current?.focus();\n return;\n }\n setEmail(value);\n setStatus(\"pending\");\n setError(null);\n try {\n const next = await onEmail(value);\n go(next);\n } catch (e) {\n setStatus(\"error\");\n setError(message(e, \"We couldn't check that address. Try again.\"));\n shake(shellRef.current);\n }\n };\n\n const submitPassword = async () => {\n if (status === \"pending\" || !onPassword) return;\n if (!password) {\n setError(\"Enter your password.\");\n shake(passwordRef.current?.parentElement);\n return;\n }\n setStatus(\"pending\");\n setError(null);\n try {\n await onPassword(email, password);\n go(\"done\");\n } catch (e) {\n setStatus(\"error\");\n setError(message(e, \"That password isn't right.\"));\n shake(passwordRef.current?.parentElement);\n passwordRef.current?.select();\n }\n };\n\n const runProvider = async (key: string, run: () => unknown) => {\n if (busy) return;\n setBusy(key);\n setError(null);\n try {\n await run();\n // A redirect never gets here; a popup or a passkey does.\n go(\"done\");\n } catch (e) {\n setBusy(null);\n setError(message(e, key === \"passkey\" ? \"Passkey sign-in didn't finish.\" : \"That sign-in didn't finish. Try again.\"));\n }\n };\n\n const errorLine = (\n \n

\n {error}\n

\n \n );\n\n const inbox = inboxFor(email);\n const render = (s: AuthStep): React.ReactNode => {\n if (s === \"email\")\n return (\n
\n \n {onPasskey && (\n runProvider(\"passkey\", onPasskey)}\n aria-busy={busy === \"passkey\" || undefined}\n className={`mt-2 inline-flex h-9 w-full cursor-pointer items-center justify-center gap-2 rounded-full text-[13px] font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground aria-busy:cursor-default ${FOCUS}`}\n >\n {busy === \"passkey\" ? : }\n {busy === \"passkey\" ? \"Waiting for your passkey\" : \"Sign in with a passkey\"}\n \n )}\n
\n );\n if (s === \"password\")\n return (\n
\n \n
\n {\n setPassword(e.target.value);\n setError(null);\n if (status === \"error\") setStatus(\"idle\");\n }}\n aria-invalid={Boolean(error) || undefined}\n aria-describedby={error ? `${id}-error` : undefined}\n className=\"h-full min-w-0 flex-1 bg-transparent px-3 text-[16px] text-foreground outline-none [@media(pointer:fine)]:text-[14px]\"\n />\n setShowPassword((v) => !v)}\n className={`relative grid size-8 shrink-0 cursor-pointer place-items-center rounded-full text-muted-foreground transition-colors hover:bg-accent hover:text-foreground ${FOCUS}`}\n >\n {[false, true].map((on) => (\n \n {on ? : }\n \n ))}\n \n
\n {errorLine}\n
\n {onForgot ? (\n {\n await onForgot(email);\n go(\"reset\");\n }}\n />\n ) : (\n \n )}\n \n
\n
\n );\n if (s === \"code\")\n return (\n
\n {\n await onCode?.(email, code);\n window.setTimeout(() => go(\"done\"), reduced ? 0 : 900);\n return true;\n }}\n onResend={onResend ? () => onResend(email) : undefined}\n resendAfter={resendAfter}\n />\n
\n );\n if (s === \"link\" || s === \"reset\")\n return (\n
\n {inbox && (\n \n Open {inbox.name}\n \n \n )}\n {onResend && onResend(email)} />}\n
\n );\n return (\n
\n \n
\n );\n };\n\n return (\n
\n {logo &&
{logo}
}\n \n \n \n \n\n {\n e.preventDefault();\n if (step === \"email\") submitEmail();\n else if (step === \"password\") submitPassword();\n }}\n >\n {/* Providers fold away above the address once it's chosen. */}\n 0} reduced={reduced}>\n
\n
1 ? \"grid-cols-2\" : \"\"}`}>\n {providers.map((p) => (\n onProvider && runProvider(p.id, () => onProvider(p.id))}\n aria-busy={busy === p.id || undefined}\n disabled={Boolean(busy) && busy !== p.id}\n className={`inline-flex h-10 cursor-pointer items-center justify-center gap-2 rounded-full text-[13px] font-medium shadow-[inset_0_0_0_1px_var(--border)] transition-[background-color,opacity] duration-200 hover:bg-accent disabled:cursor-default disabled:opacity-40 aria-busy:cursor-default ${FOCUS}`}\n >\n \n \n {p.icon}\n \n \n \n {p.label}\n \n ))}\n
\n
\n \n or\n \n
\n
\n \n\n
\n {!identity && (\n \n )}\n {/* The address: a field, then the same frame shrunk round it as a chip. */}\n \n &]:shadow-[inset_0_0_0_1px_var(--ring)]\"}`}\n />\n \n {email || \" \"}\n \n {\n setEmail(e.target.value);\n setError(null);\n if (status === \"error\") setStatus(\"idle\");\n }}\n className=\"h-full min-w-0 flex-1 bg-transparent px-3 text-[16px] text-foreground outline-none placeholder:text-muted-foreground/70 [@media(pointer:fine)]:text-[14px]\"\n />\n \n \n {\n setPassword(\"\");\n go(\"email\");\n }}\n className={`mr-1 h-6 cursor-pointer rounded-full px-2 text-[12px] font-medium whitespace-nowrap text-muted-foreground transition-colors hover:bg-accent hover:text-foreground ${FOCUS}`}\n >\n Change\n \n \n \n
\n {step === \"email\" && errorLine}\n
\n\n
\n \n
\n \n\n {footer && (\n \n
{footer}
\n \n )}\n\n \n {announce}\n \n \n );\n}\n\nfunction ForgotButton({ onForgot }: { onForgot: () => Promise }) {\n const [status, setStatus] = React.useState(\"idle\");\n return (\n {\n if (status === \"pending\") return;\n setStatus(\"pending\");\n try {\n await onForgot();\n } catch {\n setStatus(\"error\");\n }\n }}\n className={`-ml-2 h-7 cursor-pointer rounded-full px-2 text-[12px] font-medium transition-colors hover:bg-accent ${FOCUS} ${status === \"error\" ? \"text-red-600 dark:text-red-400\" : \"text-muted-foreground hover:text-foreground\"}`}\n >\n {status === \"pending\" ? \"Sending a link\" : status === \"error\" ? \"Couldn't send it. Try again\" : \"Forgot password?\"}\n \n );\n}\n"}],"css":{},"docs":"Docs and live preview: https://hairlineui.com/ui/auth-card. MIT licensed: https://hairlineui.com/license#components","meta":{"license":"MIT"}}