dozoisch / dozoisch/react-google-recaptcha

Error thrown from executeAsync() and onErrored event

Open
#283 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
1.1k
Forks
148
PR merge metrics
No merged PRs in 30d

Description

- react-google-recaptcha version: 3.1.0
- react-async-script version: n/a
- react: 17.0.2
- next.js: 12.2.5
- formik: 2.29
- yup: 0.29.3

Can someone tell me if the problem I have is due to me not having react-async-script installed in my application? Is this a dependency I'll need to install? It's not mentioned anywhere in the docs as far as I know.

Any help with this problem would be great.

I have checked thoroughly to make sure my API key has been configured and implemented correctly

1. When a user clicks the Next button the code below runs and an error is thrown. The error being logged is undefined though.

```js
const _recaptchaRef = useRef(null);

const handleNext = async () => {
let reCaptchaToken;
try {
reCaptchaToken = await _recaptchaRef.current.executeAsync();
} catch (error) {
// error gets thrown here
console.log('handleNextAction > reCaptcha error:', error);
}
if (reCaptchaToken) {
// execute code
} else {
if (_recaptchaRef.current) {
_recaptchaRef.current.reset();
}
}
};
```

2. The onErrored event is firing continuously and just logging an empty array.
```jsx
{
console.log('reCaptcha asyncScriptOnLoad:', value);
}}
onErrored={(...errorArgs) => {
if (_recaptchaRef.current) {
console.log(
'reCaptcha onErrored args:',
errorArgs
);
_recaptchaRef.current.reset();
}
}}
onExpired={() => {
if (_recaptchaRef.current) {
console.log('reCaptcha onExpired');
_recaptchaRef.current.reset();
}
}}
/>
```

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.