'Google's sign in button resizes after loading

I am following https://developers.google.com/identity/gsi/web/guides/display-button#javascript to add Google sign-in to my ReactJS app.

I added

 <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: "filled_blue", size: "large", shape: "pill" } // customization attributes
        );
        google.accounts.id.prompt(); // also display the One Tap dialog
      };
</script>

in index.html, and in my component, I have a <div id="buttonDiv"></div>.

However, this is what happens when I reload the page:

The initial button loaded is correct, but somehow is resized. I paused the JS execution in the debugger and found out that the initial button was purely divs, but after resizing, it used an iframe instead.

Solution 1:^[1]

make id of buttonDiv in CSS full with instead of width auto that's initial from browser and it will fix i think.

#buttonDiv{width : 100% !important;}

Solution 2:^[2]

After a good hour or two of searching, I realized that the Google Identity Kit is just lacking in customization features for the sign in button.

Instead, I opted to use the old OAuth2 API, which allows you to use your own signin button HTML.

Note: This will be deprecated as of 30 April 2022, but will be usable up until 31 March 2023 for existing apps.

Hopefully by that time Google will have updated their Identity Kit version with more customization options.

https://developers.google.com/identity/sign-in/web/build-button

Solution 3:^[3]

You need to use your own backend server to create a fully customisable login button (Your server is used to access auth APIs instead of Google Server). As an example you can check the flow and source code for this implementation https://supabase.com/docs/guides/auth/auth-google

While I'm waiting for backend update, to avoid the deprecation I used GSI... In vuejs I created a component with template:

    <div
      id="g_id_onload"
      :data-client_id="GOOGLE_OAUTH_CLIENT_ID"
      data-context="use"
      data-ux_mode="popup"
      data-callback="handleGoogleIdentityResponse"
      data-nonce=""
      data-auto_prompt="false"
    />

    <div
      class="g_id_signin"
      data-type="standard"
      data-shape="rectangular"
      data-theme="outline"
      data-text="continue_with"
      data-size="large"
      data-logo_alignment="left"
      data-width="260"
    />

And a hook:

function created() {
    const googleSignInAPI = document.createElement('script')
    googleSignInAPI.setAttribute(
      'src',
      'https://accounts.google.com/gsi/client'
    )
    document.head.appendChild(googleSignInAPI)

    window.handleGoogleIdentityResponse = function(props) {
      const { credential } = props
      // do anything you want with the token
    }
  }

Solution 4:^[4]

I finally discovered the issue. The problem happens if you set the width as a float instead of an integer. For example

google.accounts.id.renderButton(
   document.getElementById("buttonDiv"),
   { type: "standard", theme: "filled_blue", size: "large", shape: "rectangular", width: "350.043", logo_alignment: "left" } // customization attributes
);

will cause the button's width to resize.

However,

google.accounts.id.renderButton(
       document.getElementById("buttonDiv"),
       { type: "standard", theme: "filled_blue", size: "large", shape: "rectangular", width: "350", logo_alignment: "left" } // customization attributes
    );

will not.

Solution 5:^[5]

Same problem to me.Google's code inserts iframe and I can't change its style.So I have to choose the old way even though it will be deprecated one year later.FYI

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	mahdi ashori
Solution 2	Swen
Solution 3	Crow
Solution 4	savram
Solution 5	Luckycomes Chris

'Google's sign in button resizes after loading

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]