Interactive demo
CanvasCaptcha — browser-only
Works immediately. No backend, no database, no API calls. Copy the component and drop it in.
Security check
Case-sensitive · 5 characters · Mixed case + digits · No ambiguous chars (I/i/l/O/o/0/1)
Drop-in usage (React)
jsx
import { useRef } from 'react'; import CanvasCaptcha from './CanvasCaptcha'; function ContactForm() { const captchaRef = useRef(null); const handleSubmit = (e) => { e.preventDefault(); // validate() returns true/false // auto-redraws on wrong answer if (!captchaRef.current.validate()) return; // ✓ safe to submit }; return ( <form onSubmit={handleSubmit}> <CanvasCaptcha ref={captchaRef} /> <button type="submit">Send</button> </form> ); }
Zero dependencies
One file, no
npm install needed. Copy CanvasCaptcha.jsx and you're done.ServerCaptcha — backend-verified
Images generated server-side. Answers stored in MongoDB. The browser never sees the solution.
Your EasyCaptcha backend URL
🖥
Start your service, then click Load
Enter backend URL above and click Load
Drop-in usage (React)
jsx
import { useState } from 'react'; import ServerCaptcha from './ServerCaptcha'; function LoginForm() { const [captcha, setCaptcha] = useState(null); const [reset, setReset] = useState(0); const handleSubmit = async (e) => { e.preventDefault(); if (!captcha) return; const res = await fetch('/api/login', { method: 'POST', body: JSON.stringify({ captcha_token_id: captcha.tokenId, captcha_answer: captcha.answer, }), }); if (!res.ok) setReset(r => r + 1); }; return ( <form onSubmit={handleSubmit}> <ServerCaptcha apiUrl="http://localhost:8080" onReady={setCaptcha} resetTrigger={reset} /> </form> ); }
How it works
Answer is stored in MongoDB only. Your backend verifies via
POST /captcha/verify. The browser never sees the solution.