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?

Crumby

Did you perhaps add <script src="https://www.google.com/recaptcha twice on the page? Check the html to be sure. – Plaque

Just did a search on the page under view source and no, its only listed once. – Crumby

Have you tried the suggestion in this SO post? – Retorsion

Yes i tried that but i get different issues ranging from this error Uncaught TypeError: grecaptcha.render is not a function to the captcha disappearing on postback. – Crumby

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*/}`

Bliss

did not work for me, still fires the error – Tulatulip

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()
}
});

Missymist

This makes sense. Could you provide the full page? Im interested in where you're getting recaptcha and setRecaptcha – Emanuel

@itshinkswhenitscold, const [recaptcha, setRecaptcha] = useState() – Witcher

Answer 3

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

Caisson

Answer 4

if (!window.recaptchaVerifier) {
    window.recaptchaVerifier = new RecaptchaVerifier('sign-in-button', {
        'size': 'invisible',
        'callback': (response) => {
            console.log(response)
        },
        'expired-callback': () => {

        }

    }, auth);
}

fix it by adding if()

Hepzi

Answer 5

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

Antheridium

the sitekey is string, how do you add it in try/catch? would you please provide a sample? – Manlike