Welcome to ZaiZheLe Developer Zone-Open, Learning and Share
Welcome To Ask or Share your Answers For Others


0 votes
in Technique[技术] by (71.8m points)

Flutter web Firebase Google Sign In not working

I've been working with Flutter for a while now, and today I decided to try Flutter web. I wanted to make a website with Firebase Google Sign in. I followed all the steps from here, but I couldn't get it to work. I don't get any errors but when I run the auth code nothing happens.
I ran the app with flutter run -d chrome --web-hostname localhost --web-port 5000
I also tried opening localhost:5000 in normal Chrome but it didn't work either.

Here is some information, if you need anything else please let me know, thank you.

flutter doctor -v output:

[√] Flutter (Channel master, 1.26.0-2.0.pre.296, on Microsoft Windows [Version 10.0.19041.685], locale en-US)
    ? Flutter version 1.26.0-2.0.pre.296 at C:flutter
    ? Framework revision 737496e8db (8 hours ago), 2021-01-12 02:54:03 -0500
    ? Engine revision 10cee6abcb
    ? Dart version 2.12.0 (build 2.12.0-214.0.dev)

[√] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    ? Android SDK at C:UsersPCAppDataLocalAndroidSdk
    ? Platform android-30, build-tools 30.0.2
    ? ANDROID_HOME = C:UsersPCAppDataLocalAndroidSdk
    ? Java binary at: C:Program FilesAndroidAndroid Studiojreinjava
    ? Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)
    ? All Android licenses accepted.

[√] Chrome - develop for the web
    ? Chrome at C:Program FilesGoogleChromeApplicationchrome.exe

[√] Android Studio (version 4.1.0)
    ? Android Studio at C:Program FilesAndroidAndroid Studio
    ? Flutter plugin can be installed from:
    ? Dart plugin can be installed from:
    ? Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)

[√] VS Code (version 1.52.1)
    ? VS Code at C:UsersPCAppDataLocalProgramsMicrosoft VS Code
    ? Flutter extension version 3.18.1

[√] Connected device (2 available)
    ? Chrome (web) ? chrome ? web-javascript ? Google Chrome 87.0.4280.141
    ? Edge (web)   ? edge   ? web-javascript ? Microsoft Edge 87.0.664.66

? No issues found!

These are my pubspec.yaml dependencies:

    sdk: flutter
  cupertino_icons: ^1.0.0
  firebase_auth: ^0.19.0+1
  firebase_core: ^0.6.0
  flutter_auth_buttons: ^0.10.0
  google_sign_in: ^4.5.9
  http: ^0.12.2
  provider: ^4.3.2+3

This is my index.html:

<!DOCTYPE html>
    <meta charset="UTF-8">
    <meta name="google-signin-client_id" content="xxxxx.apps.googleusercontent.com">
    <script src="https://www.gstatic.com/firebasejs/8.2.2/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.2.2/firebase-auth.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.2.2/firebase-analytics.js"></script>
      var firebaseConfig = {
        apiKey: "xxxxx",
        authDomain: "xxxxx",
        projectId: "xxxxx",
        storageBucket: "xxxxx",
        messagingSenderId: "xxxxx",
        appId: "xxxxx",
        measurementId: "xxxxx"
    <script src="main.dart.js" type="application/javascript"></script>

This is my auth code:

import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:google_sign_in/google_sign_in.dart';

class AuthService {
  final FirebaseAuth _firebaseAuth;
  final GoogleSignIn _googleSignIn = GoogleSignIn();

  String googleAccessToken, googleIdToken;

  Stream<User> get authStateChanges => _firebaseAuth.idTokenChanges();

  Future<String> signOut() async {
    try {
      await _firebaseAuth.signOut();
      return 'success';
    } on FirebaseAuthException catch (e) {
      return e.message;

  GoogleAuthCredential getGoolgeCredential({accessToken, idToken}) {
    return GoogleAuthProvider.credential(
      accessToken: accessToken,
      idToken: idToken,

  Future<String> signInWithGoogle() async {
    /// This is the auth code
    try {
      await Firebase.initializeApp();
      final GoogleSignInAccount googleUser = await _googleSignIn.signIn();

      final GoogleSignInAuthentication googleAuth =
          await googleUser.authentication;

      googleAccessToken = googleAuth.accessToken;
      googleIdToken = googleAuth.idToken;

      await FirebaseAuth.instance.signInWithCredential(getGoolgeCredential(
          accessToken: googleAuth.accessToken, idToken: googleAuth.idToken));
      return 'success';
    } on FirebaseAuthException catch (e) {
      return e.message;

Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

Welcome to ZaiZheLe Developer Zone-Open, Learning and Share