Better Auth delete user in Next.js, with a Delete account button

Better Auth deletes users itself, for free: set user.deleteUser.enabled to true in auth.ts and call authClient.deleteUser(). If your server log says "Delete user is disabled. Enable it in the options", that switch is what's missing. Better Auth UI's free delete-user plugin gives you a ready shadcn card for it. Hold to Delete is for when the button itself should be hard to hit by accident: a 1.2 second hold, then five seconds to undo before Better Auth is called.

One payment$3

By buying you agree to the Terms.

Download right after paying
Use it in client projects
Won't run on the listed stack? We fix it or refund you

Ready forCursorv0Lovableshadcn CLI

Full product pageReact · Tailwind · TypeScript

Better Auth delete user: turn it on in auth.ts (free)

lib/auth.ts

import { betterAuth } from "better-auth";
import { APIError } from "better-auth/api";

export const auth = betterAuth({
  // ...your database, emailAndPassword and socialProviders stay as they are
  user: {
    deleteUser: {
      // Off by default. Without this line the server logs
      // "Delete user is disabled. Enable it in the options" and the browser gets a 404.
      enabled: true,
      beforeDelete: async (user) => {
        // Clean up your own rows here, or throw to stop the delete.
        if (user.email.endsWith("@yourcompany.com")) {
          throw new APIError("BAD_REQUEST", { message: "Staff accounts are removed by an admin." });
        }
      },
    },
  },
  session: {
    // deleteUser() with no password needs a session younger than this.
    // 60 * 60 * 24 (one day) is Better Auth's default; 0 turns the check off.
    freshAge: 60 * 60 * 24,
  },
});

lib/auth-client.ts

import { createAuthClient } from "better-auth/react";

// Same origin as the app, so no baseURL is needed.
export const authClient = createAuthClient();

lib/auth.ts (variant: confirm by email)

import { betterAuth } from "better-auth";
import { sendEmail } from "@/lib/email"; // your own mail helper (Resend, SES, nodemailer...)

// Variant: confirm by email. Needed for people who only sign in with Google or GitHub,
// since they have no password and may not have a fresh session.
export const auth = betterAuth({
  user: {
    deleteUser: {
      enabled: true,
      sendDeleteAccountVerification: async ({ user, url }) => {
        // url deletes the account when opened in a browser where they're signed in
        await sendEmail({ to: user.email, subject: "Confirm account deletion", text: url });
      },
    },
  },
});

app/settings/free-delete-button.tsx (the free route: a plain confirm)

"use client";
import { useState } from "react";
import { useRouter } from "next/navigation";
import { authClient } from "@/lib/auth-client";

// The free route: Better Auth's own deleteUser behind a plain confirm.
// Swap window.confirm for shadcn's AlertDialog if you use shadcn.
export function FreeDeleteButton() {
  const router = useRouter();
  const [pending, setPending] = useState(false);

  const onClick = async () => {
    if (!window.confirm("Delete your account? This can't be undone.")) return;
    setPending(true);
    const { data, error } = await authClient.deleteUser({ callbackURL: "/goodbye" });
    setPending(false);
    if (error) {
      alert(error.message ?? "Your account was not deleted.");
      return;
    }
    if (data.message === "Verification email sent") {
      alert("Check your email to finish deleting your account.");
      return;
    }
    router.replace("/goodbye");
  };

  return (
    <button type="button" disabled={pending} onClick={onClick}>
      {pending ? "Deleting…" : "Delete my account"}
    </button>
  );
}

components/hold-stage.tsx (scales the piece to its box)

"use client";
import { useEffect, useState } from "react";

// Hold to Delete draws on a fixed 1000 x 660 stage. This scales it to the
// width of its box and hands back a helper that moves keyboard focus inside.
export function useHoldStage() {
  const [el, setEl] = useState<HTMLDivElement | null>(null);
  const [scale, setScale] = useState(0);
  useEffect(() => {
    if (!el) return;
    const ro = new ResizeObserver(([entry]) => setScale(entry.contentRect.width / 1000));
    ro.observe(el);
    return () => ro.disconnect();
  }, [el]);
  const focusIn = (selector: string, delay = 0) =>
    window.setTimeout(() => el?.querySelector<HTMLElement>(selector)?.focus(), delay);
  return { ref: setEl, scale, focusIn };
}

