React Google Recaptcha `executeRecaptcha` function always return `null`

Question

I am using react-google-recaptcha-v3 with version ^1.10.0, but when I want to get the token from the executeRecaptcha function, the function always returns null instead of returning the token. Does anybody have a clue?

Attached code:

import React, {  useState } from 'react';
import {
    GoogleReCaptchaProvider,
    useGoogleReCaptcha,
} from 'react-google-recaptcha-v3';

...

const AuthSigninPage = () => {
    const service = new AuthService();
    const isRecaptchaAvailable = true;

    const setPhone = useAuthStore((state) => state.setPhone);
    const { executeRecaptcha } = useGoogleReCaptcha();
    const { getPhoneState } = usePhoneState();

    const { push } = useRouter();

    const [isButtonDisabled, setIsButtonDisabled] = useState<boolean>(true);



    const authenticate = async () => {
        try {
            const isEligibleToLogin = await checkRecaptcha();
            if (!isEligibleToLogin) return;

            setPhone(phone);
            const { isHasPassword, isRegistered } = await getPhoneState(phone);

            if (!isRegistered) {
                return;
            }

            push(isHasPassword ? '/auth/password' : '/auth/verify');
        } catch (error: any) {
            ...
        }
    };

    const checkRecaptcha = async () => {
        try {
            let isRecaptchaValid: boolean = true;

            if (!executeRecaptcha) {
                console.log('Execute recaptcha not yet available');
                return;
            }

            if (isRecaptchaAvailable) {
                const token = await executeRecaptcha!('login');

                console.log(token); // always return null

                if (!token) {
                    bottomSheet.warning({
                        message: 'Recaptcha token is not available',
                    });

                    return false;
                }

                isRecaptchaValid = await service.validateRecaptcha(token);
            }

            if (!isRecaptchaValid) {
                bottomSheet.error({
                    message: 'Recaptcha is not valid',
                });
            }

            return isRecaptchaValid;
        } catch (error: any) {
            JSON.stringify(error);
        }
    };

    return (
        <MainLayout
            backable
            title="Masuk"
        >
            Pretend that there is another element here like button to login
        </MainLayout>
    )
};

const SigninPageWrappedWithCaptcha = () => {
    return (
        <GoogleReCaptchaProvider
            reCaptchaKey={process.env.NEXT_PUBLIC_GR_KEY as string}
        >
            <AuthSigninPage />
        </GoogleReCaptchaProvider>
    );
};

export default SigninPageWrappedWithCaptcha;

Answer 1

You have a little typo in your executeRecaptcha function:

Change this const token = await executeRecaptcha!('login');

to this const token = await executeRecaptcha('login');

But, I don't think that's is the reason it does not work. Your code looks fine like that. Some possible checks to make

1. Check that the variable NEXT_PUBLIC_GR_KEY is correctly in you .env
2. Check the token is the same in your account and in your .env
3. Be sure that the domain in which you run your code is the same domain you setup your recaptcha in your google account
4. Relaunch you server and retry