Login with google is broken

ronniebarker commented 11 months ago

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

ronniebarker commented 11 months ago

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

exptom commented 11 months ago

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

giacomodefra commented 11 months ago

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.

aluuu commented 11 months ago

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

aluuu commented 11 months ago

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

aluuu commented 11 months ago

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.

Nas3nmann commented 11 months ago

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>

gedkul commented 11 months ago

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>

AntoninKadrmas commented 11 months ago

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

gedkul commented 11 months ago

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.

gedkul commented 11 months ago

Found that in Google documentation is the same problem.

And when width is removed button is showing:

AntoninKadrmas commented 11 months ago

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.

hoi4 commented 11 months ago

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

giacomodefra commented 11 months ago

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>

formyjobonly commented 11 months ago

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?

jpike88 commented 11 months ago

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.

aluuu commented 11 months ago

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.

chiragdp commented 9 months ago

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?

abacritt / angularx-social-login

Login with google is broken #720