# Delete account

Compose delete account with the auth service and your own interface.

Import: @slices.sh/auth/headless

Public parts: 16

## Installation

### 1. Install the service registry

services/index.ts, which `import "@/services"` loads. A provider setup writes the same file; skip this if your app has one.

```bash
npx shadcn@latest add "https://slices.sh/r/services.json"
```

### 2. Install the headless library

```bash
npm install @slices.sh/auth@^0.1.10
```

### 3. Install the service

Install the provider configuration via shadcn or the slices CLI. Skip this step if your app already has the service configured. Provider commands and provisioning: https://slices.sh/docs/services/auth.md

## Anatomy

### Composition

```text
User.Root
  DeleteAccount.Root
    DeleteAccount.Available
      DeleteAccount.Trigger
    DeleteAccount.Editing
      DeleteAccount.PasswordRequired
        DeleteAccount.Dialog
          DeleteAccount.Target
          DeleteAccount.AddressLabel
          DeleteAccount.AddressInput
          DeleteAccount.Confirm
          DeleteAccount.Cancel
        DeleteAccount.PasswordLabel
        DeleteAccount.PasswordInput
      DeleteAccount.Error
    DeleteAccount.Scheduled
      DeleteAccount.Countdown
```

## Minimal composition

```tsx
"use client"

import "@/services"
import { DeleteAccount } from "@slices.sh/auth/headless"

export function Example() {
  return (
    <DeleteAccount.Root>
      <DeleteAccount.Dialog>
        <DeleteAccount.Trigger>Delete my account</DeleteAccount.Trigger>
        <DeleteAccount.Editing>
          <DeleteAccount.AddressLabel>Email</DeleteAccount.AddressLabel>
          <DeleteAccount.AddressInput />
          <DeleteAccount.Confirm>Confirm deletion</DeleteAccount.Confirm>
          <DeleteAccount.Cancel>Cancel</DeleteAccount.Cancel>
        </DeleteAccount.Editing>
      </DeleteAccount.Dialog>
      <DeleteAccount.Error />
    </DeleteAccount.Root>
  )
}

```

Requires an authenticated account. Organization controls also require organizations and the appropriate role.

## Complete API reference

### DeleteAccount.Root

scope

Available gates the section where the backend deletes accounts.

Import: @slices.sh/auth/headless

Capability: delete-account

```tsx
DeleteAccountRootProps & AuthRootProps

type DeleteAccountRootProps = RootProps & { onDeleted?(): void }
```

Alternate import: Root from @slices.sh/auth/headless/delete-account

Source: @slices.sh/auth/src/headless/delete-account/root.tsx

### DeleteAccount.Available

gate

Available gates the section where the backend deletes accounts.

Import: @slices.sh/auth/headless

Capability: delete-account

```tsx
GateProps
```

Alternate import: Available from @slices.sh/auth/headless/delete-account

Source: @slices.sh/auth/src/headless/delete-account/available.tsx

### DeleteAccount.Dialog

content

Dialog maps onto render={<AlertDialog />}. Trigger opens it. Target gets { target }, the address being deleted. Confirm schedules the deletion with { pending, retryAfter }. Cancel closes, or undoes a scheduled deletion, with { scheduled }.

Import: @slices.sh/auth/headless

DeleteAccount.Dialog requires Root.

```tsx
PartProps<null>
```

Alternate import: Dialog from @slices.sh/auth/headless/delete-account

Source: @slices.sh/auth/src/headless/delete-account/dialog.tsx

### DeleteAccount.Trigger

action · Element: button

Dialog maps onto render={<AlertDialog />}. Trigger opens it. Target gets { target }, the address being deleted. Confirm schedules the deletion with { pending, retryAfter }. Cancel closes, or undoes a scheduled deletion, with { scheduled }.

Import: @slices.sh/auth/headless

DeleteAccount.Trigger requires Root.

```tsx
PartProps<"button">
```

Alternate import: Trigger from @slices.sh/auth/headless/delete-account

Source: @slices.sh/auth/src/headless/delete-account/trigger.tsx

### DeleteAccount.Cancel

action · Element: button

Dialog maps onto render={<AlertDialog />}. Trigger opens it. Target gets { target }, the address being deleted. Confirm schedules the deletion with { pending, retryAfter }. Cancel closes, or undoes a scheduled deletion, with { scheduled }.

Import: @slices.sh/auth/headless

DeleteAccount.Cancel requires Root.

```tsx
PartProps<"button", { scheduled: boolean }>
```

Alternate import: Cancel from @slices.sh/auth/headless/delete-account

Source: @slices.sh/auth/src/headless/delete-account/cancel.tsx

### DeleteAccount.Confirm

action · Element: button

Dialog maps onto render={<AlertDialog />}. Trigger opens it. Target gets { target }, the address being deleted. Confirm schedules the deletion with { pending, retryAfter }. Cancel closes, or undoes a scheduled deletion, with { scheduled }.

Import: @slices.sh/auth/headless

DeleteAccount.Confirm requires Root.

```tsx
PartProps<"button", { pending: boolean; retryAfter: number }>
```

Alternate import: Confirm from @slices.sh/auth/headless/delete-account

Source: @slices.sh/auth/src/headless/delete-account/confirm.tsx

