auth: forgot/reset password + magic link + Google/MS/LinkedIn buttons

Forgot-password flow at /forum/forgot-password (Supabase resetPassword)
plus /forum/reset-password that catches the recovery session and lets
the user set a new password. 'Forgot password?' link added to the login
form.

SocialAuthButtons component drops onto both login + register pages with
three OAuth providers (Google, Microsoft / Azure, LinkedIn — Apple
skipped per Ryan, can add later when iOS app ships) plus a
no-password magic-link option that works zero-config via Supabase OTP.

Register page now detects already-known subscribers via the new
/api/auth/lookup-email endpoint and sends a magic-link login instead of
forcing them to pick a password. They can set a password later from
their account if they want.

Provider-side setup required: register OAuth apps in Google Cloud
Console / Microsoft Entra / LinkedIn Developers, paste client IDs +
secrets into Supabase dashboard → Authentication → Providers, set
redirect URL to https://broadcastbeat.com/auth/callback. Code is wired
to receive them.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/app/forum/forgot-password/page.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import { Suspense, useState } from "react";
+import Link from "next/link";
+import Header from "@/components/Header";
+import Footer from "@/components/Footer";
+import { createClient } from "@/lib/supabase/client";
+
+function ForgotInner() {
+  const supabase = createClient();
+  const [email, setEmail] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [msg, setMsg] = useState<string | null>(null);
+  const [err, setErr] = useState<string | null>(null);
+
+  async function submit(e: React.FormEvent) {
+    e.preventDefault();
+    setBusy(true); setMsg(null); setErr(null);
+    const { error } = await supabase.auth.resetPasswordForEmail(email.trim(), {
+      redirectTo: `${window.location.origin}/forum/reset-password`,
+    });
+    setBusy(false);
+    if (error) {
+      setErr(error.message);
+    } else {
+      setMsg("Check your inbox — we sent a password reset link. If you didn't have an account, no email is sent.");
+    }
+  }
+
+  return (
+    <>
+      <Header />
+      <main className="min-h-screen bg-gradient-to-b from-[#0d0d0d] via-[#111111] to-[#0d0d0d]">
+        <div className="max-w-md mx-auto px-4 py-16">
+          <div className="text-center mb-6">
+            <div className="text-[10px] uppercase tracking-widest text-[#3b82f6] font-mono mb-2">Account recovery</div>
+            <h1 className="text-3xl font-heading font-bold text-white">Reset your password</h1>
+            <p className="text-[#888] font-body text-sm mt-2">
+              Enter your email — we&rsquo;ll send a link to set a new password.
+            </p>
+          </div>
+          <form
+            onSubmit={submit}
+            className="bg-[#1a1a1a] border border-[#252525] rounded-lg p-6 space-y-4 shadow-2xl"
+          >
+            {err && (
+              <div className="bg-[#2a0a0a] border border-[#cc0000] text-[#ff8a8a] font-body text-sm px-3 py-2 rounded">
+                {err}
+              </div>
+            )}
+            {msg && (
+              <div className="bg-[#0a1f2a] border border-[#1e6c8c] text-[#7adbff] font-body text-sm px-3 py-2 rounded">
+                {msg}
+              </div>
+            )}
+            <div>
+              <label className="block text-xs font-body uppercase tracking-wider text-[#888] mb-1.5">
+                Email
+              </label>
+              <input
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                autoComplete="email"
+                required
+                className="w-full bg-[#0d0d0d] border border-[#2a2a2a] rounded-lg px-3 py-2 text-white font-body text-sm focus:outline-none focus:border-[#3b82f6]"
+              />
+            </div>
+            <button
+              type="submit"
+              disabled={busy || !email.trim()}
+              className="w-full bg-[#3b82f6] hover:bg-[#2563eb] disabled:opacity-50 text-white font-body font-semibold text-sm px-5 py-3 rounded-lg transition-colors"
+            >
+              {busy ? "Sending…" : "Send reset link"}
+            </button>
+            <div className="text-center text-xs font-body text-[#888] pt-2 border-t border-[#252525]">
+              Remembered it?{" "}
+              <Link href="/forum/login" className="text-[#3b82f6] hover:underline font-semibold">
+                Back to sign in
+              </Link>
+            </div>
+          </form>
+        </div>
+      </main>
+      <Footer />
+    </>
+  );
+}
+
+export default function ForgotPasswordPage() {
+  return (
+    <Suspense fallback={null}>
+      <ForgotInner />
+    </Suspense>
+  );
+}