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
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user