Firebase phoneauth with nextjs - phone verification request contains an invalid application verifier, reCAPTCHA token is either invalid or expired.

[rohitgurudasani]

signInWithPhoneNumber throwing below error randomly after manually verifying CAPTCHA on production environment.
note:- working fine on localhost.

npm package:-
firebase version:- "9.8.3"
next: "12.0.7",

Error :-

error msg:- The phone verification request contains an invalid application verifier. The reCAPTCHA token response is either invalid or expired.

"error": {
    "code": 400,
    "message": "INVALID_APP_CREDENTIAL",
   }

Reproducible Example: -

// firebase.config.ts

import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
import 'firebase/compat/app-check';
import 'firebase/compat/storage';


let app: firebase.app.App;

if (!firebase.apps.length) {
  app = firebase.initializeApp({
    apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
    authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
    projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
    messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGE_SENDER_ID,
    appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
    storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  });
} else {
  app = firebase.app();
}

if (typeof window !== 'undefined') {
  const appCheck = firebase.appCheck();
  appCheck.activate(process.env.NEXT_PUBLIC_FIREBASE_APP_CHECK_SITE_KEY!, true);
}
export const auth = app.auth();
export const firestore = app.firestore();
export const storage = app.storage();
export { firebase };
export default app;

// login.tsx

import { auth, firebase } from './firebase.config.ts';

export default function LoginDialog(props: any) {
  const signin = async () => {
    if (auth.currentUser) {
      localStorage.clear();
      auth.signOut();
    }

    try {
      setLoading(true);
      setKeyStr(keyStr + Math.random());
      const recaptchaVerifier = new firebase.auth.RecaptchaVerifier('sign-in-button', {
        size: 'invisible',
      });
      const response = await auth.signInWithPhoneNumber('+91' + phoneNumber, recaptchaVerifier);

      setAuthContext(response);
      setIsOtpSent(true);
      setShowCaptcha(true);
      setLoading(false);
      return response;
    } catch (error) {
      setShowCaptcha(false);
      setRequestError(error?.message);
      setLoading(false);
    }
  };

  return (
    <>
      <LoadingButton
        color="primary"
        variant="contained"
        size="large"
        loading={loading}
        onClick={signin}
        disabled={disableButton}
        fullWidth
      >
        {'GET OTP'}
      </LoadingButton>

      <div id="sign-in-button" key={showCaptcha}></div>
    </>
  );
}

[google-oss-bot]

I couldn't figure out how to label this issue, so I've labeled it for a human to triage. Hang tight.

[sam-gc]

Hi @rohitgurudasani, thanks for the report. How often are you testing this in production? It's possible you're running into quota issues after calling signInWithPhoneNumber too frequently

[rohitgurudasani]

Thanks for reply @sam-gc the frequency of testing is quite low 5-6 times in a day per device, total 3-4 devices, and it's happening for new users as well who is login for first time.And the current plan is Blaze,

[serdaralbayrak74]

Facing same issue here , I tried with Blaze/Spark and even new accounts . I've been working on this problem for 3 days and can't find a solution . Help needed please

[serdaralbayrak74]

Looks like some type of IP restriction / Antibot measure. After 5-6 Successful attempts on same IP the error starts coming up . Then I open an Incognito Tab and I change my IP with VPN and everything works for another 5-6 times . The fact is that it's impossible to work like that server-side . Any solution? Support not answering

[huaidong]

Facing same issue here , Help needed please

[wangrezon]

Facing same issue here , Help needed please

[kanehjeong]

I am also getting this exact error, only when the app is accessed from Incognito mode in Chrome. Specifically for me the error is thrown as part of the MFA flow calling phoneAuthProvider.verifyPhoneNumber(phoneInfoOptions, appVerifier);

Everything works as expected in regular browsing mode. I'm not sure if that means it always works in regular browsing, or somehow it's just working for me.