devbaji / vue3-google-login

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

Callback is not receiving information.... #52

Closed bostonareahuman closed 6 months ago

bostonareahuman commented 8 months ago

Hey there... I get the popup and am able to select the user I want to login as but the console shows no "Handle the response" coming back to the browser..

Vue3JS on http://localhost:10100/ I have the approved callback as http://localhost:10100 as well.

<script setup>
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("Handle the response", response.access_token)
  }
</script>

In the Template

  <div class="carorbitalhead">CARORBITAL</div>
    <div><input class="inputmain"  ref="thename" type="text" placeholder="E-mail" /></div>
    <div><input class="inputmain" ref="password" type="password" placeholder="password" /></div>
    <div class="loginbut" @click.prevent="dologin()">SIGN IN</div>
    <div  class="loginbut" @click.prevent="$emit('togglereg','4')">Need an Account?</div>
    <div>-- OR --</div>
    <div>SOCIAL 2 LOGINS</div>
    <div class="loginerror" v-if="test">{{ rtnmsg }}</div>
    <GoogleLogin :callback="callback" popup-type="TOKEN"/>

</template>
devbaji commented 6 months ago

@bostonareahuman Sorry for the late reply, the default login iframe button generated by google only provides a credential instead of code, in order to get code you must set popup-type="TOKEN" and a custom button on which acts as login button. You might have seen the following warning image

You need to use it like this

<script setup lang="ts">
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("Handle the response", response)
}
</script>

<template>
  <GoogleLogin :callback="callback" popup-type="TOKEN">
    <button class="my-custom-button">Login</button>
  </GoogleLogin>
</template>