Implementing v2 and v3 reCaptcha using React

What is CAPTCHA?

CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart) is a type of challenge-response security measure designed to differentiate between real website users and automated users, such as bots.

Many web services use CAPTCHAs to help prevent unwarranted and illicit activities such as spamming and password decryptions. CAPTCHAs require users to complete a simple test to demonstrate they are human and not a bot before giving them access to sensitive information.

What is reCAPTCHA?

There are several types of CAPTCHA systems, but the most widely used system is reCAPTCHA, a tool from Google. Luis von Ahn, the co-founder of Duolingo, created the tool back in 2007 and is being used by more than six million websites, including BBC, Bloomberg, and Facebook.

The first version of reCAPTCHA was made up of randomly generated sequences of distorted alphabetic and numeric characters and a text box.

To pass the test, a user needs to decypher the distorted characters and type them into the text box. Although computers are capable of creating images and generating responses, they can’t read or interpret information in the same way a person can to pass the test.

reCAPTCHA generates a response token for each request a user makes and sends it to Google’s API for verification. The API returns a score that determines if the user is a human or an automated program.

reCAPTCHA currently has two working versions: v2 and v3. Although v3 is the most recent version of reCAPTCHA (released in 2018), most websites still use reCAPTCHA v2, which was released in 2014.

reCAPTCHA v2 has two variants: checkbox and invisible. The checkbox variant, which is also known as “I’m not a robot”, is the most popular. one option for this variant displays a checkbox widget that users can interact with to verify their identity.

Google reCAPTCHA v3 is a technology designed to distinguish between human and automated interactions on websites. Unlike the earlier versions that required users to solve puzzles, reCAPTCHA v3 works behind the scenes, assigning a score to user interactions based on their behavior. This score helps developers determine the likelihood that a user is a human or a bot.

Implementing reCAPTCHA in React

Now that we understand what reCAPTCHA is, let’s see how we can implement it in a React app. But first, we need to sign our app up for an API key in the Google reCAPTCHA console. The key pair consists of two keys: The site key and the Secret key.

The site key invokes the reCAPTCHA service in our app. The secret key verifies the user’s response. It does this by authorizing the communication between our app’s backend and the reCAPTCHA server.

Go ahead and create your key pair here. (https://www.google.com/recaptcha/admin/create)

First, you’ll need to sign in with your Google account. Then, you’ll be redirected to the admin console. Next, you’ll fill out the registration form on the page to generate your site’s key pair.

Create a React Application using the below code.

create-react-app captcha

And install the node module with the command i.e. “npm install –save”.

then run your application using “npm start”.

Stop the application and install packages for the v3 captcha using the command “npm install react-google-recaptcha-v3”

Create a new folder to create function components for v3 Captcha and write simple form code along with v3 Captcha code.

As this application is running we are generating tokens continuously which we need to send to Google API to verify

For this we need to create a server side in the same project and run at CMD level.

We need to install Axios, express, cors, dotenv to hit the Google API with token generate but v3 Captcha using command “npm I express Axios cors dotenv --save”.

The server end code will look like the one below.

In the above code, we are hitting Google API with token value and using the secret key that we had generated at the start of the article using the admin console.

To run the above server code, we need to open the cmd with the file path for the folder containing “server.js” and run the command i.e. “node server.js”.

Now, we have had server running at port 8000. So we can run our react application to generate a token and submit it to the above server.

In the above, we are getting responses including {score, success value, timestamp, etc.} based on the token we generated using v3 captcha.

Install packages for v2 captcha using command “npm install --save react-google-recaptcha”

Create another page or component for v2 captcha implementation in the same folder. I have kept the same design with a different title and a little bit of code as per v2 Captcha. Check out the output screen in the below snap.

Let’s re-run the server in the same way as we discussed earlier in an article but we will change the “SITE_SECRET” key for the v2 captcha as it was commented while we implementing the v3 Captcha code.

Also will run the react app to generate a token for the v2 captcha and let see the output screen.

As we can check, v2 captcha was initiated for user response/ input. We need to select appropriate squares to meet the requested criteria and to identify ourselves as human or “I am not a robot” as shown in the below snap.

Once you have submitted the captcha, now you need to submit the token to the server to verify the response based on the Secret key and generate the token by responding to the v2 captcha.

On successful submission, you will receive a response from Google API as shown below snap.

In this article, we examined what reCAPTCHA is and how it works. We also walked through a tutorial to demonstrate how to implement reCAPTCHA in a React application and how to verify a user’s response token with a Node.js backend server.

I hope this article will help you build secure and bot-free React applications.