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).

<body>
  <!-- The core Firebase JS SDK is always required and must be listed first -->
  <script src="https://www.gstatic.com/firebasejs/7.9.3/firebase-app.js"></script>

  <!-- TODO: Add SDKs for Firebase products that you want to use
       https://firebase.google.com/docs/web/setup#available-libraries -->
  <script src="https://www.gstatic.com/firebasejs/7.8.2/firebase-auth.js"></script>

  <script>
    // Your web app's Firebase configuration
    var firebaseConfig = {
      apiKey: "[REDACTED]",
      authDomain: "[REDACTED].firebaseapp.com",
      databaseURL: "https://[REDACTED].firebaseio.com",
      projectId: "[REDACTED]",
      storageBucket: "[REDACTED].appspot.com",
      messagingSenderId: "[REDACTED]",
      appId: "[REDACTED]"
    };
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
  </script>
  ...
</body>

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:

<head>
  ...
  <meta name="google-signin-client_id"
        content="[REDACTED].apps.googleusercontent.com">
</head>

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