Google Sign-in and Flutter Web

Getting Google Sign-in working with Flutter Web

I have a Flutter app that uses Firebase-Auth and Google Sign-in for authentication. It works on Android and iOS, so it should just work with Flutter web, right? Sadly, no. Here’s what I had to do to get it working.

Add the Firebase Auth Block and JavaScript Libraries

The first thing to do is follow the instructions for configuring a Firebase web app, making sure to add the Firebase Javascript libraries your project uses (see this bug).

  <!-- The core Firebase JS SDK is always required and must be listed first -->
  <script src=""></script>

  <!-- TODO: Add SDKs for Firebase products that you want to use -->
  <script src=""></script>

    // Your web app's Firebase configuration
    var firebaseConfig = {
      apiKey: "[REDACTED]",
      authDomain: "[REDACTED]",
      databaseURL: "https://[REDACTED]",
      projectId: "[REDACTED]",
      storageBucket: "[REDACTED]",
      messagingSenderId: "[REDACTED]",
      appId: "[REDACTED]"
    // Initialize Firebase

Configure OAuth

The second thing was to configure the project’s OAuth consent screen on Google Cloud.

Add the client ID to the head of index.html:

  <meta name="google-signin-client_id"

Add localhost for Local Development

While in Google Cloud, go to the Credential section and add localhost:5000 to the Authorised JavaScript origins.

Run From the Command Line

Now we can run our app:

flutter run -d chrome --web-hostname localhost --web-port 5000

Edit the URL in the Browser

If you see [::1]:5000 in your browser’s URL, change it to localhost:5000 and all should work.

Leave a comment