React bot detection and email validation
React runs in the browser, so it must not hold your API key. Call Conure from your own backend and expose a thin verdict endpoint to the client.
1. Install
No runtime dependency. The hook below uses the platform fetch.
2. Add the file
src/hooks/useEmailRisk.ts
import { useCallback, useEffect, useRef, useState } from "react";
export interface EmailVerdict {
is_risky: boolean;
risk_score: number;
reasons: string[];
}
/**
* Talks to YOUR backend (/api/email-risk), which holds the Conure key.
* Debounced, and aborts the in-flight request when the input changes.
*/
export function useEmailRisk(email: string, delayMs = 400) {
const [verdict, setVerdict] = useState<EmailVerdict | null>(null);
const [loading, setLoading] = useState(false);
const inFlight = useRef<AbortController | null>(null);
const check = useCallback(async (value: string) => {
inFlight.current?.abort();
const controller = new AbortController();
inFlight.current = controller;
setLoading(true);
try {
const response = await fetch("/api/email-risk", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ email: value }),
signal: controller.signal,
});
setVerdict(response.ok ? ((await response.json()) as EmailVerdict) : null);
} catch {
setVerdict(null); // fail open: never block signup on a network error
} finally {
if (!controller.signal.aborted) setLoading(false);
}
}, []);
useEffect(() => {
if (!email.includes("@")) {
setVerdict(null);
return;
}
const timer = setTimeout(() => void check(email), delayMs);
return () => clearTimeout(timer);
}, [email, delayMs, check]);
return { verdict, loading };
}3. Wire it up
function SignupForm() {
const [email, setEmail] = useState("");
const { verdict, loading } = useEmailRisk(email);
return (
<>
<input value={email} onChange={(event) => setEmail(event.target.value)} />
{loading && <span>Checking...</span>}
{verdict?.is_risky && <p role="alert">Please use a permanent email address.</p>}
<button disabled={verdict?.is_risky === true}>Create account</button>
</>
);
}4. Verify
Confirm the API answers before you debug your React
wiring. The sample address sits inside a published AWS range, so a correct setup
returns is_bot: true.
curl -X POST https://conureapi.com/v1/bot-check \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{"ip":"52.1.2.3","user_agent":"curl/8.4.0"}'
import requests
HEADERS = {"Authorization": "Bearer YOUR_API_KEY"}
response = requests.post(
"https://conureapi.com/v1/bot-check",
headers=HEADERS,
json={"ip": "52.1.2.3", "user_agent": "curl/8.4.0"},
timeout=5,
)
response.raise_for_status()
print(response.json())
const response = await fetch("https://conureapi.com/v1/bot-check", {
method: "POST",
headers: {
Authorization: "Bearer YOUR_API_KEY",
"Content-Type": "application/json",
},
body: JSON.stringify({"ip":"52.1.2.3","user_agent":"curl/8.4.0"}),
signal: AbortSignal.timeout(5000),
});
if (!response.ok) throw new Error("conure: " + response.status);
console.log(await response.json());
$curl = curl_init("https://conureapi.com/v1/bot-check");
curl_setopt_array($curl, [
CURLOPT_RETURNTRANSFER => true,
CURLOPT_TIMEOUT => 5,
CURLOPT_POST => true,
CURLOPT_POSTFIELDS => '{"ip":"52.1.2.3","user_agent":"curl/8.4.0"}',
CURLOPT_HTTPHEADER => [
"Authorization: Bearer YOUR_API_KEY",
"Content-Type: application/json",
],
]);
$body = curl_exec($curl);
$status = curl_getinfo($curl, CURLINFO_RESPONSE_CODE);
curl_close($curl);
$verdict = $status === 200 ? json_decode($body, true) : null;
var_dump($verdict);
require "net/http"
require "json"
uri = URI("https://conureapi.com/v1/bot-check")
request = Net::HTTP::Post.new(uri)
request["Authorization"] = "Bearer YOUR_API_KEY"
request["Content-Type"] = "application/json"
request.body = { ip: "52.1.2.3", user_agent: "curl/8.4.0" }.to_json
response = Net::HTTP.start(uri.hostname, uri.port,
use_ssl: uri.scheme == "https",
open_timeout: 5, read_timeout: 5) do |http|
http.request(request)
end
puts JSON.parse(response.body)
Notes
- Our CORS policy is deliberately not a wildcard. A browser cannot call the metered endpoints with your bearer token, by design: a key shipped to the browser is a public key.
- Treat the client-side result as user experience only. Re-check server-side before you write the row.