Better Auth UI

The <DeleteAccountCard /> component provides users a streamlined UI to delete their account. It supports verification flows, such as password confirmation or email verification, before account deletion.

Usage

Include the <DeleteAccountCard /> component on your user settings page:

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

This component leverages the AuthUIProvider context to handle account deletion (and optional verification) seamlessly.

Reference

These are the available props for <DeleteAccountCard />:

Prop	Type	Default
`className?`	`string`	-
`classNames?`	`SettingsCardClassNames`	-
`accounts?`	`{ provider: string; }[]`	-
`isPending?`	`boolean`	-
`localization?`	`AuthLocalization`	`authLocalization`
`skipHook?`	`boolean`	-

Styling

You can customize styling using the provided classNames prop with TailwindCSS classes:

<DeleteAccountCard
    classNames={{
        base: "border-destructive",
        header: "bg-destructive/10",
        title: "text-destructive text-xl font-semibold",
        description: "text-destructive",
        footer: "bg-destructive/30",
        button: "bg-destructive hover:bg-destructive/80 text-white"
    }}
/>

Localization

Adjust the text within the component for specific requirements or languages:

<DeleteAccountCard
    localization={{
        deleteAccount: "Delete My Account",
        deleteAccountDescription: "This action permanently deletes your account and is irreversible.",
        deleteAccountInstructions: "Please provide your password to confirm deletion.",
        deleteAccountNotFresh: "Sign out and back in to delete your account.",
    }}
/>

<DeleteAccountCard />

Usage

Reference

Styling

Localization

On this page