Firebase Phone Authentication in React Fails for Real Numbers with an 'Invalid Application Verifier' Error

Below is an explanation of what’s happening and how to resolve it.

---

Why It Happens

When you test with numbers registered as test numbers, Firebase bypasses the reCAPTCHA verification step. However, for real phone numbers Firebase requires a valid, current reCAPTCHA token. The error

  "The phone verification request contains an invalid application verifier. The reCAPTCHA token response is either invalid or expired."

indicates that the verifier (the reCAPTCHA token) is not valid at the time the sign-in request is made. This can occur if:

• The reCAPTCHA is being reinitialized unnecessarily so that its token is reset or expires before you use it.

• There is a delay between solving the reCAPTCHA and calling signInWithPhoneNumber, which can lead to token expiration.

• The reCAPTCHA instance isn’t set up correctly (for example, reusing an already rendered instance or not waiting for it to be ready).

---

How to Fix It

1. Initialize reCAPTCHA Only Once
   Instead of reinitializing the reCAPTCHA every time you click “Send OTP,” initialize it separately (for example, when the component mounts) so that you always have a valid verifier. You can do this in a useEffect hook.

2. Use the Correct Widget Instance
   Make sure you are rendering the reCAPTCHA once, capturing its widgetId, and then using that same verifier for your sign-in request.

3. Ensure Timely Use of the Token
   After the user solves the reCAPTCHA, use the phone number immediately for sending the OTP so that the reCAPTCHA token is not expired.

---

Sample Code Update

Below is an updated version of your component that initializes the reCAPTCHA only once on component mount. This helps ensure that you always have a valid application verifier when you call signInWithPhoneNumber.

JAVASCRIPTCopied
import React, { useState, useEffect } from "react";
import firebase from "firebase";

const PhoneAuth = () => {
  const [phoneNumber, setPhoneNumber] = useState("");
  const [otp, setOtp] = useState("");
  const [verificationId, setVerificationId] = useState("");
  const [isRecaptchaInitialized, setIsRecaptchaInitialized] = useState(false);

  useEffect(() => {
    // Initialize reCAPTCHA only once when component mounts
    if (!isRecaptchaInitialized) {
      window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier(
        "recaptcha-container",
        {
          size: "normal",
          callback: (response) => {
            console.log("reCAPTCHA solved:", response);
          },
          "expired-callback": () => {
            console.error("reCAPTCHA expired. Please try again.");
          },
        }
      );

      window.recaptchaVerifier.render().then((widgetId) => {
        console.log("reCAPTCHA rendered with widget ID:", widgetId);
      });
      setIsRecaptchaInitialized(true);
    }
  }, [isRecaptchaInitialized]);

  // Send OTP
  const handleSendCode = () => {
    const appVerifier = window.recaptchaVerifier;
    firebase
      .auth()
      .signInWithPhoneNumber(phoneNumber, appVerifier)
      .then((confirmationResult) => {
        setVerificationId(confirmationResult.verificationId);
        alert("OTP sent!");
      })
      .catch((error) => {
        console.error("Error during phone auth:", error);
        alert(error.message);
      });
  };

  // Verify OTP
  const handleVerifyCode = () => {
    const credential = firebase.auth.PhoneAuthProvider.credential(verificationId, otp);
    firebase
      .auth()
      .signInWithCredential(credential)
      .then(() => {
        alert("Phone number verified successfully!");
      })
      .catch((error) => {
        console.error("Error verifying OTP:", error);
        alert(error.message);
      });
  };

  return (
    <div className="phone-auth">
      <h2>Phone Authentication</h2>
      <div id="recaptcha-container"></div>
      <input
        type="text"
        placeholder="Enter phone number (+1234567890)"
        value={phoneNumber}
        onChange={(e) => setPhoneNumber(e.target.value)}
      />
      <button onClick={handleSendCode}>Send OTP</button>
      <input
        type="text"
        placeholder="Enter OTP"
        value={otp}
        onChange={(e) => setOtp(e.target.value)}
      />
      <button onClick={handleVerifyCode}>Verify OTP</button>
    </div>
  );
};

export default PhoneAuth;

---

Summary

The error for non-test numbers occurs because a valid and current reCAPTCHA token is required for real SMS authentication. By initializing the reCAPTCHA only once (for example, on component mount), and ensuring that you use it promptly (before it expires), you can fix the issue. Additionally, avoid reinitializing the verifier on every request.

This should resolve the issue and allow real phone numbers to authenticate correctly.