Issue with reCAPTCHA callback in Firebase Phone Authentication

Question

I'm trying to implement phone verification in my NextJS website, and I've added the reCAPTCHA code in my useEffect, but it's not getting triggered when the button with that id is clicked. There are no errors either. Here is the reCAPTCHA code:

window.recaptchaVerifier = new RecaptchaVerifier('btnPersonalInfoSubmit', {
                    'size': 'invisible',
                    'callback': (response) => {
                        console.log(response);
                      handlePersonalInfoUpdate();
                    },
                    'expired-callback': () => {
                        console.log('expired');
                    },
                    'error-callback': (error) => {
                        console.log(error);
                    }
                }, auth);

No output. Is there any reason?

Answer 1

I figured it out.

I had to add window.recaptchaVerifier.render() at the end. Final code:

if (!window.recaptchaVerifier) {
                    window.recaptchaVerifier = new RecaptchaVerifier('btnPersonalInfoSubmit', {
                        'size': 'invisible',
                        'callback': (response) => {
                            handlePersonalInfoUpdate();
                        },
                        'expired-callback': () => {
                            console.log('expired');
                        },
                        'error-callback': (error) => {
                            console.log(error);
                        }
                    }, auth);
                    window.recaptchaVerifier.render()
                }