douglasjunior / react-native-recaptcha-that-works

⚛ A reCAPTCHA bridge for React Native that works (Android and iOS)
MIT License
167 stars 33 forks source link

[chore]: turn loading render optionally #36

Closed JulioCVaz closed 2 years ago

JulioCVaz commented 2 years ago

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.

douglasjunior commented 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.

JulioCVaz commented 2 years ago

@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>;
};
douglasjunior commented 2 years ago

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.

JulioCVaz commented 2 years ago

@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.