How to use Firebase App Check in React. 403 error

Question

I want to use Firebase App Check in Gatsby Project.I have completed the App registration in the Firebase console.

In my project:

import { initializeApp } from "firebase/app";
import { initializeAppCheck, ReCaptchaV3Provider, getToken } from "firebase/app-check";

const app = initializeApp({
  // My firebase configuration object
});

const appCheck = initializeAppCheck(app, {
  provider: new ReCaptchaV3Provider('MY_RECAPTCHA_PUBLIC_KEY'),
  isTokenAutoRefreshEnabled: true
});

getToken(appCheck)
  .then(() => {
    console.log('success')
  })
  .catch((error) => {
    console.log(error.message)
  })

But, it not working and got the error:

@firebase/app-check: FirebaseError: AppCheck: Fetch server returned an HTTP error status. HTTP status: 403. (appCheck/fetch-status-error).

So, can anyone help me check where the problem is? How to solve?

Thanks!

Answer 1

Go to your Firebase Project in Google Cloud Console: https://console.cloud.google.com/apis/credentials

Click on the name of your Firebase API Key under "API Keys".

"API restrictions"

If you are restricting use of your API key, make sure you include:

Selected APIs: Firebase App Check API

Answer 2

Do NOT add localhost to ReCaptcha's accepted domains. The Google Firebase docs are clear you SHOULD NOT add localhost to the allowed domains like @uponly suggested ref: https://firebase.google.com/docs/app-check/web/debug-provider?authuser=0&hl=en#web-version-9

Use the steps more clearly outlined in the "Use the debug provider on localhost" section here

TLDR;

1. Set window.FIREBASE_APPCHECK_DEBUG_TOKEN=true right before you call initializeAppCheck to tell your code to request a debug token
2. Open the console in the web browser of your app and get the token printed there following the printed prompt AppCheck debug token:
3. Go to the Firebase Console web portal and navigate to Project Settings -> App Check. Click on the three dots at the end of the row for the app you're setting AppCheck up for and add the debug token in the popup.

Answer 3

Adding onto @jprio's answer:

If you are using an unrestricted API key and using ReCaptchaEnterprise, you must make sure that you correctly have the appropriate domains set for your Recaptcha Enterprise Site Key.

1. In the Google Cloud console, go to Security, then reCAPTCHA Enterprise: https://console.cloud.google.com/security/recaptcha
2. Click on the three dots and press "Edit Key" on your generated key
3. Under Domain List, enter in the domain of your website, no need to add any HTTP/HTTPS/WWW prefixes, or port numbers.
4. If you are developing locally, be sure to add localhost/127.0.0.1. This is what solved the issue for me. Save changes. DO NOT FORGET to remove these before you deploy to your website
5. Hit refresh on your client after about 5 minutes, allowing for the changes to propagate. Be sure you are using ReCaptchaEnterpriseProvider in your client if you are using ReCaptcha Enterprise.

Answer 4

I had a similar issue. For me, the error got resolved when I used the correct appId in the firebase config. It turns out that I had set up two apps on firebase and I downloaded the wrong json file which had a different appId.

According to firebase support, appIds are unique per app.