Problème avec le rappel reCAPTCHA dans l'authentification téléphonique Firebase

Question

J'essaie d'implémenter la vérification par téléphone sur mon site Web NextJS et j'ai ajouté le code reCAPTCHA dans mon useEffect, mais il ne se déclenche pas lorsque vous cliquez sur le bouton avec cet identifiant. Il n'y a pas d'erreurs non plus. Voici le code reCAPTCHA :

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

Aucune sortie. Y a-t-il une raison ?

Answer 1

J'ai compris.

J'ai dû ajouter window.recaptchaVerifier.render() à la fin. Code final :

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