React / Next.js

npm install @captchacat/nextjs

"use client";
 
import { Captchacat } from "@captchacat/nextjs";
import { useState } from "react";
 
export function LoginForm() {
  const [isVerified, setIsVerified] = useState(false);
 
  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const formData = new FormData(e.currentTarget);
 
    const response = await fetch("/api/login", {
      method: "POST",
      body: formData,
    });
 
    if (response.ok) {
      alert("Success!");
    }
  };
 
  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="username" placeholder="Username" />
      <input type="password" name="password" placeholder="Password" />
 
      <Captchacat
        siteKey="YOUR_SITE_KEY"
        onVerify={() => setIsVerified(true)}
      />
 
      <button type="submit" disabled={!isVerified}>
        Login
      </button>
    </form>
  );
}

import { NextResponse } from "next/server";
import { validateCaptchacatToken } from "@captchacat/nextjs/server";
 
export async function POST(request: Request) {
  const formData = await request.formData();
  const token = formData.get("captchacat-token") as string;
 
  const result = await validateCaptchacatToken({
    apiKey: process.env.CAPTCHACAT_API_KEY!,
    token,
  });
 
  if (!result.valid) {
    return NextResponse.json(
      { error: "CAPTCHA verification failed" },
      { status: 400 },
    );
  }
 
  // CAPTCHA valid - process login
  const username = formData.get("username");
  const password = formData.get("password");
  // ...
 
  return NextResponse.json({ success: true });
}

<form action="/api/login" method="POST">
  <input type="text" name="username" />
  <input type="password" name="password" />
  <Captchacat siteKey="YOUR_SITE_KEY" />
  <button type="submit">Login</button>
</form>