skip to Main Content
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


  1. The reCaptcha token in firebase console got expired…so this error is occuring.
    Try to get the token API key and register the app.

    Login or Signup to reply.
  2. 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

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search