Flutter Web Google Sign In

Question

I try to implement a signIn with Google in Flutter Web. I use GoogleSignn 4.1.1 and Firebase Auth 0.15.4. I do not get any error message. It just does not pop up.

• I registered the web app in Firebase (Added Dependencies) and even added the <meta> Tag with the google-signin-client_id
• The Firebase Auth with Google works when I run it on Android
• I also ran the Example App from GoogleSignIn in Web. It also does not pop up.

This is my Login Code (Works on Android)

    final FirebaseAuth _auth = FirebaseAuth.instance;
    FirebaseUser user = await _auth.currentUser();
    if (user != null) {
      log.d('alreadyLoggedIn');
    } else {
      final GoogleSignIn _googleSignIn = GoogleSignIn(clientId: Constants.GOOGLE_SIGN_IN_CLIENT_ID);
      final GoogleSignInAccount googleUser = await _googleSignIn.signIn();
      final GoogleSignInAuthentication googleAuth =
          await googleUser.authentication;
      final AuthCredential credential = GoogleAuthProvider.getCredential(
        accessToken: googleAuth.accessToken,
        idToken: googleAuth.idToken,
      );
      await _auth.signInWithCredential(credential);
      user = await _auth.currentUser();
      assert(user.email != null);
      assert(user.displayName != null);
      assert(!user.isAnonymous);
      assert(await user.getIdToken() != null);
    }
    return user;
    }

I hope someone knows how this can be fixed.

Answer 1

Have you followed all of the instructions (including adding OAuth ID to index.html) from this page? https://pub.dev/packages/google_sign_in_web

You get your CLIENT ID from https://console.developers.google.com/apis/credentials

You also have to run from terminal like this, for it to work on localhost in debug:

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

The default authorised port is 5000, you can add other URIs on the same page you got your CLIENT ID (e.g.8764367243864-987523.apps.googleusercontent.com), it's under "Authorised JavaScript origins" https://console.developers.google.com/apis/credentials)