Introduction to Google Sign In
Earlier, we used to login to Google with the “Google sign javascript library” to add google login to your websites. This was a very easy and convenient way of adding Google sign-sign in button.
Recently google deprecated the Google Sign-In JavaScript platform library. Although applications built on Google Sign-In platform library will still be supported with the older clientIds. But for new applications created after March 31, 2023, new client IDs are now blocked from using the older platform library, they need to the new Google Identity Services for Web (GIS client library).
Detailed documentation of why the legacy library was deprecated is provided in the deprecation-and-sunset article briefly.
Steps to integrate GIS client library
1. Setup Google API clientId and OAuth Consent Screen
2. Load the client library
3. Google Sign In Button Rendering on the screen
There are 2 ways to render google sign in button on screen -
a. using HTML
An element with a g_id_signin class renders as a Sign In With Google button. The button is customized by the parameters provided in the data attributes.
gsi html API reference — https://developers.google.com/identity/gsi/web/reference/html-reference
b. using javascript
The element specified as the first parameter to renderButton displays as a Sign In With Google button. In this example buttonDiv is used to render the button on the page. The button is customized using the attributes specified in the second parameter to renderButton.
gsi js API reference — https://developers.google.com/identity/gsi/web/reference/js-reference
Also, you can choose how you want to show the Google Login Flow using redirect mode or popup mode with adding some props. Default is the popup mode.
4. Handle credential response
Once successfully logged in, google calls the callback function handleCredentialResponse defined above. This callback returns an object and has a JWT token. We can decode the JWT token to extract relevant information.
You can validate and decode the JWT credential by using a JWT-decoding library for your language
And that’s it, you have your Sign In with Google button working and ready to go.
Key takeaways from GIS client library implementation.
1. The GIS client library UI is rigid and doesn’t allow much customisation to the Google Login button. The button will be fully controlled by the google inside an iframe. It looks like this
There are ways to set the width, size and type of the button (try here) based on the requirement but nothing more than that.
In the deprecated legacy library, you could have any design on the button and it would still support google login.
2. The credential response object is different in the GIS client library to the legacy Google sign javascript library.
Earlier, a OAuth2 object authorization codes, access tokens, or refresh tokens were returned in the callback.
Instead a JSON Web Token (JWT) ID Token is used to share sign-in status and the user profile.
3. There are some libraries available that are written on top of GIS library. For example — React based library for Google Login, react-0auth .
Note — the deprecation only affects the Google Sign-In JavaScript library for Web. If you are using One Tap sign-in on Android SDK, Google Sign-in for iOS and macOS SDK, or OAuth 2.0 for authentication or authorization with Google services, this deprecation does not affect your app(s).
Thanks for reading !! If you have any queries, questions or suggestions, feel free to add a comment.
