devbaji / vue3-google-login

Add Sign In With Google feature to your Vue 3 application
https://github.com/devbaji/vue3-google-login/
MIT License
208 stars 30 forks source link

Handling Popup Close event in googleAuthCodeLogin() method #35

Closed mateusas96 closed 1 year ago

mateusas96 commented 1 year ago

Same story as here

I guess this is unfinished package, it is really hard to make it work properly

devbaji commented 1 year ago

@mateusas96 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

mateusas96 commented 1 year ago

Would be amazing, thanks!

devbaji commented 1 year ago

@mateusas96 Download the latest version and use any of the following methods to catch the popup closing error

<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
  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>
mateusas96 commented 1 year ago

Thank you very much!