Implementé la autenticación de teléfono Firebase en mi aplicación angular, todo es correcto, pero cuando verifico el número de teléfono y después de enviar otp para verificación, aparece un error de código OTP incorrecto, incluso si es correcto. Esto sucede para el primer intento después del segundo intento, verifica OTP y comienza a comportarse como debería ser.

Este es el método geOTP.

 getOTP() { this.showPhoneLoading = true; this.reCaptchaVerifier = new firebase.auth.RecaptchaVerifier ('sign-in-button', {size: 'invisible'},) // this.timer(1); debugger this.payload = { phoneNumber: `+${this.countryCode}`+this.phoneNumber } firebase .auth() .signInWithPhoneNumber(this.payload, this.reCaptchaVerifier) .then((res)=> { console.log(res); localStorage.setItem('verificationId', JSON.stringify(res.verificationId)) // debugger this.myStepper.next(); this.cf.detectChanges(); this.showPhoneLoading = false; this.toastr.success('We have sent an otp. Please fill in the below fields to continue.', 'Verify') }).catch((error)=> { this.toastr.error(error.message) setTimeout(() => { window.location.reload() },2000); })

}

este es mi código de verificación.

 handleClick() { debugger this.showVerifyOtp = true; debugger const otp = this.otp.replace(/\s/g,''); const credentials = firebase.auth.PhoneAuthProvider.credential(this.verify, otp); debugger firebase .auth() .signInWithCredential(credentials) .then((res)=> { this.toastr.success('Your phone number is verified.', 'Success!') this.myStepper.next(); this.showVerifyOtp = false; localStorage.setItem('user_data',JSON.stringify(res)) }) .catch((error) => { debugger if (error) { firebase.auth().signInWithCredential(credentials) this.myStepper.next(); } })

}

actualmente estoy detectando un error y llamando a la función nuevamente. Por favor, ayúdame.