Privy supports adding CAPTCHA to your login flow to prevent botting.
Once CAPTCHA is enabled, import the Captcha
component and place it as a peer to your login form: (When this component mounts, it will execute the invisible Captcha.)
import {Captcha, useLoginWithEmail} from '@privy-io/react-auth';
const MyLoginForm = () => {
const [email, setEmail] = useState('');
const {sendCode, loginWithCode} = useLoginWithEmail();
const handleSendCode = async () => {
try {
await sendCode(email);
} catch (err) {
// Captcha failures due to timeout or otherwise will show up here
// in addition to possible network errors from the sendCode request
//
// The `sendCode` method from `useLoginWithSms` and `initOAuth` method
// from `useLoginWithOAuth` work exactly the same way.
}
};
return (
<>
<input type="text" onChange={(e) => setEmail(e.target.value)} />
<button onClick={handleSendCode}>Send Code</button>
<Captcha />
</>
);
};
import {Captcha, useLoginWithEmail} from '@privy-io/react-auth';
const MyLoginForm = () => {
const [email, setEmail] = useState('');
const {sendCode, loginWithCode} = useLoginWithEmail();
const handleSendCode = async () => {
try {
await sendCode(email);
} catch (err) {
// Captcha failures due to timeout or otherwise will show up here
// in addition to possible network errors from the sendCode request
//
// The `sendCode` method from `useLoginWithSms` and `initOAuth` method
// from `useLoginWithOAuth` work exactly the same way.
}
};
return (
<>
<input type="text" onChange={(e) => setEmail(e.target.value)} />
<button onClick={handleSendCode}>Send Code</button>
<Captcha />
</>
);
};
That’s it! Whenever a user tries to log into your app, Privy will pre-validate the attempt with an invisible captcha. 🎉
Currently only Cloudflare’s Turnstile is
supported as a Captcha provider.