React Recaptcha v3 Uncaught (in promise) null - reactjs

Question

I am trying to use react-recaptcha-v3 (https://www.npmjs.com/package/react-recaptcha-v3) and I exactly wrote the example :
import React, { Component } from 'react';
import { ReCaptcha } from 'react-recaptcha-v3'
import { loadReCaptcha } from 'react-recaptcha-v3'
class ExampleComponent extends Component {
verifyCallback = (recaptchaToken) => {
// Here you will get the final recaptchaToken!!!
console.log(recaptchaToken, "<= your recaptcha token")
}
componentDidMount() {
loadReCaptcha('site key (I can't give it here)')
}
render() {
return (
<div>
<ReCaptcha
sitekey="site key (I can't give it here)"
action={console.log('action')}
verifyCallback={this.verifyCallback}
/>
<h2>Google ReCaptcha with React </h2>
<code>
1. Add <strong>your site key</strong> in the ReCaptcha component. <br/>
2. Check <strong>console</strong> to see the token.
</code>
</div>
);
};
};
export default ExampleComponent;
I wrote my domains names like this :
localhost
localhost:3000
And I got a site key and a secret key.
Here is what i get in console :

Answer 1

New answer :)
Firstly, I'm unsure if you said you added localhost & localhost:3000 to allowed domains. If you did you should remove them
We advise to use a separate key for development and production and to not allow localhost on your production site key.
Even if you are using this for a test environment I wouldn't recommend it. Instead use the test site key & secret key. Localhost is enabled for test.
Next, I noticed your comment about using reCaptcha v2. If you are trying to implement reCaptcha the way v3 intends this won't work.
reCaptcha v2
Adds a script to a div that detects a users input checking if they a human.
reCaptcha v3
Adds an invisible div that detects wether it thinks the user is a bot or not. You have to setup a backend for it to work. It creates a score from 0.0 to 1.0. 0.0 meaning it is most likely a bot, 1.0 meaing it is most likely a human. It uses a token and then on your backend gives you a response that looks like this.
{
"success": true|false, // whether this request was a valid reCAPTCHA token for your site
"score": number // the score for this request (0.0 - 1.0)
"action": string // the action name for this request (important to verify)
"challenge_ts": timestamp, // timestamp of the challenge load (ISO format yyyy-MM-dd'T'HH:mm:ssZZ)
"hostname": string, // the hostname of the site where the reCAPTCHA was solved
"error-codes": [...] // optional
}
https://developers.google.com/recaptcha/docs/faq
Next, I checked the documentation of the package.
You can't use loadReCaptcha in the same component, it must be in a Parent. Also action={console.log('action')} needs to be a string action="action" you configure this string in your google account.
https://developers.google.com/recaptcha/docs/v3#frontend_integration
Next, I won't recommend relying on a package as you make an uanessacry dependency.
I wrote an article here about it https://medium.com/#alexjamesdunlop/unnecessary-packages-b3623219d86.
import React, { Component } from 'react';
class ExampleComponent extends Component {
componentDidMount() {
const script = document.createElement("script")
script.src = "https://www.google.com/recaptcha/api.js?render=_reCAPTCHA_site_key"
script.addEventListener("load", () => {
window.grecaptcha.ready(function() {
window.grecaptcha.execute('_reCAPTCHA_site_key_', {action: 'homepage'}).then(function(token) {
// ...
});
});
})
document.body.appendChild(script)
}
render() {
return (
<div
className="g-recaptcha"
data-sitekey="_Your_Key_"
data-size="invisible"
>
</div>
)
}
}
export default ExampleComponent;
If you do want to continue using the package this is what it should look like.
import React, { Component } from 'react';
import { loadReCaptcha, ReCaptcha } from 'react-recaptcha-v3'
class ExampleComponent extends Component {
verifyCallback = (token) => {
// This is the token you send to your backend
console.log("token: ", token)
}
render() {
return (
<div>
<ReCaptcha
sitekey={your_site_key}
// This must be a string and an example google gives is 'homepage' or 'login'
action="action"
verifyCallback={this.verifyCallback}
/>
</div>
)
}
}
class ParentComponent extends Component {
componentDidMount() {
loadReCaptcha(your_site_key)
}
render() {
return <ExampleComponent />
}
}
export default ParentComponent;
Now if you did want to use v2 instead of v3 I show how to do that in the article
https://medium.com/#alexjamesdunlop/unnecessary-packages-b3623219d86
I recommend moving away from react Components and moving towards hooks, it's common practice to move away from it now, Components isn't supported.
https://reactjs.org/docs/hooks-effect.html