feat: Cloudflare Turnstile on auth, CSP fixes, admin/SEO/analytics additions

Turnstile bot protection (sign-in, sign-up, password-reset):
- Register Better Auth's captcha plugin with the cloudflare-turnstile
  provider; endpoints listed explicitly rather than relying on defaults.
  /reset-password is intentionally excluded — it is reached only via a
  single-use emailed token.
- Add an explicit-render Turnstile widget component. Tokens are single-use,
  so each form resets the challenge after a failed submit; submit stays
  disabled until a token is held.
- Read the site key server-side and pass it down as a prop, so rotating it
  does not require a rebuild.
- Fail fast in production when TURNSTILE_SECRET_KEY is missing, and when a
  secret is set without a site key (that combination would demand a token
  no form can produce, locking every user out).
- Pass a throwaway secret during `next build` in the Dockerfile, mirroring
  the existing BETTER_AUTH_SECRET treatment, so image builds don't need it.

CSP fixes in middleware (these blocked Turnstile entirely):
- Add frame-src for challenges.cloudflare.com. Without it the widget's
  iframe fell back to default-src 'self' and was blocked outright.
- Allow 'unsafe-eval' and websockets in DEVELOPMENT only. `next dev`
  compiles with eval(), so the strict policy threw EvalError and killed
  hydration — no client JS ran at all, which also meant form submit
  handlers never fired. Production policy is unchanged and still strict.

Also included (concurrent work in the tree):
- Admin organizations pages and lib/admin/orgs.
- Episode moderation migration, SEO metadata (sitemap, robots, JSON-LD,
  OG/Twitter images, manifest), Umami analytics, not-found page.

Local dev database: docker-compose.dev.yml provisions Postgres 18 on port
5443 (5432-5442 are in use by other local projects).

Note: `npx tsc --noEmit` currently fails in app/(app)/team/page.tsx — an
`invitations` prop the component does not accept. This predates the commit
and will fail `next build` until fixed.

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

components/auth/forgot-password-form.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useRef, useState } from "react";
 import Link from "next/link";
 import { Loader2, MailCheck } from "lucide-react";
 import { toast } from "sonner";
@@ -9,21 +9,31 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
 import { authClient } from "@/lib/auth/auth-client";
+import { Turnstile, type TurnstileHandle } from "./turnstile";
 
