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

2025-12-20 17:15:10 -05:00
parent c06696e66d
commit 8d9013d0dd
8 changed files with 459 additions and 119 deletions
@@ -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>
+  );
+}