\n )\n}\n",
"type": "registry:component",
"target": "@components/auth/two-factor/two-factor-settings.tsx"
},
{
"path": "examples/start-shadcn-example/src/components/auth/use-is-hydrated.ts",
"content": "\"use client\"\n\nimport { useSyncExternalStore } from \"react\"\n\n/**\n * Returns `true` once the component is mounted on the client (hydrated) and\n * `false` while rendering on the server, so client-only reads (e.g.\n * `sessionStorage`) stay safe during SSR.\n *\n * @returns Whether the component has hydrated on the client.\n */\nexport function useIsHydrated() {\n const subscribe = () => () => {}\n return useSyncExternalStore(\n subscribe,\n () => true,\n () => false\n )\n}\n",
"type": "registry:component",
"target": "@components/auth/use-is-hydrated.ts"
},
{
"path": "examples/start-shadcn-example/src/lib/auth/auth-plugin.ts",
"content": "import type {\n AuthPluginComponents,\n AuthPlugin as AuthPluginPrimitive\n} from \"@better-auth-ui/react\"\n\ndeclare module \"@better-auth-ui/core\" {\n /** Widens `useAuth().plugins` to the shadcn-typed `AuthPlugin`. */\n interface AuthPluginRegister {\n shadcn: AuthPlugin\n }\n}\n\n/** Props the shadcn `` router spreads onto plugin-contributed auth views. */\nexport type AuthViewProps = {\n className?: string\n socialLayout?: \"auto\" | \"horizontal\" | \"vertical\" | \"grid\"\n socialPosition?: \"top\" | \"bottom\"\n}\n\n/** Props the shadcn `` router spreads onto plugin-contributed settings views. */\nexport type SettingsViewProps = {\n className?: string\n}\n\n/** Shadcn plugin type. Plugin authors import this from `@/lib/auth/auth-plugin`. */\nexport type AuthPlugin = AuthPluginPrimitive<\n AuthPluginComponents,\n AuthViewProps,\n SettingsViewProps\n>\n",
"type": "registry:lib",
"target": "@lib/auth/auth-plugin.ts"
},
{
"path": "examples/start-shadcn-example/src/lib/auth/two-factor-methods.ts",
"content": "/**\n * Second-factor methods a user can complete the challenge with.\n *\n * `totp` and `otp` come from the server's `twoFactorMethods` list. Backup\n * codes are always available when the server has them enabled, so they are\n * never part of that list.\n */\nexport type TwoFactorMethod = \"totp\" | \"otp\"\n\nconst TWO_FACTOR_METHODS: TwoFactorMethod[] = [\"totp\", \"otp\"]\n\n/** Auth plugin id used by Better Auth UI's two-factor integration. */\nexport const TWO_FACTOR_PLUGIN_ID = \"twoFactor\"\n\n/**\n * `sessionStorage` key holding the methods reported by the sign-in response.\n *\n * Only the non-sensitive method names are stored, never a code, token, or the\n * two-factor cookie, which stays HTTP-only.\n */\nexport const TWO_FACTOR_METHODS_STORAGE_KEY =\n \"better-auth-ui.two-factor-methods\"\n\ntype TwoFactorRedirect = {\n twoFactorRedirect: true\n twoFactorMethods?: unknown\n}\n\n/** Detect the redirect payload Better Auth returns before a second factor. */\nexport function isTwoFactorRedirect(data: unknown): data is TwoFactorRedirect {\n return (\n typeof data === \"object\" &&\n data !== null &&\n (data as { twoFactorRedirect?: unknown }).twoFactorRedirect === true\n )\n}\n\n/** Narrow arbitrary method names to the challenge views this UI supports. */\nexport function parseTwoFactorMethods(methods?: unknown): TwoFactorMethod[] {\n if (!Array.isArray(methods)) return []\n\n return TWO_FACTOR_METHODS.filter((method) => methods.includes(method))\n}\n\n/** Persist the enabled method names without blocking sign-in on storage errors. */\nexport function storeTwoFactorMethods(methods?: unknown) {\n if (typeof sessionStorage === \"undefined\") return\n\n try {\n sessionStorage.setItem(\n TWO_FACTOR_METHODS_STORAGE_KEY,\n JSON.stringify(parseTwoFactorMethods(methods))\n )\n } catch {\n // The challenge falls back to every method when storage is unavailable.\n }\n}\n\n/** Read the stored methods, falling back to every supported challenge. */\nexport function readTwoFactorMethods(): TwoFactorMethod[] {\n if (typeof sessionStorage === \"undefined\") return TWO_FACTOR_METHODS\n\n try {\n const stored = sessionStorage.getItem(TWO_FACTOR_METHODS_STORAGE_KEY)\n if (!stored) return TWO_FACTOR_METHODS\n\n const methods = parseTwoFactorMethods(JSON.parse(stored))\n return methods.length ? methods : TWO_FACTOR_METHODS\n } catch {\n return TWO_FACTOR_METHODS\n }\n}\n\n/** Clear stored method hints after the challenge finishes or is abandoned. */\nexport function clearTwoFactorMethods() {\n if (typeof sessionStorage === \"undefined\") return\n\n try {\n sessionStorage.removeItem(TWO_FACTOR_METHODS_STORAGE_KEY)\n } catch {\n // Stale method hints are harmless and must not block navigation.\n }\n}\n",
"type": "registry:lib",
"target": "@lib/auth/two-factor-methods.ts"
},
{
"path": "examples/start-shadcn-example/src/lib/auth/two-factor-plugin.ts",
"content": "import { createAuthPlugin } from \"@better-auth-ui/core\"\nimport {\n twoFactorPlugin as coreTwoFactorPlugin,\n type TwoFactorPluginOptions\n} from \"@better-auth-ui/core/plugins/two-factor\"\n\nimport { TwoFactorChallenge } from \"@/components/auth/two-factor/two-factor-challenge\"\nimport { TwoFactorSettings } from \"@/components/auth/two-factor/two-factor-settings\"\n\nexport const twoFactorPlugin = createAuthPlugin(\n coreTwoFactorPlugin.id,\n (options: TwoFactorPluginOptions = {}) => ({\n ...coreTwoFactorPlugin(options),\n securityCards: [TwoFactorSettings],\n views: {\n auth: { twoFactor: TwoFactorChallenge }\n }\n })\n)\n",
"type": "registry:lib",
"target": "@lib/auth/two-factor-plugin.ts"
},
{
"path": "examples/start-shadcn-example/src/lib/auth/use-resend-cooldown.ts",
"content": "\"use client\"\n\nimport { useCallback, useEffect, useState } from \"react\"\n\n/** Seconds a resend button stays disabled to keep users off the rate limit. */\nexport const RESEND_COOLDOWN_SECONDS = 60\n\n/**\n * Countdown state for \"resend code\" buttons.\n *\n * @param initialSeconds - Seconds to start at. Pass `0` when nothing has been\n * sent yet, or the cooldown length when the flow arrives right after a send.\n */\nexport function useResendCooldown(initialSeconds = 0) {\n const [cooldown, setCooldown] = useState(initialSeconds)\n\n useEffect(() => {\n if (cooldown <= 0) return\n\n const interval = setInterval(() => {\n setCooldown((current) => (current > 0 ? current - 1 : 0))\n }, 1000)\n\n return () => clearInterval(interval)\n }, [cooldown])\n\n // Stable so callers can start the cooldown from an effect without\n // re-running it on every render.\n const startCooldown = useCallback(\n (seconds = RESEND_COOLDOWN_SECONDS) => setCooldown(seconds),\n []\n )\n\n return {\n cooldown,\n isCoolingDown: cooldown > 0,\n startCooldown\n }\n}\n",
"type": "registry:lib",
"target": "@lib/auth/use-resend-cooldown.ts"
},
{
"path": "examples/start-shadcn-example/src/lib/auth/use-sign-in-continuation.ts",
"content": "\"use client\"\n\nimport { useAuth } from \"@better-auth-ui/react\"\nimport { useCallback } from \"react\"\nimport {\n isTwoFactorRedirect,\n storeTwoFactorMethods,\n TWO_FACTOR_PLUGIN_ID\n} from \"./two-factor-methods\"\n\n/**\n * Resolve what happens after a sign-in request succeeds.\n *\n * Better Auth withholds the session when a second factor is required and\n * answers with `{ twoFactorRedirect: true, twoFactorMethods }` instead, so no\n * sign-in strategy may navigate to `redirectTo` unconditionally. This hook is\n * the single place that decision lives — every password-based form calls it\n * from `onSuccess`.\n *\n * The enabled methods are stashed in session storage (names only, never a\n * code or token) and `redirectTo` rides along in the query string so the\n * challenge view can finish the original navigation.\n *\n * The two-factor plugin is looked up by its stable id, so sign-in forms stay\n * installable without either the two-factor components or a matching release\n * of `@better-auth-ui/core`.\n *\n * @returns A callback taking the resolved data of a sign-in mutation.\n */\nexport function useSignInContinuation() {\n const { basePaths, navigate, plugins, redirectTo } = useAuth()\n\n const twoFactorPath = plugins.find(\n (plugin) => plugin.id === TWO_FACTOR_PLUGIN_ID\n )?.viewPaths?.auth?.twoFactor\n\n return useCallback(\n (data: unknown) => {\n if (twoFactorPath && isTwoFactorRedirect(data)) {\n storeTwoFactorMethods(data.twoFactorMethods)\n\n navigate({\n to: `${basePaths.auth}/${twoFactorPath}?redirectTo=${encodeURIComponent(redirectTo)}`\n })\n return\n }\n\n navigate({ to: redirectTo })\n },\n [basePaths.auth, navigate, redirectTo, twoFactorPath]\n )\n}\n",
"type": "registry:lib",
"target": "@lib/auth/use-sign-in-continuation.ts"
},
{
"path": "examples/start-shadcn-example/src/lib/auth/use-two-factor-password.ts",
"content": "\"use client\"\n\nimport { useAuth, useAuthPlugin, useListAccounts } from \"@better-auth-ui/react\"\n\nimport { twoFactorPlugin } from \"./two-factor-plugin\"\n\n/**\n * Whether two-factor management should ask for the account password.\n *\n * Better Auth's `allowPasswordless` option only waives the password for\n * accounts that have no credential account — a passkey-only user has no\n * password to type. Reading the linked accounts keeps the UI in step with\n * that rule instead of guessing from the option alone.\n */\nexport function useTwoFactorPasswordRequirement() {\n const { authClient } = useAuth()\n const { allowPasswordless } = useAuthPlugin(twoFactorPlugin)\n const { data: accounts, isPending } = useListAccounts(authClient)\n\n const hasCredentialAccount = accounts?.some(\n (account) => account.providerId === \"credential\"\n )\n\n return {\n isPending: allowPasswordless && isPending,\n // Default to asking while the account list loads. Guessing \"no password\"\n // early would submit an empty body for a credential user and fail the\n // request; guessing \"password\" costs a passkey-only user nothing, because\n // the field disappears as soon as the list resolves.\n requiresPassword:\n !allowPasswordless || isPending || Boolean(hasCredentialAccount)\n }\n}\n",
"type": "registry:lib",
"target": "@lib/auth/use-two-factor-password.ts"
}
],
"type": "registry:component"
}