Warning: This data is provided under the Google User Data Policy. Please review and comply with the policy. Failure to do so might result in project or account suspension.

Display the Sign In With Google button

Add a Sign In With Google button to your site to enable users to sign-up or sign-in to your web app. Use either HTML or JavaScript to render the button and attributes to customize the button shape, size, text, and theme.

Alt text

After a user selects a Google Account and provides their consent, Google shares the user profile using a JSON Web Token (JWT). For an overview of the steps involved during sign-in and user experience see How it works. Understand the personalized button reviews the different conditions and states affecting how the button is displayed to users.

Prerequisites

Complete the following before adding the button to your login page:

Button rendering

To display the Sign In With Google button, you may choose either HTML or JavaScript to render the button on your login page:

HTML

Render the sign-in button using HTML, returning the JWT to your platform's login endpoint.

<html>
  <body>
      <script src="https://accounts.google.com/gsi/client" async defer></script>
      <div id="g_id_onload"
         data-client_id="YOUR_GOOGLE_CLIENT_ID"
         data-login_uri="https://your.domain/your_login_endpoint"
         data-auto_prompt="false">
      </div>
      <div class="g_id_signin"
         data-type="standard"
         data-size="large"
         data-theme="outline"
         data-text="sign_in_with"
         data-shape="rectangular"
         data-logo_alignment="left">
      </div>
  </body>
</html>

An element with a g_id_signin class renders as a Sign In With Google button. The button is customized by the parameters provided in the data attributes.

To display a Sign In With Google button and Google One Tap on the same page, remove data-auto_prompt="false". This is recommended to reduce friction and improve sign-in rates.

JavaScript

Render the sign-in button using JavaScript, returning the JWT to the browser's JavaScript callback handler.

<html>
  <body>
      <script src="https://accounts.google.com/gsi/client" async defer></script>
      <script>
        function handleCredentialResponse(response) {
          console.log("Encoded JWT ID token: " + response.credential);
        }
        window.onload = function () {
          google.accounts.id.initialize({
            client_id: "YOUR_GOOGLE_CLIENT_ID",
            callback: handleCredentialResponse
          });
          google.accounts.id.renderButton(
            document.getElementById("buttonDiv"),
            { theme: "outline", size: "large" }  // customization attributes
          );
          google.accounts.id.prompt(); // also display the One Tap dialog
        }
    </script>
    <div id="buttonDiv"></div> 
  </body>
</html>

The element specified as the first parameter to renderButton displays as a Sign In With Google button. In this example buttonDiv is used to render the button on the page. The button is customized using the attributes specified in the second parameter to renderButton.

To minimize user friction google.accounts.id.prompt() is called to display One Tap as a second alternative to using the button to sign-up or sign-in.

The GIS library parses the HTML doc for elements with an ID attribute set to g_id_onload, or class attributes containing g_id_signin. If a matching element is found, the button will also be rendered using HTML, regardless if you've also rendered the button in JavaScript. To avoid displaying the button twice, possibly with conflicting parameters do not include HTML elements matching these names in your HTML pages.

Credential handling

After user consent is given, Google returns a JSON Web Token (JWT) credential known as an ID token to either the user's browser, or directly to a login endpoint hosted by your platform.

Where you choose to receive the JWT depends upon if you render the button using HTML or JavaScript and if popup or redirect UX mode is used.

Using popup UX mode performs the sign-in UX flow in a pop-up window. This is generally a less intrusive experience for users and is the default UX mode.

When rendering the button using:

  • HTML you can set either:

    • data-callback to return the JWT to your callback handler, or
    • data-login_uri for Google to send the JWT directly to your login endpoint using a POST request.

    If both values are set, data-callback takes precedence over data-login_uri. For example, this may be useful when a callback handler is used during debugging.

  • JavaScript you must set callback, popup mode does not support redirects when rending the button in JavaScript. If set, login_uri is ignored.

    See handle the returned credential response. for more on decoding the JWT within your JS callback handler.

Redirect mode

Using redirect UX mode performs the sign-in UX flow using full page redirection of the user's browser, and Google returns the JWT directly to your login endpoint using a POST request. This is generally a more intrusive experience for users, but is considered to be the most secure sign-in method.

When rendering the button using:

  • HTML optionally set data-login_uri to the URI of your login endpoint.
  • JavaScript optionally set login_uri to the URI of your login endpoint.

If you do not provide a value, Google returns the JWT to the URI of the current page.

Your login endpoint URI

Use HTTPS and an absolute URI when setting data-login_uri or login_uri. For example, https://example.com/path.

HTTP is only allowed when using localhost during development: http://localhost/path.

Refer to Use secure JavaScript origins and redirect URIs for a full description of Google's requirements and validation rules.