### DeleteAccount.AddressInput

input · Element: input

AddressInput and AddressLabel for the retyped address. PasswordRequired gates PasswordInput and PasswordLabel for an account that has a password.

Import: @slices.sh/auth/headless

DeleteAccount.AddressInput requires Root.

```tsx
PartProps<"input">
```

Alternate import: AddressInput from @slices.sh/auth/headless/delete-account

Source: @slices.sh/auth/src/headless/delete-account/address-input.tsx

### DeleteAccount.AddressLabel

content · Element: label

AddressInput and AddressLabel for the retyped address. PasswordRequired gates PasswordInput and PasswordLabel for an account that has a password.

Import: @slices.sh/auth/headless

DeleteAccount.AddressLabel requires Root.

```tsx
PartProps<"label">
```

Alternate import: AddressLabel from @slices.sh/auth/headless/delete-account

Source: @slices.sh/auth/src/headless/delete-account/address-label.tsx

### DeleteAccount.PasswordInput

input · Element: input

AddressInput and AddressLabel for the retyped address. PasswordRequired gates PasswordInput and PasswordLabel for an account that has a password.

Import: @slices.sh/auth/headless

DeleteAccount.PasswordInput requires Root.

```tsx
PartProps<"input">
```

Alternate import: PasswordInput from @slices.sh/auth/headless/delete-account

Source: @slices.sh/auth/src/headless/delete-account/password-input.tsx

### DeleteAccount.PasswordLabel

content · Element: label

AddressInput and AddressLabel for the retyped address. PasswordRequired gates PasswordInput and PasswordLabel for an account that has a password.

Import: @slices.sh/auth/headless

DeleteAccount.PasswordLabel requires Root.

```tsx
PartProps<"label">
```

Alternate import: PasswordLabel from @slices.sh/auth/headless/delete-account

Source: @slices.sh/auth/src/headless/delete-account/password-label.tsx

### DeleteAccount.Target

content · Element: p

Dialog maps onto render={<AlertDialog />}. Trigger opens it. Target gets { target }, the address being deleted. Confirm schedules the deletion with { pending, retryAfter }. Cancel closes, or undoes a scheduled deletion, with { scheduled }.

Import: @slices.sh/auth/headless

```tsx
PartProps<"p", { target: string }>
```

Alternate import: Target from @slices.sh/auth/headless/delete-account

Source: @slices.sh/auth/src/headless/delete-account/target.tsx

### DeleteAccount.PasswordRequired

gate

AddressInput and AddressLabel for the retyped address. PasswordRequired gates PasswordInput and PasswordLabel for an account that has a password.

Import: @slices.sh/auth/headless

```tsx
GateProps
```

Alternate import: PasswordRequired from @slices.sh/auth/headless/delete-account

Source: @slices.sh/auth/src/headless/delete-account/password-required.tsx

### DeleteAccount.Scheduled

gate

Editing gates the fields before confirming; Scheduled gates the ten seconds after. Countdown is a polite status with { seconds }. Error gets { message }.

Import: @slices.sh/auth/headless

DeleteAccount.Scheduled requires Root.

```tsx
GateProps
```

Alternate import: Scheduled from @slices.sh/auth/headless/delete-account

Source: @slices.sh/auth/src/headless/delete-account/scheduled.tsx

### DeleteAccount.Editing

gate

Editing gates the fields before confirming; Scheduled gates the ten seconds after. Countdown is a polite status with { seconds }. Error gets { message }.

Import: @slices.sh/auth/headless

DeleteAccount.Editing requires Root.

```tsx
GateProps
```

Alternate import: Editing from @slices.sh/auth/headless/delete-account

Source: @slices.sh/auth/src/headless/delete-account/editing.tsx

### DeleteAccount.Countdown

content · Element: p

Editing gates the fields before confirming; Scheduled gates the ten seconds after. Countdown is a polite status with { seconds }. Error gets { message }.

Import: @slices.sh/auth/headless

DeleteAccount.Countdown requires Root.

```tsx
PartProps<"p", { seconds: number }>
```

Alternate import: Countdown from @slices.sh/auth/headless/delete-account

Source: @slices.sh/auth/src/headless/delete-account/countdown.tsx

### DeleteAccount.Error

content · Element: p

Editing gates the fields before confirming; Scheduled gates the ten seconds after. Countdown is a polite status with { seconds }. Error gets { message }.

Import: @slices.sh/auth/headless

DeleteAccount.Error requires Root.

```tsx
PartProps<"p", { message: string }>
```

Alternate import: Error from @slices.sh/auth/headless/delete-account

Source: @slices.sh/auth/src/headless/delete-account/error.tsx

### User.Root

scope

Says which auth the User parts below read, and whether they may do without it. The parts need
no root: left out, they read the nearest auth root's config, or "default", and render nothing
without auth. `<User.Root enabled="optional">` is for the one who wants that said in the code.

Import: @slices.sh/auth/headless

```tsx
RootProps & AuthRootProps
```

Alternate import: User.Root from @slices.sh/auth/headless/user

Alternate import: User.Root from @slices.sh/auth/headless/passkeys

Alternate import: User.Root from @slices.sh/auth/headless/two-factor

Source: @slices.sh/auth/src/headless/user/root.tsx