magic link support and forgot password

app/beta/confirm/page.tsx

@@ -2,23 +2,24 @@
 "use client";
 
 import { useEffect, useRef, useState } from "react";
-import { useSearchParams } from "next/navigation";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useAuth } from "@/context/AuthContext";
 
 const API_BASE_URL =
   process.env.NEXT_PUBLIC_API_BASE_URL ?? "http://localhost:8080";
 
-type Status = "loading" | "success" | "error";
-
 export default function BetaConfirmPage() {
-  const searchParams = useSearchParams();
-  const token = searchParams.get("token");
-
-  const [status, setStatus] = useState<Status>("loading");
-  const [message, setMessage] = useState<string>("Please hang tight.");
-
-  // Prevent double-fire in React Strict Mode (dev)
+  const params = useSearchParams();
+  const token = params.get("token");
+  const router = useRouter();
+  const { setSession } = useAuth();
   const ran = useRef(false);
 
+  const [message, setMessage] = useState("Confirming your email…");
+  const [status, setStatus] = useState<"loading" | "success" | "error">(
+    "loading"
+  );
+
   useEffect(() => {
     if (!token) {
       setStatus("error");
@@ -26,67 +27,55 @@ export default function BetaConfirmPage() {
       return;
     }
 
-    // StrictMode can run effects twice in dev; bail out after first
     if (ran.current) return;
     ran.current = true;
 
-    const controller = new AbortController();
-
     (async () => {
       try {
-        setStatus("loading");
-        setMessage("Confirming your email…");
-
         const res = await fetch(`${API_BASE_URL}/api/auth/beta/confirm`, {
           method: "POST",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify({ token }),
-          signal: controller.signal,
         });
 
-        // If request was aborted, do nothing
-        if (controller.signal.aborted) return;
-
         if (!res.ok) {
-          // Don’t assume expired—just say it didn’t work
-          throw new Error("Confirm failed");
+          const text = await res.text().catch(() => "");
+          throw new Error(text || "Confirm link invalid/expired");
         }
 
-        setStatus("success");
-        setMessage("Check your inbox for your secure sign-in link.");
-      } catch (err) {
-        if (controller.signal.aborted) return;
+        const data = await res.json();
+        const jwt = data.token ?? data.accessToken;
+        if (!jwt) throw new Error("No token returned from server");
 
+        setSession(jwt, {
+          email: data.email,
+          displayName: data.displayName ?? null,
+          role: data.role ?? "USER",
+        });
+
+        setStatus("success");
+        setMessage("Confirmed. Signing you in…");
+        router.replace("/account?welcome=1");
+      } catch (e: any) {
         setStatus("error");
-        setMessage("This link is invalid or expired. Please request a new one.");
+        setMessage(
+          e?.message ||
+            "That link is invalid or expired. Please request a new one."
+        );
       }
     })();
-
-    return () => controller.abort();
-  }, [token]);
+  }, [token, router, setSession]);
 
   return (
     <main className="min-h-screen flex items-center justify-center bg-black text-white px-6">
-      <div className="max-w-md w-full text-center space-y-4">
-        {status === "loading" && (
-          <>
-            <h1 className="text-xl font-semibold">Confirming email…</h1>
-            <p className="text-sm text-zinc-400">{message}</p>
-          </>
-        )}
-
-        {status === "success" && (
-          <>
-            <h1 className="text-xl font-semibold">Email confirmed ✅</h1>
-            <p className="text-sm text-zinc-400">{message}</p>
-          </>
-        )}
+      <div className="max-w-md w-full rounded-xl border border-white/10 bg-white/5 p-6 text-center">
+        <h1 className="text-lg font-semibold">Battl Builders</h1>
+        <p className="mt-2 text-sm text-zinc-300">{message}</p>
 
         {status === "error" && (
-          <>
-            <h1 className="text-xl font-semibold">Link expired or invalid</h1>
-            <p className="text-sm text-zinc-400">{message}</p>
-          </>
+          <p className="mt-4 text-xs text-zinc-400">
+            Go back and request a fresh sign-in link.
+          </p>
         )}
       </div>
     </main>