This article will help you understand the changes and actions required to effectively migrate JavaScript libraries for authentication from the older Google Sign-In platform library to the newer Google Identity Services library.
A JavaScript-based Google Platform Library for web apps is being deprecated by Google and will be completely deprecated on March 31, 2023, according to a recent announcement from the company. Google unveiled the new Google Identity Services library to combine various identity products into a single software development kit(SDK) in an effort to enhance user sign-in and safeguard users' personal information.
We'll explain how to solve the error shown below, which you could have encountered.
You have created a new client application that uses libraries for user authentication or authorization that will soon be deprecated. New clients must use the new libraries instead; existing clients must also migrate before these libraries are deprecated. See the Migration Guide for more information.
The Google Platform Library (apis.google.com/js/platform.js) is no longer supported, so you must switch to the most latest Sign In With Google client library. The deprecation only affects web sites using the Google Sign-in JavaScript library. However, it should be noted that this migration does not apply to apps or platforms that directly call Google's OAuth2 or OpenID services, nor does it affect authentication and authorization flows for native Android or iOS apps or SDKs.
The new Google Identity Services library has a number of advantages, as announced on the Google blog, including
- Low-friction user sign-in and sign-up.
- A consistent sign-in experience for users across the web.
- Ability to add a secure sign-in method using either HTML or JavaScript.
The following steps will help you in migrating to the newer Google Identity Services library if you have already implemented the old Google Sign-In API or if you are a beginner who wants to implement "Sign-in with Google" on your website. The library allows users to sign in to your application using their Google credentials in a simple and secure manner.
To help users complete their migration before the March 31, 2023 deadline, Google has published a Sign In With Google migration guide. This information is available in the Google Sign-In HTML JavaScript migration documentation, but we're here to help you migrate the new Google Sign-In method with code and examples.
Update the Google Sign-In API library to Google Identity Services as follows:
In your code, replace the old Google Sign-In API library with the new Google Identity Services library.
Old method:
<script src="https://apis.google.com/js/platform.js" async defer></script>
<script src="https://apis.google.com/js/platform.js" async defer></script>
To new method
<script src="https://accounts.google.com/gsi/client"></script>
The new method for implementing the Google Sign-In API is via <script src="https://accounts.google.com/gsi/client"></script>. Both the <script src="https://apis.google.com/js/platform.js" async defer></script> and the <script src="https://apis.google.com/js/api.js" async defer></script> are parts of the old Google Sign-In API implementation and will be deprecated on March 31, 2023. It is recommended to switch from the outdated method to the more current one using the <script src="https://accounts.google.com/gsi/client"></script> for improved user experience and security.
For authentication, below is a code comparison of the old Google Sign-In API with the newer Google Identity Services library:
Old Google Sign-In API:
<!-- Load the API client library -->
<script src="https://apis.google.com/js/platform.js" async defer></script>
<!-- Add a Google Sign-In button -->
<div class="g-signin2" data-onsuccess="onSignIn"></div>
<script>
// Function to handle the sign-in flow
function onSignIn(googleUser) {
// Get basic profile information
var profile = googleUser.getBasicProfile();
console.log('ID: ' + profile.getId());
console.log('Name: ' + profile.getName());
console.log('Image URL: ' + profile.getImageUrl());
console.log('Email: ' + profile.getEmail());
}
</script>
New Google Sign-In API:
<script src="https://accounts.google.com/gsi/client"></script>
<script src="https://unpkg.com/jwt-decode/build/jwt-decode.js"></script>
<div id="g_id_onload"
data-client_id="YOUR_CLIENT_ID"
data-context="signin"
data-ux_mode="popup"
data-callback="handleCredentialResponse"
data-auto_select="true"
data-itp_support="true">
</div>
<div class="g_id_signin"
data-type="standard"
data-shape="rectangular"
data-theme="filled_blue"
data-text="continue_with"
data-size="large"
data-logo_alignment="left">
</div>
<script>
function handleCredentialResponse(response) {
if (response.credential) {
var credential = response.credential;
console.log('ID Token: ' + credential);
// handle successful sign-in or sign-up
var profile = jwt_decode(response.credential);
console.log('ID: ' + profile.sub);
console.log('Full Name: ' + profile.name);
console.log('Email: ' + profile.email);
console.log('Image URL: ' + profile.picture);
// handle successful sign-in or sign-up
} else if (response.status && response.status.error) {
var error = response.status.error;
console.log('Error: ' + error.message);
// handle error
} else {
console.log('Sign-in or sign-up error');
// handle sign-in or sign-up error
}
}
</script>
The primary difference, as you can see, is the retrieval of the ID token, which is now available in the googleUser.getAuthResponse().id_token method. You can use this ID token to authenticate users in your application using the Google Identity Services module.
Using the Google Identity Services library, here is a full code example for the new Google Sign-In method:
Full Code:
<html>
<head>
<script src="https://accounts.google.com/gsi/client"></script>
<script src="https://unpkg.com/jwt-decode/build/jwt-decode.js"></script>
</head>
<body>
<div id="g_id_onload"
data-client_id="YOUR_CLIENT_ID"
data-context="signin"
data-ux_mode="popup"
data-callback="handleCredentialResponse"
data-auto_select="true"
data-itp_support="true">
</div>
<div class="g_id_signin"
data-type="standard"
data-shape="rectangular"
data-theme="filled_blue"
data-text="continue_with"
data-size="large"
data-logo_alignment="left">
</div>
<script>
function handleCredentialResponse(response) {
if (response.credential) {
var credential = response.credential;
console.log('ID Token: ' + credential);
var profile = jwt_decode(response.credential);
console.log('ID: ' + profile.sub);
console.log('Full Name: ' + profile.name);
console.log('Email: ' + profile.email);
console.log('Image URL: ' + profile.picture);
} else if (response.status && response.status.error) {
var error = response.status.error;
console.log('Error: ' + error.message);
// handle error
} else {
console.log('Sign-in or sign-up error');
// handle sign-in or sign-up error
}
}
</script>
</body>
</html>
Above code generates a Google Sign-In button that allows people to sign in to your application using their Google credentials. You must replace YOUR_CLIENT_ID with your real client ID, which you can get via the Google API Console. The handleCredentialResponse function receives the user's profile information and ID token, which you can use for authentication. Passing credentials through the jwt-decode function allows the library jwt-decode to help in the decoding of Base64Url encoded JWT tokens: Thereafter, jwt-decode(response.credential) will deliver object-based profile data.
The following actions must be followed in order to create a Google client ID for your application:
- Go to the Google API Console: https://console.developers.google.com
- Create a new project or select an existing project.
- Enable the Google Sign-In API for your project. You can do this by navigating to the API Library and looking for the Google Sign-In API. Then click the "Enable" button.
- Go to the Credentials tab, choose "OAuth client ID," then click the "Create credentials" button.
- Provide a name for the client ID and choose "Web application" as the application type. Additionally, you must provide the redirect URIs and allowed JavaScript origins for your application.
- Click the "Create" button.
- Your client ID will then be displayed to you, allowing you to initialise the Google Sign-In API in your project.
Note: Be careful not to disclose or discuss your client ID with anyone. Additionally, a new client ID must be created whenever you change the allowed JavaScript origins or redirect URIs.
The next step is the verification process, in which you must explain why you require the Google sign-in button for your project and why you are collecting users' personal information. You must also explain how you will use and collect this information and submit all of the relevant information to a Google reviewer.
You can speed up the verification process by providing Google reviewers with further helpful details about your app.
Google will review your application when you apply for a client ID to ensure it meets their security and privacy standards. You can assist the review process to proceed more smoothly and faster by giving more information and context about your app. You can help speed up the verification process by doing the following:
- Give a full explanation of your app and its features, including information about the data your app collects and how it will be used.
- Include videos or screenshots that explain how your app works and the intended user experience.
- Give any relevant certification or privacy-related information, like a security certifications or privacy policy.
- Describe how your app follows with Google's policies, including those regarding user permission, privacy, and data protection.
- Give the Google review team the contact information for a technical representative who can help with any inquiries or issues.
By submitting these information, you can speed up the review process and ensure that your app is approved and can utilise the Google Sign-In API as soon as possible.
In the Google "Generate HTML code" tool page, you can customise your Google sign-in button.
Summary
The Google Platform Library for web apps, which is built on JavaScript, has been deprecated by Google, and it will be discontinued on March 31, 2023. Google Identity Services, a new family of Identity APIs that merges various identity products under one software development kit (SDK), was launched by the company to secure users' private information and reduce the number of sign-in options. The Google Sign-in JavaScript library deprecation only impacts web apps that use it; it has no effect on the other Google login and authorization options.
The new JavaScript library for Sign In With Google has many advantages, including low-friction user sign-in and sign-up processes, a consistent sign-in procedure utilising HTML or JavaScript, and secure sign-in procedures. This guide makes it easier to understand the changes and methods required to successfully switch from the older outdated Google Sign-In API to the more recent Google Identity Services library.
