The web implementation of google_sign_in
The google_sign_in_web plugin is backed by the new Google Identity Services (GIS) JS SDK since version 0.11.0.
The GIS SDK is used both for Authentication and Authorization flows.
The GIS SDK, however, doesn‘t behave exactly like the one being deprecated. Some concepts have experienced pretty drastic changes, and that’s why this plugin required a major version update.
The Google Sign-In JavaScript for Web JS SDK is set to be deprecated after March 31, 2023. Google Identity Services (GIS) SDK is the new solution to quickly and easily sign users into your app suing their Google accounts.
scopes anymore.signInSilently now displays the One Tap UX for web.idToken (JWT-encoded info) when the user successfully completes an authentication flow:signInSilently and through the web-only renderButton widget.signIn method uses the OAuth “Implicit Flow” to Authorize the requested scopes.accessToken, and not an idToken, so if your app needs an idToken, this method should be avoided on the web.See more differences in the following migration guides:
In the GIS SDK, the concepts of Authentication and Authorization have been separated.
It is possible now to have an Authenticated user that hasn't Authorized any scopes.
Flutter apps that need to run in the web must now handle the fact that an Authenticated user may not have permissions to access the scopes it requires to function.
The Google Sign In plugin has a new canAccessScopes method that can be used to check if a user is Authorized or not.
It is also possible that Authorizations expire while users are using an app (after 3600 seconds), so apps should monitor response failures from the APIs, and prompt users (interactively) to grant permissions again.
Check the “Integration considerations > UX separation for authentication and authorization guide” in the official GIS SDK documentation for more information about this.
(See also the package:google_sign_in example app for a simple implementation of this (look at the isAuthorized variable).)
Only if the scopes required by an app are different from the OpenID Connect scopes.
If an app only needs an idToken, or the OpenID Connect scopes, the Authentication bits of the plugin should be enough for your app (signInSilently and renderButton).
signIn method on the web?Because the GIS SDK for web no longer provides users with the ability to create their own Sign-In buttons, or an API to start the sign in flow, the current implementation of signIn (that does authorization and authentication) is no longer feasible on the web.
The web plugin attempts to simulate the old signIn behavior by using the OAuth Implicit pop-up flow, which authenticates and authorizes users.
The drawback of this approach is that the OAuth flow only returns an accessToken, and a synthetic version of the User Data, that does not include an idToken.
The solution to this is to migrate your custom “Sign In” buttons in the web to the Button Widget provided by this package: Widget renderButton().
(Check the package:google_sign_in example app for an example on how to mix the renderButton widget on the web, with a custom button for the mobile.)
If you want to use the signIn method on the web, the plugin will do an additional request to the PeopleAPI to retrieve the logged-in user information (minus the idToken).
For this to work, you must enable access to the People API on your Client ID in the GCP console.
This is not recommended. Ideally, your web application should use a mix of signInSilently and the Google Sign In web renderButton to authenticate your users, and then canAccessScopes and requestScopes to authorize the scopes that are needed.
idToken missing after signIn?The idToken is cryptographically signed by Google Identity Services, and this plugin can't spoof that signature.
Since the GIS SDK does not manage user sessions anymore, apps that relied on this feature might break.
If long-lived sessions are required, consider using some user authentication system that supports Google Sign In as a federated Authentication provider, like Firebase Auth, or similar.
Since the GIS SDK does not auto-renew authorization tokens anymore, it's now the responsibility of your app to do so.
Apps now need to monitor the status code of their REST API requests for response codes different to 200. For example:
401: Missing or invalid access token.403: Expired access token.In either case, your app needs to prompt the end user to requestScopes, to interactively renew the token.
The GIS SDK limits authorization token duration to one hour (3600 seconds).
This package is endorsed, which means you can simply use google_sign_in normally. This package will be automatically included in your app when you do, so you do not need to add it to your pubspec.yaml.
However, if you import this package to use any of its APIs directly, you should add it to your pubspec.yaml as usual.
For example, you need to import this package directly if you plan to use the web-only Widget renderButton() method.
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:
For local development, you must add two localhost entries:
http://localhost andhttp://localhost:7357 (or any port that is free in your machine)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
Read the rest of the instructions if you need to add extra APIs (like Google People API).
See the Usage instructions of package:google_sign_in
Note that the serverClientId parameter of the GoogleSignIn constructor is not supported on Web.
Find the example wiring in the Google sign-in example application.
See google_sign_in.dart for more API details.
Tests are crucial for contributions to this package. All new contributions should be reasonably tested.
Check the test/README.md file for more information on how to run tests on this package.
Contributions to this package are welcome. Read the Contributing to Flutter Plugins guide to get started.
Please file issues to send feedback or report a bug.
Thank you!