Login with google is broken

Question

Login with google is broken

Opened this issue a year ago · 18 comments

I think there must have been a change to the google API:

Answer 1 · 2023-07-25T11:29:15.000Z

Seems to be only when we have width='nnn' in the asl-google-signin-button - but why is that breaking it and why now?

Answer 2 · 2023-07-25T15:53:59.000Z

I'm getting the same error when I specify the width attribute. I can't see a change in google's docs.

Answer 3 · 2023-07-26T06:50:56.000Z

I have the same problem, I haven't made any recent changes and my applications worked perfectly with the login, now I have this error in the console.

Answer 4 · 2023-07-26T08:20:56.000Z

It seems like google's client library stopped accepting numbers-as-strings if provided as an input to the renderButton function.

Example to reproduce:

<html>
<head>
  <meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">
</head>
<body>
  <div id="my-signin2"></div>
  <script src="https://accounts.google.com/gsi/client"></script>
  <script>
    google.accounts.id.initialize();
    google.accounts.id.renderButton(document.getElementById('my-signin2'), {
    'width': 200,
    });
  </script>
</body>
</html>

If width passed as a number - all works button is rendered, once quoted - it fails with the following (similar to the above) stacktrace:

Uncaught Error: 
    $e https://accounts.google.com/gsi/client:128
    qp https://accounts.google.com/gsi/client:226
    $p https://accounts.google.com/gsi/client:245
    Mo https://accounts.google.com/gsi/client:243
    No https://accounts.google.com/gsi/client:215
    <anonymous> http://localhost:8000/google.html:10

Answer 5 · 2023-07-26T08:26:05.000Z

Google's API documentation says that width is expected to be a string.

Answer 6 · 2023-07-26T11:32:25.000Z

I've posted a message with link to this issue via feedback form on the Google's documentation page (see button 'Send feedback').

I'd suggest to people who face the same issue - post the reports there because it's either documentation should be fixed or the library's implementation should conform with the documentation. Authors of angularx-social-login could potentially fix the issue at hand, but you never know when Google would decide to change the library implementation again.

Answer 7 · 2023-07-26T13:58:30.000Z

FYI: For now we managed to workaround this issue by providing the width value including px suffix.

<asl-google-signin-button 
    type="standard"
    logo_alignment="center"
    width="240px"
    size="large">
</asl-google-signin-button>

Answer 8 · 2023-07-26T17:50:41.000Z

Strange that in dev pc login button is showing on all browsers, but in different pc or mobile google login button is missing.
And showing:

Edit:
Found that button request has 403 response code

Edit2:
Removed width attribute and working now:
<asl-google-signin-button title='Google' type='standard' size='large' theme="outline" shape="square" locale="en_US" text="signin"></asl-google-signin-button>

Answer 9 · 2023-07-27T09:06:16.000Z

Hi I had same problem and I fixed it by changing property width="300" of asl-google-signin-button component to width="300px".

Answer 10 · 2023-07-28T05:10:45.000Z

Hi I had same problem and I fixed it by changing property width="300" of asl-google-signin-button component to width="300px".

This doesn't fully fix problem. Its shows button but doesn't gives 300px width.

Answer 11 · 2023-07-28T05:19:33.000Z

Found that in Google documentation is the same problem.

And when width is removed button is showing:

Answer 12 · 2023-07-28T06:54:19.000Z

Hi I found the same page and with px suffix it work for me as I expected.

And if you add in your code style="width:300px" (or whatever else length you are looking for) on asl-google-signin-button component it will have the correct length from the begining when the button is loaded. Else it will load shrink and then it will dynamically resize on specified length.

Answer 13 · 2023-07-28T07:10:23.000Z

I have been using width="400" before. Using width="400px" causes the library to error. A temporary fix is to use width="399px"

Answer 14 · 2023-07-28T08:43:24.000Z

I fixed using the proprety with [width]="400" (not width="400")

<asl-google-signin-button type="standard" size="large" [width]="400" class="mx-5"></asl-google-signin-button>

Answer 15 · 2023-07-31T06:33:07.000Z

I've posted a message with link to this issue via feedback form on the Google's documentation page (see button 'Send feedback').

I'd suggest to people who face the same issue - post the reports there because it's either documentation should be fixed or the library's implementation should conform with the documentation. Authors of angularx-social-login could potentially fix the issue at hand, but you never know when Google would decide to change the library implementation again.

@aluuu any updates?

Answer 16 · 2023-08-02T01:53:23.000Z

classic google junk.

adding 'px' on the end of my width amount worked but I had css animations showing the div it was in, now it causes some kind of reflow at the end, and the animation 'clunks' when finished into the final look.

Answer 17 · 2023-08-04T07:18:31.000Z

I've posted a message with link to this issue via feedback form on the Google's documentation page (see button 'Send feedback').
I'd suggest to people who face the same issue - post the reports there because it's either documentation should be fixed or the library's implementation should conform with the documentation. Authors of angularx-social-login could potentially fix the issue at hand, but you never know when Google would decide to change the library implementation again.

@aluuu any updates?

Nope, no one replied yet.

Answer 18 · 2023-09-13T11:27:10.000Z

any update on this issue? and also i want to make it adapt dynamic size can some one guide me how should i implement it?