How to reload invisible recaptcha in react spa?

Question

reCAPTCHA

Hello everyone, I have a react app using react-router. I'm trying to implement recaptcha on the login page, but I'm facing a problem that the widget doesn't wake up if after login I go through the pages, log out and return to the login page. The captcha is attached to the button.

<Button
    className="g-recaptcha"
    data-sitekey="********************"
    data-callback="invisibleLogin"
/>

How to reinitialize it? For a regular one, you can pull grecaptcha.render in componentDidMount. By the way, everything is ok with the usual captcha, it works as it should, but I want to use invisible.

Answer 1

I ended up doing this and it seems to work :)

componentDidMount(){
        window.invisibleLogin = this.invisibleLogin;
        this.loadJS("https://www.google.com/recaptcha/api.js")
    }
loadJS(url){
        const script = document.createElement('script');
        script.src = url;
        script.type = 'text/javascript';
        script.async = true;
        script.defer = true;
        script.onerror = function( error ) { throw error; };
        document.body.appendChild( script );
    }