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?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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() }