Flutter Web: Google Sign In

Flutter is still gaining traction and people are learning and exploring the wonders of Flutter. Flutter web is in the same stance. And now, you might want to have some authentication to be inserted in you flutter web or you either have an auth service and want to see if it's compatible to the web.

1 . Install google sign in in your pubspec.yaml file. The web implementation of google sign is in the official package.

// pubspec.yaml

google_sign_in: <latest version>

2 . Then, you have to go to the your index.html file and add your google sign in meta tag:

<meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">

3 . To get your client id, you have to your credentials page in your google api developer console through this website: https://console.developers.google.com/apis/credentials.

4 . Under your OAuth 2.0 Client IDs, if you have the Web Client api, just copy the client id and paste in your index.html.

<meta name="google-signin-client_id" content="afda89df7b328sadf.apps.googleusercontent.com">

4 .a. If you do not have the Web Client api, make sure you configure your OAuth screen.

To configure, and you don't have G-Suite, then you can only make it external.

Once you're in, you have to update the name of the project and save it

4 .b. Then create the OAuth credential web client.

Choose Web application. Don't need to rename the default name

And set the authorised Javascript origins to http://localhost:5000 for debugging.

Copy the client id and paste in your index.html.

5 . Go in the settings of the Web Client and make sure your has authorised Javascript origins to http://localhost:5000 for debugging.

6 . Instruction Source from: google_sign_in_web package

Normally flutter run starts in a random port. In the case where you need to deal with authentication like the above, that's not the most appropriate behavior.

You can tell flutter run to listen for requests in a specific host and port with the following:

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

You can set your launch.json in your VSCode:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Flutter with Web Port 5000",
      "request": "launch",
      "type": "dart",
      "args": ["--web-port", "5000"]
    }
  ]
}

7 . Add the import:

import 'package:google_sign_in/google_sign_in.dart';

8 . Initialize GoogleSignIn with the scopes you want:

GoogleSignIn _googleSignIn = GoogleSignIn(
  scopes: [
    'email',
  ],
);

9 . You can now use the GoogleSignIn class to authenticate in your Dart code, e.g.

Future<void> _handleSignIn() async {
  try {
    await _googleSignIn.signIn();
  } catch (error) {
    print(error);
  }
}

Comments

[chitgoks]

hi. i have a question. i followed all the instructions but once i input my email in the text field, it says browser is not secure. i already added the localhost:port in the authorized url in the oauth client id whitelist.