Google's sign in button resizes after loading

user_15010215 0
Viewed 1082

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:

enter image description here

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.

google-identity google-signin reactjs
5 Answers

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.

user_85092720

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;}
user_114045540

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

user_8499870

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
    }
  }
user_37582640

I was able to resize it to the div's size as below,

document.getElementById("GoogleSignInButton"),
{
  type: "standard",
  theme: "outline",
  size: "large",
  width: document.getElementById("GoogleSignInButton").offsetWidth,
  height: document.getElementById("GoogleSignInButton").offsetHeight,
}

user_117693620
Related