[📚] App Check for WEB isn't practical

[arisAlexis]

In order to get to debug web apps you need this line in your index.html : self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;

If this line is left for the production build, it fails because each browser has it's own token and this line overrides the recaptcha key configuration you may put in your Flutter app. So, you have to manually comment out this line when you deploy and uncomment it again when testing! If there is a way to say how to detect debug environments in index.html it would be great.

Stuff like these are a major hurdle for Flutter adoption especially for the web where everything is streamlined in web development already.

[Alok1251]

One possible solution is to leverage the kReleaseMode constant provided by the Flutter framework. kReleaseMode is a boolean value that is set to true in release builds and false in debug builds. By utilizing this constant, you can conditionally enable or disable certain configurations based on the build mode.

Here's an example of how you can use kReleaseMode to detect the build mode in your index.html file:

In this code snippet, the if statement checks if kReleaseMode is false (indicating a debug build), and if so, it enables the FIREBASE_APPCHECK_DEBUG_TOKEN. This way, the line will only be executed during development and will be skipped in production builds.

By incorporating this approach, you can eliminate the need to manually comment or uncomment lines in the index.html file when deploying or testing your Flutter web app.

[arisAlexis]

I will try this and report. Curious about the double brackets around the variable? This isn't standard javascript. Does it get transpired into something esle? Also there was nowhere in the documentation that these variables would be accessible outside of the flutter code.

[Alok1251]

can you try to use the flutter_js package. The flutter_js package allows you to run JavaScript code within your Flutter app, providing you with the ability to execute JavaScript functions and retrieve the results.

Add a function to detect the debug environment in your Dart code:

Future isDebugMode() async { final flutterJs = FlutterJs(); await flutterJs.init();

final result = await flutterJs.run(""" function isDebugMode() { return {{kDebugMode}}; }

isDebugMode();

""");

await flutterJs.release();

return result; }

• : Use the isDebugMode() function to conditionally set the FIREBASE_APPCHECK_DEBUG_TOKEN in the index.html file:

final bool isDebug = await isDebugMode(); final String firebaseAppcheckDebugToken = isDebug ? 'true' : 'false';

-: Pass the firebaseAppcheckDebugToken variable to your index.html file for templating:

With this approach, the isDebugMode() function uses the flutter_js package to execute JavaScript code that checks the kDebugMode constant. The result is then returned to the Dart code, and you can use it to conditionally set the FIREBASE_APPCHECK_DEBUG_TOKEN in the index.html file.

[arisAlexis]

this extremely complicated code is not what would be good for building flutter apps. I even prefer commenting out the script tag than running this pasta code. The team needs to come up with a solution and put it in the documentation too.

[LaysDragon]

Really surprising bump into this problem,it's a critical feature in the whole app check framework and flutter app ecosystem but doesn't have sufficient official API and document to handle. :/

[LaysDragon]

Well, my workaround is this but relied on universal_html package to setup global variable in dart...set its up before initialization the AppCheck then its will work.
universal_html should made its more usable in multi env deploy and more simple.

import 'package:universal_html/js.dart' as js;
void main() {
  js.context['FIREBASE_APPCHECK_DEBUG_TOKEN'] = true;
}