Better Auth UI

The <TwoFactorCard /> provides a secure interface for managing two-factor authentication (2FA), allowing users to enable or disable 2FA with password confirmation. It handles the complete setup flow including QR code scanning and backup codes generation.

Usage

Here's how you can include <TwoFactorCard /> in your settings page:

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

export default function SettingsPage() {
    return (
        <div className="flex flex-col gap-6">
            <TwoFactorCard />
        </div>
    )
}

Styling

Customize the component appearance using Tailwind CSS classes through the classNames prop:

<TwoFactorCard
    classNames={{
        base: "border-primary shadow",
        header: "bg-primary-foreground",
        title: "text-primary font-semibold text-xl",
        description: "text-muted-foreground",
        content: "bg-background",
        footer: "bg-muted",
        button: "bg-primary hover:bg-primary-foreground",
        instructions: "text-muted-foreground"
    }}
/>

<TwoFactorCard />

Usage

Styling

On this page