How to setup Google reCAPTCHA in a ReactJS app?

Google’s reCAPTCHA is an industry standard when it comes to fighting bots. Integrating it in a regular web app has almost become a no-brainer, thanks to plugins available on almost every platform to do the job. With this expectation, I started integrating it in my latest app built on ReactJS but encountered many roadblocks. Without going into details, I’m sharing here fastest recipe for integrating it with your ReactJS app.

1. Sign up for reCAPTCHA

Follow this link and get your app registered with Google. When you’ve registered, you should a pair of keys, a Site Key and a Secret Key.

2. Frontend Integration

There’s a plethora of reCAPTCHA plugins available for ReactJS at NPM, but the one I found working and easy to use is react-google-recaptcha. As mentioned on the plugin page, integrating it in your code is pretty simple.

3. Backend Integration

At your backend server, the controller that receives the form submission request needs to send an HTTP request to Google to verify if the request from a human being and not from a bot. Below is a verification function in context of NodeJS/ExpressJS stack.

That should be it. Did this blogpost help you in anyway? Do let me know, I’d love to hear.