We are trying to use the combination of reCaptcha v2 and v3 in the login page so we explicit render the reCaptcha v2 widget(challenge based reCaptcha) if reCaptcha v3 (invisible reCaptcha) fails.
Here’s the rough flow –
- User enter creds and hit the Sign-in button,
- FE Send BE auth request along with v3 token,
- If BE respond with v3 failure then FE explicit render reCaptcha v2,
- User solve the reCaptcha challenge and FE again make BE auth call along with v2
token, - Let’s say BE unable to verify the v2 token,
- We display some error to the user but user again click on login button,
- We send BE auth request to server and let’s say v3 failed again,
- this time when we try to render the v2 widget again then we are
encountering this Error –
reCAPTCHA has already been rendered in this element
What I’ve tried –
I tried using the reset method when BE fails to verify the v2 token –
grecaptcha.reset();
but the reset method only uncheck the reCaptcha and doesn’t de-render or destroy the reCaptcha.
I also tried programmatically removing the children of recaptcha container using .removeChild() method in JavaScript but encountering the same error.
Please help me resolve this error?
1
The error reCAPTCHA has already been rendered in this element, that you are encountering is because you are loading reCAPTCHA twice at the same element.
As per this Github issue :
The problem is that the DOM generated by
this.props.grecaptcha.render()is not removed during<ReCAPTCHA‘s unmount and therefore can cause trouble when rendering a new instance at the same place.I can see two possible solutions :
Implement
componentWillUnmountto do following :
Remove all DOM generated by
this.props.grecaptcha.render()including the render target element. (we don’t want to remove the div generated by React, so we probably want to manually add a wrapper div for this purpose)Call
grecaptcha.reset(widgetId)to do memory cleaning (as mentioned here and here)Detach rendered DOM inside
componentWillUnmountand save it into some global variable for later reuse. This prevents the component from slow reloading after each use, however different instances may need different rendering parameters so this has to be taken into account.
Refer to this Stack link and also check this Github issue for more information which might be helpful for you.