{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "email-otp",
  "title": "Email OTP",
  "description": "Email OTP plugin: passwordless sign-in with an emailed code, plus code-based replacements for email verification, password reset, and email changes.",
  "dependencies": [
    "@better-auth-ui/core@latest",
    "@better-auth-ui/react@latest",
    "@tanstack/react-form",
    "@tanstack/react-query",
    "class-variance-authority",
    "cn",
    "date-fns",
    "input-otp",
    "lucide-react"
  ],
  "registryDependencies": [
    "alert",
    "badge",
    "button",
    "calendar",
    "card",
    "checkbox",
    "combobox",
    "field",
    "https://better-auth-ui.com/r/radix-nova/account-settings.json",
    "input",
    "input-group",
    "input-otp",
    "popover",
    "select",
    "skeleton",
    "slider",
    "sonner",
    "spinner",
    "switch",
    "textarea",
    "tooltip"
  ],
  "files": [
    {
      "path": "examples/start-shadcn-example/src/components/auth/additional-field.tsx",
      "content": "\"use client\"\n\nimport {\n  type AdditionalField as AdditionalFieldConfig,\n  type AdditionalFieldFormValue,\n  getFormFieldErrors,\n  resolveInputType\n} from \"@better-auth-ui/core\"\nimport { useAuth, useCopyToClipboard } from \"@better-auth-ui/react\"\nimport { format } from \"date-fns\"\nimport { CalendarIcon, Check, ChevronDownIcon, Copy } from \"lucide-react\"\nimport { type ComponentType, useRef, useState } from \"react\"\nimport { toast } from \"sonner\"\n\nimport { buttonVariants } from \"@/components/ui/button\"\nimport { Calendar } from \"@/components/ui/calendar\"\nimport { Checkbox } from \"@/components/ui/checkbox\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList\n} from \"@/components/ui/combobox\"\nimport {\n  Field,\n  FieldContent,\n  FieldError,\n  FieldLabel\n} from \"@/components/ui/field\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput\n} from \"@/components/ui/input-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger\n} from \"@/components/ui/popover\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue\n} from \"@/components/ui/select\"\nimport { Slider } from \"@/components/ui/slider\"\nimport { Switch } from \"@/components/ui/switch\"\nimport { Textarea } from \"@/components/ui/textarea\"\nimport { cn } from \"cn\"\n\nexport type AdditionalFieldProps = {\n  name: string\n  field: AdditionalFieldConfig\n  value: AdditionalFieldFormValue\n  onBlur: () => void\n  onChange: (value: AdditionalFieldFormValue) => void\n  isInvalid?: boolean\n  errors?: unknown[]\n  isPending?: boolean\n  /** Complete suffix appended to labels for fields that are not required. */\n  optionalLabel?: string\n}\n\nfunction valueToString(value: AdditionalFieldFormValue) {\n  if (value == null) return \"\"\n  return value instanceof Date ? value.toISOString() : String(value)\n}\n\n/** Convert a `defaultValue` into a `Date` for the calendar. */\nfunction toDate(value: unknown): Date | undefined {\n  if (value instanceof Date) return value\n  if (typeof value === \"string\") {\n    const parsed = new Date(value)\n    return Number.isNaN(parsed.getTime()) ? undefined : parsed\n  }\n  return undefined\n}\n\n/** Format a Date as `HH:mm:ss` for an `<input type=\"time\">`. */\nfunction formatTime(date: Date) {\n  const pad = (n: number) => n.toString().padStart(2, \"0\")\n  return `${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`\n}\n\n/**\n * Icon-only copy button used as an `InputGroupAddon`. `getValue` is invoked\n * lazily on click so the button copies the input's *live* value rather than a\n * stale snapshot — important when paired with editable inputs.\n */\nfunction CopyButton({\n  getValue,\n  isDisabled\n}: {\n  getValue: () => string | undefined\n  isDisabled?: boolean\n}) {\n  const { localization } = useAuth()\n  const { copied, copy } = useCopyToClipboard({\n    onError: (error) => {\n      console.error(\"[Better Auth UI] Copy failed\", error)\n      toast.error(localization.errors.copyFailed)\n    }\n  })\n\n  async function handleCopy() {\n    const value = getValue()\n    if (!value) return\n\n    await copy(value)\n  }\n\n  return (\n    <InputGroupButton\n      aria-label={\n        copied\n          ? localization.settings.copiedToClipboard\n          : localization.settings.copyToClipboard\n      }\n      title={\n        copied\n          ? localization.settings.copiedToClipboard\n          : localization.settings.copyToClipboard\n      }\n      onClick={handleCopy}\n      disabled={isDisabled}\n    >\n      {copied ? <Check /> : <Copy />}\n    </InputGroupButton>\n  )\n}\n\n/** Renders a single additional user field via shadcn primitives. */\nexport function AdditionalField({\n  name,\n  field: configuredField,\n  value,\n  onBlur,\n  onChange,\n  isInvalid,\n  errors,\n  isPending,\n  optionalLabel\n}: AdditionalFieldProps) {\n  const field =\n    optionalLabel && !configuredField.required\n      ? {\n          ...configuredField,\n          label: (\n            <>\n              {configuredField.label}\n              {optionalLabel}\n            </>\n          )\n        }\n      : configuredField\n  const inputType = resolveInputType(field)\n  const fieldErrors = getFormFieldErrors(errors ?? [])\n\n  if (field.render) {\n    const FieldRenderer = field.render as ComponentType<AdditionalFieldProps>\n    return (\n      <FieldRenderer\n        name={name}\n        field={field}\n        value={value}\n        onBlur={onBlur}\n        onChange={onChange}\n        isInvalid={isInvalid}\n        errors={errors}\n        isPending={isPending}\n        optionalLabel={optionalLabel}\n      />\n    )\n  }\n\n  if (inputType === \"hidden\") {\n    return (\n      <input type=\"hidden\" name={name} value={valueToString(value)} readOnly />\n    )\n  }\n\n  if (inputType === \"textarea\") {\n    return (\n      <Field data-invalid={isInvalid}>\n        <FieldLabel htmlFor={name}>{field.label}</FieldLabel>\n\n        <Textarea\n          id={name}\n          name={name}\n          value={valueToString(value)}\n          onBlur={onBlur}\n          onChange={(event) => onChange(event.target.value || null)}\n          placeholder={field.placeholder}\n          required={field.required}\n          readOnly={field.readOnly}\n          disabled={isPending}\n          aria-invalid={isInvalid}\n        />\n\n        <FieldError errors={fieldErrors} />\n      </Field>\n    )\n  }\n\n  if (inputType === \"number\") {\n    const maxFractionDigits = field.formatOptions?.maximumFractionDigits\n\n    return (\n      <Field data-invalid={isInvalid}>\n        <FieldLabel htmlFor={name}>{field.label}</FieldLabel>\n\n        <Input\n          id={name}\n          name={name}\n          type=\"number\"\n          inputMode={maxFractionDigits ? \"decimal\" : \"numeric\"}\n          min={field.min}\n          max={field.max}\n          step={\n            field.step ??\n            (maxFractionDigits ? 1 / 10 ** maxFractionDigits : undefined)\n          }\n          value={typeof value === \"number\" ? value : \"\"}\n          onBlur={onBlur}\n          onChange={(event) =>\n            onChange(\n              event.target.value === \"\" ? null : event.target.valueAsNumber\n            )\n          }\n          placeholder={field.placeholder}\n          required={field.required}\n          readOnly={field.readOnly}\n          disabled={isPending}\n          aria-invalid={isInvalid}\n        />\n\n        <FieldError errors={fieldErrors} />\n      </Field>\n    )\n  }\n\n  if (inputType === \"slider\") {\n    return (\n      <SliderField\n        name={name}\n        field={field}\n        value={value}\n        onBlur={onBlur}\n        onChange={onChange}\n        isInvalid={isInvalid}\n        errors={errors}\n        isPending={isPending}\n      />\n    )\n  }\n\n  if (inputType === \"switch\") {\n    return (\n      <Field data-invalid={isInvalid} orientation=\"horizontal\">\n        <Switch\n          id={name}\n          name={name}\n          checked={value === true}\n          onBlur={onBlur}\n          onCheckedChange={onChange}\n          disabled={isPending || field.readOnly}\n          aria-invalid={isInvalid}\n        />\n\n        <FieldContent>\n          <FieldLabel htmlFor={name}>{field.label}</FieldLabel>\n        </FieldContent>\n        <FieldError errors={fieldErrors} />\n      </Field>\n    )\n  }\n\n  if (inputType === \"checkbox\") {\n    return (\n      <Field data-invalid={isInvalid} orientation=\"horizontal\">\n        <Checkbox\n          id={name}\n          name={name}\n          checked={value === true}\n          onBlur={onBlur}\n          onCheckedChange={(checked) => onChange(checked === true)}\n          required={field.required}\n          disabled={isPending || field.readOnly}\n          aria-invalid={isInvalid}\n        />\n\n        <FieldContent>\n          <FieldLabel htmlFor={name}>{field.label}</FieldLabel>\n        </FieldContent>\n        <FieldError errors={fieldErrors} />\n      </Field>\n    )\n  }\n\n  if (inputType === \"select\") {\n    return (\n      <Field data-invalid={isInvalid}>\n        <FieldLabel htmlFor={name}>{field.label}</FieldLabel>\n\n        <Select\n          name={name}\n          value={valueToString(value) || undefined}\n          onValueChange={(nextValue) => onChange(nextValue)}\n          required={field.required}\n          disabled={isPending || field.readOnly}\n        >\n          <SelectTrigger\n            id={name}\n            className=\"w-full\"\n            onBlur={onBlur}\n            aria-invalid={isInvalid}\n          >\n            <SelectValue placeholder={field.placeholder} />\n          </SelectTrigger>\n\n          <SelectContent>\n            {field.options?.map((option) => (\n              <SelectItem key={option.value} value={option.value}>\n                {option.label}\n              </SelectItem>\n            ))}\n          </SelectContent>\n        </Select>\n\n        <FieldError errors={fieldErrors} />\n      </Field>\n    )\n  }\n\n  if (inputType === \"combobox\") {\n    const selectedOption = field.options?.find(\n      (option) => option.value === valueToString(value)\n    )\n\n    return (\n      <Field data-invalid={isInvalid}>\n        <FieldLabel htmlFor={name}>{field.label}</FieldLabel>\n\n        <Combobox\n          items={field.options ?? []}\n          name={name}\n          value={selectedOption ?? null}\n          onValueChange={(option) => onChange(option?.value ?? null)}\n          required={field.required}\n          disabled={isPending || field.readOnly}\n        >\n          <ComboboxInput\n            placeholder={field.placeholder}\n            id={name}\n            onBlur={onBlur}\n            aria-invalid={isInvalid}\n          />\n\n          <ComboboxContent>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n\n            <ComboboxList>\n              {(option) => (\n                <ComboboxItem key={option.value} value={option}>\n                  {option.label}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n\n        <FieldError errors={fieldErrors} />\n      </Field>\n    )\n  }\n\n  if (inputType === \"date\" || inputType === \"datetime\") {\n    return (\n      <DateInput\n        name={name}\n        field={field}\n        value={value}\n        onBlur={onBlur}\n        onChange={onChange}\n        isInvalid={isInvalid}\n        errors={errors}\n        isPending={isPending}\n      />\n    )\n  }\n\n  return (\n    <InputField\n      name={name}\n      field={field}\n      value={value}\n      onBlur={onBlur}\n      onChange={onChange}\n      isInvalid={isInvalid}\n      errors={errors}\n      isPending={isPending}\n    />\n  )\n}\n\nfunction InputField({\n  name,\n  field,\n  value,\n  onBlur,\n  onChange,\n  isInvalid,\n  errors,\n  isPending\n}: AdditionalFieldProps) {\n  const inputRef = useRef<HTMLInputElement>(null)\n  const fieldErrors = getFormFieldErrors(errors ?? [])\n\n  const hasPrefix = field.prefix != null\n  const hasSuffix = field.suffix != null || field.copyable\n\n  const isNumeric = field.type === \"number\"\n  const maxFractionDigits = field.formatOptions?.maximumFractionDigits\n  const nativeInputType = isNumeric ? \"number\" : undefined\n  const nativeInputMode = isNumeric\n    ? maxFractionDigits\n      ? \"decimal\"\n      : \"numeric\"\n    : undefined\n  const nativeStep = maxFractionDigits ? 1 / 10 ** maxFractionDigits : undefined\n\n  if (hasPrefix || hasSuffix) {\n    return (\n      <Field data-invalid={isInvalid}>\n        <FieldLabel htmlFor={name}>{field.label}</FieldLabel>\n\n        <InputGroup>\n          {hasPrefix && (\n            <InputGroupAddon align=\"inline-start\">\n              {field.prefix}\n            </InputGroupAddon>\n          )}\n\n          <InputGroupInput\n            ref={inputRef}\n            id={name}\n            name={name}\n            type={nativeInputType}\n            inputMode={nativeInputMode}\n            step={nativeStep}\n            value={valueToString(value)}\n            onBlur={onBlur}\n            onChange={(event) => onChange(event.target.value || null)}\n            placeholder={field.placeholder}\n            required={field.required}\n            readOnly={field.readOnly}\n            disabled={isPending}\n            aria-invalid={isInvalid}\n          />\n\n          {field.copyable ? (\n            <InputGroupAddon align=\"inline-end\">\n              <CopyButton\n                getValue={() => inputRef.current?.value}\n                isDisabled={isPending}\n              />\n            </InputGroupAddon>\n          ) : (\n            field.suffix != null && (\n              <InputGroupAddon align=\"inline-end\">\n                {field.suffix}\n              </InputGroupAddon>\n            )\n          )}\n        </InputGroup>\n\n        <FieldError errors={fieldErrors} />\n      </Field>\n    )\n  }\n\n  return (\n    <Field data-invalid={isInvalid}>\n      <FieldLabel htmlFor={name}>{field.label}</FieldLabel>\n\n      <Input\n        id={name}\n        name={name}\n        type={nativeInputType}\n        inputMode={nativeInputMode}\n        step={nativeStep}\n        value={valueToString(value)}\n        onBlur={onBlur}\n        onChange={(event) => onChange(event.target.value || null)}\n        placeholder={field.placeholder}\n        required={field.required}\n        readOnly={field.readOnly}\n        disabled={isPending}\n        aria-invalid={isInvalid}\n      />\n\n      <FieldError errors={fieldErrors} />\n    </Field>\n  )\n}\n\n/**\n * Slider field. Radix Slider doesn't render the current value, so we render\n * it next to the label and control the state to keep the displayed value in\n * sync. The selected value is submitted via the underlying Radix `name` prop.\n */\nfunction SliderField({\n  name,\n  field,\n  value,\n  onBlur,\n  onChange,\n  isInvalid,\n  errors,\n  isPending\n}: AdditionalFieldProps) {\n  const maxFractionDigits = field.formatOptions?.maximumFractionDigits\n  const min = field.min ?? 0\n  const max = field.max ?? 100\n  const step =\n    field.step ?? (maxFractionDigits ? 1 / 10 ** maxFractionDigits : 1)\n  const numericValue = typeof value === \"number\" ? value : min\n  const fieldErrors = getFormFieldErrors(errors ?? [])\n\n  const formatter = new Intl.NumberFormat(undefined, field.formatOptions)\n\n  return (\n    <Field data-invalid={isInvalid}>\n      <div className=\"flex items-center justify-between gap-2\">\n        <FieldLabel htmlFor={name}>{field.label}</FieldLabel>\n        <span className=\"text-sm text-muted-foreground tabular-nums\">\n          {formatter.format(numericValue)}\n        </span>\n      </div>\n\n      <Slider\n        id={name}\n        name={name}\n        value={[numericValue]}\n        onBlur={onBlur}\n        onValueChange={(nextValue) =>\n          onChange((Array.isArray(nextValue) ? nextValue[0] : nextValue) ?? min)\n        }\n        min={min}\n        max={max}\n        step={step}\n        disabled={isPending || field.readOnly}\n        aria-invalid={isInvalid}\n      />\n\n      <FieldError errors={fieldErrors} />\n    </Field>\n  )\n}\n\n/**\n * Date / datetime input. Composes `Popover` + `Calendar` for the date and\n * (optionally) `<input type=\"time\">` for the time. Submits the combined ISO\n * value via a hidden `<input>` so it shows up in `FormData`.\n */\nfunction DateInput({\n  name,\n  field,\n  value,\n  onBlur,\n  onChange,\n  isInvalid,\n  errors,\n  isPending\n}: AdditionalFieldProps) {\n  const { localization } = useAuth()\n  const inputType = resolveInputType(field)\n  const isDateTime = inputType === \"datetime\"\n  const fieldErrors = getFormFieldErrors(errors ?? [])\n\n  const date = toDate(value)\n  const [time, setTime] = useState<string>(\n    isDateTime && date ? formatTime(date) : \"\"\n  )\n  const [open, setOpen] = useState(false)\n\n  // Compose the hidden form value: ISO date for \"date\", ISO datetime for\n  // \"datetime\" (date + time).\n  return (\n    <Field data-invalid={isInvalid}>\n      <FieldLabel htmlFor={`${name}-date`}>{field.label}</FieldLabel>\n\n      <div className=\"relative flex gap-2\">\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger\n            type=\"button\"\n            id={`${name}-date`}\n            data-empty={!date}\n            aria-invalid={isInvalid}\n            aria-required={field.required}\n            onBlur={onBlur}\n            disabled={isPending || field.readOnly}\n            className={cn(\n              buttonVariants({ variant: \"outline\" }),\n              \"flex-1 justify-between font-normal\",\n              \"data-[empty=true]:text-muted-foreground\"\n            )}\n          >\n            {date ? format(date, \"PPP\") : <span>{field.placeholder}</span>}\n\n            {isDateTime ? <ChevronDownIcon /> : <CalendarIcon />}\n          </PopoverTrigger>\n\n          <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              defaultMonth={date}\n              captionLayout=\"dropdown\"\n              onSelect={(value) => {\n                if (!value) {\n                  onChange(null)\n                } else {\n                  const nextValue = new Date(value)\n                  if (isDateTime && time.trim()) {\n                    const [hours = \"0\", minutes = \"0\", seconds = \"0\"] =\n                      time.split(\":\")\n                    nextValue.setHours(\n                      Number(hours),\n                      Number(minutes),\n                      Number(seconds),\n                      0\n                    )\n                  } else {\n                    nextValue.setHours(0, 0, 0, 0)\n                  }\n                  onChange(nextValue)\n                }\n                if (!isDateTime) setOpen(false)\n              }}\n            />\n          </PopoverContent>\n        </Popover>\n\n        {isDateTime && (\n          <Field className=\"w-32\">\n            <FieldLabel htmlFor={`${name}-time`} className=\"sr-only\">\n              {localization.settings.time}\n            </FieldLabel>\n\n            <Input\n              type=\"time\"\n              id={`${name}-time`}\n              step=\"1\"\n              value={time}\n              onChange={(event) => {\n                const nextTime = event.target.value\n                setTime(nextTime)\n                if (!date) return\n                const nextValue = new Date(date)\n                const [hours = \"0\", minutes = \"0\", seconds = \"0\"] =\n                  nextTime.split(\":\")\n                nextValue.setHours(\n                  Number(hours),\n                  Number(minutes),\n                  Number(seconds),\n                  0\n                )\n                onChange(nextValue)\n              }}\n              disabled={isPending || field.readOnly}\n              className=\"appearance-none bg-background [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n            />\n          </Field>\n        )}\n      </div>\n\n      <FieldError errors={fieldErrors} />\n    </Field>\n  )\n}\n",
      "type": "registry:component",
      "target": "@components/auth/additional-field.tsx"
    },
    {
      "path": "examples/start-shadcn-example/src/components/auth/auth-form.tsx",
      "content": "\"use client\"\n\nimport {\n  type AdditionalField as AdditionalFieldConfig,\n  type AdditionalFieldFormValue,\n  DEFAULT_ADDITIONAL_FIELD_VALIDATION_DEBOUNCE_MS,\n  getFormFieldErrors,\n  normalizeAuthFormServerError,\n  validateAdditionalFieldRequired,\n  validateAdditionalFieldValue\n} from \"@better-auth-ui/core\"\nimport {\n  type AnyFormApi,\n  createFormHook,\n  createFormHookContexts\n} from \"@tanstack/react-form\"\nimport {\n  type ComponentProps,\n  type FormEvent,\n  type ReactNode,\n  useRef\n} from \"react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel\n} from \"@/components/ui/field\"\nimport { Input } from \"@/components/ui/input\"\nimport { Spinner } from \"@/components/ui/spinner\"\nimport { AdditionalField, type AdditionalFieldProps } from \"./additional-field\"\n\nconst { fieldContext, formContext, useFieldContext, useFormContext } =\n  createFormHookContexts()\n\nconst DEFAULT_AUTH_FORM_SERVER_ERROR = \"Unable to submit this form. Try again.\"\n\nexport function focusFirstInvalidAuthFormControl(form: HTMLFormElement) {\n  requestAnimationFrame(() => {\n    form\n      .querySelector<HTMLElement>(\n        '[aria-invalid=\"true\"]:not([disabled]), :invalid:not([disabled])'\n      )\n      ?.focus()\n  })\n}\n\nfunction AuthFormFieldError() {\n  const field = useFieldContext<unknown>()\n  const isInvalid = field.state.meta.isTouched && !field.state.meta.isValid\n\n  if (!isInvalid) return null\n\n  const errors = getFormFieldErrors(field.state.meta.errors)\n\n  return errors.length > 0 ? <FieldError errors={errors} /> : null\n}\n\nfunction AuthFormServerError() {\n  const form = useFormContext()\n\n  return (\n    <form.Subscribe selector={(state) => state.errorMap.onServer}>\n      {(error) => {\n        const formError =\n          error && typeof error === \"object\" && \"form\" in error\n            ? error.form\n            : error\n        const errors = getFormFieldErrors(formError ? [formError] : [])\n        return errors.length > 0 ? <FieldError errors={errors} /> : null\n      }}\n    </form.Subscribe>\n  )\n}\n\nexport function setAuthFormServerError(\n  form: AnyFormApi,\n  error: unknown,\n  fallbackMessage: string\n) {\n  const normalized = normalizeAuthFormServerError(error, fallbackMessage)\n  form.setErrorMap({\n    onServer: {\n      fields: normalized.fields ?? {},\n      form: normalized.form\n    }\n  })\n}\n\nexport function clearAuthFormServerError(form: AnyFormApi) {\n  form.setErrorMap({ onServer: { fields: {} } })\n}\n\nexport function clearAuthFormFieldServerError(\n  form: AnyFormApi,\n  fieldName: string\n) {\n  form.setErrorMap({ onServer: undefined })\n  if (!fieldName) return\n\n  const fieldMeta = form.getFieldMeta(fieldName as never)\n  if (!fieldMeta?.errorMap.onServer) return\n\n  form.setFieldMeta(fieldName as never, (current = fieldMeta) => ({\n    ...current,\n    errorMap: { ...current.errorMap, onServer: undefined },\n    errorSourceMap: { ...current.errorSourceMap, onServer: undefined }\n  }))\n}\n\nexport async function runAuthFormAction(\n  form: AnyFormApi,\n  action: () => Promise<unknown>,\n  serverErrorMessage = DEFAULT_AUTH_FORM_SERVER_ERROR\n) {\n  clearAuthFormServerError(form)\n  try {\n    await action()\n    return true\n  } catch (error) {\n    if (!form.state.errorMap.onServer) {\n      setAuthFormServerError(form, error, serverErrorMessage)\n    }\n    return false\n  }\n}\n\nexport async function submitAuthForm(\n  form: AnyFormApi,\n  serverErrorMessage = DEFAULT_AUTH_FORM_SERVER_ERROR\n) {\n  clearAuthFormServerError(form)\n  try {\n    await form.handleSubmit()\n    return form.state.isValid\n  } catch (error) {\n    if (!form.state.errorMap.onServer) {\n      setAuthFormServerError(form, error, serverErrorMessage)\n    }\n    return false\n  }\n}\n\ntype AuthFormRootProps = Omit<ComponentProps<\"form\">, \"onSubmit\"> & {\n  onBeforeSubmit?: () => void\n  serverErrorMessage?: string\n}\n\nfunction AuthFormRoot({\n  children,\n  onBeforeSubmit,\n  onInput,\n  serverErrorMessage = DEFAULT_AUTH_FORM_SERVER_ERROR,\n  ...props\n}: AuthFormRootProps) {\n  const form = useFormContext()\n  const submittingRef = useRef(false)\n\n  async function submit(event: FormEvent<HTMLFormElement>) {\n    event.preventDefault()\n    if (submittingRef.current || form.state.isSubmitting) return\n\n    const formElement = event.currentTarget\n    onBeforeSubmit?.()\n    submittingRef.current = true\n    try {\n      const isValid = await submitAuthForm(form, serverErrorMessage)\n      if (!isValid) focusFirstInvalidAuthFormControl(formElement)\n    } finally {\n      submittingRef.current = false\n    }\n  }\n\n  return (\n    <form\n      {...props}\n      onInvalid={(event) =>\n        focusFirstInvalidAuthFormControl(event.currentTarget)\n      }\n      onInput={(event) => {\n        const target = event.target\n        const fieldName =\n          target instanceof HTMLInputElement ||\n          target instanceof HTMLSelectElement ||\n          target instanceof HTMLTextAreaElement\n            ? target.name\n            : \"\"\n        clearAuthFormFieldServerError(form, fieldName)\n        onInput?.(event)\n      }}\n      onSubmit={submit}\n    >\n      {children}\n    </form>\n  )\n}\n\ntype AuthFormTextFieldProps = Omit<\n  ComponentProps<typeof Input>,\n  \"name\" | \"onBlur\" | \"onChange\" | \"value\"\n> & {\n  description?: ReactNode\n  label: ReactNode\n}\n\nfunction AuthFormTextField({\n  description,\n  id,\n  label,\n  ...props\n}: AuthFormTextFieldProps) {\n  const field = useFieldContext<string>()\n  const form = useFormContext()\n  const isInvalid = isAuthFormFieldInvalid(field.state.meta)\n  const inputId = id ?? field.name\n\n  return (\n    <Field data-invalid={isInvalid}>\n      <FieldLabel htmlFor={inputId}>{label}</FieldLabel>\n      <Input\n        {...props}\n        aria-busy={field.state.meta.isValidating || undefined}\n        aria-invalid={isInvalid}\n        id={inputId}\n        name={field.name}\n        onBlur={field.handleBlur}\n        onChange={(event) => {\n          clearAuthFormFieldServerError(form, field.name)\n          field.handleChange(event.target.value)\n        }}\n        value={field.state.value}\n      />\n      {description ? <FieldDescription>{description}</FieldDescription> : null}\n      <AuthFormFieldError />\n    </Field>\n  )\n}\n\nfunction AuthFormSubmitButton({\n  children,\n  disabled,\n  isPending,\n  ...props\n}: ComponentProps<typeof Button> & { isPending?: boolean }) {\n  const form = useFormContext()\n\n  return (\n    <form.Subscribe\n      selector={(state) => [state.isSubmitting, state.isValidating] as const}\n    >\n      {([isSubmitting, isValidating]) => (\n        <Button\n          {...props}\n          aria-busy={isPending || isSubmitting || undefined}\n          aria-disabled={\n            disabled || isPending || isSubmitting || isValidating || undefined\n          }\n          disabled={disabled || isPending || isSubmitting || isValidating}\n          type=\"submit\"\n        >\n          {isPending || isSubmitting ? (\n            <Spinner data-icon=\"inline-start\" />\n          ) : null}\n          {children}\n        </Button>\n      )}\n    </form.Subscribe>\n  )\n}\n\ntype AuthFormAdditionalFieldProps = Omit<\n  AdditionalFieldProps,\n  \"errors\" | \"isInvalid\" | \"name\" | \"onBlur\" | \"onChange\" | \"value\"\n>\n\nfunction AuthFormAdditionalField(props: AuthFormAdditionalFieldProps) {\n  const field = useFieldContext<AdditionalFieldFormValue>()\n  const form = useFormContext()\n  const isInvalid = isAuthFormFieldInvalid(field.state.meta)\n\n  return (\n    <AdditionalField\n      {...props}\n      errors={\n        isInvalid ? getFormFieldErrors(field.state.meta.errors) : undefined\n      }\n      isInvalid={isInvalid}\n      name={field.name}\n      onBlur={field.handleBlur}\n      onChange={(value) => {\n        clearAuthFormFieldServerError(form, field.name)\n        field.handleChange(value)\n      }}\n      value={field.state.value}\n    />\n  )\n}\n\nexport const {\n  useAppForm: useAuthForm,\n  withFieldGroup: withAuthFieldGroup,\n  withForm: withAuthForm\n} = createFormHook({\n  fieldComponents: {\n    AuthFormAdditionalField,\n    AuthFormFieldError,\n    AuthFormTextField\n  },\n  fieldContext,\n  formComponents: {\n    AuthFormRoot,\n    AuthFormServerError,\n    AuthFormSubmitButton\n  },\n  formContext\n})\n\nexport function isAuthFormFieldInvalid({\n  isTouched,\n  isValid\n}: {\n  isTouched: boolean\n  isValid: boolean\n}) {\n  return isTouched && !isValid\n}\n\nexport function getAuthAdditionalFieldValidators(\n  field: AdditionalFieldConfig,\n  requiredMessage: string\n) {\n  return {\n    onChange: ({ value }: { value: AdditionalFieldFormValue }) =>\n      validateAdditionalFieldRequired(field, value, requiredMessage),\n    onChangeAsync: field.validate\n      ? ({ value }: { value: AdditionalFieldFormValue }) =>\n          validateAdditionalFieldValue(field, value)\n      : undefined,\n    onChangeAsyncDebounceMs: field.validate\n      ? (field.validateDebounceMs ??\n        DEFAULT_ADDITIONAL_FIELD_VALIDATION_DEBOUNCE_MS)\n      : undefined\n  }\n}\n",
      "type": "registry:component",
      "target": "@components/auth/auth-form.tsx"
    },
    {
      "path": "examples/start-shadcn-example/src/components/auth/email-otp/change-email-otp.tsx",
      "content": "\"use client\"\n\nimport type { EmailOtpAuthClient } from \"@better-auth-ui/core/plugins/email-otp\"\nimport { useAuth, useAuthPlugin, useSession } from \"@better-auth-ui/react\"\nimport {\n  useChangeEmailOtp,\n  useRequestEmailChangeOtp,\n  useSendVerificationOtp\n} from \"@better-auth-ui/react/plugins/email-otp\"\nimport { useSelector } from \"@tanstack/react-form\"\nimport { useEffect, useReducer } from \"react\"\nimport { toast } from \"sonner\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/components/ui/card\"\nimport { Field, FieldLabel } from \"@/components/ui/field\"\nimport { Input } from \"@/components/ui/input\"\nimport { Skeleton } from \"@/components/ui/skeleton\"\nimport { emailOtpPlugin } from \"@/lib/auth/email-otp-plugin\"\nimport { cn } from \"cn\"\nimport { submitAuthForm, useAuthForm } from \"../auth-form\"\nimport { OpenEmailButton } from \"../open-email-button\"\nimport { OtpField } from \"../otp-field\"\n\ntype ChangeEmailStep = \"email\" | \"currentCode\" | \"newCode\"\n\ntype ChangeEmailState = {\n  step: ChangeEmailStep\n  newEmail: string\n}\n\ntype ChangeEmailAction =\n  | { type: \"currentEmailChallenged\"; newEmail: string }\n  | { type: \"changeRequested\"; newEmail: string }\n  | { type: \"restarted\" }\n\nconst initialChangeEmailState: ChangeEmailState = {\n  step: \"email\",\n  newEmail: \"\"\n}\n\n// Every step is reachable from the action alone, so the previous state never\n// takes part in the transition.\nfunction changeEmailReducer(\n  _state: ChangeEmailState,\n  action: ChangeEmailAction\n): ChangeEmailState {\n  switch (action.type) {\n    case \"currentEmailChallenged\":\n      return { step: \"currentCode\", newEmail: action.newEmail }\n    case \"changeRequested\":\n      return { step: \"newCode\", newEmail: action.newEmail }\n    case \"restarted\":\n      return initialChangeEmailState\n  }\n}\n\nexport type ChangeEmailOtpProps = {\n  className?: string\n}\n\n/**\n * Change the account email with codes instead of a confirmation link.\n *\n * Replaces the built-in `<ChangeEmail />` card when the email-OTP plugin runs\n * with `changeEmail: true`. With `verifyCurrentEmail` on it is a three-step\n * flow — confirm the current address, then the new one — and two steps\n * otherwise.\n *\n * @param className - Additional CSS classes applied to the card.\n */\nexport function ChangeEmailOtp({ className }: ChangeEmailOtpProps) {\n  const { authClient, localization } = useAuth()\n  const {\n    localization: emailOtpLocalization,\n    otpLength,\n    verifyCurrentEmail\n  } = useAuthPlugin(emailOtpPlugin)\n\n  const otpClient = authClient as EmailOtpAuthClient\n  const { data: session } = useSession(otpClient)\n  const currentEmail = session?.user.email\n\n  const [state, dispatch] = useReducer(\n    changeEmailReducer,\n    initialChangeEmailState\n  )\n  // The step transition is attached per call: the code goes to the current\n  // address while the pending change targets the new one, so the address to\n  // remember isn't in this mutation's variables.\n  const { mutateAsync: sendVerificationOtp, isPending: isSending } =\n    useSendVerificationOtp(otpClient)\n\n  const { mutateAsync: requestEmailChangeOtp, isPending: isRequesting } =\n    useRequestEmailChangeOtp(otpClient, {\n      onError: () => form.setFieldValue(\"code\", \"\"),\n      onSuccess: (_data, { newEmail }) => {\n        form.setFieldValue(\"code\", \"\")\n        dispatch({ type: \"changeRequested\", newEmail })\n      }\n    })\n\n  const { mutateAsync: changeEmailOtp, isPending: isChanging } =\n    useChangeEmailOtp(otpClient, {\n      onError: () => form.setFieldValue(\"code\", \"\"),\n      onSuccess: () => {\n        toast.success(localization.settings.changeEmailSuccess)\n        resetFlow()\n      }\n    })\n\n  const isPending = isSending || isRequesting || isChanging\n\n  const submitCode = async (completedCode: string) => {\n    if (isPending || state.step === \"email\") return\n\n    if (state.step === \"currentCode\") {\n      await requestEmailChangeOtp({\n        newEmail: state.newEmail,\n        otp: completedCode\n      })\n      return\n    }\n\n    await changeEmailOtp({ newEmail: state.newEmail, otp: completedCode })\n  }\n\n  const form = useAuthForm({\n    defaultValues: { code: \"\", email: \"\" },\n    onSubmit: async ({ value }) => {\n      if (state.step === \"email\") {\n        const newEmail = value.email\n\n        if (verifyCurrentEmail && currentEmail) {\n          await sendVerificationOtp(\n            { email: currentEmail, type: \"change-email\" },\n            {\n              onSuccess: () =>\n                dispatch({ type: \"currentEmailChallenged\", newEmail })\n            }\n          )\n          return\n        }\n\n        await requestEmailChangeOtp({ newEmail })\n        return\n      }\n      await submitCode(value.code)\n    }\n  })\n  const codeComplete = useSelector(\n    form.store,\n    (formState) => formState.values.code.length === otpLength\n  )\n\n  const resetFlow = () => {\n    form.reset()\n    if (currentEmail) form.setFieldValue(\"email\", currentEmail)\n    dispatch({ type: \"restarted\" })\n  }\n\n  useEffect(() => {\n    if (currentEmail) form.setFieldValue(\"email\", currentEmail)\n  }, [currentEmail, form])\n\n  const codeTarget =\n    state.step === \"currentCode\" ? currentEmail : state.newEmail\n\n  return (\n    <div>\n      <h2 className=\"text-sm font-semibold mb-3\">\n        {localization.settings.changeEmail}\n      </h2>\n\n      <form.AppForm>\n        <form.AuthFormRoot>\n          <Card className={cn(className)}>\n            <CardContent className=\"flex flex-col gap-6\">\n              {state.step === \"email\" ? (\n                <form.AppField name=\"email\">\n                  {(field) => (\n                    <Field>\n                      <FieldLabel htmlFor=\"email\">\n                        {localization.auth.email}\n                      </FieldLabel>\n\n                      {session ? (\n                        <Input\n                          key={currentEmail}\n                          id=\"email\"\n                          name=\"email\"\n                          type=\"email\"\n                          autoComplete=\"email\"\n                          value={field.state.value}\n                          placeholder={localization.auth.emailPlaceholder}\n                          disabled={isPending}\n                          required\n                          onBlur={field.handleBlur}\n                          onChange={(event) =>\n                            field.handleChange(event.target.value)\n                          }\n                        />\n                      ) : (\n                        <Skeleton>\n                          <Input className=\"invisible\" />\n                        </Skeleton>\n                      )}\n\n                      <field.AuthFormFieldError />\n                    </Field>\n                  )}\n                </form.AppField>\n              ) : (\n                <div className=\"flex flex-col gap-3\">\n                  <p className=\"text-muted-foreground text-sm\">\n                    {emailOtpLocalization.confirmEmailDescription.replace(\n                      \"{{email}}\",\n                      codeTarget ?? \"\"\n                    )}\n                  </p>\n\n                  <form.AppField name=\"code\">\n                    {(field) => (\n                      <OtpField\n                        autoFocus\n                        disabled={isPending}\n                        label={\n                          state.step === \"currentCode\"\n                            ? emailOtpLocalization.confirmCurrentEmail\n                            : emailOtpLocalization.confirmNewEmail\n                        }\n                        length={otpLength}\n                        name=\"otp\"\n                        value={field.state.value}\n                        onChange={field.handleChange}\n                        onComplete={() => void submitAuthForm(form)}\n                      />\n                    )}\n                  </form.AppField>\n\n                  <form.AuthFormServerError />\n\n                  {codeTarget && (\n                    <OpenEmailButton email={codeTarget} variant=\"secondary\" />\n                  )}\n                </div>\n              )}\n            </CardContent>\n\n            <CardFooter className=\"gap-3\">\n              {state.step !== \"email\" && (\n                <Button\n                  type=\"button\"\n                  size=\"sm\"\n                  variant=\"outline\"\n                  disabled={isPending}\n                  onClick={resetFlow}\n                >\n                  {localization.settings.cancel}\n                </Button>\n              )}\n\n              <form.AuthFormSubmitButton\n                isPending={isPending}\n                size=\"sm\"\n                disabled={\n                  isPending ||\n                  !session ||\n                  (state.step !== \"email\" && !codeComplete)\n                }\n              >\n                {state.step === \"email\"\n                  ? localization.settings.updateEmail\n                  : emailOtpLocalization.verifyCode}\n              </form.AuthFormSubmitButton>\n            </CardFooter>\n          </Card>\n        </form.AuthFormRoot>\n      </form.AppForm>\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "@components/auth/email-otp/change-email-otp.tsx"
    },
    {
      "path": "examples/start-shadcn-example/src/components/auth/email-otp/email-otp-button.tsx",
      "content": "\"use client\"\n\nimport {\n  type AuthView,\n  authMutationKeys,\n  getAuthLinkURL\n} from \"@better-auth-ui/core\"\nimport { useAuth, useAuthPlugin } from \"@better-auth-ui/react\"\nimport { useIsMutating } from \"@tanstack/react-query\"\nimport { KeyRound, Lock } from \"lucide-react\"\n\nimport { buttonVariants } from \"@/components/ui/button\"\nimport { emailOtpPlugin } from \"@/lib/auth/email-otp-plugin\"\nimport { cn } from \"cn\"\n\nexport type EmailOtpButtonProps = {\n  /** @remarks `AuthView` */\n  view?: AuthView\n}\n\n/**\n * Toggle button between password sign-in and the emailed-code route.\n *\n * @param view - Current auth view. On `\"emailOtp\"` this links back to password sign-in.\n */\nexport function EmailOtpButton({ view }: EmailOtpButtonProps) {\n  const {\n    basePaths,\n    emailAndPassword,\n    localization,\n    redirectTo,\n    viewPaths,\n    Link\n  } = useAuth()\n  const { localization: emailOtpLocalization, viewPaths: emailOtpViewPaths } =\n    useAuthPlugin(emailOtpPlugin)\n\n  const signInMutating = useIsMutating({\n    mutationKey: authMutationKeys.signIn.all\n  })\n  const signUpMutating = useIsMutating({\n    mutationKey: authMutationKeys.signUp.all\n  })\n  const isPending = signInMutating + signUpMutating > 0\n\n  const isEmailOtpView = view === \"emailOtp\"\n\n  // On the code view this button switches back to password sign-in. With\n  // password auth disabled there's nowhere to switch to, so hide it.\n  if (isEmailOtpView && !emailAndPassword?.enabled) return null\n\n  return (\n    <Link\n      href={getAuthLinkURL(\n        `${basePaths.auth}/${isEmailOtpView ? viewPaths.auth.signIn : emailOtpViewPaths.auth.emailOtp}`,\n        redirectTo\n      )}\n      aria-disabled={isPending || undefined}\n      tabIndex={isPending ? -1 : undefined}\n      onClick={(event) => {\n        if (isPending) event.preventDefault()\n      }}\n      className={cn(\n        buttonVariants({ variant: \"outline\" }),\n        \"w-full\",\n        isPending && \"opacity-50 pointer-events-none\"\n      )}\n    >\n      {isEmailOtpView ? <Lock /> : <KeyRound />}\n\n      {localization.auth.continueWith.replace(\n        \"{{provider}}\",\n        isEmailOtpView\n          ? localization.auth.password\n          : emailOtpLocalization.emailOtp\n      )}\n    </Link>\n  )\n}\n",
      "type": "registry:component",
      "target": "@components/auth/email-otp/email-otp-button.tsx"
    },
    {
      "path": "examples/start-shadcn-example/src/components/auth/email-otp/email-otp.tsx",
      "content": "\"use client\"\n\nimport { authMutationKeys } from \"@better-auth-ui/core\"\nimport type { EmailOtpAuthClient } from \"@better-auth-ui/core/plugins/email-otp\"\nimport { getSsoFallbackEmail } from \"@better-auth-ui/core/plugins/sso\"\nimport { useAuth, useAuthPlugin } from \"@better-auth-ui/react\"\nimport {\n  useSendVerificationOtp,\n  useSignInEmailOtp\n} from \"@better-auth-ui/react/plugins/email-otp\"\nimport { useSelector } from \"@tanstack/react-form\"\nimport { useIsMutating } from \"@tanstack/react-query\"\nimport { useState } from \"react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle\n} from \"@/components/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator\n} from \"@/components/ui/field\"\nimport { Input } from \"@/components/ui/input\"\nimport { emailOtpPlugin } from \"@/lib/auth/email-otp-plugin\"\nimport { useResendCooldown } from \"@/lib/auth/use-resend-cooldown\"\nimport { useSignInContinuation } from \"@/lib/auth/use-sign-in-continuation\"\nimport { cn } from \"cn\"\nimport { runAuthFormAction, submitAuthForm, useAuthForm } from \"../auth-form\"\nimport { OpenEmailButton } from \"../open-email-button\"\nimport { OtpField } from \"../otp-field\"\nimport { ProviderButtons, type SocialLayout } from \"../provider-buttons\"\nimport { ReauthenticationNotice } from \"../reauthentication\"\n\nexport type EmailOtpProps = {\n  className?: string\n  socialLayout?: SocialLayout\n  socialPosition?: \"top\" | \"bottom\"\n}\n\n/**\n * Passwordless sign-in with an emailed one-time code.\n *\n * Two steps on one route: enter an email, then enter the code that arrives.\n * The email step never reveals whether an account exists — the server decides\n * whether the code creates an account, mirroring `emailOTP({ disableSignUp })`.\n *\n * @param socialLayout - Provider button layout.\n * @param socialPosition - `\"top\"` or `\"bottom\"`. Defaults to `\"bottom\"`.\n */\nexport function EmailOtp({\n  className,\n  socialLayout,\n  socialPosition = \"bottom\"\n}: EmailOtpProps) {\n  const {\n    authClient,\n    basePaths,\n    emailAndPassword,\n    localization,\n    plugins,\n    socialProviders,\n    viewPaths,\n    Link\n  } = useAuth()\n  const { localization: emailOtpLocalization, otpLength } =\n    useAuthPlugin(emailOtpPlugin)\n\n  const otpClient = authClient as EmailOtpAuthClient\n  const continueSignIn = useSignInContinuation()\n  const { cooldown, isCoolingDown, startCooldown } = useResendCooldown()\n\n  const [codeSent, setCodeSent] = useState(false)\n\n  const { mutateAsync: sendVerificationOtp, isPending: isSending } =\n    useSendVerificationOtp(otpClient, {\n      onSuccess: () => {\n        setCodeSent(true)\n        startCooldown()\n      }\n    })\n\n  const { mutateAsync: signInEmailOtp, isPending: isSigningIn } =\n    useSignInEmailOtp(otpClient, {\n      onError: () => form.setFieldValue(\"code\", \"\"),\n      onSuccess: (data) => continueSignIn(data)\n    })\n\n  const signInMutating = useIsMutating({\n    mutationKey: authMutationKeys.signIn.all\n  })\n  const signUpMutating = useIsMutating({\n    mutationKey: authMutationKeys.signUp.all\n  })\n  const isPending = signInMutating + signUpMutating > 0 || isSending\n\n  const sendCode = async () =>\n    await sendVerificationOtp({\n      email: form.state.values.email,\n      type: \"sign-in\"\n    })\n  const verifyCode = async (completedCode: string) => {\n    if (isPending || isSigningIn) return\n\n    await signInEmailOtp({\n      email: form.state.values.email,\n      otp: completedCode\n    })\n  }\n\n  const form = useAuthForm({\n    defaultValues: { code: \"\", email: getSsoFallbackEmail() },\n    onSubmit: async ({ value }) => {\n      if (!codeSent) {\n        await sendVerificationOtp({ email: value.email, type: \"sign-in\" })\n        return\n      }\n\n      await verifyCode(value.code)\n    }\n  })\n  const codeComplete = useSelector(\n    form.store,\n    (state) => state.values.code.length === otpLength\n  )\n  const email = useSelector(form.store, (state) => state.values.email)\n\n  const showSeparator = socialProviders && socialProviders.length > 0\n\n  return (\n    <Card className={cn(\"w-full max-w-sm\", className)}>\n      <ReauthenticationNotice />\n      <CardHeader>\n        <CardTitle className=\"text-xl\">{localization.auth.signIn}</CardTitle>\n\n        {codeSent && (\n          <CardDescription>\n            {emailOtpLocalization.codeSentTo.replace(\"{{email}}\", email)}\n          </CardDescription>\n        )}\n      </CardHeader>\n\n      <CardContent>\n        <div className=\"flex flex-col gap-6\">\n          {socialPosition === \"top\" && !codeSent && (\n            <>\n              {socialProviders && socialProviders.length > 0 && (\n                <ProviderButtons socialLayout={socialLayout} view=\"emailOtp\" />\n              )}\n\n              {showSeparator && (\n                <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-card m-0 text-xs flex items-center\">\n                  {localization.auth.or}\n                </FieldSeparator>\n              )}\n            </>\n          )}\n\n          <form.AppForm>\n            <form.AuthFormRoot>\n              <FieldGroup>\n                {codeSent ? (\n                  <form.AppField name=\"code\">\n                    {(field) => (\n                      <OtpField\n                        autoFocus\n                        disabled={isPending || isSigningIn}\n                        label={emailOtpLocalization.code}\n                        length={otpLength}\n                        name={field.name}\n                        value={field.state.value}\n                        onChange={field.handleChange}\n                        onComplete={() => void submitAuthForm(form)}\n                      />\n                    )}\n                  </form.AppField>\n                ) : (\n                  <form.AppField name=\"email\">\n                    {(field) => (\n                      <Field>\n                        <FieldLabel htmlFor=\"email\">\n                          {localization.auth.email}\n                        </FieldLabel>\n                        <Input\n                          id=\"email\"\n                          name={field.name}\n                          type=\"email\"\n                          autoComplete=\"email\"\n                          value={field.state.value}\n                          onBlur={field.handleBlur}\n                          onChange={(event) =>\n                            field.handleChange(event.target.value)\n                          }\n                          placeholder={localization.auth.emailPlaceholder}\n                          required\n                          disabled={isPending}\n                        />\n                        <field.AuthFormFieldError />\n                      </Field>\n                    )}\n                  </form.AppField>\n                )}\n\n                <form.AuthFormServerError />\n\n                <div className=\"flex flex-col gap-3\">\n                  <form.AuthFormSubmitButton\n                    isPending={isSending || isSigningIn}\n                    disabled={\n                      isPending || isSigningIn || (codeSent && !codeComplete)\n                    }\n                  >\n                    {codeSent\n                      ? emailOtpLocalization.verifyCode\n                      : emailOtpLocalization.sendCode}\n                  </form.AuthFormSubmitButton>\n\n                  {codeSent ? (\n                    <>\n                      <OpenEmailButton email={email} variant=\"secondary\" />\n\n                      <Button\n                        type=\"button\"\n                        variant=\"outline\"\n                        disabled={isPending || isSigningIn || isCoolingDown}\n                        onClick={() => void runAuthFormAction(form, sendCode)}\n                      >\n                        {isCoolingDown\n                          ? localization.auth.resendIn.replace(\n                              \"{{seconds}}\",\n                              String(cooldown)\n                            )\n                          : localization.auth.resend}\n                      </Button>\n\n                      <Button\n                        type=\"button\"\n                        variant=\"ghost\"\n                        disabled={isPending || isSigningIn}\n                        onClick={() => {\n                          setCodeSent(false)\n                          form.setFieldValue(\"code\", \"\")\n                        }}\n                      >\n                        {emailOtpLocalization.useDifferentEmail}\n                      </Button>\n                    </>\n                  ) : (\n                    plugins.flatMap((plugin) =>\n                      (plugin.authButtons ?? []).map((AuthButton, index) => (\n                        <AuthButton\n                          key={`${plugin.id}-${index.toString()}`}\n                          view=\"emailOtp\"\n                        />\n                      ))\n                    )\n                  )}\n                </div>\n              </FieldGroup>\n            </form.AuthFormRoot>\n          </form.AppForm>\n\n          {socialPosition === \"bottom\" && !codeSent && (\n            <>\n              {showSeparator && (\n                <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-card text-xs flex items-center\">\n                  {localization.auth.or}\n                </FieldSeparator>\n              )}\n\n              {socialProviders && socialProviders.length > 0 && (\n                <ProviderButtons socialLayout={socialLayout} view=\"emailOtp\" />\n              )}\n            </>\n          )}\n        </div>\n\n        {emailAndPassword?.enabled && (\n          <div className=\"flex flex-col gap-3 items-center w-full mt-4\">\n            <FieldDescription className=\"text-center\">\n              {localization.auth.needToCreateAnAccount}{\" \"}\n              <Link\n                href={`${basePaths.auth}/${viewPaths.auth.signUp}`}\n                className=\"underline underline-offset-4\"\n              >\n                {localization.auth.signUp}\n              </Link>\n            </FieldDescription>\n          </div>\n        )}\n      </CardContent>\n    </Card>\n  )\n}\n",
      "type": "registry:component",
      "target": "@components/auth/email-otp/email-otp.tsx"
    },
    {
      "path": "examples/start-shadcn-example/src/components/auth/email-otp/forgot-password-otp.tsx",
      "content": "\"use client\"\n\nimport { getAuthLinkURL, validateEmailAddress } from \"@better-auth-ui/core\"\nimport type { EmailOtpAuthClient } from \"@better-auth-ui/core/plugins/email-otp\"\nimport { useAuth, useAuthPlugin, useFetchOptions } from \"@better-auth-ui/react\"\nimport { useRequestPasswordResetOtp } from \"@better-auth-ui/react/plugins/email-otp\"\n\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel\n} from \"@/components/ui/field\"\nimport { Input } from \"@/components/ui/input\"\nimport { emailOtpPlugin } from \"@/lib/auth/email-otp-plugin\"\nimport { cn } from \"cn\"\nimport { isAuthFormFieldInvalid, useAuthForm } from \"../auth-form\"\n\n/** `sessionStorage` key the reset-code form reads the pending address from. */\nexport const RESET_PASSWORD_OTP_STORAGE_KEY =\n  \"better-auth-ui.reset-password-otp\"\n\nexport type ForgotPasswordOtpProps = {\n  className?: string\n}\n\n/**\n * Request a password-reset code instead of a reset link.\n *\n * Replaces the built-in `<ForgotPassword />` view when the email-OTP plugin\n * runs with `passwordReset: true`. On success the address is stored and the\n * user continues on `/auth/reset-password`, which asks for the code and the\n * new password — the reset-link-sent view is skipped entirely.\n *\n * @param className - Additional CSS classes applied to the card.\n */\nexport function ForgotPasswordOtp({ className }: ForgotPasswordOtpProps) {\n  const {\n    authClient,\n    basePaths,\n    localization,\n    navigate,\n    plugins,\n    redirectTo,\n    viewPaths,\n    Link\n  } = useAuth()\n  const { localization: emailOtpLocalization } = useAuthPlugin(emailOtpPlugin)\n\n  const { fetchOptions, resetFetchOptions } = useFetchOptions()\n\n  const { mutateAsync: requestPasswordResetOtp, isPending } =\n    useRequestPasswordResetOtp(authClient as EmailOtpAuthClient, {\n      onError: () => resetFetchOptions(),\n      onSuccess: (_data, { email }) => {\n        sessionStorage.setItem(RESET_PASSWORD_OTP_STORAGE_KEY, email)\n        navigate({ to: `${basePaths.auth}/${viewPaths.auth.resetPassword}` })\n      }\n    })\n\n  const form = useAuthForm({\n    defaultValues: { email: \"\" },\n    onSubmit: async ({ value }) =>\n      await requestPasswordResetOtp({ email: value.email, fetchOptions })\n  })\n\n  const Captcha = plugins.find(\n    (plugin) => plugin.captchaComponent\n  )?.captchaComponent\n\n  return (\n    <Card className={cn(\"w-full max-w-sm\", className)}>\n      <CardHeader>\n        <CardTitle className=\"text-xl\">\n          {localization.auth.forgotPassword}\n        </CardTitle>\n      </CardHeader>\n\n      <CardContent>\n        <form.AppForm>\n          <form.AuthFormRoot>\n            <FieldGroup>\n              <form.AppField\n                name=\"email\"\n                validators={{\n                  onChange: ({ value }) =>\n                    validateEmailAddress(value, {\n                      invalidMessage: localization.auth.invalidEmail,\n                      requiredMessage: localization.auth.fieldRequired\n                    })\n                }}\n              >\n                {(field) => {\n                  const isInvalid = isAuthFormFieldInvalid(field.state.meta)\n                  return (\n                    <Field data-invalid={isInvalid}>\n                      <FieldLabel htmlFor=\"email\">\n                        {localization.auth.email}\n                      </FieldLabel>\n                      <Input\n                        id=\"email\"\n                        name={field.name}\n                        type=\"email\"\n                        autoComplete=\"email\"\n                        placeholder={localization.auth.emailPlaceholder}\n                        required\n                        disabled={isPending}\n                        value={field.state.value}\n                        onBlur={field.handleBlur}\n                        onChange={(event) =>\n                          field.handleChange(event.target.value)\n                        }\n                        aria-invalid={isInvalid}\n                      />\n                      <field.AuthFormFieldError />\n                    </Field>\n                  )\n                }}\n              </form.AppField>\n\n              {Captcha && <div className=\"flex justify-center\">{Captcha}</div>}\n\n              <form.AuthFormServerError />\n\n              <form.AuthFormSubmitButton\n                isPending={isPending}\n                disabled={isPending}\n              >\n                {emailOtpLocalization.sendCode}\n              </form.AuthFormSubmitButton>\n            </FieldGroup>\n          </form.AuthFormRoot>\n        </form.AppForm>\n\n        <div className=\"flex flex-col gap-3 items-center w-full mt-4\">\n          <FieldDescription className=\"text-center\">\n            {localization.auth.rememberYourPassword}{\" \"}\n            <Link\n              href={getAuthLinkURL(\n                `${basePaths.auth}/${viewPaths.auth.signIn}`,\n                redirectTo\n              )}\n              className=\"underline underline-offset-4\"\n            >\n              {localization.auth.signIn}\n            </Link>\n          </FieldDescription>\n        </div>\n      </CardContent>\n    </Card>\n  )\n}\n",
      "type": "registry:component",
      "target": "@components/auth/email-otp/forgot-password-otp.tsx"
    },
    {
      "path": "examples/start-shadcn-example/src/components/auth/email-otp/reset-password-otp.tsx",
      "content": "\"use client\"\n\nimport {\n  getAuthLinkURL,\n  isPasswordCompromisedError,\n  validateEmailAddress,\n  validateMatchingValue,\n  validateStringLength\n} from \"@better-auth-ui/core\"\nimport type { EmailOtpAuthClient } from \"@better-auth-ui/core/plugins/email-otp\"\nimport { useAuth, useAuthPlugin } from \"@better-auth-ui/react\"\nimport { useResetPasswordOtp } from \"@better-auth-ui/react/plugins/email-otp\"\nimport { useSelector } from \"@tanstack/react-form\"\nimport { Eye, EyeOff } from \"lucide-react\"\nimport { useEffect, useState } from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle\n} from \"@/components/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel\n} from \"@/components/ui/field\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput\n} from \"@/components/ui/input-group\"\nimport { emailOtpPlugin } from \"@/lib/auth/email-otp-plugin\"\nimport { cn } from \"cn\"\nimport {\n  isAuthFormFieldInvalid,\n  setAuthFormServerError,\n  submitAuthForm,\n  useAuthForm\n} from \"../auth-form\"\nimport { OpenEmailButton } from \"../open-email-button\"\nimport { OtpField } from \"../otp-field\"\nimport { PasswordStrengthMeter } from \"../password-strength-meter\"\nimport { useIsHydrated } from \"../use-is-hydrated\"\nimport { RESET_PASSWORD_OTP_STORAGE_KEY } from \"./forgot-password-otp\"\n\nexport type ResetPasswordOtpProps = {\n  className?: string\n}\n\n/**\n * Reset a password with an emailed code.\n *\n * Replaces the built-in `<ResetPassword />` view when the email-OTP plugin\n * runs with `passwordReset: true`. There is no token in the URL — the code\n * and the new password are submitted together. The address comes from the\n * forgot-password step, and is asked for again when it isn't there (e.g. the\n * user finishes on another tab).\n *\n * @param className - Additional CSS classes applied to the card.\n */\nexport function ResetPasswordOtp({ className }: ResetPasswordOtpProps) {\n  const {\n    authClient,\n    basePaths,\n    emailAndPassword,\n    localization,\n    navigate,\n    redirectTo,\n    viewPaths,\n    Link\n  } = useAuth()\n  const { localization: emailOtpLocalization, otpLength } =\n    useAuthPlugin(emailOtpPlugin)\n\n  const isHydrated = useIsHydrated()\n  const initialEmail =\n    (isHydrated && sessionStorage.getItem(RESET_PASSWORD_OTP_STORAGE_KEY)) || \"\"\n  const [hasStoredEmail, setHasStoredEmail] = useState(Boolean(initialEmail))\n  const [isPasswordVisible, setIsPasswordVisible] = useState(false)\n\n  const { mutateAsync: resetPasswordOtp, isPending } = useResetPasswordOtp(\n    authClient as EmailOtpAuthClient,\n    {\n      onError: (error) => {\n        // The haveIBeenPwned plugin rejects on the password itself, so it\n        // belongs against the field rather than in a toast.\n        if (isPasswordCompromisedError(error)) {\n          setAuthFormServerError(\n            form,\n            { fields: { password: localization.auth.passwordCompromised } },\n            localization.auth.passwordCompromised\n          )\n        }\n        form.setFieldValue(\"code\", \"\")\n      },\n      onSuccess: () => {\n        sessionStorage.removeItem(RESET_PASSWORD_OTP_STORAGE_KEY)\n        toast.success(localization.auth.passwordResetSuccess)\n        navigate({ to: `${basePaths.auth}/${viewPaths.auth.signIn}` })\n      }\n    }\n  )\n\n  const validatePassword = (value: string) =>\n    validateStringLength(value, {\n      maxLength: emailAndPassword?.maxPasswordLength,\n      maxLengthMessage: localization.auth.tooLong.replace(\n        \"{{max}}\",\n        String(emailAndPassword?.maxPasswordLength)\n      ),\n      minLength: emailAndPassword?.minPasswordLength,\n      minLengthMessage: localization.auth.tooShort.replace(\n        \"{{min}}\",\n        String(emailAndPassword?.minPasswordLength)\n      ),\n      requiredMessage: localization.auth.fieldRequired\n    })\n\n  const form = useAuthForm({\n    defaultValues: {\n      code: \"\",\n      confirmPassword: \"\",\n      email: initialEmail,\n      password: \"\"\n    },\n    onSubmit: async ({ value }) => {\n      await resetPasswordOtp({\n        email: value.email,\n        otp: value.code,\n        password: value.password\n      })\n    }\n  })\n  const email = useSelector(form.store, (state) => state.values.email)\n\n  useEffect(() => {\n    const storedEmail =\n      sessionStorage.getItem(RESET_PASSWORD_OTP_STORAGE_KEY) ?? \"\"\n    form.setFieldValue(\"email\", storedEmail)\n    setHasStoredEmail(Boolean(storedEmail))\n  }, [form.setFieldValue])\n\n  return (\n    <Card className={cn(\"w-full max-w-sm\", className)}>\n      <CardHeader>\n        <CardTitle className=\"text-xl font-semibold\">\n          {localization.auth.resetPassword}\n        </CardTitle>\n\n        {hasStoredEmail && email && (\n          <CardDescription>\n            {emailOtpLocalization.codeSentTo.replace(\"{{email}}\", email)}\n          </CardDescription>\n        )}\n      </CardHeader>\n\n      <CardContent>\n        <form.AppForm>\n          <form.AuthFormRoot>\n            <FieldGroup>\n              {!hasStoredEmail && (\n                <form.AppField\n                  name=\"email\"\n                  validators={{\n                    onChange: ({ value }) =>\n                      validateEmailAddress(value, {\n                        invalidMessage: localization.auth.invalidEmail,\n                        requiredMessage: localization.auth.fieldRequired\n                      })\n                  }}\n                >\n                  {(field) => (\n                    <field.AuthFormTextField\n                      autoComplete=\"email\"\n                      disabled={isPending}\n                      id=\"email\"\n                      label={localization.auth.email}\n                      placeholder={localization.auth.emailPlaceholder}\n                      required\n                      type=\"email\"\n                    />\n                  )}\n                </form.AppField>\n              )}\n\n              <form.AppField\n                name=\"code\"\n                validators={{\n                  onChange: ({ value }) =>\n                    value.length === otpLength\n                      ? undefined\n                      : emailOtpLocalization.codeLengthMismatch.replace(\n                          \"{{length}}\",\n                          String(otpLength)\n                        )\n                }}\n              >\n                {(field) => (\n                  <OtpField\n                    autoFocus={hasStoredEmail}\n                    disabled={isPending}\n                    label={emailOtpLocalization.code}\n                    length={otpLength}\n                    name=\"otp\"\n                    value={field.state.value}\n                    onChange={field.handleChange}\n                    onComplete={() => void submitAuthForm(form)}\n                  />\n                )}\n              </form.AppField>\n\n              <form.AppField\n                name=\"password\"\n                validators={{\n                  onChange: ({ value }) => validatePassword(value)\n                }}\n              >\n                {(field) => (\n                  <Field\n                    data-invalid={isAuthFormFieldInvalid(field.state.meta)}\n                  >\n                    <FieldLabel htmlFor=\"password\">\n                      {localization.auth.newPassword}\n                    </FieldLabel>\n\n                    <InputGroup>\n                      <InputGroupInput\n                        id=\"password\"\n                        name={field.name}\n                        type={isPasswordVisible ? \"text\" : \"password\"}\n                        autoComplete=\"new-password\"\n                        placeholder={localization.auth.newPasswordPlaceholder}\n                        required\n                        minLength={emailAndPassword?.minPasswordLength}\n                        maxLength={emailAndPassword?.maxPasswordLength}\n                        disabled={isPending}\n                        value={field.state.value}\n                        onBlur={field.handleBlur}\n                        onChange={(event) =>\n                          field.handleChange(event.target.value)\n                        }\n                        aria-invalid={isAuthFormFieldInvalid(field.state.meta)}\n                      />\n\n                      <InputGroupAddon align=\"inline-end\">\n                        <InputGroupButton\n                          size=\"icon-xs\"\n                          aria-label={\n                            isPasswordVisible\n                              ? localization.auth.hidePassword\n                              : localization.auth.showPassword\n                          }\n                          title={\n                            isPasswordVisible\n                              ? localization.auth.hidePassword\n                              : localization.auth.showPassword\n                          }\n                          onClick={() =>\n                            setIsPasswordVisible((visible) => !visible)\n                          }\n                        >\n                          {isPasswordVisible ? <EyeOff /> : <Eye />}\n                        </InputGroupButton>\n                      </InputGroupAddon>\n                    </InputGroup>\n\n                    <field.AuthFormFieldError />\n\n                    <PasswordStrengthMeter password={field.state.value} />\n                  </Field>\n                )}\n              </form.AppField>\n\n              {emailAndPassword?.confirmPassword && (\n                <form.AppField\n                  name=\"confirmPassword\"\n                  validators={{\n                    onChangeListenTo: [\"password\"],\n                    onChange: ({ value, fieldApi }) =>\n                      validateMatchingValue(\n                        value,\n                        fieldApi.form.getFieldValue(\"password\"),\n                        localization.auth.passwordsDoNotMatch\n                      )\n                  }}\n                >\n                  {(field) => (\n                    <Field\n                      data-invalid={isAuthFormFieldInvalid(field.state.meta)}\n                    >\n                      <FieldLabel htmlFor=\"confirmPassword\">\n                        {localization.auth.confirmPassword}\n                      </FieldLabel>\n\n                      <Input\n                        id=\"confirmPassword\"\n                        name={field.name}\n                        type=\"password\"\n                        autoComplete=\"new-password\"\n                        placeholder={\n                          localization.auth.confirmPasswordPlaceholder\n                        }\n                        required\n                        minLength={emailAndPassword?.minPasswordLength}\n                        maxLength={emailAndPassword?.maxPasswordLength}\n                        disabled={isPending}\n                        value={field.state.value}\n                        onBlur={field.handleBlur}\n                        onChange={(event) =>\n                          field.handleChange(event.target.value)\n                        }\n                        aria-invalid={isAuthFormFieldInvalid(field.state.meta)}\n                      />\n\n                      <field.AuthFormFieldError />\n                    </Field>\n                  )}\n                </form.AppField>\n              )}\n\n              <div className=\"flex flex-col gap-3\">\n                <form.AuthFormSubmitButton disabled={isPending}>\n                  {localization.auth.resetPassword}\n                </form.AuthFormSubmitButton>\n\n                {email && <OpenEmailButton email={email} variant=\"secondary\" />}\n              </div>\n              <form.AuthFormServerError />\n            </FieldGroup>\n          </form.AuthFormRoot>\n        </form.AppForm>\n\n        <div className=\"flex flex-col gap-3 items-center w-full mt-4\">\n          <FieldDescription className=\"text-center\">\n            {localization.auth.rememberYourPassword}{\" \"}\n            <Link\n              href={getAuthLinkURL(\n                `${basePaths.auth}/${viewPaths.auth.signIn}`,\n                redirectTo\n              )}\n              className=\"underline underline-offset-4\"\n            >\n              {localization.auth.signIn}\n            </Link>\n          </FieldDescription>\n        </div>\n      </CardContent>\n    </Card>\n  )\n}\n",
      "type": "registry:component",
      "target": "@components/auth/email-otp/reset-password-otp.tsx"
    },
    {
      "path": "examples/start-shadcn-example/src/components/auth/email-otp/verify-email-otp.tsx",
      "content": "\"use client\"\n\nimport { getAuthLinkURL } from \"@better-auth-ui/core\"\nimport type { EmailOtpAuthClient } from \"@better-auth-ui/core/plugins/email-otp\"\nimport { useAuth, useAuthPlugin } from \"@better-auth-ui/react\"\nimport {\n  useSendVerificationOtp,\n  useVerifyEmailOtp\n} from \"@better-auth-ui/react/plugins/email-otp\"\nimport { useSelector } from \"@tanstack/react-form\"\nimport { useEffect, useState } from \"react\"\nimport { toast } from \"sonner\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle\n} from \"@/components/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel\n} from \"@/components/ui/field\"\nimport { Input } from \"@/components/ui/input\"\nimport { emailOtpPlugin } from \"@/lib/auth/email-otp-plugin\"\nimport {\n  RESEND_COOLDOWN_SECONDS,\n  useResendCooldown\n} from \"@/lib/auth/use-resend-cooldown\"\nimport { cn } from \"cn\"\nimport { runAuthFormAction, submitAuthForm, useAuthForm } from \"../auth-form\"\nimport { OpenEmailButton } from \"../open-email-button\"\nimport { OtpField } from \"../otp-field\"\nimport { useIsHydrated } from \"../use-is-hydrated\"\n\n/** `sessionStorage` key the sign-up and sign-in flows store the pending address under. */\nexport const VERIFY_EMAIL_STORAGE_KEY = \"better-auth-ui.verify-email\"\n\nexport type VerifyEmailOtpProps = {\n  className?: string\n}\n\n/**\n * Verify an email address with a code instead of a link.\n *\n * Replaces the built-in `<VerifyEmail />` view when the email-OTP plugin runs\n * with `emailVerification: true`. The address comes from session storage when\n * sign-up or sign-in put it there; otherwise the user types it and requests a\n * code. Sign-up already triggered a send, so the resend button starts on\n * cooldown just like the link-based view.\n *\n * @param className - Additional CSS classes applied to the card.\n */\nexport function VerifyEmailOtp({ className }: VerifyEmailOtpProps) {\n  const {\n    authClient,\n    basePaths,\n    localization,\n    navigate,\n    redirectTo,\n    viewPaths,\n    Link\n  } = useAuth()\n  const { localization: emailOtpLocalization, otpLength } =\n    useAuthPlugin(emailOtpPlugin)\n\n  const otpClient = authClient as EmailOtpAuthClient\n  const isHydrated = useIsHydrated()\n\n  const [email, setEmail] = useState(\n    (isHydrated && sessionStorage.getItem(VERIFY_EMAIL_STORAGE_KEY)) || \"\"\n  )\n\n  const { cooldown, isCoolingDown, startCooldown } = useResendCooldown()\n\n  // Sign-up already sent a code to this address, so restoring it also starts\n  // the cooldown — otherwise the hydrated render would offer an immediate\n  // resend and walk straight into the server's rate limit.\n  useEffect(() => {\n    const pendingEmail = sessionStorage.getItem(VERIFY_EMAIL_STORAGE_KEY) ?? \"\"\n    setEmail(pendingEmail)\n\n    if (pendingEmail) startCooldown(RESEND_COOLDOWN_SECONDS)\n  }, [startCooldown])\n\n  const { mutateAsync: sendVerificationOtp, isPending: isSending } =\n    useSendVerificationOtp(otpClient, {\n      onSuccess: (_data, { email: sentTo }) => {\n        sessionStorage.setItem(VERIFY_EMAIL_STORAGE_KEY, sentTo)\n        setEmail(sentTo)\n        startCooldown()\n        toast.success(emailOtpLocalization.codeSent)\n      }\n    })\n\n  const { mutateAsync: verifyEmailOtp, isPending: isVerifying } =\n    useVerifyEmailOtp(otpClient, {\n      onError: () => form.setFieldValue(\"code\", \"\"),\n      onSuccess: () => {\n        sessionStorage.removeItem(VERIFY_EMAIL_STORAGE_KEY)\n        toast.success(emailOtpLocalization.emailVerified)\n        navigate({ to: redirectTo })\n      }\n    })\n\n  const isPending = isSending || isVerifying\n\n  const verifyCode = async (completedCode: string) => {\n    if (isPending || !email) return\n\n    await verifyEmailOtp({ email, otp: completedCode })\n  }\n\n  const form = useAuthForm({\n    defaultValues: { code: \"\", email: \"\" },\n    onSubmit: async ({ value }) => {\n      if (!email) {\n        await sendVerificationOtp({\n          email: value.email,\n          type: \"email-verification\"\n        })\n        return\n      }\n      await verifyCode(value.code)\n    }\n  })\n  const codeComplete = useSelector(\n    form.store,\n    (state) => state.values.code.length === otpLength\n  )\n\n  return (\n    <Card className={cn(\"w-full max-w-sm\", className)}>\n      <CardHeader>\n        <CardTitle className=\"text-xl\">\n          {localization.auth.verifyEmail}\n        </CardTitle>\n\n        {email && (\n          <CardDescription>\n            {emailOtpLocalization.codeSentTo.replace(\"{{email}}\", email)}\n          </CardDescription>\n        )}\n      </CardHeader>\n\n      <CardContent>\n        <form.AppForm>\n          <form.AuthFormRoot>\n            <FieldGroup>\n              {email ? (\n                <form.AppField name=\"code\">\n                  {(field) => (\n                    <OtpField\n                      autoFocus\n                      disabled={isPending}\n                      label={emailOtpLocalization.code}\n                      length={otpLength}\n                      name=\"otp\"\n                      value={field.state.value}\n                      onChange={field.handleChange}\n                      onComplete={() => void submitAuthForm(form)}\n                    />\n                  )}\n                </form.AppField>\n              ) : (\n                <form.AppField name=\"email\">\n                  {(field) => (\n                    <Field>\n                      <FieldLabel htmlFor=\"email\">\n                        {localization.auth.email}\n                      </FieldLabel>\n\n                      <Input\n                        id=\"email\"\n                        name={field.name}\n                        type=\"email\"\n                        autoComplete=\"email\"\n                        placeholder={localization.auth.emailPlaceholder}\n                        required\n                        disabled={isPending}\n                        value={field.state.value}\n                        onBlur={field.handleBlur}\n                        onChange={(event) =>\n                          field.handleChange(event.target.value)\n                        }\n                      />\n\n                      <field.AuthFormFieldError />\n                    </Field>\n                  )}\n                </form.AppField>\n              )}\n\n              <form.AuthFormServerError />\n\n              <div className=\"flex flex-col gap-3\">\n                <form.AuthFormSubmitButton\n                  isPending={isPending}\n                  disabled={isPending || (Boolean(email) && !codeComplete)}\n                >\n                  {email\n                    ? emailOtpLocalization.verifyCode\n                    : emailOtpLocalization.sendCode}\n                </form.AuthFormSubmitButton>\n\n                {email && <OpenEmailButton email={email} variant=\"secondary\" />}\n\n                {email && (\n                  <Button\n                    type=\"button\"\n                    variant=\"outline\"\n                    disabled={isPending || isCoolingDown}\n                    onClick={() =>\n                      void runAuthFormAction(form, () =>\n                        sendVerificationOtp({\n                          email,\n                          type: \"email-verification\"\n                        })\n                      )\n                    }\n                  >\n                    {isCoolingDown\n                      ? localization.auth.resendIn.replace(\n                          \"{{seconds}}\",\n                          String(cooldown)\n                        )\n                      : localization.auth.resend}\n                  </Button>\n                )}\n              </div>\n            </FieldGroup>\n          </form.AuthFormRoot>\n        </form.AppForm>\n\n        <div className=\"flex flex-col gap-3 items-center w-full mt-4\">\n          <FieldDescription className=\"text-center\">\n            {localization.auth.alreadyVerifiedYourEmail}{\" \"}\n            <Link\n              href={getAuthLinkURL(\n                `${basePaths.auth}/${viewPaths.auth.signIn}`,\n                redirectTo\n              )}\n              className=\"underline underline-offset-4\"\n            >\n              {localization.auth.signIn}\n            </Link>\n          </FieldDescription>\n        </div>\n      </CardContent>\n    </Card>\n  )\n}\n",
      "type": "registry:component",
      "target": "@components/auth/email-otp/verify-email-otp.tsx"
    },
    {
      "path": "examples/start-shadcn-example/src/components/auth/last-login-method/last-used-badge.tsx",
      "content": "\"use client\"\n\nimport { useLastLoginMethod } from \"@better-auth-ui/react\"\n\nimport { Badge } from \"@/components/ui/badge\"\n\nexport type LastUsedBadgeProps = {\n  /** Login method IDs that should display the indicator. */\n  method: string | string[]\n  /** Use the shorter label in constrained layouts. */\n  compact?: boolean\n  /** Float the compact indicator over the top-right edge of its container. */\n  floating?: boolean\n}\n\n/**\n * Displays an indicator when one of the supplied method IDs matches Better\n * Auth's stored last login method.\n */\nexport function LastUsedBadge({\n  method,\n  compact,\n  floating\n}: LastUsedBadgeProps) {\n  const { method: lastLoginMethod, localization } = useLastLoginMethod()\n  const methods = Array.isArray(method) ? method : [method]\n\n  if (!lastLoginMethod || !methods.includes(lastLoginMethod)) return null\n\n  return (\n    <Badge\n      className={\n        floating\n          ? \"pointer-events-none absolute top-0 right-0 z-10 translate-x-1/4 -translate-y-1/2 shadow-sm\"\n          : undefined\n      }\n      variant=\"secondary\"\n    >\n      {compact || floating ? localization.lastUsedShort : localization.lastUsed}\n    </Badge>\n  )\n}\n",
      "type": "registry:component",
      "target": "@components/auth/last-login-method/last-used-badge.tsx"
    },
    {
      "path": "examples/start-shadcn-example/src/components/auth/open-email-button.tsx",
      "content": "\"use client\"\n\nimport { createQrCodeSvgData, getEmailProviderLink } from \"@better-auth-ui/core\"\nimport { useAuth } from \"@better-auth-ui/react\"\nimport type { VariantProps } from \"class-variance-authority\"\nimport { QrCode } from \"lucide-react\"\nimport { useMemo } from \"react\"\n\nimport { buttonVariants } from \"@/components/ui/button\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger\n} from \"@/components/ui/tooltip\"\nimport { cn } from \"cn\"\n\nexport type OpenEmailButtonProps = {\n  /** Email address used to detect the provider, e.g. from the verify-email flow. */\n  email: string\n  className?: string\n  /**\n   * Button variant. Defaults to the primary style for dead-end views where\n   * opening the inbox is the only action; pass `\"secondary\"` where it sits\n   * beside a submit button that should stay the primary call to action.\n   */\n  variant?: VariantProps<typeof buttonVariants>[\"variant\"]\n}\n\n/**\n * Render a button that opens the user's email provider login page in a new\n * tab. Hovering or focusing the button reveals a QR code for opening the same\n * provider on another device.\n *\n * The provider is resolved from the email domain via the curated\n * `@mikkelscheike/email-provider-links` dataset (Gmail, Outlook, GMX, etc.).\n * Renders nothing when the domain is empty or not a known provider.\n *\n * @param email - Email address to resolve the provider from.\n * @param className - Additional CSS classes applied to the button.\n * @param variant - Button variant. Defaults to the primary style.\n * @returns The open-email button, or `null` when no provider matches.\n */\nexport function OpenEmailButton({\n  email,\n  className,\n  variant\n}: OpenEmailButtonProps) {\n  const { localization } = useAuth()\n\n  const provider = getEmailProviderLink(email)\n  const loginUrl = provider?.loginUrl\n  const qrCode = useMemo(\n    () => (loginUrl ? createQrCodeSvgData(loginUrl) : null),\n    [loginUrl]\n  )\n\n  if (!provider || !qrCode) return null\n\n  const scanLabel = localization.auth.scanToOpenEmailProvider.replace(\n    \"{{provider}}\",\n    provider.companyProvider\n  )\n\n  return (\n    <TooltipProvider>\n      <Tooltip>\n        <TooltipTrigger\n          type=\"button\"\n          className={cn(buttonVariants({ variant }), \"w-full\", className)}\n          onClick={() =>\n            window.open(provider.loginUrl, \"_blank\", \"noopener,noreferrer\")\n          }\n        >\n          {localization.auth.openEmailProvider.replace(\n            \"{{provider}}\",\n            provider.companyProvider\n          )}\n          <QrCode data-icon=\"inline-end\" />\n        </TooltipTrigger>\n        <TooltipContent\n          sideOffset={8}\n          className=\"flex-col items-center gap-2 p-3\"\n        >\n          <svg\n            viewBox={`0 0 ${qrCode.size} ${qrCode.size}`}\n            aria-hidden=\"true\"\n            focusable=\"false\"\n            className=\"size-40\"\n          >\n            <path fill=\"white\" d={`M0 0h${qrCode.size}v${qrCode.size}H0z`} />\n            <path fill=\"black\" d={qrCode.path} shapeRendering=\"crispEdges\" />\n          </svg>\n          <p className=\"max-w-40 text-center leading-snug\">{scanLabel}</p>\n        </TooltipContent>\n      </Tooltip>\n    </TooltipProvider>\n  )\n}\n",
      "type": "registry:component",
      "target": "@components/auth/open-email-button.tsx"
    },
    {
      "path": "examples/start-shadcn-example/src/components/auth/otp-field.tsx",
      "content": "\"use client\"\n\nimport { REGEXP_ONLY_DIGITS } from \"input-otp\"\nimport { useId } from \"react\"\n\nimport { Field, FieldError, FieldLabel } from \"@/components/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSlot\n} from \"@/components/ui/input-otp\"\nimport { cn } from \"cn\"\n\nexport type OtpFieldProps = {\n  /** Visible label rendered above the slots. */\n  label: string\n  /** Number of slots — keep in sync with the server's code length. */\n  length: number\n  value: string\n  onChange: (value: string) => void\n  onComplete?: (value: string) => void\n  autoFocus?: boolean\n  className?: string\n  errorMessage?: string\n  disabled?: boolean\n  name?: string\n}\n\n/** Strip everything the numeric slots can't hold — pasted codes often carry spaces or dashes. */\nfunction normalizeCode(value: string) {\n  return value.replace(/\\D/g, \"\")\n}\n\n/**\n * Labelled one-time-code input.\n *\n * Shared by every code-based flow (email OTP, two-factor challenge,\n * two-factor enrollment) so slot sizing, pasting, and error wiring behave the\n * same everywhere.\n *\n * @param label - Visible label, also used as the accessible name.\n * @param length - Number of code characters.\n * @param errorMessage - Rendered below the slots when set.\n */\nexport function OtpField({\n  autoFocus,\n  className,\n  disabled,\n  errorMessage,\n  label,\n  length,\n  name,\n  onChange,\n  onComplete,\n  value\n}: OtpFieldProps) {\n  const inputId = useId()\n\n  return (\n    <Field className={cn(className)} data-invalid={!!errorMessage}>\n      <FieldLabel htmlFor={inputId}>{label}</FieldLabel>\n\n      <InputOTP\n        aria-invalid={!!errorMessage}\n        aria-label={label}\n        autoComplete=\"one-time-code\"\n        autoFocus={autoFocus}\n        containerClassName=\"w-full justify-center\"\n        disabled={disabled}\n        id={inputId}\n        inputMode=\"numeric\"\n        maxLength={length}\n        name={name}\n        pasteTransformer={normalizeCode}\n        pattern={REGEXP_ONLY_DIGITS}\n        value={value}\n        onChange={(next) => onChange(normalizeCode(next))}\n        onComplete={(completedCode) =>\n          onComplete?.(normalizeCode(completedCode))\n        }\n      >\n        <InputOTPGroup>\n          {Array.from({ length }, (_, slotIndex) => (\n            <InputOTPSlot\n              index={slotIndex}\n              key={`otp-slot-${String(slotIndex + 1)}`}\n            />\n          ))}\n        </InputOTPGroup>\n      </InputOTP>\n\n      <FieldError>{errorMessage}</FieldError>\n    </Field>\n  )\n}\n",
      "type": "registry:component",
      "target": "@components/auth/otp-field.tsx"
    },
    {
      "path": "examples/start-shadcn-example/src/components/auth/password-strength-meter.tsx",
      "content": "\"use client\"\n\nimport {\n  evaluatePasswordStrength,\n  type PasswordStrengthLevel\n} from \"@better-auth-ui/core\"\nimport { useAuth } from \"@better-auth-ui/react\"\n\nimport { cn } from \"cn\"\n\n/** Fixed segment identities, so the bars keep their own React keys. */\nconst STRENGTH_SEGMENTS = [1, 2, 3, 4] as const\n\ntype FilledLevel = Exclude<PasswordStrengthLevel, \"empty\">\n\nconst segmentColors: Record<FilledLevel, string> = {\n  weak: \"bg-destructive\",\n  fair: \"bg-amber-500\",\n  good: \"bg-sky-500\",\n  strong: \"bg-emerald-500\"\n}\n\nexport type PasswordStrengthMeterProps = {\n  /** The password as typed. Renders nothing while it is empty. */\n  password: string\n  className?: string\n}\n\n/**\n * Four-segment strength hint shown while someone picks a new password.\n *\n * Renders nothing when `emailAndPassword.strengthMeter` is off or the field is\n * empty. The score never gates submission: your server rules stay the\n * authority on what is acceptable.\n */\nexport function PasswordStrengthMeter({\n  password,\n  className\n}: PasswordStrengthMeterProps) {\n  const { emailAndPassword, localization } = useAuth()\n\n  if (!emailAndPassword?.strengthMeter) return null\n\n  const { score, level } = evaluatePasswordStrength(password, {\n    minLength: emailAndPassword.minPasswordLength\n  })\n\n  if (level === \"empty\") return null\n\n  const levelLabels: Record<FilledLevel, string> = {\n    weak: localization.auth.passwordWeak,\n    fair: localization.auth.passwordFair,\n    good: localization.auth.passwordGood,\n    strong: localization.auth.passwordStrong\n  }\n\n  return (\n    <div className={cn(\"flex flex-col gap-1.5\", className)}>\n      {/* Decorative: the live region below is what gets announced. */}\n      <div aria-hidden=\"true\" className=\"flex gap-1\">\n        {STRENGTH_SEGMENTS.map((segment) => (\n          <span\n            key={segment}\n            className={cn(\n              \"h-1 flex-1 rounded-full bg-muted transition-colors\",\n              segment <= score && segmentColors[level]\n            )}\n          />\n        ))}\n      </div>\n\n      <p aria-live=\"polite\" className=\"text-muted-foreground text-xs\">\n        {localization.auth.passwordStrength}:{\" \"}\n        <span className=\"font-medium text-foreground\">\n          {levelLabels[level]}\n        </span>\n      </p>\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "@components/auth/password-strength-meter.tsx"
    },
    {
      "path": "examples/start-shadcn-example/src/components/auth/provider-button.tsx",
      "content": "\"use client\"\n\nimport {\n  type AuthSocialProvider,\n  type AuthView,\n  authMutationKeys,\n  getProviderId,\n  getProviderName,\n  type OAuthPopupAuthClient\n} from \"@better-auth-ui/core\"\nimport {\n  renderProviderIcon,\n  useAuth,\n  useFetchOptions,\n  useSignInOAuthPopup,\n  useSignInSocial\n} from \"@better-auth-ui/react\"\nimport { useIsMutating } from \"@tanstack/react-query\"\nimport type { ComponentProps } from \"react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Spinner } from \"@/components/ui/spinner\"\nimport { cn } from \"cn\"\nimport { LastUsedBadge } from \"./last-login-method/last-used-badge\"\n\nexport type ProviderButtonProps = {\n  provider: AuthSocialProvider\n  display?: \"full\" | \"name\" | \"icon\"\n  view?: AuthView\n} & Omit<ComponentProps<typeof Button>, \"onClick\" | \"children\" | \"disabled\">\n\n/**\n * Social provider sign-in button.\n *\n * @param provider - Provider to sign in with.\n * @param display - `\"full\"` (e.g. \"Continue with Google\"), `\"name\"` (just the provider name), or `\"icon\"` (icon only).\n */\nexport function ProviderButton({\n  provider,\n  display = \"full\",\n  view = \"signIn\",\n  variant = \"outline\",\n  className,\n  ...props\n}: ProviderButtonProps) {\n  const {\n    authClient,\n    baseURL,\n    localization,\n    navigate,\n    redirectTo,\n    socialSignInMode\n  } = useAuth()\n\n  const callbackURL = `${baseURL}${redirectTo}`\n  const { fetchOptions, resetFetchOptions } = useFetchOptions()\n\n  const { mutate: signInSocial, isPending: signInSocialPending } =\n    useSignInSocial(authClient, { onError: resetFetchOptions })\n  const { mutate: signInPopup, isPending: signInPopupPending } =\n    useSignInOAuthPopup(authClient as OAuthPopupAuthClient, {\n      onError: resetFetchOptions\n    })\n\n  const providerId = getProviderId(provider)\n  const providerIcon = renderProviderIcon(provider)\n\n  const signInMutating = useIsMutating({\n    mutationKey: authMutationKeys.signIn.all\n  })\n  const signUpMutating = useIsMutating({\n    mutationKey: authMutationKeys.signUp.all\n  })\n  const isPending = signInMutating + signUpMutating > 0\n\n  const handleSignIn = () => {\n    if (socialSignInMode === \"popup\") {\n      signInPopup(\n        {\n          provider: providerId,\n          callbackURL,\n          requestSignUp: view === \"signUp\"\n        },\n        { onSuccess: () => navigate({ to: redirectTo }) }\n      )\n      return\n    }\n\n    signInSocial({ provider: providerId, callbackURL, fetchOptions })\n  }\n\n  return (\n    <Button\n      type=\"button\"\n      variant={variant}\n      disabled={isPending}\n      onClick={handleSignIn}\n      className={cn(\"relative overflow-visible\", className)}\n      {...props}\n    >\n      {signInSocialPending || signInPopupPending ? <Spinner /> : providerIcon}\n\n      {display === \"full\"\n        ? localization.auth.continueWith.replace(\n            \"{{provider}}\",\n            getProviderName(provider)\n          )\n        : display === \"name\"\n          ? getProviderName(provider)\n          : null}\n\n      {display === \"icon\" && (\n        <span className=\"sr-only\">{getProviderName(provider)}</span>\n      )}\n\n      {view !== \"signUp\" && <LastUsedBadge method={providerId} floating />}\n    </Button>\n  )\n}\n",
      "type": "registry:component",
      "target": "@components/auth/provider-button.tsx"
    },
    {
      "path": "examples/start-shadcn-example/src/components/auth/provider-buttons.tsx",
      "content": "\"use client\"\n\nimport { type AuthView, getProviderId } from \"@better-auth-ui/core\"\nimport { useAuth } from \"@better-auth-ui/react\"\nimport { useMemo } from \"react\"\n\nimport { cn } from \"cn\"\nimport { ProviderButton } from \"./provider-button\"\n\nexport type ProviderButtonsProps = {\n  socialLayout?: SocialLayout\n  view?: AuthView\n}\n\nexport type SocialLayout = \"auto\" | \"horizontal\" | \"vertical\" | \"grid\"\n\n/**\n * Render sign-in buttons for configured social providers. Each button owns its own sign-in mutation\n * and reads the shared sign-in pending state from React Query.\n *\n * @param socialLayout - Preferred layout for the provider buttons; `\"auto\"` chooses based on the number of providers.\n */\nexport function ProviderButtons({\n  socialLayout = \"auto\",\n  view = \"signIn\"\n}: ProviderButtonsProps) {\n  const { socialProviders } = useAuth()\n\n  const resolvedSocialLayout = useMemo(() => {\n    if (socialLayout === \"auto\") {\n      if (socialProviders?.length && socialProviders.length >= 4) {\n        return \"horizontal\"\n      }\n\n      return \"vertical\"\n    }\n\n    return socialLayout\n  }, [socialLayout, socialProviders?.length])\n\n  return (\n    <div\n      className={cn(\n        \"gap-3\",\n        resolvedSocialLayout === \"grid\" && \"grid grid-cols-2\",\n        resolvedSocialLayout === \"vertical\" && \"flex flex-col\",\n        resolvedSocialLayout === \"horizontal\" && \"flex flex-row flex-wrap\"\n      )}\n    >\n      {socialProviders?.map((provider) => (\n        <ProviderButton\n          key={getProviderId(provider)}\n          provider={provider}\n          view={view}\n          display={\n            resolvedSocialLayout === \"vertical\"\n              ? \"full\"\n              : resolvedSocialLayout === \"grid\"\n                ? \"name\"\n                : \"icon\"\n          }\n          className={cn(resolvedSocialLayout === \"horizontal\" && \"flex-1\")}\n        />\n      ))}\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "@components/auth/provider-buttons.tsx"
    },
    {
      "path": "examples/start-shadcn-example/src/components/auth/reauthentication.tsx",
      "content": "\"use client\"\n\nimport {\n  getReauthenticationSignInURL,\n  isReauthenticationSignInURL\n} from \"@better-auth-ui/core\"\nimport { useAuth, useSignOut } from \"@better-auth-ui/react\"\nimport { useSyncExternalStore } from \"react\"\nimport { Alert, AlertDescription, AlertTitle } from \"@/components/ui/alert\"\nimport { Button } from \"@/components/ui/button\"\nimport { Spinner } from \"@/components/ui/spinner\"\nimport { cn } from \"cn\"\n\nconst subscribeToLocation = () => () => undefined\n\nfunction useIsReauthenticationSignIn() {\n  return useSyncExternalStore(\n    subscribeToLocation,\n    () => isReauthenticationSignInURL(new URL(window.location.href)),\n    () => false\n  )\n}\n\nexport type ReauthenticationActionProps = {\n  className?: string\n  showTitle?: boolean\n}\n\nexport function ReauthenticationAction({\n  className,\n  showTitle = true\n}: ReauthenticationActionProps) {\n  const auth = useAuth()\n  const signOut = useSignOut(auth.authClient)\n\n  const handleReauthentication = () => {\n    const signInURL = getReauthenticationSignInURL(\n      new URL(window.location.href),\n      `${auth.basePaths.auth}/${auth.viewPaths.auth.signIn}`\n    )\n    signOut.mutate(undefined, {\n      onSuccess: () => auth.navigate({ to: signInURL })\n    })\n  }\n\n  return (\n    <div className={cn(\"flex flex-col items-start gap-3 p-4\", className)}>\n      <div className=\"flex flex-col gap-1\">\n        {showTitle ? (\n          <h3 className=\"text-sm font-medium\">\n            {auth.localization.settings.reauthenticationTitle}\n          </h3>\n        ) : null}\n        <p className=\"text-sm text-muted-foreground\">\n          {auth.localization.settings.reauthenticationDescription}\n        </p>\n      </div>\n      <Button\n        disabled={signOut.isPending}\n        onClick={handleReauthentication}\n        size=\"sm\"\n      >\n        {signOut.isPending ? <Spinner data-icon=\"inline-start\" /> : null}\n        {auth.localization.settings.reauthenticationAction}\n      </Button>\n    </div>\n  )\n}\n\nexport function ReauthenticationNotice() {\n  const auth = useAuth()\n  const isReauthenticationSignIn = useIsReauthenticationSignIn()\n  if (!isReauthenticationSignIn) return null\n\n  return (\n    <Alert className=\"mx-4 w-auto group-data-[size=sm]/card:mx-3\">\n      <AlertTitle>\n        {auth.localization.settings.reauthenticationTitle}\n      </AlertTitle>\n      <AlertDescription>\n        {auth.localization.settings.reauthenticationDescription}\n      </AlertDescription>\n    </Alert>\n  )\n}\n",
      "type": "registry:component",
      "target": "@components/auth/reauthentication.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 `<Auth>` 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 `<Settings>` 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/email-otp-plugin.ts",
      "content": "import { createAuthPlugin } from \"@better-auth-ui/core\"\nimport {\n  emailOtpPlugin as coreEmailOtpPlugin,\n  type EmailOtpPluginOptions\n} from \"@better-auth-ui/core/plugins/email-otp\"\n\nimport { ChangeEmailOtp } from \"@/components/auth/email-otp/change-email-otp\"\nimport { EmailOtp } from \"@/components/auth/email-otp/email-otp\"\nimport { EmailOtpButton } from \"@/components/auth/email-otp/email-otp-button\"\nimport { ForgotPasswordOtp } from \"@/components/auth/email-otp/forgot-password-otp\"\nimport { ResetPasswordOtp } from \"@/components/auth/email-otp/reset-password-otp\"\nimport { VerifyEmailOtp } from \"@/components/auth/email-otp/verify-email-otp\"\n\nexport const emailOtpPlugin = createAuthPlugin(\n  coreEmailOtpPlugin.id,\n  (options: EmailOtpPluginOptions = {}) => {\n    const plugin = coreEmailOtpPlugin(options)\n\n    return {\n      ...plugin,\n      authButtons: plugin.signIn ? [EmailOtpButton] : [],\n      // Each flow is opt-in because it replaces a link-based view outright.\n      // Turning one on without the matching server option would leave the\n      // user waiting for a code that never arrives.\n      views: {\n        auth: {\n          ...(plugin.signIn && { emailOtp: EmailOtp }),\n          ...(plugin.emailVerification && { verifyEmail: VerifyEmailOtp }),\n          ...(plugin.passwordReset && {\n            forgotPassword: ForgotPasswordOtp,\n            resetPassword: ResetPasswordOtp\n          })\n        }\n      },\n      // Conditional, not an override: when `emailAndPassword.enabled === false`\n      // the `<Auth>` router renders this at `/auth/sign-in` instead of the\n      // disabled password form.\n      ...(plugin.signIn && {\n        fallbackViews: { auth: { signIn: EmailOtp } }\n      }),\n      ...(plugin.changeEmail && {\n        cardOverrides: { account: { changeEmail: ChangeEmailOtp } }\n      })\n    }\n  }\n)\n",
      "type": "registry:lib",
      "target": "@lib/auth/email-otp-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/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"
    }
  ],
  "type": "registry:component"
}