feat(auth): add Supabase auth with Google, GitHub, and email OTP login

Introduce user registration/login gated behind optional NEXT_PUBLIC_SUPABASE_* env vars (leave blank to disable — app behaves exactly as before). Adds proxy.ts for automatic cookie session refresh, requireUser() API route guards on all 7 compute-consuming routes, AuthModal (Google/GitHub OAuth + 6-digit email OTP), UserChip header component, and login_success analytics event. Identity is fully decoupled from Session/engine — no type changes. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-06-13 17:33:55 +08:00
parent 2a2d58a64f
commit 87a2f93edb
22 changed files with 646 additions and 11 deletions
@@ -0,0 +1,106 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import { AUTH_ENABLED } from "@/lib/supabase/config";
+import { createClient } from "@/lib/supabase/client";
+import type { AuthChangeEvent, Session, User } from "@supabase/supabase-js";
+
+export function UserChip({
+  onLoginClick,
+}: {
+  onLoginClick: () => void;
+}) {
+  const [user, setUser] = useState<User | null>(null);
+  const [menuOpen, setMenuOpen] = useState(false);
+
+  useEffect(() => {
+    if (!AUTH_ENABLED) return;
+    const supabase = createClient();
+    supabase.auth.getUser().then(({ data }: { data: { user: User | null } }) => setUser(data.user));
+    const {
+      data: { subscription },
+    } = supabase.auth.onAuthStateChange((_event: AuthChangeEvent, session: Session | null) => {
+      setUser(session?.user ?? null);
+    });
+    return () => subscription.unsubscribe();
+  }, []);
+
+  const handleLogout = useCallback(async () => {
+    const supabase = createClient();
+    await supabase.auth.signOut();
+    setUser(null);
+    setMenuOpen(false);
+  }, []);
+
+  if (!AUTH_ENABLED) return null;
+
+  if (!user) {
+    return (
+      <button
+        type="button"
+        onClick={onLoginClick}
+        className="flex items-center gap-1.5 rounded-full border border-cream-50/15 bg-cream-50/[0.06] px-3 py-1.5 text-[11px] text-cream-50/70 transition-colors hover:bg-cream-50/[0.12] hover:text-cream-50/90"
+      >
+        <i className="fa-solid fa-right-to-bracket text-[10px]" />
+        登录
+      </button>
+    );
+  }
+
+  const label =
+    user.user_metadata?.full_name ??
+    user.email?.split("@")[0] ??
+    "User";
+  const avatarUrl = user.user_metadata?.avatar_url as string | undefined;
+  const initial = label.charAt(0).toUpperCase();
+
+  return (
+    <div className="relative">
+      <button
+        type="button"
+        onClick={() => setMenuOpen((v) => !v)}
+        className="flex items-center gap-2 rounded-full border border-cream-50/15 bg-cream-50/[0.06] pl-1.5 pr-3 py-1 text-[11px] text-cream-50/80 transition-colors hover:bg-cream-50/[0.12]"
+      >
+        {avatarUrl ? (
+          <img
+            src={avatarUrl}
+            alt=""
+            className="h-5 w-5 rounded-full object-cover"
+            referrerPolicy="no-referrer"
+          />
+        ) : (
+          <span className="flex h-5 w-5 items-center justify-center rounded-full bg-[rgba(175,138,72,0.6)] text-[10px] font-medium text-cream-50">
+            {initial}
+          </span>
+        )}
+        <span className="max-w-[100px] truncate">{label}</span>
+      </button>
+      {menuOpen && (
+        <>
+          <div
+            className="fixed inset-0 z-40"
+            onClick={() => setMenuOpen(false)}
+          />
+          <div
+            className="absolute right-0 top-full z-50 mt-1 min-w-[120px] overflow-hidden rounded-md"
+            style={{
+              background: "rgba(14, 10, 6, 0.92)",
+              border: "1px solid rgba(175, 138, 72, 0.5)",
+              backdropFilter: "blur(12px)",
+              WebkitBackdropFilter: "blur(12px)",
+            }}
+          >
+            <button
+              type="button"
+              onClick={handleLogout}
+              className="flex w-full items-center gap-2 px-3.5 py-2.5 text-[12px] text-cream-50/70 transition-colors hover:bg-cream-50/[0.08] hover:text-cream-50/90"
+            >
+              <i className="fa-solid fa-right-from-bracket text-[11px]" />
+              退出登录
+            </button>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}