UPDATED: May 2020

This tutorial has been updated in May 2020 as the old tutorial made use of a separate Firebase package for Dart.

This updated tutorial makes use of the standard Firebase Authentication and Google Sign in packages. Making it possible to have a truly cross-platform implementation that will work on both mobile and web.

However, please note that this tutorial only shows how to use the packages with Flutter web. There are plenty of tutorials dedicated towards the mobile implementation that you can find on the internet.

If you are interested, the old article is available here:

However, the solution suggested there is no longer recommended.

New way

Below is a video tutorial showing you exactly what you need to do to add Firebase authentication and Google Sign in to a Flutter web project. If you are completely new to Firebase I recommend you watch the video tutorial instead.

Initializing

For Flutter web you can use the same Firebase Authentication package that you would normally use for mobile.

And for Google Sign in.

The packages’ Pub pages give all the information you need to get set up and started. But we will go over the important details in this article.

First, you’ll need to add the relevant dependencies in your pubsec.yaml file.

dependencies:

firebase_auth:

google_sign_in:

Next, you’ll need to include the Firebase JavaScript libraries in your index.html file (within the Flutter web directory). For a Flutter project, the default HTML file is located at web/index.html.

Below is an example index.html . Please note the areas that are marked STEP1, STEP2 and STEP3, as these are the places where you need to add your own configuration. More information on these steps are provided below.

Step 1: Add the Firebase SDK and other Firebase products you’re using. For this tutorial all that is needed is the firebase-auth.js script. It is suggested that you add this at the bottom of the <body> tag, but before you use Firebase (before the main.dart.js script).

Your versions may be different to those in the example. You can find the latest versions on the Firebase website:

Similar to authentication, you need to import the other Firebase libraries that you will be using — for example, Analytics, Firestore, etc.

Step 2: Next, you need to initialize Firebase with your project’s configuration. The configuration for a Firebase project is available on Firebase in the project’s settings. If you’re having trouble finding it I suggest you watch the video tutorial for this article.

Step 3: Finally you need to add your Google Sign in Client Id. This is available in Firebase and Google Cloud. If you’re having trouble finding this I suggest you watch the video tutorial.

Important: Remember to enable Authentication in your Firebase project, for example Anonymous Sign in and Google Sign in. There are a large number of other sign in mechanisms that you can also enable and use (for example, Facebook, Twitter, phone number, etc.).

Firebase Authentication and Google Sign in

After initialization it is now just a matter of using the Firebase Authentication and Google Sign in packages. Below is an example of a Firebase authentication service that makes use of the authentication packages.

Take a look at the video tutorial for a demo application and to see how I use the Provider package to inject the authentication service and use it to handle the state of the app.

Or, instead, take a look at the code for the example app:

Conclusion

I hope you found this useful. This is a much better implementation than the previous article. Using this implementation we don’t need to rely on separate packages for mobile and web.

If you want to explore a website made entirely in Flutter, as well as read more Flutter articles, go take a look at the Fun with Flutter website. The website also uses this implementation of Firebase authentication. So go give it a try.