How to reset recaptcha on Success for signInWithPhoneNumber()

Question

I am using Firebase.auth()signInWithPhoneNumber(number, appVerifier)

Everything is working as expected however I am trying to resolve the issue below:

Here is my implementation:

  useEffect(() => {
    window.recaptchaVerifier = new app.auth.RecaptchaVerifier("sendBtn", {
      size: "invisible",
      callback: function () {
        onSend();
      },
    });
  });

  const onSend = (value) => {
    const appVerifier = window.recaptchaVerifier;
    const setMobile = "valid mobile..";
    firebase
      .auth()
      .signInWithPhoneNumber(setMobile, appVerifier)
      .then(function (confirmationResult) { 
        appVerifier.reset()
        console.log(confirmationResult)
      })
      .catch(function (error) {
        appVerifier.reset()
        console.log(error);
      }); 
  };

How can I correctly handle Recaptcha? Without it being rendered multiple times. I'm looking to destroy it on Recaptcha on success, I have gone through the documentation here but clear() or reset() does not seem to work

Answer 1

You can provide a empty array of dependencies to useEffect to trigger only after initial render, more details in this Stack Overflow Answer.

Additionally it may be a good idea to add an if check to see if window.recaptchaVerifier is set (in case you have component using recaptcha anywhere else on your page), before trying to initialize a new RecaptchaVerifier.

useEffect(() => {
  if (!window.recaptchaVerifier) {
    window.recaptchaVerifier = new app.auth.RecaptchaVerifier('sendBtn', {
      size: 'invisible',
      callback: function () {
        onSend();
      }
    });
  }
}, []);

Answer 2

You have to provide the dependencies of your useEffect otherwise it will be executed each time the component render.

useEffect(() => {
  // recaptcha
}, [])