Clerk delete account in Next.js, with your own 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 (your own page: Hold to Delete + user.delete())

"use client";
import { useState } from "react";
import { useClerk, useReverification, useUser } from "@clerk/nextjs";
import { isReverificationCancelledError } from "@clerk/nextjs/errors";
import HoldToDelete from "@/components/HoldToDelete";
import { useHoldStage } from "@/components/hold-stage";

export function DeleteAccount() {
  const { user } = useUser();
  const { setActive } = useClerk();
  const { ref, scale, focusIn } = useHoldStage();
  const [attempt, setAttempt] = useState(0); // a new key resets the piece
  const [message, setMessage] = useState("");
  // Clerk counts "Delete account" as a sensitive action: if the last sign-in
  // is older than the reverification window, this opens Clerk's check first
  const deleteUser = useReverification(() => user!.delete());

  if (!user) return null;
  if (!user.deleteSelfEnabled) {
    return <p>Account deletion is turned off for this app. Contact support to delete your account.</p>;
  }

  const commit = async () => {
    try {
      await deleteUser();
      // same two steps as Clerk's own delete form: drop the session, then leave
      await setActive({ session: null, redirectUrl: "/goodbye" });
    } catch (e) {
      setMessage(
        isReverificationCancelledError(e)
          ? "Nothing was deleted: the identity check was closed."
          : "Your account was not deleted. Try again or contact support.",
      );
      setAttempt((n) => n + 1);
    }
  };

  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={user.primaryEmailAddress?.emailAddress ?? "Your account"}
            fileMeta="Your account and everything in it"
            fileType="YOU"
            tags={[]}
            emptyText="Account deleted"
            toastText="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>
    </section>
  );
}

app/settings/page.tsx

import { auth } from "@clerk/nextjs/server";
import { redirect } from "next/navigation";
import { DeleteAccount } from "./delete-account";

export default async function SettingsPage() {
  const { isAuthenticated } = await auth();
  if (!isAuthenticated) 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 to Clerk.</p>
      <DeleteAccount />
    </main>
  );
}