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>
This commit is contained in:
co-authored by
Claude Opus 5
parent
35379212fb
commit
3e9ba07175
@@ -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} />;
|
||||
});
|
||||
Reference in New Issue
Block a user