Unable to use Token PopupType.

[michaelcoll]

I didn't manage to use the token popup type.

Here is the code that I have on my vue page :

<script setup lang="ts">
import type { CallbackTypes, GoogleLogin } from "vue3-google-login";

const callback: CallbackTypes.TokenResponseCallback = (response) => {
  // This callback will be triggered when the user selects or login to
  // his Google account from the popup
  console.log("Access token", response);
};
</script>

<template>
  <GoogleLogin :callback="callback" popup-type="TOKEN" prompt auto-login />
</template>

And in my main.ts file :

import { createPinia } from "pinia";
import { createApp } from "vue";
import vue3GoogleLogin from "vue3-google-login";

import App from "./app.vue";
import router from "./router";

const pinia = createPinia();
const app = createApp(App);

app
  .use(router)
  .use(vue3GoogleLogin, {
    clientId:
      "<<REMOVED>>",
    popupType: "TOKEN",
  })
  .use(pinia)
  .mount("#root");

But when I connect the popup works fine but the object that I received is of type : CredentialCallback. There is no access_token variable in it.

It seems the default value of the popupType is taking precedence all the time.

And BTW if I use googleTokenLogin(), I got an access token.

I'm using the version 2.0.15

[devbaji]

@michaelcoll As mentioned here, google rendered login button only provides a CredentialResponse, popup-type was actually meant for custom buttons, that means your code will work if you add a button inside your GoogleLogin component as a slot. Since you haven't provided any buttons inside your GoogleLogin component popupType option will be ignored since this will be showing up a google rendered login button

This is mentioned here

If you don't need google rendered button you can re-write the code like this

<script setup lang="ts">
import type { CallbackTypes, GoogleLogin } from "vue3-google-login";

const callback: CallbackTypes.TokenResponseCallback = (response) => {
  // This callback will be triggered when the user selects or login to
  // his Google account from the popup
  console.log("Access token", response);
};
</script>

<template>
  <GoogleLogin :callback="callback" popup-type="TOKEN" prompt auto-login>
    <button>Login</button>
  </GoogleLogin>
</template>

[michaelcoll]

Hi, I've updated my code to use a custom button. But I'm experiencing the same issue.

For now, as a workaround, I've updated my backend code to handle an Id Token instead of an Access Token.

[devbaji]

@michaelcoll Thats strange, maybe you are getting the callback from one-tap promt, just like google rendered login this will only provide CredentialResponse, only the click on the custom button will give you Access Token (button click actually use googleTokenLogin() function under the hoods)

As you can see here, my previous code is providing two response one is the response from one-tap promt and another one from clicking the Login button (Which was kept as slot). I know this is weird but for now the response from one-tap and google rendered button only provide a CredentialResponse. If you are using the combination of these you need to update the backend code to accept both a token and ID token as mentioned here

[michaelcoll]

Yep indeed, I've used one-tap prompt. I didn't check to force the click on the button.

I will not update my backend to handle both type of token.

Maybe have some endpoints that receive idtoken like the register or login endpoint, but others endpoint should use access token because it's what it's used for.

For now, I will keep only the idtoken.

I'm using your lib to simplify my code, not to complicate it :smile:

[devbaji]

In latest version added a console warning if popup-type option is passed without a custom login button as slot

[dev-myatminsoe]

We can get access_token or auth_code. How about ID token? How can I get it?