How to reset recaptcha when using react-redux-firebase

Question

I am working with React-Redux-Firebase. I implemented signing in with phone number. Now I am trying to implement error handling. When number is invalid I display window alert with error message. The only thing left to do is to reset recaptcha. Without it, I am getting error:

reCAPTCHA has already been rendered in this element

I was trying to do according to Firebase documentation

grecaptcha.reset(window.recaptchaWidgetId);

// Or, if you haven't stored the widget ID:

window.recaptchaVerifier.render().then(function(widgetId) { grecaptcha.reset(widgetId); }

but it does not work in my code. I dont have grecaptcha implemented. I tried to add it with react-grecaptcha, but it did not work.

Could someone give me a hint how to reset recaptcha after each error, please?

  state = {
    phone: "",
    confirmationResult: {},
  };

  handleClick = () => {
    const recaptchaVerifier = new firebase.auth.RecaptchaVerifier(
      "sign-in-button",
      {
        size: "invisible",
      }
    );
    firebase
      .signInWithPhoneNumber(`+${this.state.phone}`, recaptchaVerifier)
      .then((confirmationResult) => {
        this.setState({ confirmationResult });
      })
      .catch((error) => {
        // Error; SMS not sent
        // Handle Errors Here
        window.alert(`${error.code}, ${error.message}`);
        recaptchaVerifier.reset(); // How can I do that?
      });
  };

Answer 1

I've been struggling with this problem for several days, maybe my answer will help someone.

    export const requestRecaptchVerifier = () => {
    window.recaptchaVerifier = new RecaptchaVerifier(
        "recapcha-container",
        {
            size: "invisible",
        },
        auth
    );
};

I then call signInWithPhone from another function and handle the error like this:

        await signInWithPhone(formik.values.phone)
        .then(() => {
            // ... my code
        })
        .catch(() => {
            window.recaptchaVerifier.recaptcha.reset();
            window.recaptchaVerifier.clear();
        });

All the difference in

window.recaptchaVerifier.recaptcha.reset()

And

window.recaptchaVerifier.clear()