app/settings/delete-account.tsx (Hold to Delete as the button)

"use client";
import { useState } from "react";
import { useRouter } from "next/navigation";
import HoldToDelete from "@/components/HoldToDelete";
import { useHoldStage } from "@/components/hold-stage";
import { authClient } from "@/lib/auth-client";

// verifyByEmail: true when auth.ts sets sendDeleteAccountVerification.
// Then the hold only sends the email; the account goes when they open the link.
export function DeleteAccount({ email, verifyByEmail = false }: { email: string; verifyByEmail?: boolean }) {
  const router = useRouter();
  const { ref, scale, focusIn } = useHoldStage();
  const [attempt, setAttempt] = useState(0); // a new key resets the piece
  const [message, setMessage] = useState("");
  const [typed, setTyped] = useState("");

  const commit = async () => {
    const { data, error } = await authClient.deleteUser({ callbackURL: "/goodbye" });
    if (error) {
      setMessage(
        error.code === "SESSION_EXPIRED"
          ? "For your safety, sign out and sign back in, then try again."
          : `Your account was not deleted: ${error.message ?? error.statusText}`,
      );
      setAttempt((n) => n + 1);
      return;
    }
    if (data.message === "Verification email sent") {
      setMessage(`We sent a link to ${email}. Your account is deleted when you open it.`);
      return;
    }
    router.replace("/goodbye");
  };

  return (
    <section className="space-y-3">
      <div ref={ref} className="relative aspect-[1000/660] w-full overflow-hidden rounded-xl">
        {scale > 0 && (
          <HoldToDelete
            key={attempt}
            fileName={email}
            fileMeta="Your account, profile and saved data"
            fileType="YOU"
            tags={[]}
            emptyText={verifyByEmail ? "Check your email" : "Account deleted"}
            toastText={verifyByEmail ? "Sending the confirmation email" : "Deleting your account"}
            restoreLabel={null}
            onDelete={() => focusIn(".qhd-toast button", 1100)}
            onUndo={() => focusIn(".qhd-hold")}
            onCommit={commit}
            style={{ position: "absolute", left: 0, top: 0, transform: `scale(${scale})`, transformOrigin: "0 0" }}
          />
        )}
      </div>
      <p role="alert" className="text-sm text-red-600">{message}</p>

      {/* holding is hard for some people: the same action behind a typed word */}
      <details className="text-sm">
        <summary>Can&apos;t hold the button?</summary>
        <form
          className="mt-2 flex gap-2"
          onSubmit={(e) => {
            e.preventDefault();
            if (typed === "DELETE") void commit();
          }}
        >
          <input
            value={typed}
            onChange={(e) => setTyped(e.target.value)}
            aria-label="Type DELETE to confirm"
            placeholder="Type DELETE"
            className="rounded border px-2 py-1"
          />
          <button type="submit" disabled={typed !== "DELETE"} className="rounded bg-red-600 px-3 py-1 text-white disabled:opacity-50">
            Delete my account
          </button>
        </form>
      </details>
    </section>
  );
}

app/settings/page.tsx

import { headers } from "next/headers";
import { redirect } from "next/navigation";
import { auth } from "@/lib/auth";
import { DeleteAccount } from "./delete-account";

export default async function SettingsPage() {
  const session = await auth.api.getSession({ headers: await headers() });
  if (!session) redirect("/sign-in");

  return (
    <main className="mx-auto max-w-2xl space-y-6 p-6">
      <h1 className="text-xl font-semibold">Delete account</h1>
      <p>Hold the button. You get five seconds to undo before anything is sent.</p>
      <DeleteAccount email={session.user.email} />
    </main>
  );
}

Good to know

