4

I try to get App Check working in my vue.js pwa. Using the latest firebase sdk and by following steps here https://firebase.google.com/docs/app-check/web/recaptcha-provider

My api key (https://console.cloud.google.com/apis/credentials/key..) is not limited to any API restrictions. I did add some Application Restrictions on https tho including my project domains.

Everything works fine till i activate appCheck with recaptcha v3 and i get following console errors: enter image description here

FirebaseError: [code=unknown]: Fetching auth token failed: AppCheck: Fetch server returned an HTTP error status. HTTP status: 403. (appCheck/fetch-status-error)

Further more the app can't get any firebase data or auth. I tried in several browsers and without any vpn stuff. In my already installed pwa the App Check error occurs but connection to firebase still works..

Without App Check activated it both works without an issue. Also with an App Check debug token the whole thing just works. I don't understand why it breaks firebase connection even if i haven't enabled enforcement.

I appreciate any tips on how to solve this.

Philip
  • 201
  • 2
  • 10
  • 1
    Hi @Philip, Could you please share any debugging logs to further investigate this issue. You can enable detailed debug logging using `firebase.firestore.setLogLevel('debug')`. – Marc Anthony B Jan 24 '22 at 09:28
  • Hi @MarcAnthonyB i uploaded a chrome console log here: https://cloudvyzor.com/logpad/?tenant=sandbox&database=sandbox-0315b1f717f8176270075c919160eea5&query=&page=1 – Philip Jan 24 '22 at 09:54

3 Answers3

7

I found the problem i accidently left self.FIREBASE_APPCHECK_DEBUG_TOKEN = true; in my production code.

Remove this line or only use when in development envirement solved the whole problem

if (location.hostname === "localhost") {
  self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
}

I didn't expect this line to impact browsers where i haven't registered a debug token to fail with the regular appCheck but of course it doesn't make sense to use it in production anyways.

Philip
  • 201
  • 2
  • 10
1

Based on your question, you want to enable Firebase App Check for Firestore with Web Application. Currently, Firestore App Check does not support it.

As per this Documentation:

Cloud Firestore support is currently available only for Android and iOS clients. If your project has a web app, don't enable Cloud Firestore enforcement until web client support is available.

Marc Anthony B
  • 3,635
  • 2
  • 4
  • 19
  • did i understand those update release notes wrong then? https://firebase.google.com/support/release-notes/js#9.6.0 – Philip Jan 25 '22 at 14:32
  • Hi @Philip, the release notes only states added support to Cloud Firestore - Added support for App Check but still doesn't have support on web applications. Its currently available only for Android and iOS clients. – Marc Anthony B Jan 26 '22 at 03:08
  • i thought the JS SDK is for web but seems i went on a totally wrong path then.. thanks for your clarification – Philip Jan 26 '22 at 10:21
  • 1
    how comes even the official firebase youtube channel talks about web app with appcheck? https://youtu.be/VjENUKwjDEE?t=66 ist that only related to JS/Web based apps run as native apps? Wouldn't make to much sense would it? – Philip Jan 26 '22 at 10:25
  • 1
    The documentation clearly shows how to add it for Web apps! https://firebase.google.com/docs/app-check/web/recaptcha-provider?authuser=0&hl=en#web-version-9 – Ben Gardner Apr 22 '22 at 07:56
1

I'll leave an answer for people who have problems with the setup. For the more detailed answer, you can check this question.

In short, you need to do a few steps.

  1. Set up a firebase.
  2. Go to how to set up app check.
  3. Register reCAPTCHA here and add the secret_key to the Firebase console, and the site_key to your web code.
  4. Initialize the Firebase in your code based on how to set up app check docs.
  5. Get your debug_key and add it to your firebase console and code.

Finally, the code should look something like this:

  • Don't forget to save your key to a .env file or firebase.js or somewhere where you won't upload it to git.

    if (!process.env.NODE_ENV || process.env.NODE_ENV === 'development') {
    window.FIREBASE_APPCHECK_DEBUG_TOKEN = 'your_debug_token';
}

const appCheck = initializeAppCheck(app, {
    provider: new ReCaptchaV3Provider('your_site_key_from_register'),

    // Optional argument. If true, the SDK automatically refreshes App Check
    // tokens as needed.
    isTokenAutoRefreshEnabled: true
});
Georgi K.
  • 31
  • 3