Problem mit dem reCAPTCHA-Rückruf in der Firebase-Telefonauthentifizierung

Question

Ich versuche, die Telefonüberprüfung auf meiner NextJS-Website zu implementieren und habe den reCAPTCHA-Code in meinem useEffect hinzugefügt, aber er wird nicht ausgelöst, wenn auf die Schaltfläche mit dieser ID geklickt wird. Es liegen auch keine Fehler vor. Hier ist der 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);

Keine Ausgabe. Gibt es einen Grund?

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