firebase-js-sdk

firebase-js-sdk copied to clipboard

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>
    </>
  );
}

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

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

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,

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

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

Facing same issue here , Help needed please

Facing same issue here , Help needed please

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.

is this fixed i am getting the same error

@rohitgurudasani any udpate here

Bumping this, still seeing the issue in Chrome Incognito

I am unable to repro this with the demo app in Chrome incognito - https://github.com/firebase/firebase-js-sdk/tree/master/packages/auth/demo

we suggest opening a Firebase Support ticket, for more debugging.

Hey @rohitgurudasani. We need more information to resolve this issue but there hasn't been an update in 5 weekdays. I'm marking the issue as stale and if there are no new updates in the next 5 days I will close it automatically.

If you have more information that will help us get to the bottom of this, just add a comment!

Since there haven't been any recent updates here, I am going to close this issue.

@rohitgurudasani if you're still experiencing this problem and want to continue the discussion just leave a comment here and we are happy to re-open this.