Firebase AppCheck web app not working in production mode

Question

I cannot get Firebase AppCheck to work in production mode on a Vue.js project with Firestore and Storage. But It works normally in development.

const appCheck: AppCheck = initializeAppCheck(firebaseApp, {
  provider: new ReCaptchaV3Provider(reCaptchaSiteKey),
  isTokenAutoRefreshEnabled: true,
});

getToken(appCheck)
  .then((result: AppCheckTokenResult) => {
    console.log(process.env.NODE_ENV);
    console.log(result.token);
  })
  .catch((e: FirebaseError) => {
    console.log(process.env.NODE_ENV);
    console.log(e.code + ": " + e.message);
  });

In Development mode , using vite, get the token back:

In Production mode , with firebase serve, get appCheck/fecth-status-error:

Answer 1

Firebaser here!

The error you are receiving is due to the App Check backend not being able to verify the underlying reCAPTCHA attestation.

Things to check for:

• is reCAPTCHA providing a valid attestation and not somehow thinking your device is a bot?
• does the site secret uploaded to App Check for this App match the client ID you are using in the App?

If you are using a Debug Token in your development build, that might explain why that one is succeeding.