Add delete account

client/src/app/settings/account/Account.tsx

@@ -11,6 +11,7 @@ import { Label } from "../../../components/ui/label";
 import { useState } from "react";
 import { Button } from "../../../components/ui/button";
 import { ChangePassword } from "./ChangePassword";
+import { DeleteAccount } from "./DeleteAccount";
 
 export function Account({
   session,
@@ -60,9 +61,7 @@ export function Account({
       <Card className="p-2 pt-6">
         <CardContent className="flex flex-col gap-4">
           <ChangePassword />
-          <Button variant={"destructive"} className="w-60">
-            Delete Account
-          </Button>
+          <DeleteAccount />
         </CardContent>
       </Card>
     </div>

client/src/app/settings/account/DeleteAccount.tsx

@@ -0,0 +1,85 @@
+import { useState } from "react";
+import { Button } from "../../../components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../components/ui/dialog";
+import { authClient } from "../../../lib/auth";
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from "../../../components/ui/alert";
+import { AlertCircle } from "lucide-react";
+
+export function DeleteAccount() {
+  const [open, setOpen] = useState(false);
+  const [error, setError] = useState("");
+
+  const handleSubmit = async () => {
+    setError("");
+
+    try {
+      const response = await authClient.deleteUser({});
+
+      if (response.error) {
+        setError(String(response.error.message));
+        return;
+      }
+
+      setOpen(false);
+    } catch (error) {
+      setError(String(error));
+    }
+  };
+
+  return (
+    <div>
+      <Dialog
+        open={open}
+        onOpenChange={(isOpen) => {
+          setOpen(isOpen);
+          setError("");
+        }}
+      >
+        <DialogTrigger asChild>
+          <Button variant={"destructive"}>Delete Account</Button>
+        </DialogTrigger>
+        <DialogContent className="max-w-lg">
+          <DialogHeader>
+            <DialogTitle>Delete Your Account</DialogTitle>
+            <DialogDescription>This action cannot be undone.</DialogDescription>
+          </DialogHeader>
+          {error && (
+            <Alert variant="destructive">
+              <AlertCircle className="h-4 w-4" />
+              <AlertTitle>Error Changing Password</AlertTitle>
+              <AlertDescription>{error}</AlertDescription>
+            </Alert>
+          )}
+          <DialogFooter>
+            <Button
+              type="submit"
+              onClick={() => setOpen(false)}
+              variant={"ghost"}
+            >
+              Cancel
+            </Button>
+            <Button
+              type="submit"
+              onClick={handleSubmit}
+              variant={"destructive"}
+            >
+              Delete Account
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

server/src/lib/auth.ts

@@ -22,6 +22,9 @@ export const initAuth = (allowList: string[]) => {
     emailAndPassword: {
       enabled: true,
     },
+    deleteUser: {
+      enabled: true,
+    },
     plugins: [username()],
     trustedOrigins: allowList,
     advanced: {