Onzichtbare CAPTCHA voor React & Next.js

<!-- In <head> or before </body> of every page with a form -->
<script src="https://api.silentshield.io/client.js?k=YOUR_API_KEY" defer></script>

import React, { useState } from "react";

export default function ContactForm() {
  const [loading, setLoading] = useState(false);
  const [message, setMessage] = useState("");

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);

    try {
      // client.js injects a hidden behavior_nonce input into the form —
      // read it from the form data (there is no global SilentShield object).
      const formData = new FormData(e.currentTarget);
      const nonce = formData.get("behavior_nonce");

      // Verify on your backend
      const res = await fetch("/api/verify", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ nonce }),
      });

      const data = await res.json();

      if (res.ok && data.success) {
        setMessage("Successfully verified!");
        // Process form submission
      } else {
        setMessage("Bot detected. Please try again.");
      }
    } catch (error) {
      console.error("Verification failed:", error);
      setMessage("Verification failed. Please try again.");
    } finally {
      setLoading(false);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="email" placeholder="Email" required />
      <button type="submit" disabled={loading}>
        {loading ? "Verifying..." : "Submit"}
      </button>
      {message && <p>{message}</p>}
    </form>
  );
}

// app/api/verify/route.ts
export async function POST(req: Request) {
  const { nonce } = await req.json();
  const res = await fetch("https://api.silentshield.io/api/v1/captcha/verify-nonce", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "X-Api-Key": process.env.SILENTSHIELD_API_KEY!,
    },
    body: JSON.stringify({ nonce: nonce }),
    signal: AbortSignal.timeout(5000),
  });
  const result = await res.json().catch(() => ({}));
  const human = res.ok && result.ok === true && result.verdict === "human" && result.confidence >= 0.7;

  if (!human) {
    return Response.json({ error: "Bot detected" }, { status: 403 });
  }

  // Human — process the form
  return Response.json({ success: true });
}