How to use scoped APIs with (GSI) Google Identity Services

Question

Google recently sent me an email with the following:

One or more of your web applications uses the legacy Google Sign-In JavaScript library. Please migrate your project(s) to the new Google Identity Services SDK before March 31, 2023

The project in question uses the Google Drive API alongside the now legacy authentication client.

The table on the migration page (https://developers.google.com/identity/gsi/web/guides/migration) says:

Old	New	Notes
JavaScript libraries
apis.google.com/js/platform.js	accounts.google.com/gsi/client	Replace old with new.
apis.google.com/js/api.js	accounts.google.com/gsi/client	Replace old with new.

I was currently using gapi on the front-end to perform authorization which is loaded from apis.google.com/js/api.js. According to the table I would need to replace it with the new library.

I've tried the following to authenticate and authorize in the same manner that I used to do with gapi:

window.google.accounts.id.initialize({
  client_id: GOOGLE_CLIENT_ID,
  callback: console.log,
  scope: "https://www.googleapis.com/auth/drive.file",
  discoveryDocs: ["https://www.googleapis.com/discovery/v1/apis/drive/v3/rest"],
});

window.google.accounts.id.renderButton(ref.current, {
  size: "medium",
  type: "standard",
});

However, when I try to authenticate with the Google Sign In button, the scope field is not respected and it does not ask the user to authorize the requested scopes. It also doesn't return any form of access token in the Credential Response in the callback.

I'm not sure how else to authorize using the new library.

Answer 1

In the new Google Identity Services, the authentication moment and the authorization moment are separated. This means GIS provides different APIs for websites to call on these two different moments. You cannot combine them together in one API call (and UX flow) any more.

In the authentication moment, users just sign in or sign up into your website (by leveraging the information shared by Google). The only decision users need to make is whether they want to sign in (or sign-up). No authorization-related decision needs to be made at this point.

In the authentication moment, users will see consistent One Tap or button UX across all websites (since the same scopes are requested implicitly). Consistency leads to more smooth UX, which may further lead to more usage. With the consistent and optimized authentication UX (across all websites), users will have a better experience with federated sign-in.

After users sign-in, when you really want to load some data from a Google data service, you can call the GIS authorization API to trigger a UX flow to allow end users to grant the permission. That's the authorization moment.

Currently (August 2021), only authentication API has been published. If your website only cares about authentication, you can migrate to GIS now. If you also need the authorization API, you have to wait for further notice.

Answer 2

To add to the current answer, there is now documentation on how to authorize users with additional scope. From Using the token model.

First you need to init a TokenClient:

const client = google.accounts.oauth2.initTokenClient({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  scope: 'https://www.googleapis.com/auth/calendar.readonly',
  callback: (response) => {
    ...
  },
});

Then request for a token:

client.requestAccessToken();

---

If anyone is interested in where it's mentioned in the migration documentation, last paragraph of this section:

If your use case includes authorization, please read How user authorization works and Migrate to Google Identity Services to make sure your application is using the new and improved APIs.

While their articles are very detailed and good, personally I find them a bit too much for me, so it's simpler for me to just follow the first article mentioned and don't care about migrations at all.