add reauth for account changes

components/account/ConfirmIdentity.tsx

@@ -0,0 +1,63 @@
+// components/account/ConfirmIdentity.tsx
+"use client";
+import { useState } from "react";
+
+export default function ConfirmIdentity({
+    defaultIdentifier,
+    onSuccess,
+}: {
+    defaultIdentifier: string;            // prefill with username or email you show on the page
+    onSuccess: () => void;                // called after re-auth succeeds
+}) {
+    const [open, setOpen] = useState(false);
+    const [identifier, setIdentifier] = useState(defaultIdentifier);
+    const [password, setPassword] = useState("");
+    const [busy, setBusy] = useState(false);
+    const [err, setErr] = useState<string | null>(null);
+
+    async function submit() {
+        setBusy(true);
+        setErr(null);
+        try {
+            const res = await fetch("/api/auth/reconfirm", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                credentials: "include",
+                body: JSON.stringify({ identifier, password }),
+            });
+            const j = await res.json().catch(() => ({}));
+            if (!res.ok) throw new Error(j?.error || "Failed");
+            setOpen(false);
+            setPassword("");
+            onSuccess(); // now do the sensitive call
+        } catch (e: any) {
+            setErr(e?.message || "Re-auth failed");
+        } finally {
+            setBusy(false);
+        }
+    }
+
+    return (
+        <>
+        {/* wherever you need the step-up, render a button that opens this */}
+        <button className="btn" onClick={() => setOpen(true)}>Confirm it’s you</button>
+
+        {open && (
+            <div className="fixed inset-0 bg-black/50 grid place-items-center">
+            <div className="bg-card border rounded-lg p-4 w-full max-w-sm">
+            <h3 className="font-semibold mb-2">Confirm it’s you</h3>
+            <label className="block text-sm mb-1">Email or Username</label>
+            <input className="input w-full mb-2" value={identifier} onChange={e=>setIdentifier(e.target.value)} />
+            <label className="block text-sm mb-1">Password</label>
+            <input className="input w-full mb-3" type="password" value={password} onChange={e=>setPassword(e.target.value)} />
+            {err && <div className="text-red-600 text-sm mb-2">{err}</div>}
+            <div className="flex gap-2 justify-end">
+            <button className="btn" onClick={()=>setOpen(false)} disabled={busy}>Cancel</button>
+            <button className="btn-primary" onClick={submit} disabled={busy}>{busy ? "Checking…" : "Continue"}</button>
+            </div>
+            </div>
+            </div>
+        )}
+        </>
+    );
+}