Use the JavaScript API

Objective: If the default login flow doesn't meet your requirements, you can customize it in several ways. Read the following information for available customization options.

If preferred, you can use only JavaScript code to trigger the One Tap prompt or render the Sign in with Google button.

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. See the following code snippet:

<script>
  window.onload = function () {
    google.accounts.id.initialize({
      client_id: 'YOUR_GOOGLE_CLIENT_ID',
      callback: handleCredentialResponse
    });
    google.accounts.id.prompt();
  }
</script>

To receive prompt UI status notifications, provide a callback function to the prompt() method. See the following code snippet:

<script>
  window.onload = function () {
    google.accounts.id.initialize({
      client_id: 'YOUR_GOOGLE_CLIENT_ID',
      callback: handleCredentialResponse
    });
    google.accounts.id.prompt((notification) => {
        if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
            // try next provider if OneTap is not displayed or skipped
        }
    });
  }
</script>

The example code below shows how to render both One Tap and the Sign In with Google button in JavaScript.

<script>
  window.onload = function () {
    google.accounts.id.initialize({
      client_id: 'YOUR_GOOGLE_CLIENT_ID',
      callback: handleCredentialResponse
    });
    const parent = document.getElementById('google_btn');
    google.accounts.id.renderButton(parent, {theme: "filled_blue"});
    google.accounts.id.prompt();
  }
</script>