<pwa-auth> – Google is replacing its "Sign-in JavaScript Platform Library" with the new "Identity Services for Web" in March 2023

[CetinSert]

What happened?

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

We are discontinuing the Google Sign-In JavaScript Platform Library for web. The library will be unavailable for download after the March 31, 2023 deprecation date. Instead, use the new Google Identity Services for Web.
By default, newly created Client IDs are now blocked from using the older Platform Library, existing Client IDs are unaffected. New Client IDs created before July 29th, 2022 can set plugin_name to enable use of the Google Platform Library.

This will introduce a lot of breakage if left unaddressed for long.

---

(List of issues related to the now deprecated Google library.)

How do we reproduce the behavior?

See: (The link below has a reduced response patch against the now deprecated Google library.)

• <pwa-auth> – Sign in with Google fails when Block third-party cookies or InPrivate browsing is turned on #3286
  (has steps and workaround)

---

What do you expect to happen?

• Add support for Google Identity Services for Web to resolve the issues listed above

What environment were you using?

OS: any
Browser: any
Browser Version: any

Additional context

#2950

[ghost]

This issue has been marked as "needs attention 👋" since it has not been triaged for 7 days. Please triage the issue .

[CetinSert]

Can somebody please look into this?

[CetinSert]

@amrutha95

[amrutha95]

Hey @CetinSert, sorry to keep you waiting. We are unable to prioritize this immediately so you might have to wait a few sprints for this to happen. But in the mean time, if you would like to contribute and fix this yourself, that would be great! Please let us know.

[CetinSert]

@amrutha95 - Thanks, I will wait. This is not a critical issue for me because the app I am building got grandfathered in and I have also implemented a workaround for InPrivate browsing.

New users of <pwa-auth> will likely be unable to use it with Google at all though! I hope you can get this done for all users.

When you say sprints, when/how often do they usually happen?

[rwalbrugh]

Hello @amrutha95,
I tried implementing this using a new google key created last week and as expected it's not working. Getting the popup_closed_by_user error. Am keen to hear when this will be fixed. thank you!

[CetinSert]

Any progress on this!?

[CetinSert]

Any updates?

[HardRockPorn]

Any changes??

[amrutha95]

Hi, our team had been swamped with other priorities and then many of us had gone on vacation. Will bring this up and come up with a resolution right away. So sorry to keep you all waiting.

[amrutha95]

We would appreciate any of your help in migrating the Google sign in library to the new one. @CetinSert would you be willing to take this up?

[HardRockPorn]

We would appreciate any of your help in migrating the Google sign in library to the new one. @CetinSert would you be willing to take this up?

1. We started to use this react component to get credetional token
   https://github.com/MomenSherif/react-oauth

2. In new auth way you can't get id_token (JWT) directly on client-side. You should create add additional API controller on your server and exchange credential token on id_token. (this hook is recommended by react-oauth component)

Example:

const { OAuth2Client } = require('google-auth-library');

const oAuth2Client = new OAuth2Client(
      config.oAuth.googleAppId,
      config.oAuth.googleAppSecret,
      'postmessage',
);

const { tokens } = await oAuth2Client.getToken(body.code); // exchange code for tokens
const ticket = await oAuth2Client.verifyIdToken({ idToken: tokens.id_token, audience: config.oAuth.googleAppId });
const payload = ticket.getPayload();
			
return {
  success: true,
  result: {token: tokens.id_token, email: payload.email}
}

Hope this solution will help somebody. As low-pain solution for pwaBuilder at least you can make new button that returns credential token and update docs

[CetinSert]

@amrutha95 – I am busy with other projects for the near future. I will see if I can garner interest from others, though I cannot promise anything. I hope your team finds/makes time to fix this as Google is a relatively large IdP and Sign in with Google support is crucial for many projects.

[amrutha95]

I started work on this in this branch: https://github.com/pwa-builder/PWABuilder/tree/amrutha/newgoogleprovider
I got one-tap sign in to work, but the sign in button rendering according to this doc is still a work in progress. If anyone can pull this branch and get the button working it would be great! Otherwise I will get to it later next week.

[HardRockPorn]

I started work on this in this branch: https://github.com/pwa-builder/PWABuilder/tree/amrutha/newgoogleprovider
I got one-tap sign in to work, but the sign in button rendering according to this doc is still a work in progress. If anyone can pull this branch and get the button working it would be great! Otherwise I will get to it later next week.

You try to decode credential as id_token. It's not the same.

PWABuilder/components/pwa-auth/src/google-provider.ts

Line 56 in ee0774c

const webToken = this.decodeJwt(response.credential) as any;

Here specification for credential. It represents only password and id:
https://developers.google.com/identity/gsi/web/reference/js-reference#type-Credential

Solution:
Why not to allow your component to return credential. Developers can get id_token via their back-end as I described above.

That I mean:

handleCredentialResponse(response) {
    this.resolve?.({
      credential: response.credential,
      provider: 'Google',
      error: null,
    });
  } 

[HardRockPorn]

@amrutha95 – I am busy with other projects for the near future. I will see if I can garner interest from others, though I cannot promise anything. I hope your team finds/makes time to fix this as Google is a relatively large IdP and Sign in with Google support is crucial for many projects.

Google made problems :)

Best that guys can do: include new library and give us credential response. And implement one-tap solution for serverless projects (last one is done already as I see).

[amrutha95]

You try to decode credential as id_token. It's not the same.
I'm confused as the docs here say the response.credential is the id token.
I am returning response.credential as part of the SignInResult object here

I decoded the id token to get other info like name, email and image URL.

[HardRockPorn]

You try to decode credential as id_token. It's not the same. I'm confused as the docs here say the response.credential is the id token. I am returning response.credential as part of the SignInResult object here

I decoded the id token to get other info like name, email and image URL.

Hm, your are right. Seems in our project we had some migration troubles conditioned by used component. Sorry for confusing

[amrutha95]

We request any of you to please contribute to this branch on top of the work that has been done already (The button has to be enabled to sign in via a new/different account but the one tap experience works): https://github.com/pwa-builder/PWABuilder/tree/amrutha/newgoogleprovider.

[CetinSert]

• fixed Safari 18 regression in my PoC for existing Client IDs
  <pwa-auth> – Sign in with Google fails when Block third-party cookies or InPrivate browsing is turned on #3286 (comment)

/google-provider-e3c8088c.js:

--- original
+++ modified
@@ -74,2 +74,2 @@
-      try       { return this.getSignInResultFromUser(await I); }
-      catch (q) { return                                    x ; }
+      try       { return this.getSignInResultFromUser(e); }
+      catch (q) { return                              x ; }