Recaptcha v2 throws an error when it is reset and its container element is removed from DOM

Question

When I explicitly render Recaptcha v2 and then reset it before removing it from the DOM, after ~40 seconds I get an error in the browser console.

I have a JSFiddle which

Answer 1

The error is thrown because captcha has sent calls to google and it wants to receive response but as we remove the element so the response doesn't go according to plan and zone error is thrown, a better approach is to just hide the captcha once you have received the firebase.auth.signInWithPhoneNumber function's response. No need to set any timeouts and call captcha.clear() method in the destroy event of your page.

Answer 2

After many hours I have found only this solution, see https://jsfiddle.net/4mLhcksq/

There is setTimeout and 60 seconds (it could be shorter, I guess) pause before grecaptcha.reset() and then another pause before removing Recaptcha element. Actually, I had the same problem even if I do not remove Recaptcha element, only reset it.

const holder = getRecaptchaHolder();
holder.style.display = 'none'; //element disappears for users
setTimeout(function() {
  grecaptcha.reset(recaptchaWidgetId);
  setTimeout(function() { //we have to wait a while before removing element
    holder.parentElement.removeChild(holder);
  }, 1000);
}, 60000);

I am not especially proud of this solution. Let us hope somebody will provide better one.