Display Google One Tap

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.

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.

For the full list of data options, see idConfiguration reference.

Prompt status

To receive prompt UI status notifications, provide a callback function to the prompt() method.

HTML

A JavaScript callback handler is required to receive notifications.

JavaScript

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.