TurnstileをReact Routerに実装する!

npm i @marsidev/react-turnstile

import { Form, type ActionFunctionArgs } from "react-router";
import { Turnstile, type TurnstileInstance } from "@marsidev/react-turnstile";
import { useRef, useState } from "react";

// ここは環境に合わせる
import type { Route } from "./+types/_index";

export async function loader() {
  const CF_TURNSTILE_SITE_KEY = process.env.CF_TURNSTILE_SITE_KEY as string;
  return { CF_TURNSTILE_SITE_KEY };
}

export async function action({ request }: ActionFunctionArgs) {
  const formData = await request.formData();
  const token = formData.get("token") as string;

  const CF_TURNSTILE_SECRET_KEY = process.env.CF_TURNSTILE_SECRET_KEY as string;
  const CF_TURNSTILE_URL = process.env.CF_TURNSTILE_URL as string;

  if (!token) {
    return "Token is missing or invalid";
  }
  const tokenForm = new FormData();
  tokenForm.append("secret", CF_TURNSTILE_SECRET_KEY);
  tokenForm.append("response", token);

  const result = await fetch(CF_TURNSTILE_URL, {
    body: tokenForm,
    method: "POST",
  });

  const outcome = await result.json();
  if (outcome.success) {
    // ここでログインの処理とかをする

    return "Success!";
  }
  return "Failure...";
}

export default function Login({
  loaderData,
  actionData,
}: Route.ComponentProps) {
  const { CF_TURNSTILE_SITE_KEY } = loaderData;
  const result = actionData;

  const [token, setToken] = useState("");
  const ref = useRef<TurnstileInstance | undefined>(undefined);
  return (
    <div className="min-h-screen bg-gradient-to-r from-indigo-400 to-blue-500 flex items-center justify-center p-4">
      <div className="bg-white rounded-2xl shadow-2xl w-full max-w-md p-8">
        <h2 className="text-3xl font-bold text-center text-gray-800 mb-6">
          ログイン
        </h2>
        <Form method="post" className="space-y-4">
          <div>
            <label
              htmlFor="email"
              className="block text-sm font-medium text-gray-600"
            >
              メールアドレス
            </label>
            <input
              type="email"
              id="email"
              name="email"
              required
              className="w-full mt-1 px-4 py-2 border rounded-xl shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-400"
              placeholder="[email protected]"
            />
          </div>

          <div>
            <label
              htmlFor="password"
              className="block text-sm font-medium text-gray-600"
            >
              パスワード
            </label>
            <input
              type="password"
              id="password"
              name="password"
              required
              className="w-full mt-1 px-4 py-2 border rounded-xl shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-400"
              placeholder="••••••••"
            />
          </div>
          
          <Turnstile
            siteKey={CF_TURNSTILE_SITE_KEY}
            options={{
              // 色を白にする
              theme: "light",
              // 幅を引き延ばす
              size: "flexible",
            }}
            onSuccess={setToken}
            ref={ref}
          />
          <input type="hidden" name="token" value={token} />

          <button
            type="submit"
            className="w-full py-2 px-4 bg-indigo-500 hover:bg-indigo-600 text-white font-semibold rounded-xl transition duration-200"
            // ここでサブミットするごとにTurnstileの検証をやり直す。
            onSubmit={() => ref.current?.reset()}
            // Tokenがないとボタンを押せないようにする
            disabled={!token}
          >
            ログイン
          </button>
        </Form>
        {/* 結果の表示 */}
        {result && (
          <div className={"mt-4 text-center font-semibold text-black"}>
            {result}
          </div>
        )}
      </div>
    </div>
  );
}

CF_TURNSTILE_SITE_KEY="1x00000000000000000000AA"
CF_TURNSTILE_SECRET_KEY="1x0000000000000000000000000000000AA"
CF_TURNSTILE_URL="https://challenges.cloudflare.com/turnstile/v0/siteverify"