google_sign_in_web

The web implementation of google_sign_in

Usage

Import the package

This package is the endorsed implementation of google_sign_in for the web platform since version 4.1.0, so it gets automatically added to your dependencies by depending on google_sign_in: ^4.1.0.

No modifications to your pubspec.yaml should be required in a recent enough version of Flutter (>=1.12.13+hotfix.4):

...
dependencies:
  ...
  google_sign_in: ^4.1.0
  ...
...

Web integration

First, go through the instructions here to create your Google Sign-In OAuth client ID.

On your web/index.html file, add the following meta tag, somewhere in the head of the document:

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

For this client to work correctly, the last step is to configure the Authorized JavaScript origins, which identify the domains from which your application can send API requests. When in local development, this is normally localhost and some port.

You can do this by:

1. Going to the Credentials page.
2. Clicking “Edit” in the OAuth 2.0 Web application client that you created above.
3. Adding the URIs you want to the Authorized JavaScript origins.

For local development, may add a localhost entry, for example: http://localhost:7357

Starting flutter in http://localhost:7357

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 7357

Other APIs

Read the rest of the instructions if you need to add extra APIs (like Google People API).

Using the plugin

Add the following import to your Dart code:

import 'package:google_sign_in/google_sign_in.dart';

Initialize GoogleSignIn with the scopes you want:

GoogleSignIn _googleSignIn = GoogleSignIn(
  scopes: [
    'email',
    'https://www.googleapis.com/auth/contacts.readonly',
  ],
);

Full list of available scopes.

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);
  }
}

Example

Find the example wiring in the Google sign-in example application.

API details

See the google_sign_in.dart for more API details.

Contributions and Testing

Tests are a crucial to contributions to this package. All new contributions should be reasonably tested.

In order to run tests in this package, do:

flutter test --platform chrome -j1

Contributions to this package are welcome. Read the Contributing to Flutter Plugins guide to get started.

Issues and feedback

Please file issues to send feedback or report a bug.

Thank you!