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 5000Edit 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