import React, { useState, useRef } from "react";
import firebase from "../firebase";
const Auth = () => {
const [phoneNumber,setPhoneNumber] = useState('');
const [verificationID, setVerificationID] = useState('');
const recaptchaRef = useRef(null);
const handleSendOtp = ()=>{
if(recaptchaRef.current){
recaptchaRef.current.innerHTML = `<div id="recaptcha-container"></div>`
}
const verifier = new firebase.auth.RecaptchaVerifier('recaptcha-container',{
size:'invisible'
});
firebase.auth().signInWithPhoneNumber(phoneNumber,verifier)
.then(confirmationResult => {
setVerificationID(confirmationResult.verificationId);
})
.catch(error => {
console.log('Error sending OTP:',error);
})
}
return(
<div>
<h1>Phone OTP Authentication</h1>
<div ref={recaptchaRef}></div>
<input
type="tel"
placeholder="+91 9999999999"
value={phoneNumber}
onChange={e => setPhoneNumber(e.target.value)}
/>
<button onClick={handleSendOtp}>Send OTP</button>
</div>
);
};
export default Auth;
I am using firebase for my React JS web project
whenever I hit the send OTP request i am getting this error
Error sending OTP: FirebaseError: Firebase: The phone verification request contains an invalid application verifier. The reCAPTCHA token response is either invalid or expired. (auth/invalid-app-credential).
I cant figure this out, even ChatGPT is not able to help me
2
Answers
The reCaptcha token in firebase console got expired…so this error is occuring.
Try to get the token API key and register the app.
Google rolled out an update where they no longer accept localhost as a valid domain. You need to use fictional numbers or http://127.0.0.1/
Github Issue