When a simple checkbox or hidden "honeypot" input isn't stopping bots from spamming your forms, you need a CAPTCHA solution. Google's reCAPTCHA works very well at stopping bots, but at what cost? Image-based challenges can be frustrating, and when form conversion rates are paramount, the last thing you want is additional friction or difficulty submitting the form.
You can probably relate to these questions I've asked myself while attempting to solve reCAPTCHAs:
- Does this motorhome count as a bus?
- Does the crosswalk light count as a traffic light?
- Does the tiny overlap on the edge of this tile count?
There's got to be a better way, right?
As it turns out, there is! Cloudflare has a competing product called Turnstile, which seems to be as effective as reCAPTCHA, but without the frustrating image-based challenges. Instead, the Turnstile is a simple checkbox, reminiscent of a simpler time, when submitting a form didn't feel like "work".
How does it work?
According to this blog post from Cloudflare:
"...the actual act of checking a box isn’t important, it’s the background data we’re analyzing while the box is checked that matters. We find and stop bots by running a series of in-browser tests, checking browser characteristics, native browser APIs, and asking the browser to pass lightweight tests..."
So how do you implement it in a React project?
You have several options:
Obviously, I am biased. I am the author of React Cloudflare Turnstile, so it is my go-to for all of my React / NextJS projects (including this website - see my contact form). I have no affiliation with Cloudflare, but I am a big fan of their services. React Cloudflare Turnstile is MIT licensed, completely free and open-source, though you will need to create a Cloudflare account to use the package.