The aim of Google rolling out its redesigned Material Theme to enable its unique Sign In With Google functionality and drive on various website solutions. Through the Sign In With Google functionality, webmasters have a way to quickly manage user authentication on any website. This is a feature that developers can use for innovative user authentication integration features.
With its help, website users can easily and quickly sign into a Google Account, provide their consent, and securely share their profile information with your platform. Customizable buttons and multiple flows are supported for user sign-up and sign-in. Sign-up refers to the steps to obtain a Google Account holder’s consent to share their profile information with your platform.
Typically, a new account is created on your site using this shared data, but this is not a requirement. Sign-in refers to logging users into your website using their active Google Account with a personalized sign-in button or One Tap and automatic sign-in for users already logged in to their Google Account. See the Case Studies for some Sign In With Google integration success stories.
In addition to personalized button, the Sign in with Google button supports Google Accounts with Family Link and adheres to Google Workspace Policies set by the organization’s administrator. The Sign in with Google button flow supports pop-up and redirect UX modes. The Google Identity Services Authorization API also lets you obtain a token for Google APIs and user data access.
A One Tap Sign In With Google Authentication And Authorization
Integrating the Sign In With Google features functionality is a great innovation. You can use the Code Generator to generate code to embed One Tap, Automatic sign-in, and the Sign in with Google button into your web pages. Users can globally opt-out of third-party sign-in on browsers that support FedCM, though One Tap and automatic sign-in are unavailable (not displayed).
When users visit your website, if there is an active Google session in the browser, Sign in with Google may prompt users to sign in or sign up on your website with their Google Account. With just one tap (for a single Google session case) or two taps (when there are multiple Google sessions), users can finish the federated sign-in or sign-up flow.
The One Tap UX allows for smooth user entry points, since all the UX flows are performed in an iframe embedded in your web pages. Users may choose to globally opt-out of One Tap, whereby, in this case, the Google Account does not display One Tap. If all active Google Accounts are opted out, the One Tap UI is not shown.
Due to Intelligent Tracking Prevention (ITP), an additional welcome page is displayed for ITP browsers, like Chrome on iOS, Safari, and Firefox. Developers can opt-out from this feature on one or multiple ITP browsers. Check the one tap support on ITP browsers guide for more information. You are recommended to put One Tap on both your main login dialog and leaf pages.
Why One Tap:
- increased user conversion rates.
- allows sign in and sign up without redirecting users to a dedicated sign in and sign up page.
- allows users to sign in and sign up in the context of your website without having to navigate away from their current journey.
- mitigate duplicate accounts with personalized prompts and automatic sign-in on return visits.
For your information, the One Tap UI should be displayed automatically on page load or other window events, instead of being triggered by a user gesture. Otherwise, you may get a broken UX. Users may not see any UI after a user gesture, due to globally opt-out, cool-down, or no Google session.
Before Getting Started With Integrating The Sign In With Google
Remember, the Google Material Theme which was announced at I/O 2018 alongside Material Theming emphasizes customization and adaptability. Developers can tailor the theme to their brand or style, create visually appealing and consistent user interfaces across applications. The sign-in page (rolled out in June) has elements like centered text, logo tweaks, and the Google Sans font.
With the help of Google Identity Services, developers can use a dedicated and integrated service to help their users sign in to the developer’s website and apps with whatever login credentials the user chooses. The ultimate mission of Google Identity Services is to support and streamline the UX for multiple types of credentials, to lower the technical bar for the relying party integration.
In the pop-up UX, once the Sign in with Google button is clicked, a new pop-up window is opened on top of your web page, rendering the button UX flow in a pop-up window. In the redirect UX, a full page redirect happens after clicking the Sign in with Google button. The button UX flow renders in the same window. However, users cannot see the web page when the button UX displays.
The button rendering API lets you customize the color, shape, text, and size to meet the branding requirements of your website, while still sticking to Google’s guidelines. With consistent buttons across websites, users quickly recognize, trust and use these buttons. Below is a sample demo showcasing how clicking the button to Sign In With Google is automatically triggered.
Integrations:
Deployments:
- Android Credential Manager API
- Google Sign-In For iOS And macOS
- Password Credential Manager API
- Federated Credential Manager API
Sign In With Google for Web doesn’t support silent sign in, in which case a credential is returned without any UI displayed. End users always see some UI, manual or automatic sign in, when a login credential is returned from Google to the relying party. This improves user privacy and control. The Sign in with button must be generated by the Google Identity Services JavaScript library.
Put it another way, Google Identity Services designates the Sign In With Google functionality for the authentication moment API and features. Google Identity Services designates the Authorization API for the authorization moment API and features. In terms of user privacy, it’s worth noting that data from Sign in with Google is not used for ads or other non-security purposes.
How the signing process works:
- First, you can sign up to optionally create a new account auto-filled from a Google Account profile.
- Secondly, you can sign in using an account chooser to select from multiple accounts.
- Likewise, you can sign in with one tap if you’ve already signed in to your Google Account.
- Still, you can sign in automatically on return visits using your computer, phone or even multiple browser tabs.
- Last but not least, you can sign out to disable automatic sign-in across all your devices.
User profile information may also be used to render the button. A personalized button displays only when there is at least one active Google session that has authenticated a user on your website before. A personalized button reminds end users that they have used Sign in with Google before, and thus helps to prevent unnecessary duplicate account creation on your website.
This is especially helpful to end users who visit your website only occasionally. They may forget the login methods they used. With that in mind, there are various reasons why webmasters should add the Sign In With Google functionality on their website. Whether to enable automatic sign-in is a decision you need to make based on the UX of your website.
Some benefits are as follows:
- Add a visibly trusted and secure Sign In With Google Button to an account creation or settings page.
- Pre-populate new accounts with consensually shared data from a Google Account profile.
- Users can sign in once to a Google Account without re-entering usernames or passwords on other sites.
- On return visits, users can sign in automatically or with one click across an entire site.
- Use verified Google Accounts to protect comments, voting or forms from abuse, while allowing anonymity.
As part of the Privacy Sandbox initiative, Chrome is phasing out support for third-party cookies. GIS integrates the FedCM API, which is a new privacy-preserving alternative to third-party cookies for federated identity providers. GIS begins a migration of all websites to FedCM on the Chrome browser in April 2024.
The key point is that for new website applications, you should always enable FedCM when integrating GIS to your website. For existing apps, you should migrate to FedCM to determine if your existing integration with GIS needs to be updated. Learn in these case studies how some of Google’s partners have successfully used One Tap to improve their sign up and sign in experiences.
Comparing The Signing Feature To OAuth And OpenID Connect
OAuth and OpenId Connect are open standards that offer a wide range of configurable options to fine-tune the behavior of authentication and authorization flows. Refer to Google’s OAuth Documentation for more details. Sign in with Google offers a single SDK to encompass several related offerings including a personalized button, One Tap, Automatic sign-in, and authorization.
It aims to offer an easier and more secure experience for developers than the standard OAuth and OpenID Connect protocols, while providing a more seamless user experience. Sign in with Google is based on OAuth 2.0. The permissions that users grant through Sign in with Google are the same as those that they grant for OAuth, and the other way around.
OAuth 2.0 is also the industry-standard protocol for authorization. It provides for a set of endpoints with which relying parties integrate using HTTP. Google Identity Services (GIS) APIs are available in several languages, including JavaScript and HTML, that provide for both authentication and authorization. GIS separates the authentication moment from the authorization moment.
In the authentication moment, a quick integration can be achieved by just integrating some UI elements into your website, such as the personalized button, One Tap, and automatic sign-in. These UI elements provide a consistent authentication UX across all third-party websites. In the authorization moment, GIS triggers OAuth flows to return tokens for data access on behalf of the user.
Related Resource: Two-Factor Authentication (2FA) Apps Verification Tool Guide
GIS authentication makes integration with relying parties easier, and reduces most of the OAuth and security knowledge burden on developers. You don’t need to choose from various approaches to obtain access tokens or authorization code, or risk the consequences of choosing the wrong approach. The OAuth 2.0 protocol exposes many details such as the request parameters.
This also includes the response parameters of the HTTP endpoints, GIS handles these implementation details for you. Also, GIS includes some security implementations for Cross-Site Request Forgery (CSRF) protection by default. With the HTML API and Code Generator, the GIS authentication lowers the bar for relying parties integration even further.
You don’t need a JavaScript developer to generate the code. This reduces the level of OAuth experience required as well as time to implement. The GIS authorization UX is fully based on OAuth UX. However, the GIS JavaScript library adds some restrictions for easier and safer relying party integration. GIS also provides some features beyond the OAuth protocol.
Separate Sign In With Google Authentication And Authorization Moments
To obtain an access token for use with Google APIs, or to access user data, you need to call the Google Identity Services Authorization API. It’s a separate JavaScript API, but packaged together with the authentication API. If your website needs to call both authentication and authorization APIs, you need to call them separately at different moments.
At the authentication moment, your website can integrate with One Tap, automatic sign-in, and the Sign In with Google button to allow users to sign in or sign up to your website. At a later time, when accessing data from Google is required, you call the authorization API to ask for the consent and get access tokens for data access.
Related Resource: How Multi-Factor Authentication (MFA) Powers Business Safety
This separation complies with the recommended incremental authorization best practice, in which the permissions are requested in context. To enforce this separation, the authentication API can only return ID tokens which are used to sign in to your website, whereas the authorization API can only return code or access tokens which are used only for data access but not sign-in.
Thanks to this separation, users have consistent authentication experiences across different websites, which may increase user trust and usage, and result in better user conversion rates on your website. Also, due to this separation, Google Identity Services reduces the level of OAuth experience required and time to implement for authentication developers.
Enabling The Cancelable Automatic Sign In With Functionality
You may notice that the account states may affect the Sign In With Google functionality. For instance, suspending your Google Account stops the signing option into all websites while deleting your Google or partner account affects one, but not the other. With One Tap, you can also enable the cancelable automatic sign-in, which enables a streamlined UX for returning users.
No user gesture is needed for returning users to automatically sign in to your website. Automatic sign-in is triggered when there is only one active Google Account that has previously granted consent to share their account profile with your app. Users have the ability to cancel the auto sign-in process for a short period of time, ensuring user control and transparency.
Resource References:
- Overview | Authentication | Google for Developers
- Test your Google Account Linking OAuth Implementation
- Third Party Sign in with Google – Google Account
In most cases, if users cancel automatic sign-in, Sign in with Google remembers the decision for one day before it enables automatic sign-in again. The cancelable feature allows users to have more control over the automatic sign in process. When FedCM is enabled, there is a 10 minute cooling off period between automatic sign-in events.
If automatic sign-in is triggered during this time, users follow the One Tap sign-in flow instead of the automatic sign-in flow. In contrast to One Tap, the Sign in with Google button flow must be triggered by a user gesture. To that end, Sign in with Google only provides the API to render a button, but not the API to programmatically initiate the button flow.
This means that, as a developer, all you need to do is render the Sign in with Google button on your web pages. When to trigger the button UX flow is handled by the library transparently.
Notice: All content on this website including text, graphics, images, and other material is intended for general information only. Thus, this content does not apply to any specific context or condition. It is not a substitute for any licensed professional work. Be that as it may, you're free to collaborate with us through blog posting or link placement partnership to showcase brand, business, or product.
