How does one properly add and enable firebase_auth in a flutter web app?

Question

I am trying to add and enable firease_auth on flutter web. I have already added the web app on firebase, copied and pasted the required lines of code into web/index.html. I have added firebase_core and firebase_auth on pubspec.yaml and added the imports accordinly in my.dart files. I have added a user manually with their email and password on firebase. Now when I try to login from my web app, it always fails in main, it does not even launch. Here is what my main looks like:

Future<void> main() async
{
  await Firebase.initializeApp(); // always fails here when trying to use firebase. it wont even launch.
  runApp(const MyApp());
}

I have also used the same code base to make an android app and it works just fine. What might be the problem?

Answer 1

Initializing Firebase requires some configuration data about your project, so that the app can find that project on the servers. It needs this config on all platforms, but the native SDK for each platform has its own way of handling it.

If the same code works on Android, that means that you've included a google-services.json file into your Android Runner app, where the library then reads the config from.

In the web version, you'll typically include the config in the HTML file as shown in this older documentation on manually initializing Firebase in your Flutter web app .

Since having to do this different for each platform was confusing to many Flutter devs, there is now also a way to initialize from within the Flutter code itself - which is the same across all platforms. For more on this, see the current Firebase documentation on configuring Firebase in your Flutter app ;