How to add ReCaptcha to your React app

#security #react #tutorial #beginners

Introduction

Recently I was tasked with the challenge of implementing Google's ReCaptcha verification system to our website. Turns out, it's not that hard to do!

In this tutorial, I will cover:

How to get a siteKey/secretKey for your website.
How to add ReCaptcha V2 (The checkbox version) to your project, alongside a user signup form.

I've already created an example project that you can follow along with here.

For those that just want to check out the final code, you can find it within the FormEnd file.

Creating your keys

Before we can start working with reCaptcha we need to get our siteKey and secretKey pair. This key determines what version of reCaptcha can be used, what variant if applicable, and what domains are valid.

Go ahead and click here to create your key-pair.

You will be asked to sign in to your google account, afterward you will be taken to the admin console. If you get redirected after signing it just re-click the link above.

Once you find yourself on the registration page you can start filling out the form. It's fairly straightforward, I'll also go through each step if you'd like to follow along.

Key-Pair steps

Label

This is just a name for you to recognize what the keypair is for. You can name it whatever you like.

I'll call mine recaptcha-example.

Type

This refers to the type of reCaptcha. V3 is a hidden form of verification. This tutorial will cover the checkbox verification so here I will select V2.

ReCaptcha V2 has three variants. We will select the "I'm not a Robot" setting.

Domains

Here is where you will set which domains will work with your reCaptcha. You can use any valid domain name. If you are running your example locally can add localhost to the list, then press the + to add it.

Owners

You will be an owner by default, you can also add any other individuals that can update or change the reCaptcha.

Finishing up

Now just check the "Terms of Service" box and decide whether you want to receive notifications about incorrect configurations, or unusual activity with the reCaptcha.

Now click Submit and you should now be able to see your site key and secret Keys. Go ahead and add these to your .env file. We'll use the names REACT_APP_SITE_KEY and REACT_APP_SECRET_KEY for the example.

You also have the ability to view the analytics for your reCaptcha token usage. It can show how often it's used, and how many rejections occur.

Adding ReCaptcha to the App

Here, we will use react-google-recaptcha to render our reCaptcha checkbox. It provides a bunch of useful props and handles a lot of the more complicated settings. You'll need to install react-google-recaptcha. This package makes working with the V2 reCaptcha extremely easy!

Within your terminal type yarn add react-google-recaptcha to add the package. After installation just head over to the FormStart.jsx file and import it.

import ReCaptchaV2 from 'react-google-recaptcha'

Now we'll add the component to the form, right before the submit button. We'll also need to add the siteKey in order for it to work properly.

<ReCaptchaV2 sitekey={process.env.REACT_APP_SITE_KEY} />

Congrats! You've added reCaptcha to the app!

You should be able to see the reCaptcha checkbox now if you run the application. Checking the box should either verify or ask you to pass the challenge.

We have the verification now, but what else do we need to get the form working?

We need to get the token from the reCaptcha component and add it to the form.
We should remove the token if the reCaptcha expires.

Getting the token

We need to create a new function to receive the reCaptcha token using the components onChange handler. This function will look very similar to how we update the other form inputs.

const handleToken = (token) => {
  setForm((currentForm) => {
   return {...currentForm, token }
  })
}

Easy enough, now we need a function to remove the token from the form.

const handleExpire = () => {
  setForm((currentForm) => {
   return {...currentForm, token: null }
  })
}

Awesome! With both functions created we can now add them to the reCaptcha component.

<ReCaptchaV2
  sitekey={process.env.REACT_APP_SITE_KEY}
  onChange={handleToken}
  onExpire={handleExpire}
/>

The ReCaptcha component is now set up, and the token should be submitted along with the other form params. All that's left is for us to verify the token for authenticity.

Verifying the token

Verifying a ReCaptcha token requires a server and is beyond the scope of this tutorial. You can check out the ReCaptcha docs for information on how to verify it. It's fairly straight forward. You just need to make a request to the google API that contains the secret key, and the ReCaptcha token that was generated from the checkbox.