Closed JulioCVaz closed 2 years ago
The problem is that the WebView (inside a modal) will render above your screen, blocking any user events anyway.
If you don't display a loading feedback, this behavior will result in a very bad UX.
@douglasjunior nice point! I like this approach, but I think too we can able the option to the user(dev) to control this feedback as he wants. Like this library, https://www.npmjs.com/package/react-google-recaptcha-v3 u can prevent clicking on any button or stuff when the Recaptcha executing. By default, I like this approach that u implement, to static feedback. But for me sounds good to enable user control too.
const YourReCaptchaComponent = () => {
const { executeRecaptcha } = useGoogleReCaptcha();
// Create an event handler so you can call the verification on button click event or form submit
const handleReCaptchaVerify = useCallback(async () => {
if (!executeRecaptcha) {
console.log('Execute recaptcha not yet available');
return;
}
const token = await executeRecaptcha('yourAction');
// Do whatever you want with the token
}, [executeRecaptcha]);
// You can use useEffect to trigger the verification as soon as the component being loaded
useEffect(() => {
handleReCaptchaVerify();
}, [handleReCaptchaVerify]);
return <button onClick={handleReCaptchaVerify}>Verify recaptcha</button>;
};
You can't call verify on component load, because if the challange appears, the user will be prompted to solve the captcha without click any button. So we have a bad UX again.
@douglasjunior searching for libraries of react native recaptcha, I finded a explanation about how each recaptcha works. Our case is to use recaptchaV3 and your library is to RecaptchaV2. Sorry for the inconvenience and thanks for your time.
First of all, congrats on this lib.
About this loading when webview returns the Recaptcha token, I think that this should be optional, because when some scenarios we only want to get a token, and not have UI feedback.
What do u think?
I can make this loading render optionally.
https://github.com/douglasjunior/react-native-recaptcha-that-works/blob/master/src/Recaptcha.js#L183
it's not a bug, only an enhancement.