This page describes how to implement features related to how users sign in or sign out with Google One Tap.
Sign in users automatically
Google One Tap supports automatic sign-in, which provides a frictionless user experience (UX) by removing the manual steps visitors must take when returning to your site. Users don't need to remember which Google Account they selected during their last visit, decreasing the chances of unnecessary duplicate accounts being created on your platform.
Automatic sign-in is intended to complement our Sign In With Google button and One Tap dialogs. It is designed to be used across your entire site, with manual sign-up or switching accounts occurring only after the user has first signed-out of your site.
For Automatic sign-in to occur the following conditions are required:
- the user must first be signed-in to their Google account and
- have previously granted consent to share their account profile with your app.
For pages where Automatic sign-in is enabled and if these conditions are met the visitors ID token credential is automatically returned without any user interaction. If these conditions are not met, and even if Automatic sign-in is enabled on the page, the user will default to the One Tap flow for sign-in or consent. If a user has multiple Google accounts and visits your site they are required to first sign-in to a single Google account and to have provided consent for that account.
You may measure Automatic sign-in success rate using the auto
value in the
select_by
field of the returned credential object.
To enable automatic sign-in, add data-auto_select="true"
to your code, as
shown in the following snippet:
<div id="g_id_onload" data-client_id="YOUR_GOOGLE_CLIENT_ID" data-auto_select="true" data-login_uri="https://your.domain/your_login_endpoint"> </div>
Sign out
When a user signs out of your website, they can be directed to a page where a Google One Tap prompt is automatically displayed. For this setup, auto-selection must be prohibited. Otherwise, the user is automatically signed in again, which leads to a dead-loop UX.
To prohibit auto-selection after a user signs out, add the class name
g_id_signout
to all of your logout links and buttons. See the following code
snippet:
<div class="g_id_signout">Sign Out</div>
The following JavaScript code snippet can also be used for sign out:
const button = document.getElementById(‘signout_button’); button.onclick = () => { google.accounts.id.disableAutoSelect(); }
Consequently, the signed-out status is recorded through a cookie in your domain so that the dead-loop UX is avoided.
The sign-out status is stored into the g_state
cookie in your domain. If you
have a service that monitors all of the cookies used in your domain, you need
to notify them of this cookie.