-export function ForgotPasswordForm() {
+export function ForgotPasswordForm({ turnstileSiteKey }: { turnstileSiteKey: string | null }) {
   const [loading, setLoading] = useState(false);
   const [sent, setSent] = useState(false);
+  // See sign-in-form: rendered only when configured, verified server-side.
+  const [captchaToken, setCaptchaToken] = useState("");
+  const turnstileRef = useRef<TurnstileHandle>(null);
+  const captchaRequired = !!turnstileSiteKey;
 
   async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault();
     setLoading(true);
     const form = new FormData(e.currentTarget);
-    const { error } = await authClient.requestPasswordReset({
-      email: String(form.get("email")),
-      redirectTo: "/reset-password",
-    });
+    const { error } = await authClient.requestPasswordReset(
+      {
+        email: String(form.get("email")),
+        redirectTo: "/reset-password",
+      },
+      captchaRequired ? { headers: { "x-captcha-response": captchaToken } } : undefined
+    );
     setLoading(false);
     if (error) {
+      // Single-use token: re-challenge so the retry fails on its real cause.
+      turnstileRef.current?.reset();
       toast.error(error.message ?? "Something went wrong");
       return;
     }
@@ -62,7 +72,20 @@ export function ForgotPasswordForm() {
             <Label htmlFor="email">Email</Label>
             <Input id="email" name="email" type="email" autoComplete="email" required />
           </div>
-          <Button type="submit" className="w-full" disabled={loading}>
+          {turnstileSiteKey && (
+            <Turnstile
+              ref={turnstileRef}
+              siteKey={turnstileSiteKey}
+              onToken={setCaptchaToken}
+              onError={() => toast.error("Could not load the security check. Please refresh.")}
+              className="flex justify-center"
+            />
+          )}
+          <Button
+            type="submit"
+            className="w-full"
+            disabled={loading || (captchaRequired && !captchaToken)}
+          >
             {loading && <Loader2 className="h-4 w-4 animate-spin" />}
             Send reset link
           </Button>

components/auth/sign-in-form.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useRef, useState } from "react";
 import Link from "next/link";
 import { useRouter, useSearchParams } from "next/navigation";
 import { Loader2 } from "lucide-react";
@@ -12,23 +12,42 @@ import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/com
 import { signIn } from "@/lib/auth/auth-client";
 import { safeRedirect } from "@/lib/utils";
 import { GoogleButton } from "./google-button";
+import { Turnstile, type TurnstileHandle } from "./turnstile";
 
-export function SignInForm({ googleEnabled }: { googleEnabled: boolean }) {
+export function SignInForm({
+  googleEnabled,
+  turnstileSiteKey,
+}: {
+  googleEnabled: boolean;
+  turnstileSiteKey: string | null;
+}) {
   const router = useRouter();
   const params = useSearchParams();
   // Validate the ?redirect param to prevent open-redirect attacks.
   const redirectTo = safeRedirect(params.get("redirect"));
   const [loading, setLoading] = useState(false);
+  // Turnstile is only rendered when configured; when it is, a solved token is
+  // required before the form can be submitted. The server rejects a missing or
+  // reused token regardless, so this is UX, not the security boundary.
+  const [captchaToken, setCaptchaToken] = useState("");
+  const turnstileRef = useRef<TurnstileHandle>(null);
+  const captchaRequired = !!turnstileSiteKey;
 
   async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault();
     setLoading(true);
     const form = new FormData(e.currentTarget);
-    const { error } = await signIn.email({
-      email: String(form.get("email")),
-      password: String(form.get("password")),
-    });
+    const { error } = await signIn.email(
+      {
+        email: String(form.get("email")),
+        password: String(form.get("password")),
+      },
+      captchaRequired ? { headers: { "x-captcha-response": captchaToken } } : undefined
+    );
     if (error) {
+      // Turnstile tokens are single-use — issue a fresh challenge for the retry,
+      // otherwise the next submit fails verification instead of on credentials.
+      turnstileRef.current?.reset();
       toast.error(error.message ?? "Invalid email or password");
       setLoading(false);
       return;
@@ -71,7 +90,20 @@ export function SignInForm({ googleEnabled }: { googleEnabled: boolean }) {
             </div>
             <Input id="password" name="password" type="password" autoComplete="current-password" required />
           </div>
-          <Button type="submit" className="w-full" disabled={loading}>
+          {turnstileSiteKey && (
+            <Turnstile
+              ref={turnstileRef}
+              siteKey={turnstileSiteKey}
+              onToken={setCaptchaToken}
+              onError={() => toast.error("Could not load the security check. Please refresh.")}
+              className="flex justify-center"
+            />
+          )}
+          <Button
+            type="submit"
+            className="w-full"
+            disabled={loading || (captchaRequired && !captchaToken)}
+          >
             {loading && <Loader2 className="h-4 w-4 animate-spin" />}
             Sign in
           </Button>

components/auth/sign-up-form.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useRef, useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { Loader2 } from "lucide-react";
@@ -11,21 +11,37 @@ import { Label } from "@/components/ui/label";
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
 import { signUp } from "@/lib/auth/auth-client";
 import { GoogleButton } from "./google-button";
+import { Turnstile, type TurnstileHandle } from "./turnstile";
 
-export function SignUpForm({ googleEnabled }: { googleEnabled: boolean }) {
+export function SignUpForm({
+  googleEnabled,
+  turnstileSiteKey,
+}: {
+  googleEnabled: boolean;
+  turnstileSiteKey: string | null;
+}) {
   const router = useRouter();
   const [loading, setLoading] = useState(false);
+  // See sign-in-form: rendered only when configured, verified server-side.
+  const [captchaToken, setCaptchaToken] = useState("");
+  const turnstileRef = useRef<TurnstileHandle>(null);
+  const captchaRequired = !!turnstileSiteKey;
 
   async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault();
     setLoading(true);
     const form = new FormData(e.currentTarget);
-    const { error } = await signUp.email({
-      name: String(form.get("name")),
-      email: String(form.get("email")),
-      password: String(form.get("password")),
-    });
+    const { error } = await signUp.email(
+      {
+        name: String(form.get("name")),
+        email: String(form.get("email")),
+        password: String(form.get("password")),
+      },
+      captchaRequired ? { headers: { "x-captcha-response": captchaToken } } : undefined
+    );
     if (error) {
+      // Single-use token: re-challenge so the retry fails on its real cause.
+      turnstileRef.current?.reset();
       // Accepted tradeoff (L8): the raw Better Auth message can reveal that an
       // email is already registered (account enumeration). We keep the specific
       // message for UX clarity; the signup endpoint is rate-limited server-side.
@@ -79,7 +95,20 @@ export function SignUpForm({ googleEnabled }: { googleEnabled: boolean }) {
             />
             <p className="text-xs text-muted-foreground">At least 8 characters.</p>
           </div>
-          <Button type="submit" className="w-full" disabled={loading}>
+          {turnstileSiteKey && (
+            <Turnstile
+              ref={turnstileRef}
+              siteKey={turnstileSiteKey}
+              onToken={setCaptchaToken}
+              onError={() => toast.error("Could not load the security check. Please refresh.")}
+              className="flex justify-center"
+            />
+          )}
+          <Button
+            type="submit"
+            className="w-full"
+            disabled={loading || (captchaRequired && !captchaToken)}
+          >
             {loading && <Loader2 className="h-4 w-4 animate-spin" />}
             Create account
           </Button>

components/auth/turnstile.tsx

@@ -0,0 +1,146 @@
+"use client";
+
+import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+
+const SCRIPT_ID = "cf-turnstile-script";
+const SCRIPT_SRC = "https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit";
+
+type TurnstileApi = {
+  render: (el: HTMLElement, opts: Record<string, unknown>) => string;
+  reset: (id: string) => void;
+  remove: (id: string) => void;
+};
+
+declare global {
+  // eslint-disable-next-line no-var
+  var turnstile: TurnstileApi | undefined;
+}
+
+/**
+ * Load Cloudflare's script once per page, no matter how many widgets mount.
+ * `render=explicit` keeps control in our hands so the widget can be reset —
+ * Turnstile tokens are single-use, so every failed submit needs a fresh one.
+ */
+let scriptPromise: Promise<void> | null = null;
+function loadTurnstileScript(): Promise<void> {
+  if (typeof window === "undefined") return Promise.resolve();
+  if (window.turnstile) return Promise.resolve();
+  if (scriptPromise) return scriptPromise;
+
+  scriptPromise = new Promise<void>((resolve, reject) => {
+    const existing = document.getElementById(SCRIPT_ID) as HTMLScriptElement | null;
+    if (existing) {
+      existing.addEventListener("load", () => resolve());
+      existing.addEventListener("error", () => reject(new Error("Turnstile failed to load")));
+      return;
+    }
+    const script = document.createElement("script");
+    script.id = SCRIPT_ID;
+    script.src = SCRIPT_SRC;
+    script.async = true;
+    script.defer = true;
+    script.onload = () => resolve();
+    script.onerror = () => {
+      // Allow a later mount to retry (e.g. the user was briefly offline).
+      scriptPromise = null;
+      reject(new Error("Turnstile failed to load"));
+    };
+    document.head.appendChild(script);
+  });
+  return scriptPromise;
+}
+
+/**
+ * `script.onload` does not guarantee `window.turnstile` is assigned yet, and the
+ * original code silently gave up forever when it wasn't — the widget would just
+ * never appear. Poll briefly instead so a slow parse still resolves.
+ */
+async function waitForTurnstileApi(timeoutMs = 10_000): Promise<void> {
+  const deadline = Date.now() + timeoutMs;
+  while (!window.turnstile && Date.now() < deadline) {
+    await new Promise((r) => setTimeout(r, 50));
+  }
+}
+
+export type TurnstileHandle = { reset: () => void };
+
+type TurnstileProps = {
+  siteKey: string;
+  /** Fires with the solved token, or "" whenever the token becomes unusable. */
+  onToken: (token: string) => void;
+  onError?: () => void;
+  className?: string;
+};
+
+/**
+ * Renders the Turnstile challenge. The parent owns the token and must send it
+ * as the `x-captcha-response` header; verification happens server-side in
+ * `lib/auth/auth.ts`.
+ */
+export const Turnstile = forwardRef<TurnstileHandle, TurnstileProps>(function Turnstile(
+  { siteKey, onToken, onError, className },
+  ref
+) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const widgetIdRef = useRef<string | null>(null);
+
+  // Hold the callbacks in refs so re-renders never tear down the widget —
+  // re-rendering it would drop a token the user already solved.
+  const onTokenRef = useRef(onToken);
+  const onErrorRef = useRef(onError);
+  onTokenRef.current = onToken;
+  onErrorRef.current = onError;
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      reset() {
+        if (widgetIdRef.current && window.turnstile) {
+          window.turnstile.reset(widgetIdRef.current);
+          onTokenRef.current("");
+        }
+      },
+    }),
+    []
+  );
+
+  useEffect(() => {
+    let cancelled = false;
+
+    loadTurnstileScript()
+      .then(() => waitForTurnstileApi())
+      .then(() => {
+        if (cancelled || widgetIdRef.current || !containerRef.current || !window.turnstile) return;
+        widgetIdRef.current = window.turnstile.render(containerRef.current, {
+          sitekey: siteKey,
+          // The auth screens render outside next-themes' provider, so let the
+          // widget follow the OS colour scheme instead of the app's theme.
+          theme: "auto",
+          callback: (token: string) => onTokenRef.current(token),
+          // Any of these means we no longer hold a usable token.
+          "error-callback": () => {
+            onTokenRef.current("");
+            onErrorRef.current?.();
+          },
+          "expired-callback": () => onTokenRef.current(""),
+          "timeout-callback": () => onTokenRef.current(""),
+        });
+      })
+      .catch(() => onErrorRef.current?.());
+
+    return () => {
+      cancelled = true;
+      const id = widgetIdRef.current;
+      widgetIdRef.current = null;
+      if (id && window.turnstile) {
+        try {
+          window.turnstile.remove(id);
+        } catch {
+          // Widget already gone (e.g. React 18/19 StrictMode double-invoke).
+        }
+      }
+    };
+  }, [siteKey]);
+
+  return <div ref={containerRef} className={className} />;
+});