How to get reCaptcha on multiple Gatsby pages

readme.md

How to get reCaptcha on multiple Gatsby pages

Add a unique random identifier at the end of Google's reCaptcha script so each page has his own reCaptcha script.

`https://www.google.com/recaptcha/api.js?r=${Math.random()}`

Then, add reCaptcha div in your form. No need of complex Gatsby plugin.

page.jsx

import React from 'react';
import { Helmet } from 'react-helmet';

import { REACAPTCHA_PUBLIC } from '../config';

const Page = () => {
  return (
    <React.Fragment>
      <Helmet>
        <script src={`https://www.google.com/recaptcha/api.js?r=${Math.random()}`} async defer></script>
      </Helmet>
      <form>
        <div className="g-recaptcha" data-sitekey={REACAPTCHA_PUBLIC}></div>
      </form>
    </React.Fragment>
  );
};

export default Page;

It's work fine but how to validate recaptcha i mean how to take values from it

@Kasilucky You'll have to validate the ReCaptcha value on server-side only, this is not part of Gatsby static generated website. Whatever you're doing to send your form data to the server side (login, contact, etc.) : your front-end (static Gatsby website) needs to send the ReCaptcha input value to your API/Form-Endpoint. Then you will be able to validate this token using the Google ReCaptcha API and your ReCaptcha secret token for server-side only, see here : developers.google.com/recaptcha/docs/verify.