reCAPTCHA has already been rendered in this element

Question

I have a simple contact form built with ASP .Net using the updatepanel. Everything works as expected but i see the error

recaptcha__en.js: Uncaught Error: reCAPTCHA has already been rendered in this element

in the console window

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<script src="https://www.google.com/recaptcha/api.js?onload=pageLoad&render=explicit" async defer></script>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <div class="g-recaptcha" data-sitekey="XXXX"></div>
    </ContentTemplate>
</asp:UpdatePanel>

<script language="javascript" type="text/javascript">
    function pageLoad() {
        $('.g-recaptcha').each(function (index, obj) {
            grecaptcha.render(obj, { 'sitekey': 'XXXX' });
        });
    }
</script>

I initially added onload=pageLoad&render=explicit as if the captcha was not checked and you clicked the button to send, the captcha disappeared. Adding onload=pageLoad&render=explicit to the script line resolved this but now i get the above error.

If i try and remove some elements then something else breaks i.e. captcha doesnt display or is not displayed on postback?

Answer 1

I had the same problem a couple days ago with a dynamic login and creation form. The reason was that I was rendering twice at the same element.

The Google ReCaptcha Throws an exception notifying said problem.

My solution was use try{...}catch(event){...} as wrapper for grecaptcha.render()

try{
    grecaptcha.render('elementID', {
        'sitekey' : 'key',
        'badge' : 'att',
        'size' : 'att',
        'tabindex' : 0,
        'callback' : function(token) {
            //..
        },
        'expired-callback' : function() {
            //...
        },
        'error-callback' : function() {
            //...
        },
        'isolated' : false
    });
}catch(error){/*possible duplicated instances*/}`

Answer 2

For those who are using React with Firebase and in case this error occurs, you just have to destroy the instance of Recaptcha on unmount of your component.

useEffect(() => {
const verifier = new firebase.auth.RecaptchaVerifier(element.current, {
  size: "invisible",
});
    if (!recaptcha) {
        verifier.verify().then(() => setRecaptcha(verifier));
    }
return () => {
  verifier.clear()
}
});

Answer 3

For angular users, try the google recaptcha v2 using the site key in a try and catch block.

Answer 4

If you use Angular with firebase, you must destroy the RecaptchaVerifier after use

//if for example you have declared it as such:
recaptchaVerifier: firebase.default.auth.RecaptchaVerifier;

//you can destroy it as such:
this.recaptchaVerifier.clear()

//you must do for example the destruction when you navigate to a new component