Add Turnstile protection to user actions

components/TurnstileWidget.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import Script from "next/script";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+type TurnstileWidgetId = string;
+type TurnstileApi = {
+  render: (
+    container: HTMLElement,
+    options: {
+      sitekey: string;
+      action: string;
+      callback: (token: string) => void;
+      "expired-callback": () => void;
+      "error-callback": () => void;
+    },
+  ) => TurnstileWidgetId;
+  reset: (widgetId: TurnstileWidgetId) => void;
+};
+
+declare global {
+  interface Window {
+    turnstile?: TurnstileApi;
+  }
+}
+
+type TurnstileWidgetProps = {
+  siteKey: string;
+  action: string;
+  resetKey: number;
+  onTokenChange: (token: string | null) => void;
+};
+
+export function TurnstileWidget({ siteKey, action, resetKey, onTokenChange }: TurnstileWidgetProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const widgetIdRef = useRef<TurnstileWidgetId | null>(null);
+  const onTokenChangeRef = useRef(onTokenChange);
+  const [loadError, setLoadError] = useState(false);
+  const [verificationStatus, setVerificationStatus] = useState<"idle" | "ready" | "expired">("idle");
+
+  useEffect(() => {
+    onTokenChangeRef.current = onTokenChange;
+  }, [onTokenChange]);
+
+  useEffect(() => {
+    if (resetKey === 0) return;
+    if (widgetIdRef.current !== null && window.turnstile) {
+      window.turnstile.reset(widgetIdRef.current);
+    }
+    onTokenChangeRef.current(null);
+  }, [resetKey]);
+
+  const render = useCallback(() => {
+    if (!siteKey || !containerRef.current || widgetIdRef.current !== null) return;
+    if (!window.turnstile) {
+      setLoadError(true);
+      return;
+    }
+
+    try {
+      widgetIdRef.current = window.turnstile.render(containerRef.current, {
+        sitekey: siteKey,
+        action,
+        callback: (token) => {
+          setVerificationStatus("ready");
+          onTokenChangeRef.current(token);
+        },
+        "expired-callback": () => {
+          setVerificationStatus("expired");
+          onTokenChangeRef.current(null);
+        },
+        "error-callback": () => {
+          onTokenChangeRef.current(null);
+          setLoadError(true);
+        },
+      });
+    } catch {
+      setLoadError(true);
+      onTokenChangeRef.current(null);
+    }
+  }, [action, siteKey]);
+
+  return (
+    <div className="space-y-2" aria-live="polite">
+      <Script
+        src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit"
+        strategy="afterInteractive"
+        onReady={render}
+        onError={() => setLoadError(true)}
+      />
+      <div ref={containerRef} />
+      {!siteKey || loadError ? (
+        <p className="text-sm text-red-700" role="alert">
+          Die Sicherheitsprüfung ist momentan nicht verfügbar. Bitte lade die Seite neu und versuche es erneut.
+        </p>
+      ) : verificationStatus === "expired" ? (
+        <p className="text-sm text-red-700" role="alert">
+          Die Sicherheitsprüfung ist abgelaufen. Bitte bestätige sie erneut.
+        </p>
+      ) : null}
+    </div>
+  );
+}