Better Auth UI

The <AuthCard /> 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.

Usage

Here's a basic example on how to use the <AuthCard /> component within your application:

import { AuthCard } from "@daveyplate/better-auth-ui"

export default function AuthPage({ params }: { params: { pathname: string } }) {
    return (
        <div className="flex size-full grow flex-col items-center justify-center gap-3">
            <AuthCard pathname={params.pathname} />
        </div>
    )
}

Reference

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

Prop	Type	Default
`otpSeparators?`	`0 \| 1 \| 2`	`0`
`view?`	`AuthView`	-
`socialLayout?`	`"auto" \| "horizontal" \| "grid" \| "vertical"`	`"auto"`
`redirectTo?`	`string`	-
`pathname?`	`string`	-
`localization?`	`AuthLocalization`	`authLocalization`
`cardHeader?`	`any`	-
`callbackURL?`	`string`	-
`classNames?`	`AuthCardClassNames`	-
`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:

<AuthCard view="SIGN_IN" />

Custom Redirect After Authentication

Customize the navigation after successful authentication using the redirectTo prop:

<AuthCard redirectTo="/dashboard" />

Localization

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

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

Styling

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

<AuthCard
    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",
    }}
/>

<AuthCard />