Hold to Delete calls onCommit only when the five-second undo window runs out, so authClient.deleteUser() never runs for someone who pressed Undo. If the tab closes during that window, nothing is deleted.
With the email variant, the hold only sends the email. We read better-auth 1.7.12's source: once sendDeleteAccountVerification is set, deleteUser() answers "Verification email sent" every time, even when a correct password is passed, and the account is deleted when the link is opened. Pass verifyByEmail to the component so the card says "Check your email" instead of "Account deleted". The link expires after a day unless you set deleteTokenExpiresIn (in seconds).
Without a password or the email step, the session has to be fresh. In 1.7.12 a session older than session.freshAge fails with the code SESSION_EXPIRED and the message "Session expired. Re-authenticate to perform this action." The snippet asks the person to sign out and back in. Password users can pass { password } to deleteUser instead.
The piece is drawn as a file card that crumples into a bin. The snippet puts the email where the file name goes and "YOU" on the file icon. If a bin feels wrong for an account, use the plain confirm above.
Holding is slower than clicking, and some people can't hold a key or a touch for a second. That's why the snippet keeps a typed DELETE form under "Can't hold the button?". The piece gives no spoken progress while held.
What we ran on Oct 25 2026: every file on this page type-checks with TypeScript 5.9.3 against better-auth 1.7.12, next 15.5.28, @types/react 19.3.0, framer-motion 14.6.0 and the shipped HoldToDelete, and a call with a misspelled option fails the same check. We didn't run these files against a real Better Auth database, didn't install Better Auth UI, and didn't test Safari, Firefox, a real phone or a screen reader. The hold, undo and reset behaviour is the same wrapper we ran in Chromium for the Supabase version of this page.

"Delete user is disabled": what the error means

Better Auth's Users & Accounts docs say deleteUser is "disabled by default, but you can enable it easily by passing enabled:true". We read what happens when you don't, in better-auth 1.7.12's source: the /delete-user endpoint writes "Delete user is disabled. Enable it in the options" to the server log and answers the browser with a plain 404. So in the browser you see a failed request to /api/auth/delete-user, and the sentence itself only shows up in your terminal.
The fix is the enabled: true line in lib/auth.ts above, then a restart of the dev server. The same check guards the email link route (/delete-user/callback), so the email variant needs it too.

Better Auth delete user: password, fresh session or email

The docs list what a delete needs: a valid password, a fresh session, or email verification, which they call "needed for OAuth users" since those people have no password. On freshness they say "By default session.freshAge is set to 60 * 60 * 24 (1 day)" and that 0 turns the check off, with a warning not to do that "if you are not using email verification for deleting the account." The 1.7.12 source sets the same default.
The order in the 1.7.12 source matters for your UI. A password, if passed, is checked first. Then a token from an email link deletes straight away. Then, if sendDeleteAccountVerification is set, an email goes out and nothing is deleted yet. Only after that is the session's age checked.
For the email link, the docs say "The user must be signed in to the account they're attempting to delete." Someone who opens the link on another device where they're signed out gets an error, not a deleted account.

What Better Auth deletes, and hooks for the rest

In 1.7.12 a successful delete removes the user's sessions, their linked accounts and the user row, then clears the session cookie. Your own tables are up to you: rows that reference the user need a cascading foreign key in your schema, or cleanup code.
That code goes in beforeDelete or afterDelete in auth.ts. The docs add: "you can also throw APIError to interrupt the deletion process", which is what the snippet does for staff accounts.
There's no soft delete flag on deleteUser; the docs describe it as a utility "to hard delete a user". If you need a soft delete, that's your own column and your own endpoint, and the admin plugin's banUser is the closest built-in way to lock someone out without removing them.

Better Auth remove user: auth.api.deleteUser and the admin plugin

