Custom reCaptcha v2 Gatsby Netlify - Sitekey is missing on Netlify, locally reCaptcha works with Gatsby

Support
, , , ,
1

Hello Netlify Forum,

I would need you help with custom reCaptcha v2 implementation on Netlify.

Gatsby Implementation:

  1. Library called react-google-recaptcha
  2. Used component to which I passed API key prop
                           <ReCAPTCHA
                              name="g-recaptcha"
                              sitekey={RECAPTCHA_KEY}
                              onChange={onReCaptchaValidation}
                            />
  1. Used the following env naming and added this env to Netlify.
    const RECAPTCHA_KEY = process.env.REACT_APP_SITE_RECAPTCHA_KEY;
    and REACT_APP_SITE_RECAPTCHA_SECRET
  2. The react component is OUTSIDE of the form.
  3. Form tag has the following props passes to it: 
                   <form

                      data-sitekey={RECAPTCHA_KEY}
                      className={styles.form}
                      id="sib-form"
                      method="POST"
                      action={sendinBlueEmbeddedUrl}
                      onSubmit={(event) => onSubmitHandler(emailInput, event)}
                      data-type="subscription"
                    >
  1. There is no script tag added to the site as this was not required in the react-google-recaptcha implementation.
  2. The domain has been whitelisted in the reCaptcha Google Admin.

The implementation works fine on Gatsby development and using gatsby build.
It does not work on Netlify. It gives the following error:

 Error: Missing required parameters: sitekey
        at R6.<anonymous> (recaptcha__en.js:113)
        at new R6 (recaptcha__en.js:402)
        at i8.<anonymous> (recaptcha__en.js:66)
        at new i8 (recaptcha__en.js:397)
        at recaptcha__en.js:205
        at a.i.explicitRender (recaptcha.js:144)
        at a.i.componentDidMount (recaptcha.js:167)
        at lo (react-dom.production.min.js:212)
        at pu (react-dom.production.min.js:255)
        at t.unstable_runWithPriority (scheduler.production.min.js:19)

The error occurs on deployment preview and after deployment.

What I have tested:

  1. Changing the name of env variables to SITE_RECAPTCHA_KEY using this tutorial Spam filters | Netlify Docs
  2. Adding props to form tag from the Spam filters | Netlify Docs
  3. Including the react reCaptcha component inside of the form tag.
  4. Loading the script manually in useEffect hook. The result: script loads with the right API key <script src="https://www.google.com/recaptcha/api.js?render=THE_API_KEY" async=""></script> but only locally. When in netlify preview the script loads <script src="https://www.google.com/recaptcha/api.js?render=undefined" async=""></script> even after changing the env variables to SITE_RECAPTCHA_KEY.

Questions:

  1. Using Netlify previews, I am accessing the page from a unique link. Is whitelisting <mydomain>.netlify.app in Google rechapta admin enough to test the implementation using the Netlify previews?
  2. Why would implementation work locally but not on Netlify?
  3. Which netlify props ARE REQUIRED for the form tag ? I have tried the ones you mentioned in the guide but they were not working on Netlify preview. To quote: " Add a data-netlify-recaptcha="true" attribute to the HTML form that has the custom reCAPTCHA widget."

What do you mean by saying “to the HTML form that has the custom reCAPTCHA widget”? My widget (reCaptcha react component) is OUTSIDE of the form.

Help is much appreciated.

EDIT:

I have solved the undefined env key issue. Unfortunately, I forgot to whitelist the key inside of gatsby-plugin-env-variables. Now, in the Netlify preview, it says Invalid domain for site key when the widget is rendered. Need to find out why this error is showing when I whitelisted <mydomain>.netlify.app in Google rechapta admin

EDIT 2:

Added the exact netlify preview URL to the whitelist in Google Recaptcha Admin. Worked like a charm.

Thanks!

1 Like
2

Hey there, @devdomsos

Thank you so much for not only writing a detailed post, but for also following up with your solutions! This will definitely be helpful for future Forums members who encounter something similar :netliconfetti:

Please let us know if you have any lingering questions.