Add a One Tap prompt to your site to enable users to sign-up or sign-in to your web app. Use HTML and JavaScript to render and customize the prompt.
Prerequisites
Follow the steps described in Setup to configure your OAuth Consent Screen, obtain a client ID, and load the client library.
Add a Sign in with Google button to your login page.
Prompt rendering
Place a code snippet into any pages where you want One Tap displayed.
HTML
Display the One Tap prompt, returning the JWT credential to a login endpoint.
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-login_uri="https://your.domain/your_login_endpoint"
data-your_own_param_1_to_login="any_value"
data-your_own_param_2_to_login="any_value">
</div>
The data-login_uri attribute is the URI of the login endpoint of your
web app. You can add custom data attributes, which are sent to your login
endpoint along with the ID token issued by Google.
Optionally, use the data-skip_prompt_cookie attribute and a cookie to
control whether or not the One Tap prompt is displayed in static HTML pages
where you cannot change the content. If the specified cookie is set the
prompt isn't displayed.
Use the optional data-context attribute to change the text used in the
prompt title. For example, data-context: "signup" changes "Sign in to" to
"Sign up to".
By default, the One Tap prompt closes automatically if the user clicks
outside of the prompt. You can disable this behavior if you set the
data-cancel_on_tap_outside attribute to false.
For a full list of supported attributes, see g_id_onload reference.
JavaScript
Display the One Tap prompt, returning the JWT credential to the browser's JavaScript callback handler.
<script>
window.onload = function () {
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: 'YOUR_CALLBACK_HANDLER'
});
google.accounts.id.prompt();
}
</script>
To configure the One Tap prompt in JavaScript, you first need to call the
initialize() method. Then, call the prompt() method to display the prompt
UI.
Use the optional context field to change the text used in the prompt title.
For example, context: 'signup' changes "Sign in to" to "Sign up to".
By default, the One Tap prompt closes automatically if the user clicks
outside of the prompt. You can disable this behavior if you set the
cancel_on_tap_outside property to false.
For the full list of data options, see idConfiguration reference.
Prompt status
Use a JavaScript callback function to listen for prompt UI status notifications.
Notifications are sent for the following moments:
Display moment: This occurs after the
prompt()method is called. The notification contains a boolean value to indicate whether the UI is displayed or not.Skipped moment: This occurs when the One Tap prompt is closed by an auto cancel, a manual cancel, or when Google fails to issue a credential, such as when the selected session is signed out of Google.
In this case, we recommend that you continue on to the next identity providers, if there are any.
Dismissed moment: This occurs when Google successfully retrieves a credential, or a user wants to stop the credential retrieval flow. For example, when the user begins to input their username and password into the login dialog, you can call the
google.accounts.id.cancel()method to close the One Tap prompt and trigger a dismissed moment.
HTML
Use the data-moment_callback attribute to specify a JavaScript callback
function. A callback handler is required to receive notifications.
<html>
<head>
<script>
function continueWithNextIdp(notification) {
if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
// try Next provider if One Tap is not displayed or skipped
}
}
</script>
</head>
<body>
...
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-login_uri="https://your.domain/your_login_endpoint"
data-moment_callback="continueWithNextIdp"
</div>
...
</body>
</html>
To facilitate your users to sign in or sign up, you can communicate with multiple identity providers to find available credentials. You might want to know our prompt UI status so that you can call the next identity provider.
JavaScript
Pass your callback handler as a parameter to google.accounts.id.prompt,
here an arrow function is used to handle notification updates.
<script>
window.onload = function () {
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: 'YOUR_CALLBACK_HANDLER'
});
google.accounts.id.prompt((notification) => {
if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
// try next provider if OneTap is not displayed or skipped
}
});
}
</script>
Button and prompt
The Sign in with Google button and One Tap prompt may be displayed together on a single page.
HTML
Display both the Sign in with Google button and One Tap prompt by including
both the g_id_onload and g_id_signin elements.
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-context="signin"
data-ux_mode="redirect"
data-login_uri="https://your.domain/your_login_endpoint"
data-itp_support="true">
</div>
<div class="g_id_signin"
data-type="standard"
data-shape="rectangular"
data-theme="outline"
data-text="signin_with"
data-size="large"
data-logo_alignment="left">
</div>
JavaScript
Display the Sign in with Google button and One Tap prompt by calling
both the renderButton() and prompt() functions at the same time.
<script>
window.onload = function () {
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: 'YOUR_CALLBACK_HANDLER'
});
const parent = document.getElementById('google_btn');
google.accounts.id.renderButton(parent, {theme: "filled_blue"});
google.accounts.id.prompt();
}
</script>
Don't cover One Tap
This section only applies when FedCM is disabled, when FedCM is enabled the browser displays user prompts on top of page content.
To make sure end users see all the information displayed, Google One Tap must not be covered by any other content. Otherwise, pop-up windows may be triggered in some cases.
Double check your page layout and elements' z-index properties, to make sure Google One Tap is not covered by any other content at any time. The UX flow change may be triggered even when only a single pixel in the borders is covered.
Credential response
Included in the credential response is a Google signed JWT. The response is returned either to the browser using a JavaScript callback function or to your platform through a redirect to a login endpoint.
JS callback
Use either HTML or JavaScript to configure a callback.
HTML
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-callback="YOUR_CALLBACK_HANDLER"
</div>
JavaScript
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: 'YOUR_CALLBACK_HANDLER'
});
As an example, handleCredentialResponse decodes the JWT and prints some
of the ID token fields to the console.
<script>
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: handleCredentialResponse
});
function handleCredentialResponse(response) {
const responsePayload = decodeJwtResponse(response.credential);
console.log("ID: " + responsePayload.sub);
console.log('Full Name: ' + responsePayload.name);
console.log('Given Name: ' + responsePayload.given_name);
console.log('Family Name: ' + responsePayload.family_name);
console.log("Image URL: " + responsePayload.picture);
console.log("Email: " + responsePayload.email);
}
function decodeJwtResponse(token) {
let base64Url = token.split('.')[1];
let base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
let jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
}).join(''));
return JSON.parse(jsonPayload);
}
</script>
Redirect
To return a credential to your platform's login endpoint add the URL to the Authorized redirect URI settings of your OAuth 2.0 web client.
Use either HTML or JavaScript to configure a redirect URI.
HTML
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-ux_mode="redirect"
data-login-uri="YOUR_LOGIN_URI"
</div>
JavaScript
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
ux_mode: 'redirect',
login_uri: 'YOUR_LOGIN_URI'
});