beta sign up sends an email with a magic token. then a separate email to login.

app/beta/confirm/page.tsx

@@ -0,0 +1,94 @@
+// app/beta/confirm/page.tsx
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { useSearchParams } from "next/navigation";
+
+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 ran = useRef(false);
+
+  useEffect(() => {
+    if (!token) {
+      setStatus("error");
+      setMessage("Missing token.");
+      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");
+        }
+
+        setStatus("success");
+        setMessage("Check your inbox for your secure sign-in link.");
+      } catch (err) {
+        if (controller.signal.aborted) return;
+
+        setStatus("error");
+        setMessage("This link is invalid or expired. Please request a new one.");
+      }
+    })();
+
+    return () => controller.abort();
+  }, [token]);
+
+  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>
+          </>
+        )}
+
+        {status === "error" && (
+          <>
+            <h1 className="text-xl font-semibold">Link expired or invalid</h1>
+            <p className="text-sm text-zinc-400">{message}</p>
+          </>
+        )}
+      </div>
+    </main>
+  );
+}

app/beta/magic/page.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useAuth } from "@/context/AuthContext";
+
+export default function BetaMagicPage() {
+  const params = useSearchParams();
+  const token = params.get("token");
+  const router = useRouter();
+  const { setSession } = useAuth();
+    const ran = useRef(false);
+
+  const [status, setStatus] = useState<"loading" | "success" | "error">("loading");
+  const [message, setMessage] = useState("Signing you in…");
+
+  useEffect(() => {
+    if (!token) {
+      setStatus("error");
+      setMessage("Missing token.");
+      return;
+    }
+
+    // ✅ Prevent double-call (Strict Mode / rerenders)
+    if (ran.current) return;
+    ran.current = true;
+
+    (async () => {
+      try {
+        const res = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL ?? "http://localhost:8080"}/api/auth/magic/exchange`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ token }),
+        });
+
+        if (!res.ok) {
+          const text = await res.text().catch(() => "");
+          throw new Error(text || "Magic link failed");
+        }
+
+        const data = await res.json();
+
+        // Your AuthContext expects { token, email, displayName, role }
+        // and stores it in localStorage.
+        // We can simulate "login" by directly setting localStorage like AuthContext does,
+        // but easiest is just to store it here in the same shape.
+        setSession(data.token ?? data.accessToken, {
+            email: data.email,
+            displayName: data.displayName ?? null,
+            role: data.role ?? "USER",
+          });
+
+        setStatus("success");
+        setMessage("You’re in. Redirecting…");
+        router.replace("/builder");
+      } catch (e: any) {
+        setStatus("error");
+        setMessage(e?.message || "Magic link expired. Request a new one.");
+      }
+    })();
+}, [token, router, setSession]);
+
+  return (
+    <main className="min-h-screen bg-black text-zinc-50 flex items-center justify-center px-4">
+      <div className="max-w-md w-full rounded-xl border border-white/10 bg-white/5 p-6">
+        <h1 className="text-lg font-semibold">Battl Builders</h1>
+        <p className="mt-2 text-sm text-zinc-300">{message}</p>
+
+        {status === "error" && (
+          <div className="mt-4 text-xs text-zinc-400">
+            Try going back to your inbox and requesting a fresh sign-in link.
+          </div>
+        )}
+      </div>
+    </main>
+  );
+}