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:
Leon Serfaty
co-authored by
Claude Opus 5
Claude Opus 5
parent
35379212fb
commit
3e9ba07175
@@ -2,7 +2,7 @@
|
||||
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { Loader2, Save } from "lucide-react";
|
||||
import { Loader2, Save, Monitor, LogOut, Download, ShieldCheck } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
@@ -20,7 +20,16 @@ import { ConfirmDialog } from "@/components/admin/ui/confirm-dialog";
|
||||
import { authClient, signOut } from "@/lib/auth/auth-client";
|
||||
import { VOICE_CATALOG } from "@/lib/ai/voices";
|
||||
import { LANGUAGES } from "@/lib/episodes/options";
|
||||
import { savePreferencesAction, deleteAccountAction } from "@/app/(app)/settings/actions";
|
||||
import {
|
||||
savePreferencesAction,
|
||||
deleteAccountAction,
|
||||
listSessionsAction,
|
||||
revokeSessionAction,
|
||||
revokeOtherSessionsAction,
|
||||
exportMyDataAction,
|
||||
type ActiveSession,
|
||||
} from "@/app/(app)/settings/actions";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
|
||||
const NO_VOICE = "__none__";
|
||||
|
||||
@@ -252,6 +261,10 @@ export function SettingsClient({
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<SessionsCard />
|
||||
|
||||
<DataExportCard />
|
||||
|
||||
<Card className="border-destructive/30">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-destructive">Danger zone</CardTitle>
|
||||
@@ -294,3 +307,190 @@ export function SettingsClient({
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Best-effort, dependency-free user-agent summary. Deliberately coarse: this is
|
||||
* a recognition aid ("is that my laptop?"), not analytics, so an unknown agent
|
||||
* degrading to "Unknown browser" is fine.
|
||||
*/
|
||||
function describeUserAgent(ua: string | null): { browser: string; os: string } {
|
||||
if (!ua) return { browser: "Unknown browser", os: "unknown device" };
|
||||
const browser = /Edg\//.test(ua)
|
||||
? "Edge"
|
||||
: /OPR\//.test(ua)
|
||||
? "Opera"
|
||||
: /Chrome\//.test(ua)
|
||||
? "Chrome"
|
||||
: /Safari\//.test(ua)
|
||||
? "Safari"
|
||||
: /Firefox\//.test(ua)
|
||||
? "Firefox"
|
||||
: "Unknown browser";
|
||||
const os = /Windows/.test(ua)
|
||||
? "Windows"
|
||||
: /Android/.test(ua)
|
||||
? "Android"
|
||||
: /iPhone|iPad|iOS/.test(ua)
|
||||
? "iOS"
|
||||
: /Mac OS X|Macintosh/.test(ua)
|
||||
? "macOS"
|
||||
: /Linux/.test(ua)
|
||||
? "Linux"
|
||||
: "unknown device";
|
||||
return { browser, os };
|
||||
}
|
||||
|
||||
/** Signed-in devices, with per-device and bulk revocation. */
|
||||
function SessionsCard() {
|
||||
const [sessions, setSessions] = useState<ActiveSession[] | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [busy, setBusy] = useState<string | null>(null);
|
||||
|
||||
async function load() {
|
||||
setLoading(true);
|
||||
const res = await listSessionsAction();
|
||||
setLoading(false);
|
||||
if (!res.ok || !res.sessions) {
|
||||
toast.error(res.error ?? "Could not load sessions");
|
||||
return;
|
||||
}
|
||||
setSessions(res.sessions);
|
||||
}
|
||||
|
||||
async function revoke(id: string) {
|
||||
setBusy(id);
|
||||
const res = await revokeSessionAction(id);
|
||||
setBusy(null);
|
||||
if (!res.ok) {
|
||||
toast.error(res.error ?? "Could not sign out that device");
|
||||
return;
|
||||
}
|
||||
toast.success("Device signed out");
|
||||
await load();
|
||||
}
|
||||
|
||||
async function revokeOthers() {
|
||||
setBusy("all");
|
||||
const res = await revokeOtherSessionsAction();
|
||||
setBusy(null);
|
||||
if (!res.ok) {
|
||||
toast.error(res.error ?? "Failed");
|
||||
return;
|
||||
}
|
||||
toast.success(res.count ? "Signed out " + res.count + " other device(s)" : "No other devices");
|
||||
await load();
|
||||
}
|
||||
|
||||
const others = sessions?.filter((x) => !x.current) ?? [];
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<ShieldCheck className="h-4 w-4" />
|
||||
Active sessions
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Devices currently signed in to your account. Sign out anything you don't recognise.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{sessions === null ? (
|
||||
<Button variant="outline" onClick={load} disabled={loading}>
|
||||
{loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Monitor className="h-4 w-4" />}
|
||||
Show active sessions
|
||||
</Button>
|
||||
) : (
|
||||
<>
|
||||
<div className="divide-y rounded-2xl border">
|
||||
{sessions.map((x) => {
|
||||
const parts = describeUserAgent(x.userAgent);
|
||||
return (
|
||||
<div key={x.id} className="flex items-center gap-3 p-3">
|
||||
<Monitor className="h-4 w-4 shrink-0 text-muted-foreground" />
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="truncate text-sm font-medium">
|
||||
{`${parts.browser} on ${parts.os}`}
|
||||
{x.current ? (
|
||||
<Badge variant="secondary" className="ml-2">
|
||||
This device
|
||||
</Badge>
|
||||
) : null}
|
||||
</p>
|
||||
<p className="truncate text-xs text-muted-foreground">
|
||||
{x.ipAddress ?? "unknown IP"} · signed in{" "}
|
||||
{new Date(x.createdAt).toLocaleDateString()}
|
||||
</p>
|
||||
</div>
|
||||
{x.current ? null : (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
disabled={busy === x.id}
|
||||
onClick={() => revoke(x.id)}
|
||||
>
|
||||
<LogOut className="h-4 w-4" />
|
||||
Sign out
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{others.length > 0 ? (
|
||||
<Button variant="outline" onClick={revokeOthers} disabled={busy === "all"}>
|
||||
{busy === "all" ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
|
||||
Sign out all other devices ({others.length})
|
||||
</Button>
|
||||
) : null}
|
||||
</>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
/** Self-serve GDPR access request: download everything we hold, as JSON. */
|
||||
function DataExportCard() {
|
||||
const [busy, setBusy] = useState(false);
|
||||
|
||||
async function download() {
|
||||
setBusy(true);
|
||||
const res = await exportMyDataAction();
|
||||
setBusy(false);
|
||||
if (!res.ok || !res.json) {
|
||||
toast.error(res.error ?? "Could not export your data");
|
||||
return;
|
||||
}
|
||||
// Build the file in the browser so the JSON never has to round-trip through
|
||||
// a route handler that would need its own authorization.
|
||||
const url = URL.createObjectURL(new Blob([res.json], { type: "application/json" }));
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = `podcast-distribution-ai-export-${new Date().toISOString().slice(0, 10)}.json`;
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
toast.success("Export downloaded");
|
||||
}
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Download className="h-4 w-4" />
|
||||
Export your data
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Download your profile, episodes, scripts, series, usage and billing history as JSON.
|
||||
Passwords and access tokens are excluded.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Button variant="outline" onClick={download} disabled={busy}>
|
||||
{busy ? <Loader2 className="h-4 w-4 animate-spin" /> : <Download className="h-4 w-4" />}
|
||||
Download my data
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user