Migration to Google Identity Services

4 min readFeb 23, 2023

The Google Identity Services is a JavaScript library that helps to quickly and safely obtain access tokens necessary to call Google APIs. The Google Identity Services identity product suite offers a quick, safe, and privacy-preserving solution for users to sign up for or log in to any platform protected by a passwordless, token-based authentication strategy. Authorization support for the Google Sign-In JavaScript platform library will no longer be supported after March 31, 2023. So this blog presents a detailed guide for Migration to GIS.

What is autorisation?
The process of confirming someone’s identity is known as authentication, whereas the process of confirming a user’s access to particular software, files, and data is known as authorisation.
How user authorisation works?
A server uses authorisation to decide whether a client is allowed to access a file or use a resource. In order to give the server some idea of the identity of the client requesting access, authorisation is frequently combined with authentication.
In some circumstances, there is no need for authorisation; anyone may utilise a resource or access a file by requesting it. The majority of web pages on the Internet don’t need authorisation or authentication.
There are two types of authorisation flow:
1. Implicit flow
2. Authorisation code flow

Implicit flow

The authorisation server issues an access token to the client app instantly when the user logs in from the client app. User consent is necessary for each and every token request, including those to replace expired tokens. When an access token expires, a user action, such as pressing a button or clicking a link, is required to request and get a fresh, valid access token.

Basic implementation of GIS flow
Since the platform library is going to be deprecated soon, it has become essential to migrate to google identity services. In order to migrate, firstly one has to identify and choose the type of code flow for the application. In this blog, implementation of GIS using implicit flow will be explained. With the following steps , one would be easily able to migrate to GIS.

1. Firstly, in order to identify the affected places, one can search for occurrences of gapi.auth2. Wherever the occurrence of gapi.auth2 module is being loaded it should be removed. However, we can still continue using gapi.client module and take advantage of its automatic creation of callable JS methods from a discovery document, batching multiple API calls, and CORS management functionality.

2. The gapi.auth2 module manages user authentication for sign-in and the implicit flow for authorization, replace this deprecated module, and its objects and methods with the Google Identity Services library.

Add the Identity services library:

<script src=”https://accounts.google.com/gsi/client" async defer></script>

3. Next step is to initialise token client with your web app’s client ID for implicit flow. For that one needs to remove following objects and methods.

Objects:
gapi.auth2.ClientConfig
gapi.auth2.OfflineAccessOptions
Methods:
gapi.auth2.getAuthInstance()
GoogleUser.grant()

And add a TokenClientConfig object and initTokenClient() call to configure your web app.

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

4. A user action, such as clicking a button, triggers a request that results in the return of an access token either straight to the user’s browser with the implicit flow or to your backend platform after trading a per-user authorisation code for an access token and refresh token. We can call requestAccessToken() when an access token is first needed, and later, after the existing token expires.
For this, replace below methods.

Methods:
gapi.auth2.authorize() with TokenClient.requestAccessToken()
GoogleUser.reloadAuthResponse() with TokenClient.requestAccessToken()

requestAccessToken() will initiate the pop-up UX flow to request an access token, or to obtain a new token when the existing token expires.

public getToken() {
  this.client.requestAccessToken();
}

Refresh Token after every 45/50 mins

A token’s expiration period is 3599 seconds. Therefore, a new, valid access token is needed to call the Google APIs. We can use the requestAcessToken() method of Identity services to request a new, valid access token.

refreshToken() {
  let accessToken = gapi.client.getToken()
  if(accessToken === null){
    this.authPromise.requestAccessToken({prompt: ‘consent’});
  }
  else{
    this.authPromise.requestAccessToken({prompt: ‘’});
  }
}

With the previous library, we could automatically refresh the token without any help from a user. However, auto refresh is not supported by Google Identity Services due to increased security. We can use the setInterval function to stop human involvement from requesting a new token.

checkAndSetInterval(){
  let initialTime:any = new Date();
  setInterval(() => {
    let currentTime:any = new Date()
    let minutes:any = Math.abs((initialTime — currentTime) / 1000 /      60);
    if (minutes > 55) {
      this.refreshToken();
      initialTime = new Date();
   }
  }, 10000);
}

As a result, after every 55 minutes we will receive a user consent pop-up. A user will be asked to confirm the scopes. A pop-up after every 50 minutes will of course lead to a bad user experience. However, the “prompt” setting can prevent this.
Prompt provides us with these 4 options.

empty string The user will be prompted only the first time your app requests access. Cannot be specified with other values.
‘none’ Do not display any authentication or consent screens. Must not be specified with other values.
‘consent’ Prompt the user for consent.
‘select_account’ Prompt the user to select an account.

For more information, refer

https://developers.google.com/identity/oauth2/web/reference/js-reference#TokenClientConfig

In case when the application knows which user should authorise the request, it can use ‘hint’ property to provide a hint to Google. The email address for the target user. As a result of this, email-Id of a logged in user will come as auto-filled. For more information, refer attached link.

Google 3P Authorization JavaScript Library for websites - API reference | Google Developers

This reference describes the Google 3P Authorization JavaScript Library API, which you can use to load authorization…

developers.google.com

These are are the necessary steps required to migrate to GIS. For the detailed understanding it is recommended to once refer the official documentation. The documentation has mentioned the methods and objects that are supposed to be added, replaced and removed.

I sincerely hope that this blog will be useful to everyone who is having difficulty making the transition to GIS. Your insightful comments are greatly appreciated and pleased to answer any questions.

Migration to Google Identity Services

Implicit flow

Refresh Token after every 45/50 mins

Google 3P Authorization JavaScript Library for websites - API reference | Google Developers

This reference describes the Google 3P Authorization JavaScript Library API, which you can use to load authorization…

References:

Written by Shivani Metangale