reCAPTCHA v3: The Latest Version Which Runs in the Background, Without a User Challenge.

reCAPTCHA is a free service offered by Google that protects websites from spam and abuse. It can be easily integrated into any website to prevent spam submissions and protect user data. In this tutorial, we’ll learn how to add Google reCAPTCHA v3 to a Contact Page using GetForm.io on a Gatsby website.

Google reCAPTCHA v3 is a new version of reCAPTCHA that uses a scoring system to determine whether a user is a human or a bot. It works in the background and doesn’t require the user to solve a challenge like the previous versions.

This tutorial assumes that you have a Gatsby webpage with a Contact Form. You can use any package for handling your Contact Form, but for this tutorial I used GetForm.io

Let’s get started!

Step 1: Get reCAPTCHA Site Key

The first step is to get a reCAPTCHA site key from the Google reCAPTCHA website. To do this, follow these steps:

1. Go to the Google reCAPTCHA website.
2. Click on the “Get reCAPTCHA” button.
3. Fill in the form with your website information and select reCAPTCHA v3.
4. Accept the terms and conditions and click on the “Register” button.
5. You will now see a site key and secret key. Make a note of the site key as you will need it in the next step.

Step 2: Install the react-google-recaptcha-v3 package

To add reCAPTCHA to your Gatsby website, you need to install a package. Many other tutorials will tell you to use gatsby-plugin-recaptcha package, but for reCAPTCHA v3 you actually want the react-google-recaptcha-v3 package. To install the correct package, run the following command in your terminal:

npm i react-google-recaptcha-v3

Step 3: Add the plugin to your gatsby-config.js file

Now that you have installed the plugin, you need to add it to your gatsby-config.js file. To do this, open your gatsby-config.js file and add the following code:

yaml
Copy code
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-recaptcha`,
      options: {
        async: true,
        defer: false,
        args: `?render=explicit`,
        sitekey: `your-site-key`,
        badge: `bottomright`,
      },
    },
  ],
}

Remember to replace your-site-key with your actual reCAPTCHA site key.

Step 4: Add reCAPTCHA to your form

Finally, you need to add reCAPTCHA to your form. To do this, open the file where your form is located and add the following code:

import ReCAPTCHA from "gatsby-plugin-recaptcha"

...

<form>
  ...
  <ReCAPTCHA />
  <button type="submit">Submit</button>
</form>