I'm trying to develop a SPA with multiple external login providers. So far I've implemented Microsoft (using MSAL). Now I want to do the same with Google. Sadly I'm unable to it as easy as with Microsoft's library.

In Microsoft I do something like this (simplified):

const client = new PublicClientApplication({auth: {clientId: '123'}})
const tokenResponse = await client.getTokenSilent({scopes: ['openid']})

Now in Google I noticed there is no async or promise based APIs. In general the API is very very limited. I tried:

• OneTap which is their latest library for logging users in. The other one is deprecated. Onetap is this annoying popup when you visit most websites: "Do you want to login with your Google account?". You can cancel this popup and it won't reappear. This is good when visiting trashy sites. But not in enterprise-ish apps.
• Next I tried Sign In Button which is annoying because I work with Vue (virtual DOM) and I have to manually trigger the renderButton function because the Login component is not visible all the time and not visible immediately.

  • Next I cannot "beautify" the button. Looks really ugly:

    Also its not responsive (why?!)

In any of the above cases I need to add a callback to Google client configuration. This is very annoying because everywhere I use promises/async/await and only here I cannot use it (have to create workarounds). Sadly the callback is also only triggered when a successful response is triggered. If the user cancels the popup my load spinner (blocking the login page) can never be disabled because I have no callback on that.

Microsoft provides their login library (MSAL) via NPM (free and open source available) but Google does not seem to do this to any degree. Or am I missing something.

Soo.... Sorry for my rant. I never really worked with Google APIs/libraries and I'm kinda happy that I never had to yet. I'm astonished that Googles library is so bad in "modern developer experience".

Is there an easier way to do this?