Google Login Button(in iframe) Width Issue

[gilbert-ya]

I’m implementing Google login using <GoogleLogin ... />.
The rendered iframe correctly takes the full width,
but the login button inside remains narrow.

How can I make the button match the iframe’s width?

[sukendra-innostax]

Hi , did you found any solution for this ???

[devAmaresh]

@gilbert-ya you can try wrap the <GoogleLogin ..../> in <center ..> tag . though it will not solve the width issue but will align the button in the center giving a good ui experience

[CiaranReen]

I'm also experiencing this. What's especially weird is locally it looks fine (takes up full width) but when pushed to prod the button gets rendered in an iframe which makes it look like the above image.

Is there any reason for this?

[adykarta]

same here, any updates?

[dontic]

I had the same problem as @CiaranReen , I'm using Astro + React and in dev it looks fine, occupying the full width of the parent container, but when I deployed it (via github pages) it would shrink horizontally and align to the left.

@devAmaresh solution worked for me, just wrap the <GoogleLogin ... /> component in a centered flex.

I'm using tailwind css, si I just wrapped the GoogleLogin in a div and added the classes:

<GoogleOAuthProvider clientId="MY_CLIENT_ID">
  <div className="flex justify-center w-full">
    <GoogleLogin
      onSuccess={handleGoogleLogin}
      onError={handleGoogleLoginError}
      theme="outline"
      type="standard"
      shape="circle"
      text="signin_with"
      size="large"
    />
  </div>
</GoogleOAuthProvider>

[Divyessh]

The iframe url only takes width as a number in pixels ranging from 240px to 400px. Check Here
To replicate the behaviour of (x%) width, we can use something like this

For full (100%)

<GoogleLogin
          onSuccess={onGoogleSuccess}
          onError={onGoogleError}
          useOneTap={false}
          theme="outline"
          size="large"
          width={window.innerWidth > 400 ? 400 : window.innerWidth - 20}
          text="continue_with"
          shape="rectangular"
          logo_alignment="left"
        />

For partial (x%)

const x = 90/100 // (90%)

<GoogleLogin
          onSuccess={onGoogleSuccess}
          onError={onGoogleError}
          useOneTap={false}
          theme="outline"
          size="large"
          width={(x*window.innerWidth) > 400 ? 400 : (x*window.innerWidth)-20}
          text="continue_with"
          shape="rectangular"
          logo_alignment="left"
        />

[Rc85]

I'm also experiencing this. What's especially weird is locally it looks fine (takes up full width) but when pushed to prod the button gets rendered in an iframe which makes it look like the above image.

Is there any reason for this?

I'm having this exact issue. The problem is that, there is a flicker of the full width button, then it immediately shrinks its width. Only happening in production build of my NextJs app.

Did some testing. In chrome incognito, no accounts logged in:

In opera, no google accounts logged in:

And in regular chrome where I have multiple google accounts logged in:

[mhwinkler]

When the Google Sign In button renders as an iframe, it snaps to the smaller width as you're describing.

This library already exposes a pixel width property, which can be used to size the button explicitly, which passes through to Google's data-width property.

Here's an option for getting your button to full width (up to Google's supported maximum). Measure the size of the button's container using the useMeasure hook from @uidotdev/usehooks library:

import { useMeasure } from '@uidotdev/usehooks'

function MyLoginPage() {
  ...
  const [buttonContainerRef, { width: buttonWidth }] = useMeasure()

  <div ref={buttonContainerRef}>
    <GoogleLogin width={buttonWidth} ... />
  </div>
}