Handling Popup Close event in googleTokenLogin() method

[sharansarthak]

When using the googleTokenLogin() method to initiate the Google login process, there's currently no way to detect if the user closes the popup window. This makes it hard to handle this user action in our application.

Steps to Reproduce:

Call the googleTokenLogin() method to open the Google login popup. Without logging in, close the popup window.

Expected Result:

When the popup is closed by the user, an error should be thrown, or a specific response should be returned, indicating that the popup was closed. This would allow us to handle this event in our application.

Actual Result:

Currently, no error or response is returned when the popup is closed, which leaves our application in an uncertain state.

[devbaji]

@sharansarthak At the time of this package creation around may 2022, google haven't added error callbacks back then. As you know this is just a wrapper package using google identity services, so that time I wasn't getting any responses from google on popup close and other error events. But I can see that google recently added error callbacks feature https://stackoverflow.com/questions/72387245/google-identity-service-oauth2-detect-if-consent-pop-up-is-closed#answer-73485415 Let me look into this and I will add this feature shortly

[devbaji]

@sharansarthak I have added a patch version 2.0.16, download the latest version and use the following code

<script setup>
const callback = (response) => {
  // This callback will be triggered when the user selects or login to
  // his Google account from the popup
  console.log(response);
};
const onError = (error) => {
  // This callback will be triggered when user closes the login popup
  error.type&&console.log(error);
};
</script>

<template>
  <GoogleLogin :callback="callback" :error="onError" popup-type="TOKEN">
    <button>Login</button>
  </GoogleLogin>
</template>

OR

<script setup>
import { googleTokenLogin } from "vue3-google-login";
const login = () => {
  googleTokenLogin()
    .then((response) => {
      console.log("Handle the response", response);
    })
    .catch((error) => {
      console.log("Error", error);
    });
};
</script>

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

[sharansarthak]

Hey @yobaji, thanks for adding the fix. I have tested the updated version, and I am happy to report that it is functioning as expected. Your quick turnaround is much appreciated and it has significantly improved my experience with Vue3 Google Login plugin.

[LeoTheLegion]

Hi @sharansarthak, this issue may have returned in version 2.0.26 .

The error callback is not firing with following the code:

<template>
    <GoogleLogin :callback="callback" :error="error" />
</template>

<script setup lang="ts">
const error = (error: any) => {
  // This callback will be triggered when the user cancels the login
  console.error("Handle the error", error)
}

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

I'm using Vue version v3.2.13 with Typescript v4.5.5

[devbaji]

@LeoTheLegion As you can see @sharansarthak is using custom button and popup-type is set to token. Last time I checked google triggers error callbacks on window close for toke/code flow only. Here you are using the default way which actually renders a button by google, this gives a credential on success, unfortunately following this method google doesn't provide a way to catch errors. So for now, if you really want to catch the error, use popup-type as code/token and use a custom button like this