Supabase delete user from Next.js, with a Delete account button

lib/supabase/admin.ts (secret key, server only)

import { createClient } from "@supabase/supabase-js";

// Server only. SUPABASE_SECRET_KEY (sb_secret_...) or the legacy service_role key.
// Never import this file from a "use client" file, and never prefix the key with NEXT_PUBLIC_.
export function createAdminClient() {
  return createClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.SUPABASE_SECRET_KEY!, {
    auth: { autoRefreshToken: false, persistSession: false },
  });
}

lib/supabase/server.ts (Supabase's SSR client)

import { createServerClient } from "@supabase/ssr";
import { cookies } from "next/headers";

// Supabase's own server client for Next.js (from its SSR guide)
export async function createClient() {
  const cookieStore = await cookies();

  return createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY!,
    {
      cookies: {
        getAll() {
          return cookieStore.getAll();
        },
        setAll(cookiesToSet) {
          try {
            cookiesToSet.forEach(({ name, value, options }) => cookieStore.set(name, value, options));
          } catch {
            // called from a Server Component; the proxy refreshes the session
          }
        },
      },
    },
  );
}

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

"use client";
import { useTransition } from "react";
import { useRouter } from "next/navigation";
import { deleteAccount } from "./actions";

// The free route: the same server action behind a plain confirm.
// Swap window.confirm for shadcn's AlertDialog if you use shadcn.
export function FreeDeleteButton() {
  const router = useRouter();
  const [pending, startTransition] = useTransition();
  return (
    <button
      type="button"
      disabled={pending}
      onClick={() => {
        if (!window.confirm("Delete your account? This can't be undone.")) return;
        startTransition(async () => {
          const { error } = await deleteAccount();
          if (error) alert(error);
          else router.replace("/goodbye");
        });
      }}
    >
      {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 { deleteAccount } from "./actions";

export function DeleteAccount({ email }: { email: string }) {
  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 { error } = await deleteAccount();
    if (error) {
      setMessage(`Your account was not deleted: ${error}`);
      setAttempt((n) => n + 1);
      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="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>

      {/* 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 { redirect } from "next/navigation";
import { createClient } from "@/lib/supabase/server";
import { DeleteAccount } from "./delete-account";

export default async function SettingsPage() {
  const supabase = await createClient();
  const { data } = await supabase.auth.getClaims();
  if (!data) redirect("/login");

  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={String(data.claims.email ?? "your account")} />
    </main>
  );
}