Better Auth UI

The <ChangeEmailCard /> component provides a simple and secure UI that allows users to change their account email address, including verification emails sent to the updated address, if email verification is enabled.

Usage

Here's how to implement <ChangeEmailCard /> on your custom settings page:

import { ChangeEmailCard } from "@daveyplate/better-auth-ui"
 
export default function SettingsPage() {
    return (
        <div className="flex flex-col gap-6">
            <ChangeEmailCard />
        </div>
    )
}

The component automatically integrates with your AuthUIProvider context and handles email verification workflows seamlessly.

Reference

These are the available props for <ChangeEmailCard />:

Prop	Type	Default
`className?`	`string`	-
`classNames?`	`SettingsCardClassNames`	-
`isPending?`	`boolean`	-
`localization?`	`Partial<{ account: string; accounts: string; accountsDescription: string; accountsInstructions: string; addAccount: string; addPasskey: string; alreadyHaveAnAccount: string; avatar: string; avatarDescription: string; ... 87 more ...; verifyYourEmailDescription: string; }>`	-

Styling

You can customize the styles using the provided classNames prop:

<ChangeEmailCard
    classNames={{
        base: "border-primary shadow",
        header: "bg-primary-foreground text-primary",
        title: "text-xl font-semibold",
        description: "text-muted-foreground",
        content: "bg-background",
        footer: "bg-muted",
        input: "bg-transparent border-primary placeholder:text-muted-foreground"
    }}
/>

Localization

You can pass custom text via the localization prop:

<ChangeEmailCard
    localization={{
        email: "Your Email",
        emailDescription: "You can update your email here.",
        emailInstructions: "We'll send you a verification link to your new email address.",
        emailPlaceholder: "you@example.com",
        emailVerifyChange: "Check your inbox for the verification link!"
    }}
/>

<ChangeEmailCard />

Usage

Reference

Styling

Localization

On this page