How to implement reCAPTCHA v3 in React

Today we’ll show you how to implement reCAPTCHA v3 in React. There are many libraries that are available to add Google reCAPTCHA to the React application, but if possible the functionality should be implemented without external packages.

Here, we will use Google reCAPTCHA official document in a slightly different way. We have to finish this functionality in two parts. In this part, we will show you how to generate google reCAPTCHA v3 keys and how to implement them in the react application. Whereas in the second part, we will show you how to verify the response in the backend.

Google reCAPTCHA v3

Steps to implement reCAPTCHA v3 in React

  1. Generate google reCAPTCHA v3 keys
  2. Create a react application
  3. Add google reCAPTCHA in component
  4. Call a backend API to verify reCAPTCHA response
  5. Output

1. Generate google reCAPTCHA v3 keys

First, we have to generate reCAPTCHA v3 keys from which we will use the SITE KEY for the client side integration and the SECRET KEY for the server side integration. Use this link to generate keys. The following image will help you to create keys.

Generate reCAPTCHA Keys - How to implement reCAPTCHA v3 in React - Clue Mediator
Generate reCAPTCHA Keys – How to implement reCAPTCHA v3 in React – Clue Mediator

Note: Don’t forget to add localhost in the Domains section for local development.

2. Create a react application

Let’s create a simple react application using the create-react-app package. Run the following command to create a react app.

3. Add google reCAPTCHA in component

First, we’ll create a simple form in the react component. We will submit the form data along with the reCAPTCHA token.

App.js

Use the following CSS to design the form.

index.css

Now, we have to dynamically load the JavaScript API with your site key.

Now, we have to execute the google reCAPTCHA on the submit button click. Once we receive the token we will submit the data.

4. Call a backend API to verify reCAPTCHA response

In the final step, we have to call a backend API to pass the reCAPTCHA response along with the form data. Whereas in the backend, we have to verify the response using SECRET KEY. We’ll show you that step in the upcoming article.

5. Output

Let’s combine all code together and see how it looks.

App.js

Run the project and check the output in the browser.

Output - How to implement reCAPTCHA v3 in React - Clue Mediator
Output – How to implement reCAPTCHA v3 in React – Clue Mediator

That’s it for today.
Thank you for reading. Happy Coding..!!

Demo & Source Code

Github Repository
If you found value in this article,
you can support us by buying me a coffee! ☕

You may also like...

4 Responses

  1. Andrii says:

    Thanks a lot!

  2. dbMI says:

    Can you advise how to implement the back-end function? Perhaps in Firebase?

  3. Julien says:

    This just worked, thanks a lot!

Leave a Reply

Your email address will not be published. Required fields are marked *