Discontinuing authorization support for the Google Sign-In JavaScript Platform Library

[anthonnyc2]

I got this message on the JS console.

According to https://developers.googleblog.com/2022/03/gis-jsweb-authz-migration.html are you planning to do this migration in the near future?

[craigdrabiktxmq]

This is now a blocker for new applications. The component throws an error if you attempt to initialize it for a new application as of 5/27/22

[onyet]

i got this message:
"You have created a new client application that uses libraries for user authentication or authorization that will soon be deprecated. New clients must use the new libraries instead; existing clients must also migrate before these libraries are deprecated. See the Migration Guide for more information."

[americoperez49]

Same error as everyone else. I have an older Angular app that also used the deprecating Google API. I'll see if I can get that working so you can maybe use it as an example for how to migrate.

[mrakowski0]

In the meanwhile, if you have a new client id and want to make it work - adding a plugin_name with whatever value into the init config will allow you to use the deprecated service on Web.

CapacitorGoogleAuth/src/web.ts

Lines 71 to 73 in 4d05537

	const clientConfig: gapi.auth2.ClientConfig = {
	client_id: this.options.clientId,
	};

Example:

const clientConfig: gapi.auth2.ClientConfig = {
        client_id: this.options.clientId,
        plugin_name: 'foobar'
};

I've tested it and it works for me, although obviously you'd need to fork the plugin as it has to be added to options in the plugin web source code.

Source: https://developers.google.com/identity/sign-in/web/reference#gapiauth2clientconfig
(read plugin_name description)

Additional info: abacritt/angularx-social-login#489 (comment)

EDIT: For anyone forking this plugin to make the change, gapi.auth2.ClientConfig does not contain plugin_name so you might need to change the type to make it work.

[reslear]

hi @anthonnyc2 @craigdrabiktxmq @onyet @americoperez49 @mrakowski0
added experimental, please check v3.1.4

[mrakowski0]

I'll take a look over the weekend but my fork works fine so should this 👍 thanks

[kyoz]

I'v tested, 3.1.4 worked. No need custom build anymore. Thanks @reslear.

[kyoz]

Just curious, although we can now surpass the error and use the deprecated service. But when google stop support it. Is mobile apps still work. Although there is SDK on Android and iOS but Ionic App is just a web that wrapped by native App.

How do you think about this? 🤔 @reslear , @mrakowski0

[reslear]

@kyoz this only for WEB PWA, later need migrate to Google Identity Services, iOS and Android remain the same.

[kyoz]

Ok, thanks you very much for the information @reslear 😸

[mrakowski0]

It only does affect Web 👍

[Epameinondas-Theodoropoulos]

Does not work for me. I upgrade to version 3.1.4 with the same settings as I had them. I take an error in console.

.

Can someone help me. The app is almost ready to go to production and playstore and the issue is very serious. Can we do something about that? I tried to find a solution with Google Identity but no chance. Everything is a mess and no specific instructions for Ionic and Angular can be found.

[kyoz]

Hi @Epameinondas-Theodoropoulos , just follow exactly this tutorial and it'll work, just remind that if you want to login on Android, you have to use web token, just as he said on the video.

One more plus that if you just created your token, you have to wait for a few minutes (or even hours). Just it doesn't work right away.

[Epameinondas-Theodoropoulos]

Hi @Epameinondas-Theodoropoulos , just follow exactly this tutorial and it'll work, just remind that if you want to login on Android, you have to use web token, just as he said on the video.

One more plus that if you just created your token, you have to wait for a few minutes (or even hours). Just it doesn't work right away.

Hello @kyoz . I have seen this video and it worked with the previous version . The video is also old. It use a configuration that someone does not need with Capacitor 3. So in the end Is the same structure as the video mentioned only that i upgrade to 3.4.1 for this library to solve the problem with google. If someone has a solution please help. I did this and have the above errors.

[kyoz]

What are your main platform, mobile or web app. If it's a web app, you should call GoogleAuth.initialize() before signIn()

[Epameinondas-Theodoropoulos]

What are your main platform, mobile or web app. If it's a web app, you should call GoogleAuth.initialize() before signIn()

Mobile. But I use the GoogleAuth.initialize() because I test the app in chrome. So I want both of them.
When I open chrome browser and I use the login like a website, the login works. But when I open to inspect and open for example with a device "Galaxy Note 3" as you can see in the pictures I have these errors. I created the client's id in google console 2 days ago. I added the web client for android as the video mentioned. I have user ng build, and ionic cap sync.n

I also have added the google-services.json in the android folder

[kyoz]

As far as I know, on mobile device, GoogleAuth.initialize() is unnecessary. If you want it to work both for dev & prod your should have something like this.

    import { Capacitor } from '@capacitor/core';

    if (!Capacitor.isNativePlatform()) {
      GoogleAuth.initialize();
    }

    // Then call login and logout normally

[Epameinondas-Theodoropoulos]

As far as I know, on mobile device, GoogleAuth.initialize() is unnecessary. If you want it to work both for dev & prod your should have something like this.

    import { Capacitor } from '@capacitor/core';

    if (!Capacitor.isNativePlatform()) {
      GoogleAuth.initialize();
    }

    // Then call login and logout normally

