Better Auth UI

The main authentication entry point, automatically switching between sign-in, sign-up, and other auth views.

The <AuthView /> component provides an interactive and customizable authentication interface that seamlessly integrates with your authentication flow. It supports multiple authentication methods, including email/password, magic links, passkey (WebAuthn), and social providers.

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 { AuthView } from "@/components/auth/auth-view";

export default function AuthPage() {
  return <AuthView />;
}

Reference

The following props can be passed to <AuthView /> for customization:

Prop	Type	Default
`otpSeparators?`	`0 \| 1 \| 2`	-
`view?`	`"CALLBACK" \| "EMAIL_OTP" \| "FORGOT_PASSWORD" \| "MAGIC_LINK" \| "RECOVER_ACCOUNT" \| "RESET_PASSWORD" \| "SIGN_IN" \| "SIGN_OUT" \| "SIGN_UP" \| "TWO_FACTOR" \| "ACCEPT_INVITATION"`	-
`socialLayout?`	`"auto" \| "horizontal" \| "grid" \| "vertical"`	-
`redirectTo?`	`string`	-
`pathname?`	`string`	-
`path?`	`string`	-
`localization?`	`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; }>`	-
`cardHeader?`	`any`	-
`callbackURL?`	`string`	-
`classNames?`	`AuthViewClassNames`	-
`className?`	`string`	-

Examples

Below are practical usage examples demonstrating common scenarios:

Specifying Initial View

You can specify the current view manually using the view prop:

<AuthView view="SIGN_IN" />

Custom Redirect After Authentication

Customize the navigation after successful authentication using the redirectTo prop:

<AuthView redirectTo="/dashboard" />

Localization

You can pass custom localization texts to fit different languages or contexts:

<AuthView
  localization={{
    SIGN_IN: "Log in",
    SIGN_UP: "Register",
    MAGIC_LINK: "Sign in with Email",
  }}
/>

Styling

You can thoroughly customize <AuthView /> components using TailwindCSS utility classes and the provided classNames prop:

<AuthView
  classNames={{
    base: "border-2 border-destructive max-w-xs",
    header: "bg-destructive/30",
    title: "text-xl text-destructive font-semibold",
    footerLink: "text-destructive hover:text-foreground",
  }}
/>

<AuthView />

On this page