Using Google ReCaptcha v3 in Next.js

Question

Using React ^16.13.1 & Next ^9.4.4

Attempting to get react-google-recaptcha-v3 working within my app.

It appears to be hanging at const result = await executeRecaptcha("homepage") in pages/index.js .

console.log(process.env.GOOGLE_RECAPTCHA_SITE_KEY) returns correct key.

Hard coding the key in pages/_app.js throws some errors in browser:

A cookie associated with a resource at http://google.com/ was set with `SameSite=None` but without `Secure`. It has been blocked, as Chrome now only delivers cookies marked `SameSite=None` if they are also marked `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5633521622188032.

A cookie associated with a cross-site resource at https://www.google.com/ was set without the `SameSite` attribute. It has been blocked, as Chrome now only delivers cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.

asyncGeneratorStep @ asyncToGenerator.js:6
_throw @ asyncToGenerator.js:29
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js:13
_next @ asyncToGenerator.js:25
(anonymous) @ asyncToGenerator.js:32
(anonymous) @ asyncToGenerator.js:21
clickHandler @ index.js:34
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:306
executeDispatch @ react-dom.development.js:389
executeDispatchesInOrder @ react-dom.development.js:414
executeDispatchesAndRelease @ react-dom.development.js:3278
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:3287
forEachAccumulated @ react-dom.development.js:3259
runEventsInBatch @ react-dom.development.js:3304
runExtractedPluginEventsInBatch @ react-dom.development.js:3514
handleTopLevel @ react-dom.development.js:3558
batchedEventUpdates$1 @ react-dom.development.js:21871
batchedEventUpdates @ react-dom.development.js:795
dispatchEventForLegacyPluginEventSystem @ react-dom.development.js:3568
attemptToDispatchEvent @ react-dom.development.js:4267
dispatchEvent @ react-dom.development.js:4189
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
discreteUpdates$1 @ react-dom.development.js:21887
discreteUpdates @ react-dom.development.js:806
dispatchDiscreteEvent @ react-dom.development.js:4168

pages/_app.js

import { GoogleReCaptchaProvider } from 'react-google-recaptcha-v3';

function MyApp({ Component, pageProps }) {
    return (
        <GoogleReCaptchaProvider
            reCaptchaKey={process.env.GOOGLE_RECAPTCHA_SITE_KEY}
        >
            <Component {...pageProps} />
        </GoogleReCaptchaProvider>
    )
}

export default MyApp

pages/index.js

import { useGoogleReCaptcha } from 'react-google-recaptcha-v3'

const index = () => {
    const [token, setToken] = React.useState("");
    const { executeRecaptcha } = useGoogleReCaptcha()
    const clickHandler = async () => {
        if (!executeRecaptcha) {
            return;
        }

        const result = await executeRecaptcha("homepage");

        setToken(result);
        console.log(token)
    };
    return (
        <Button type='submit' color='blue' onClick={clickHandler}>Test GRecap</Button>
    )
}

export default index

Answer 1

Two issues with my code:

The react-google-recaptcha-v3 package was hanging due to the way next.js handles.env variables . To expose the.env variable to the browser you need to prefix it with NEXT_PUBLIC_ .

Testing locally with google recaptcha v3 you need to create a new key to use for dev using localhost as domain.