11

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.

Stein.
  • 1,412
  • 2
  • 10
  • 18

2 Answers2

15

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)

Chris
  • 1,720
  • 16
  • 35
  • I have, it works now, I just get another error: https://github.com/flutter/flutter/issues/49500 – Stein. Mar 03 '20 at 10:37
  • I see. I'm sorry I wouldn't know how to help with that error. Is this for an existing project or are you just trying to work out how to use google_sign_in on Flutter-web? – Chris Mar 03 '20 at 11:03
  • The project is existing and working on android. I am currently trying how to make it work consistently with flutter web. It currently just works some times - in some browsers. It's very inconsistent – Stein. Mar 03 '20 at 11:05
  • Hey did you get the solution. I am facing the same error. – Ayush Malviya May 12 '20 at 17:32
  • this is the first time using google sign in web for flutter. have it working in other frameworks. but in flutter, once i input my email/username in the text field, the next thing it says is "This browser or app may not be secure. Try using a different browser. If you’re already using a supported browser, you can refresh your screen and try again to sign in." the localhost+port is already in the whitelist. the meta tag for client id is already there as well. No idea what else is missing – chitgoks Jun 25 '20 at 04:00
  • @chitgoks did you have a solution for this? I have exactly the same issue! – Stefan de Vogelaere Jul 01 '20 at 16:48
  • @StefandeVogelaere yes. when you use -d chrome option and a new browser shows up, do not use that as it is treated as not secure. Do not close that though just it leave it running, then open a new tab in the normal chrome instance to access your url. if you use the -d web-server option, then use chrome right away. – chitgoks Jul 02 '20 at 00:10
0
import 'package:flutter/material.dart';
import 'package:google_sign_in/google_sign_in.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Google Sign-In Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: signInWithGoogle,
            child: Text('Sign in with Google'),
          ),
        ),
      ),
    );
  }
}

Future<void> signInWithGoogle() async {
  final String googleClientId = "your_client_id_here";

  try {
    final GoogleSignInAccount? googleUser = await GoogleSignIn(
      clientId: googleClientId,
    ).signIn();

    if (googleUser != null) {
      // You've successfully signed in with Google.
      // Now you can use the googleUser object to access user information.
      // For example: googleUser.displayName, googleUser.email, etc.
      print('Signed in with Google: ${googleUser.displayName}');
    } else {
      // The user cancelled the sign-in process.
      print('Google Sign-In cancelled.');
    }
  } catch (error) {
    // Handle any errors that might occur during the sign-in process.
    print("Error during Google Sign-In: $error");
  }
}

Remember to replace "your_client_id_here" with your actual Google API client ID.

Muhammad Ahmad Mahmood
  • 11
  • 2