0
552
ViewsHow to use Firebase App Check in React. 403 error
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!
3 answers
Answer question0
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
0
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;
- Set
window.FIREBASE_APPCHECK_DEBUG_TOKEN=trueright before you callinitializeAppCheckto tell your code to request a debug token - Open the console in the web browser of your app and get the token printed there following the printed prompt
AppCheck debug token: - 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.
0
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.
- In the Google Cloud console, go to Security, then reCAPTCHA Enterprise: https://console.cloud.google.com/security/recaptcha
- Click on the three dots and press "Edit Key" on your generated key
- Under Domain List, enter in the domain of your website, no need to add any HTTP/HTTPS/WWW prefixes, or port numbers.
- 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
- 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.