FireFlutter: Enable App Check in debug mode

Question

Problem

App Check works fine in production mode, but in debug mode I get errors:

401: Firebase App Check token is invalid.

I tried two things:

Generate a debug token using Firebase console.
Generate a debug token in the App via inserting <script>self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;</script> into index.html. And then adding that to in the Firebase console as a debug token. I also noticed that this way a new debug token is generated on each App restart.

Code

  if (kReleaseMode) {
    await FirebaseAppCheck.instance.activate(
      webRecaptchaSiteKey: LIVE_TOKEN,
    );
  } else {
    await FirebaseAppCheck.instance.activate(
      webRecaptchaSiteKey: DEBUG_TOKEN,
    );
  }

Question

Using FlutterFire, what is the correct way to generate and use a debug token for App Check? Following the docs did not work for me.

Docs

https://firebase.google.com/docs/app-check/flutter/default-providers

https://firebase.flutter.dev/docs/app-check/debug-provider/#activating-the-debug-provider-web

Were you able to find any solution to this problem? I'm too facing the same issue these days. — Randika Vishman, Jun 09 '22 at 08:06
@RandikaVishman No, I did not. Instead, I am using two Firebase projects: one for dev and one for production. Production has App Check enabled. — Dabbel, Jun 09 '22 at 13:25
Unbelieveable that they do not provide a documentation for this. — valley, Jul 07 '22 at 17:08

score 5 · Accepted Answer · answered Aug 18 '22 at 13:23

I managed to get it working, following the next steps. I also reported this at FlutterFire Github.

Add the following to the index.html

<body>
    <script>self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;</script>
    <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app-check.js"></script>
    ......

Run the app in debug mode, a debug token will be printed in the logs

App Check debug token: fb1a8616-b721-42c6-841c-544x5743ea72. You will need to add it to your app's App Check settings in the Firebase console for it to work.

Add that debug token to App Check in the Firebase console

https://firebase.google.com/docs/app-check/web/debug-provide
Set the debug token in the dart code and restart (do not close the app)

const debugToken = 'fb1a8616-b721-42c6-841c-544x5743ea72';

await FirebaseAppCheck.instance.activate(
   webRecaptchaSiteKey: kReleaseMode ? liveToken : debugToken,
);

The main inconvenience is that each time the app is executed, a new debug token is generated and it must be set in the Firebase console, in the dart code and restart the app without closing it.

Is it still the case that you need to add a new debug token each time you close the app? — dingo, Oct 11 '22 at 11:46

FireFlutter: Enable App Check in debug mode

1 Answers1