Auth41: Delete Account

A full-height, centered destructive-confirmation screen: a circular destructive icon, heading, and description sit above a card that lists the irreversible consequences, then a form where the user must type an exact confirmation word into an input before the destructive submit button enables, with an optional "changed your mind?" cancel link below.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/auth41?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/auth41?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/auth41.tsx, plus the button, input, and field shadcn/ui primitives it uses for the destructive submit button, the confirmation text input, and the field/label grouping.

Quick start

The installed file exports auth41Demo alongside the block: the exact props behind the preview above. Spread it to get a working delete-account confirmation screen in one line.

import { Auth41, auth41Demo } from "@/components/beste/block/auth41";

export default function DeleteAccountPage() {
  return <Auth41 {...auth41Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { TriangleAlert } from "lucide-react";
import { Auth41 } from "@/components/beste/block/auth41";

export default function DeleteAccountPage() {
  return (
    <Auth41
      icon={<TriangleAlert className="size-6" />}
      heading="Delete your account"
      description="This action is permanent and cannot be undone."
      consequences={[
        "All your projects and data will be erased",
        "Active subscriptions will be cancelled",
      ]}
      confirmWord="DELETE"
      labels={{
        confirmInstruction: "Type <strong>DELETE</strong> to confirm.",
        inputPlaceholder: "DELETE",
        delete: "Delete account",
      }}
      cancelPrompt={{
        text: "Changed your mind?",
        linkLabel: "Keep my account",
        href: "/settings",
      }}
    />
  );
}

Props

type Labels = {
  confirmInstruction?: string;
  inputPlaceholder?: string;
  delete?: string;
};

Behavior notes

• The confirmation input is tracked by an internal useState that is never lifted out; there is no onChange, onConfirm, or onDelete callback prop, so the entered value and the delete intent stay inside the component.
• The delete button is disabled unless confirmWord is truthy and the typed value matches it exactly (value === confirmWord), so the match is case- and whitespace-sensitive.
• The <form> calls e.preventDefault() on submit and nothing else; wiring an actual deletion request is left entirely to the integrator, since no submit handler prop is exposed.
• labels.confirmInstruction is rendered via dangerouslySetInnerHTML, so inline <strong> markup is supported and styled (semibold, foreground color) via label CSS.
• The delete button (and its wrapping Field) only render when labels.delete is set; likewise the icon badge, heading, description, consequences box, and cancel line each render only when their corresponding prop is present or non-empty.
• The cancel link is a next/link pointing at cancelPrompt.href; it is a plain navigation, not tied to any dismiss or reset logic.
• The section is min-h-screen and vertically centers a max-w-md column, so the block is designed to own the full viewport rather than sit inside other content.