Firebase RecaptchaVerifier.clear() has no effect

Question

I have react web app where I want to implement phone auth. I have initialized recaptchaVerifier based on docs and examples. However if I want to submit the form again (say

Answer 1

use captchaVarifier outside to your onPhoneLoginSubmit() method

do not use

this.applicationVerifier

this.applicationVerifier = new firebase.auth.RecaptchaVerifier(
      'recaptcha-container',
      { size: 'invisible' }
    );

instead use window.recaptchaVerifier and remove .clear()

 window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier(
        "recaptcha-container",
        {
          size: "invisible"
        }
      );

onPhoneLoginSubmit = (e) => {
firebase.auth().signInWithPhoneNumber(phone, window.recaptchaVerifier)
  .then((result) => {
    onVerificationSend(result.verificationId)

  })
  .catch (error => {
    this.setState({formError: error})

  })
}

then use setTimeout() function with a delay of 1 or 2 second, if you do not use setTimeout() the recaptcha container

will execute after this code which will produce an error

so use setTimeout() like, example given below

 componentWillMount(){
 setTimeout(() => {
  window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier(
    "recaptcha-container",
    {
      size: "invisible"
    }
  );
 }, 2000);
}
 onPhoneLoginSubmit = (e) => {
firebase.auth().signInWithPhoneNumber(phone, window.recaptchaVerifier)
  .then((result) => {
    onVerificationSend(result.verificationId)

  })
  .catch (error => {
    this.setState({formError: error})

  })
}