feat(auth) : protect admin login with turnstile

components/admin/login-card.tsx

@@ -3,7 +3,8 @@
 import { CircleAlertIcon, LogInIcon } from "lucide-react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import { type FormEvent, useState } from "react";
+import Script from "next/script";
+import { type FormEvent, useCallback, useRef, useState } from "react";
 
 import {
   Alert,
@@ -24,13 +25,73 @@ import { Input } from "@/components/ui/input";
 import { Spinner } from "@/components/ui/spinner";
 import { authClient } from "@/lib/auth/client";
 
-export function LoginCard() {
+interface TurnstileApi {
+  render(
+    container: HTMLElement,
+    options: {
+      sitekey: string;
+      callback: (token: string) => void;
+      "expired-callback": () => void;
+      "error-callback": () => void;
+    },
+  ): string;
+  reset(widgetId: string): void;
+}
+
+declare global {
+  interface Window {
+    turnstile?: TurnstileApi;
+  }
+}
+
+interface LoginCardProps {
+  turnstileSiteKey: string;
+}
+
+export function LoginCard({ turnstileSiteKey }: LoginCardProps) {
   const router = useRouter();
+  const turnstileContainerRef = useRef<HTMLDivElement>(null);
+  const turnstileWidgetIdRef = useRef<string | null>(null);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [turnstileToken, setTurnstileToken] = useState<string | null>(null);
+
+  const renderTurnstile = useCallback(() => {
+    if (
+      !window.turnstile ||
+      !turnstileContainerRef.current ||
+      turnstileWidgetIdRef.current
+    ) {
+      return;
+    }
+
+    turnstileWidgetIdRef.current = window.turnstile.render(
+      turnstileContainerRef.current,
+      {
+        sitekey: turnstileSiteKey,
+        callback: (token) => {
+          setTurnstileToken(token);
+          setError(null);
+        },
+        "expired-callback": () => setTurnstileToken(null),
+        "error-callback": () => {
+          setTurnstileToken(null);
+          setError("ยืนยันตัวตนไม่สำเร็จ โปรดลองอีกครั้ง");
+        },
+      },
+    );
+  }, [turnstileSiteKey]);
+
+  function resetTurnstile() {
+    setTurnstileToken(null);
+    if (window.turnstile && turnstileWidgetIdRef.current) {
+      window.turnstile.reset(turnstileWidgetIdRef.current);
+    }
+  }
 
   async function signIn(event: FormEvent<HTMLFormElement>) {
     event.preventDefault();
+    if (!turnstileToken) return;
     setLoading(true);
     setError(null);
 
@@ -43,6 +104,9 @@ export function LoginCard() {
         email,
         password,
         rememberMe: true,
+        fetchOptions: {
+          headers: { "x-captcha-response": turnstileToken },
+        },
       });
       if (result.error) {
         setError(
@@ -57,6 +121,7 @@ export function LoginCard() {
     } catch {
       setError("เชื่อมต่อระบบเข้าสู่ระบบไม่ได้ โปรดลองอีกครั้ง");
     } finally {
+      resetTurnstile();
       setLoading(false);
     }
   }
@@ -96,6 +161,19 @@ export function LoginCard() {
                 required
               />
             </Field>
+            <Field>
+              <div ref={turnstileContainerRef} className="min-h-[65px]" />
+              <Script
+                src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit"
+                strategy="afterInteractive"
+                onLoad={renderTurnstile}
+                onReady={renderTurnstile}
+                onError={() => {
+                  setTurnstileToken(null);
+                  setError("โหลดระบบยืนยันตัวตนไม่สำเร็จ โปรดลองอีกครั้ง");
+                }}
+              />
+            </Field>
             {error ? (
               <Alert variant="destructive">
                 <CircleAlertIcon aria-hidden="true" />
@@ -103,7 +181,12 @@ export function LoginCard() {
                 <AlertDescription>{error}</AlertDescription>
               </Alert>
             ) : null}
-            <Button className="w-full" size="lg" type="submit" disabled={loading}>
+            <Button
+              className="w-full"
+              size="lg"
+              type="submit"
+              disabled={loading || !turnstileToken}
+            >
               {loading ? (
                 <Spinner data-icon="inline-start" />
               ) : (