Yes but this is not the issue here. The issue is that the login do not work anymore with the android or ios :)

[kyoz]

That's odd, i'v tested on all most all android and iOS version and it's all work. Your issue is definitely due to missing st in configurations.

• For Android, although for most plugin the setup is MainActivity.java is not necessary, but for this plugin, if it doesn't work, you have to add these code your self.

import android.os.Bundle;
import com.getcapacitor.BridgeActivity;
import com.codetrixstudio.capacitor.GoogleAuth.GoogleAuth;  <====

public class MainActivity extends BridgeActivity {

  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    registerPlugin(GoogleAuth.class);   <====
  }
}

• For iOS, it's even more easier, just copy the GoogleService-Info.plist and place it in the root folder like so and it'll work.

[Epameinondas-Theodoropoulos]

import { Capacitor } from '@capacitor/core';

I have done this too. It is weird that it works for the web and not for the android and ios. Can we understand something from the console.log errors ? Because I am trying to find something in the web with the errors and I cannot find anything

[kyoz]

What is your scopes, have you place this in your index.html

<meta name="google-signin-client_id" content="TOKEN" />
<meta name="google-signin-scope" content="profile email" />

[Epameinondas-Theodoropoulos]

Yes I have. I also used the realease.keystore that i generated from android studio ( not the default debug.keystore)

[Epameinondas-Theodoropoulos]

Apaparently there is an error between the debug.keytore and the release.keystore. When I add the debug.keystore in the google console (OAuth 2.0 Client IDs - Android Client) and I build the grandle with this in android studio, everything works. But when I add the release.keystore in the google console , it only works for the web and not for android or ios. What is going on? This is very weird.

[gsavvidis96]

For the web version, are you planning to migrate to google identity before the deprecation date?

[reslear]

PR welcome

[axi]

Looks like someone could use that documentation
https://developers.google.com/identity/oauth2/web/guides/migration-to-gis#server-side-web-apps

[gamezfreak]

Looks like this was closed with only a workaround and hasn't actually switched away from the old library and updated the implementation to use the new GIS client.

This is also tracked in the newly opened issue #231

Is this going to be addressed in the next few weeks? If not, I need to start looking for alternative libraries or introduce a hard split for iOS vs web builds of my app and add my own GIS client.

[reslear]

@gamezfreak PR welcome :)

[pferreirafabricio]

hi @anthonnyc2 @craigdrabiktxmq @onyet @americoperez49 @mrakowski0 added experimental, please check v3.1.4

For anyone having this error on the console error: "popup_closed_by_user, this fixes the problem. I was using the 3.1.0 version, change it to 3.1.4 them it worked.

[reslear]

I found very good solutions in libraries for frameworks:

• react: https://github.com/MomenSherif/react-oauth
• vue: https://github.com/yobaji/vue3-google-login/
• angular: https://github.com/abacritt/angularx-social-login

should we abandon web implementation altogether and make adapters?
any ideas?

[sajjadalis]

should we abandon web implementation altogether and make adapters? any ideas?

Yeah. Web implentation can be done with other libraries. It's just an extra feature in this plugin.

[OnlinePage]

I found very good solutions in libraries for frameworks:

• react: https://github.com/MomenSherif/react-oauth
• vue: https://github.com/yobaji/vue3-google-login/
• angular: https://github.com/abacritt/angularx-social-login

should we abandon web implementation altogether and make adapters? any ideas?

Yes , separating the web implementation would be much better, native and web will be handled differently . And yeah react: https://github.com/MomenSherif/react-oauth is really good library with google recent identity one tap login. So extending current with above libraries will be much better 👍👍

[reslear]

I have a plan to do a complete removal of the web version using the

https://capacitorjs.com/docs/plugins/web#unimplemented

supporting only native platforms at the moment.

and to support the web version write use cases with ready libraries for frameworks or js .

Vue3 example:

<script setup>
// TODO: await import()
import { googleAuthCodeLogin } from "vue3-google-login"
import { GoogleAuth } from '@codetrix-studio/capacitor-google-auth'
import { Capacitor } from '@capacitor/core'

const code = ref('')

onMounted(() => {
  if (Capacitor.isNativePlatform()) {
    GoogleAuth.initialize({
      clientId: ''
    })
  }
})

async function login() {

  // iOS, android
  if (Capacitor.isNativePlatform()) {
    const response = await GoogleAuth.signIn()
    code.value = response.serverAuthCode
    return
  }
  
  // web 
  const response = await googleAuthCodeLogin({
    clientId: ''
  })
  code.value = response.code
}
</script>

<template>
  <button @click="login">Login Using Google</button>
</template>

Please respond emoji.
Feel free to add your own examples for other frameworks as well.

[iplanwebsites]

The unimplemented approach fixes the main issue, but it doesn't necessarily makes it easier to seamlessly test and debug auth (which often happens in browser). It'd be nice to be able to configure the web version using an option param. I feel the latest GSI lib is pretty good on its own, but we could even toggle between different implementations for web. ex:

authOptions = { 
  web: 'gsi' // can be 'legacy', vue3, gsi, etc... default to 'unimplemented'
}