Components
<DeleteAccountCard />
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 |
|---|---|---|
skipHook? | boolean | - |
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; ... 355 more ...; SLUG_DOES_NOT_MATCH: string; }> | - |
isPending? | boolean | - |
accounts? | { provider: string; }[] | null | - |
classNames? | SettingsCardClassNames | - |
className? | string | - |
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={{
DELETE_ACCOUNT: "Delete My Account",
DELETE_ACCOUNT_DESCRIPTION: "This action permanently deletes your account and is irreversible.",
DELETE_ACCOUNT_INSTRUCTIONS: "Please provide your password to confirm deletion.",
DELETE_ACCOUNT_NOT_FRESH: "Sign out and back in to delete your account.",
}}
/>