feat: 3-click SSO registration - unified /auth page, Google/Apple/GitHub OAuth, email fallback, provider model

2026-06-15 12:42:03 +02:00
parent 64ae34e9c9
commit d194e295ad
12 changed files with 1150 additions and 294 deletions
@@ -0,0 +1,106 @@
+"use client";
+
+import { Suspense, useEffect, useState } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+
+function AuthCallbackContent() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [status, setStatus] = useState<"processing" | "success" | "error">(
+    "processing"
+  );
+  const [errorMsg, setErrorMsg] = useState("");
+
+  useEffect(() => {
+    const token = searchParams.get("token");
+    const error = searchParams.get("error");
+
+    if (error) {
+      setStatus("error");
+      setErrorMsg(decodeURIComponent(error));
+      return;
+    }
+
+    if (!token) {
+      setStatus("error");
+      setErrorMsg("No authentication token received.");
+      return;
+    }
+
+    // Store token in localStorage
+    localStorage.setItem("flh_token", token);
+
+    // Dispatch a custom event so the AuthContext can pick it up
+    // (used by popup-based OAuth where the opener listens)
+    window.dispatchEvent(
+      new StorageEvent("storage", {
+        key: "flh_token",
+        newValue: token,
+        oldValue: null,
+        storageArea: localStorage,
+      })
+    );
+
+    setStatus("success");
+
+    // If this is a popup window, close it after a brief delay
+    if (window.opener) {
+      setTimeout(() => window.close(), 500);
+    } else {
+      // Redirect to home
+      setTimeout(() => router.push("/"), 500);
+    }
+  }, [searchParams, router]);
+
+  return (
+    <div className="min-h-dvh bg-[#0a0a0f] flex items-center justify-center">
+      <div className="text-center">
+        {status === "processing" && (
+          <div className="flex flex-col items-center gap-4">
+            <div className="w-10 h-10 rounded-full border-2 border-[#D4AF37]/30 border-t-[#D4AF37] animate-spin" />
+            <p className="text-sm text-gray-400">Signing you in...</p>
+          </div>
+        )}
+        {status === "success" && (
+          <div className="flex flex-col items-center gap-3">
+            <div className="w-12 h-12 rounded-full bg-green-900/30 border border-green-700/40 flex items-center justify-center">
+              <span className="text-green-400 text-xl">✓</span>
+            </div>
+            <p className="text-sm text-green-400">Signed in successfully!</p>
+          </div>
+        )}
+        {status === "error" && (
+          <div className="flex flex-col items-center gap-3">
+            <div className="w-12 h-12 rounded-full bg-red-900/30 border border-red-700/40 flex items-center justify-center">
+              <span className="text-red-400 text-xl">✕</span>
+            </div>
+            <p className="text-sm text-red-400">{errorMsg}</p>
+            <button
+              onClick={() => router.push("/auth")}
+              className="mt-4 px-6 py-2 rounded-xl bg-[#D4AF37] text-[#0a0a0f] text-sm font-medium"
+            >
+              Back to Login
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default function AuthCallbackPage() {
+  return (
+    <Suspense
+      fallback={
+        <div className="min-h-dvh bg-[#0a0a0f] flex items-center justify-center">
+          <div className="flex flex-col items-center gap-4">
+            <div className="w-10 h-10 rounded-full border-2 border-[#D4AF37]/30 border-t-[#D4AF37] animate-spin" />
+            <p className="text-sm text-gray-400">Signing you in...</p>
+          </div>
+        </div>
+      }
+    >
+      <AuthCallbackContent />
+    </Suspense>
+  );
+}