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.
If you don't want to load the client library on your post-login pages, you can use some simple solutions as below to prevent the dead-loop UX on log out moment.
- On log out, redirect users to a page (say,
https://example.com/logged_out
) where One Tap is not displayed, or auto sign-in is always disabled. - On log out, add a parameter to the URL. For example,
logged_out=1
. When rendering One Tap by JavaScript API, check that URL parameter and disable auto sign-in when present.
Key user journeys
The automatic sign-in page.
If users don't click the Cancel button within 5 seconds, an ID token is shared with your website.
When Sign-In is cancelled, based on the number of active Google sessions, either the account chooser page or the returning user page displays.
Multiple Google sessions
Single Google Sessions