reCAPTCHA has already been rendered in this element

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 runat="server"> </asp:ScriptManager> <script src="" async defer></script> <asp:UpdatePanel runat="server"> <ContentTemplate> <div></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?

5 Answers

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

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

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 

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

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