BETTER-AUTH. UI
Components

<TwoFactorForm />

Secondary authentication form for Two-Factor Authentication (2FA) verification.

The <TwoFactorForm /> provides the interface for users to enter their 2FA codes (TOTP, recovery codes, or backup codes) to complete the login process.

Installation

pnpm dlx shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/auth.json
npx shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/auth.json
yarn dlx shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/auth.json
bun x shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/auth.json

Usage

import { TwoFactorForm } from "@/components/auth/forms/two-factor-form";

export default function TwoFactorPage() {
  return <TwoFactorForm />;
}

Reference

PropTypeDefault
setIsSubmitting?
((value: boolean) => void)
-
redirectTo?
string
-
otpSeparators?
0 | 1 | 2
-
localization?
Partial<Partial<{ INVALID_USERNAME_OR_PASSWORD: string; EMAIL_NOT_VERIFIED: string; UNEXPECTED_ERROR: string; USERNAME_IS_ALREADY_TAKEN: string; USERNAME_TOO_SHORT: string; USERNAME_TOO_LONG: string; ... 358 more ...; UNKNOWN: string; }>>
-
isSubmitting?
boolean
-
classNames?
AuthFormClassNames
-
className?
string
-