auth.api.deleteUser runs the same endpoint on the server. Pass the request headers so it finds the session. If you call it from a server action, Better Auth's Next.js docs say server actions can't set cookies on their own and point to the nextCookies() plugin (last in the plugins array), so the cleared cookie actually reaches the browser. The client call in the snippets avoids that question.
To delete someone else as an admin, the admin plugin has removeUser: authClient.admin.removeUser({ userId }) or auth.api.removeUser on the server. In 1.7.12 it deletes the user, sessions and accounts, refuses to remove yourself, and doesn't call the beforeDelete or afterDelete hooks from user.deleteUser. Put admin cleanup somewhere it runs for both.

Better Auth UI's delete-user plugin: the free shadcn card

If you'd rather not build the screen, Better Auth UI has a free delete-user plugin. Its docs install it with npx shadcn@latest add @better-auth-ui/delete-user, which copies a DangerZone card and a DeleteAccount card with a confirmation dialog into your project. When a password is needed, the dialog asks for it.
We read the project today: the GitHub repo is MIT, and its current React package (1.7.31) lists React 19.2.6 or newer, Tailwind 4.3.2 or newer and better-auth 1.7.0 or newer as peers. We didn't install it. If you already use Better Auth UI's settings pages, this plugin is the better fit, and it's the whole job for most apps.

When a plain dialog fits better than holding

For most apps the free route is enough: free-delete-button.tsx calls authClient.deleteUser() after window.confirm, and shadcn's AlertDialog is the styled version of that. /react/shadcn-delete-confirmation-dialog shows one that stays open while the delete runs.
Hold to Delete earns its place when the delete is permanent and a misclick would hurt, which is usually true for a whole account. It's a worse fit for things people delete many times a day.

Tailwind v4 and shadcn apps

Hold to Delete works on Tailwind v4 with no config change; our Oct 25 2026 check of every piece on v4 rated it "works as-is". We re-read its CSS file today: all 44 rules target classes that start with qhd- (plus two qhd- keyframes and a reduced-motion block). There's no :root, html or body rule, so your shadcn Buttons, AlertDialog and theme tokens stay as they are.

Install

Copy from the zipPut react/src/components into src/, then npm i better-auth framer-motion.
Or ask your AIPaste PROMPT.md into Cursor, Lovable or v0.

Props

onCommit: the undo window ran out: call the delete here
onUndo: Undo was pressed and nothing was sent
fileName / fileMeta / fileType: what the card shows: the email, one line, a short label
emptyText / toastText: the text after the hold
holdMs / undoMs: 1200 ms hold and 5000 ms undo by default

How qodesign compares

qodesign vs UiverseUiverse is best for: single small elements: buttons, loaders, toggles, checkboxes, inputs.
qodesign vs AnimataAnimata is best for: free animated building blocks you copy and adapt.
qodesign vs Motion PrimitivesMotion Primitives is best for: small motion building blocks you compose yourself: text effects, number tickers, dialogs, toolbars.

All comparisons, with prices read on each library's own site.

Questions

Why does Better Auth say delete user is disabled?

Because user.deleteUser.enabled isn't set. It's off by default. Add enabled: true under user.deleteUser in auth.ts and restart the server. In 1.7.12 the browser only sees a 404; the sentence is in the server log.

Can I delete a Better Auth user without a password?

Yes, if the session is fresh (younger than session.freshAge, one day by default) or if you set up sendDeleteAccountVerification, which confirms by email.

How do Google or GitHub users delete their account?

They have no password, so set sendDeleteAccountVerification. The docs say it's especially needed for OAuth users who should be able to delete without signing in again.

Does Better Auth have a soft delete?

Not on deleteUser, which is a hard delete. Use your own deleted column, or the admin plugin's banUser to lock an account without removing it.

How do I remove a user as an admin?

With the admin plugin: authClient.admin.removeUser({ userId }) or auth.api.removeUser on the server. It skips the user.deleteUser hooks.

Will it change my shadcn styles?

No. Hold to Delete's CSS only targets its own qhd- classes, with no :root, html or body rules.

Can Cursor or v0 add it for me?

Yes. Each download has a PROMPT.md. Paste it into Cursor, Lovable, v0 or Claude Code and it fits the piece into your app.

Can I use it in client work?

Yes, in personal and client projects. You can't resell the code itself as a kit.