I have installed react-recaptcha-google
and added to my app as per the example here: https://medium.com/codeep-io/how-to-use-google-recaptcha-with-react-38a5cd535e0d
Nothing is showing up though, no error, no nothing.
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { ReCaptcha } from 'react-recaptcha-google';
class MyComponent extends Component {
constructor(props, context) {
super(props, context);
componentDidMount() {
this.getProducts();
if (this.captchaDemo) { // <- this is getting skipped
console.log("started, just a second...")
this.captchaDemo.reset();
//this.captchaDemo.execute();
}
}
onLoadRecaptcha() {
if (this.captchaDemo) {
this.captchaDemo.reset();
//this.captchaDemo.execute();
}
}
verifyCallback(recaptchaToken) {
// Here you will get the final recaptchaToken!!!
console.log(recaptchaToken, "<= your recaptcha token")
render() {
return (
<div className="row">
<ReCaptcha
ref={(el) => { this.captchaDemo = el; }}
size="normal"
render="explicit"
sitekey="our correct key"
onloadCallback={this.onLoadRecaptcha}
verifyCallback={this.verifyCallback}
/>
</div>
);
}
}
ReactDOM.render(<MyComponent />, document.getElementById('myComponent'));
The condition in the componentDidMount()
also is getting skipped.
I have run out of ideas what to do in order for it to work. Any suggestions?
I also tried:
react-recaptcha
(<- this one is the same - showing nothing) and
react-google-recaptcha
(<- this one generates an error)
Our key is correct 100% as we use it for other captchas (written in Razor) on the same site.
Ive just figured it out - I was missing
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
on the page, added and the captcha shows up.