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

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 3

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.