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

I have got the same issue with React. but there is a problem of Ref. so I have created a new instance using Id of a parent div element

<div ref={ref => this.recaptchaWrapperRef = ref}>
   <div id="recaptcha-container"></div>
</div>    

In the submit callback add this.

document.getElementById("recaptcha-container").innerHTML = "<div id='recaptcha'></div>";

Answer 2

So, I have figure it out. The problem wasn't clear() method - that is working properly. But I have to recreate the captcha container from scratch myself. Doc isn't clear about it, so that's confused me. In the docs there is:

Clears the reCAPTCHA widget from the page and destroys the current instance.

So I thought that it will be removed via the method.

So, right now I have this code in the render method:

<div ref={ref => this.recaptchaWrapperRef = ref}>
  <div id="recaptcha-container"></div>
</div>

and then in the submit callback:

if (this.applicationVerifier && this.recaptchaWrapperRef) {
  this.applicationVerifier.clear()
  this.recaptchaWrapperRef.innerHTML = `<div id="recaptcha-container"></div>`
}

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

This is the only way how I manage to do it in react. If someone still ahve better way to do it, feel free to post it. As I think this is pretty ugly (for React).

Answer 3

Just use window.recaptchaVerifier.reset() inside catch eg

const signInWithPhoneNumber = (fullMobile) => {
return new Promise((resolve, reject) => {
  auth.signInWithPhoneNumber(fullMobile, window.recaptchaVerifier).then(res => {
    resolve(res)
  })
    .catch(error => {
      console.log(error)
      window.recaptchaVerifier.reset()
      reject(error)
    })
})

}

Answer 4

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 <div id="recaptcha-container"></div> 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})

  })
}