BETTER-AUTH. UI
Plugins

Delete User

Add account deletion with a confirmation dialog to your Solid/Zaidan authentication flow.

The copied Solid/Zaidan delete-user components render the danger-zone account deletion UI for Better Auth's built-in account deletion capability. Register the UI plugin directly from @better-auth-ui/core/plugins to show <DangerZone /> in the copied security settings surface.

Setup

Enable account deletion in Better Auth

Enable Better Auth account deletion in your server config:

src/lib/auth.ts
import { betterAuth } from "better-auth"

export const auth = betterAuth({
  // ...
  user: {
    deleteUser: {
      enabled: true
    }
  }
})

For OAuth users or any flow that should confirm deletion by email, configure the related Better Auth options in the delete-user docs.

Install the Solid/Zaidan components

npx shadcn@latest add https://better-auth-ui.com/r/solid/delete-user.json

This copies the following files into your project:

  • src/components/auth/delete-user/danger-zone.tsx
  • src/components/auth/delete-user/delete-account.tsx
  • local dialog, button, card, input, and label primitives under src/components/ui/**

Register the UI plugin

Import deleteUserPlugin() directly from @better-auth-ui/core/plugins and register it with your copied Solid auth provider:

src/components/providers.tsx
import { deleteUserPlugin } from "@better-auth-ui/core/plugins"
import { AuthProvider } from "@/components/auth/auth-provider"

<AuthProvider
  authClient={authClient}
  plugins={[deleteUserPlugin()]}
>
  {children}
</AuthProvider>

When the plugin is registered, the copied <SecuritySettings /> surface renders <DangerZone /> automatically.

Components

<DangerZone />

<DangerZone /> is the primary security card wrapper. It renders the localized danger-zone heading and composes <DeleteAccount /> below it.

import { DangerZone } from "@/components/auth/delete-user/danger-zone"

<DangerZone />

Prop

Type

<DeleteAccount />

<DeleteAccount /> is the lower-level delete account card used inside <DangerZone />. You can also import it directly for custom settings layouts.

import { DeleteAccount } from "@/components/auth/delete-user/delete-account"

<DeleteAccount />

Prop

Type

Options

Prop

Type

Localization

Prop

Type

Last updated on

On this page