SilentShield is an invisible, GDPR-compliant CAPTCHA alternative for React and Next.js apps. You load a lightweight client script, obtain a token and verify it on the server with the @forge12interactive/silentshield-sdk-js package and a single API key. There are no cookies, no tracking and no personal data, and hosting is EU-only by default.
Invisible CAPTCHA for React & Next.js
Works with any React or Next.js app via the lightweight SilentShield script: collect a nonce on submit, verify it on your backend with @forge12interactive/silentshield-sdk-js. Invisible and GDPR-compliant.
Developer Experience
Code examples
Embed the client script
<!-- Add to <head> with SRI for security -->
(function () {
var KEY = "YOUR_API_KEY";
var SITE = location.hostname;
var V = "2025.09.1";
var s = document.createElement('script');
s.src = "https://api.silentshield.io/client.js?k=" + encodeURIComponent(KEY)
+ "&v=" + encodeURIComponent(V)
+ "&site=" + encodeURIComponent(SITE);
s.async = true;
s.crossOrigin = "anonymous";
document.head.appendChild(s);
})();React component
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>
);
}Backend verification (Next.js)
// app/api/verify/route.ts
import { SilentShield } from "@forge12interactive/silentshield-sdk-js";
export async function POST(req: Request) {
const { nonce } = await req.json();
const result = await SilentShield.verifyNonce(nonce, process.env.SILENTSHIELD_API_KEY);
const human = result.ok && 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 });
}How SilentShield works in React
SilentShield loads a small client script that runs an invisible check while a user interacts with your form. On submit, your React or Next.js component sends the generated token to your backend, where you verify it with the @forge12interactive/silentshield-sdk-js package. Users never see a puzzle, and your bundle stays light because there is no heavy widget to render.
Client script plus server verification
There is no separate @silentshield/react web package to install — SilentShield works in any React or Next.js app through the client script and a server-side verify. You add the script https://api.silentshield.io/client.js?k=YOUR_API_KEY, read the token in your component, and confirm it against https://api.silentshield.io/v1/verify using the api-key header from a route handler or API route.
Setup walkthrough
Create an account and copy your API key. Add the SilentShield client script to your app and capture the token when the form is submitted. Install @forge12interactive/silentshield-sdk-js on your server, create the client with your API key, and call verify with the token. If the result is human, process the request; otherwise reject it.
Privacy and accessibility by default
SilentShield stores no cookies, performs no tracking and collects no personal data, so your app stays GDPR-compliant. Verification runs on EU-only infrastructure by default. The invisible check meets WCAG 2.1 AA, which keeps your forms usable for keyboard and screen-reader users without any visual challenge.
Integrate with React now
Add the script, verify with @forge12interactive/silentshield-sdk-js — ready in minutes.