'react-google-recaptcha not working on Android/iOS
I am getting the onErrored method called right from the page load on Android and iOS.
Works fine on PC/Mac.
Have react-google-recaptcha v2.1.0
Am I doing something wrong?
Setting the ref:
constructor(props) {
super(props);
this.captchaRef = React.createRef();
}
On error:
handleCaptchaError = (event) => {
console.log("handleCaptchaError", { event });
};
On submit:
handleSubmit = async (form) => {
form.preventDefault();
this.captchaRef.current.reset();
const token = await this.captchaRef.current.executeAsync();
const { email, password } = form.target.elements;
if (this.handleEmail(email.value) && this.handlePassword(password.value)) {
this.props.dispatch(
authorize({
email: email.value,
password: password.value,
captcha: token,
})
);
}
};
The form:
render() {
return (
<React.Fragment>
<Form onSubmit={this.handleSubmit}>
<List>
<ItemInput>
<Input
type="email"
name="email"
autoComplete="username"
onChange={(e) => this.handleEmail(e.target.value)}
></Input>
</ItemInput>
<ItemInput>
<Input
type="password"
name="password"
autoComplete="current-password"
onChange={(e) => this.handlePassword(e.target.value)}
></Input>
</ItemInput>
<Button>Submit</Button>
</List>
</Form>
<div
style={{
position: "absolute",
visibility: "hidden",
opacity: "0",
pointerEvents: "auto",
}}
>
<ReCAPTCHA
ref={this.captchaRef}
size="invisible"
sitekey={global.config.captcha.key}
data-callback="callback"
onErrored={(e) => this.handleCaptchaError(e)}
//onExpired={}
/>
</div>
</React.Fragment>
);
}
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|

