search

wavezync / vue3-google-signin

Google OAuth2 plugin for Vue3 Apps. This uses latest Google Identity Service Library. It also provides set of composables which can be used easily to implement different authentication strategies
https://vue3-google-signin.wavezync.com/
MIT License
161 stars 17 forks source link

Google Signin button not showing with Quasar + Vite #24

Closed Chiyo-no-sake closed 2 years ago

Chiyo-no-sake commented 2 years ago

The google sign-in button is not showing on a page setup with Quasar and Vite. I got the following warnings when including the component in a page:

runtime-core.esm-bundler.js:38 [Vue warn]: inject() can only be used inside setup() or functional components.
warn2 @ runtime-core.esm-bundler.js:38
inject @ runtime-core.esm-bundler.js:1637
setup @ index.es.js:75
callWithErrorHandling @ runtime-core.esm-bundler.js:155
setupStatefulComponent @ runtime-core.esm-bundler.js:7187
setupComponent @ runtime-core.esm-bundler.js:7142
mountComponent @ runtime-core.esm-bundler.js:5491
processComponent @ runtime-core.esm-bundler.js:5466
patch @ runtime-core.esm-bundler.js:5068
mountChildren @ runtime-core.esm-bundler.js:5252
processFragment @ runtime-core.esm-bundler.js:5425
patch @ runtime-core.esm-bundler.js:5061
componentUpdateFn @ runtime-core.esm-bundler.js:5605
run @ reactivity.esm-bundler.js:185
instance.update @ runtime-core.esm-bundler.js:5712
setupRenderEffect @ runtime-core.esm-bundler.js:5726
mountComponent @ runtime-core.esm-bundler.js:5508
processComponent @ runtime-core.esm-bundler.js:5466
patch @ runtime-core.esm-bundler.js:5068
mountChildren @ runtime-core.esm-bundler.js:5252
mountElement @ runtime-core.esm-bundler.js:5162
processElement @ runtime-core.esm-bundler.js:5145
patch @ runtime-core.esm-bundler.js:5065
componentUpdateFn @ runtime-core.esm-bundler.js:5605
run @ reactivity.esm-bundler.js:185
instance.update @ runtime-core.esm-bundler.js:5712
setupRenderEffect @ runtime-core.esm-bundler.js:5726
mountComponent @ runtime-core.esm-bundler.js:5508
processComponent @ runtime-core.esm-bundler.js:5466
patch @ runtime-core.esm-bundler.js:5068
render2 @ runtime-core.esm-bundler.js:6227
mount @ runtime-core.esm-bundler.js:4427
app.mount @ runtime-dom.esm-bundler.js:1590
start @ client-entry.js?t=1664629411311:71
Promise.then (async)
(anonymous) @ client-entry.js?t=1664629411311:82
Show 4 more frames
runtime-core.esm-bundler.js:38 [Vue warn]: onMounted is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement.
warn2 @ runtime-core.esm-bundler.js:38
injectHook @ runtime-core.esm-bundler.js:2699
(anonymous) @ runtime-core.esm-bundler.js:2710
useGsiScript @ index.es.js:37
setup @ index.es.js:77
callWithErrorHandling @ runtime-core.esm-bundler.js:155
setupStatefulComponent @ runtime-core.esm-bundler.js:7187
setupComponent @ runtime-core.esm-bundler.js:7142
mountComponent @ runtime-core.esm-bundler.js:5491
processComponent @ runtime-core.esm-bundler.js:5466
patch @ runtime-core.esm-bundler.js:5068
mountChildren @ runtime-core.esm-bundler.js:5252
processFragment @ runtime-core.esm-bundler.js:5425
patch @ runtime-core.esm-bundler.js:5061
componentUpdateFn @ runtime-core.esm-bundler.js:5605
run @ reactivity.esm-bundler.js:185
instance.update @ runtime-core.esm-bundler.js:5712
setupRenderEffect @ runtime-core.esm-bundler.js:5726
mountComponent @ runtime-core.esm-bundler.js:5508
processComponent @ runtime-core.esm-bundler.js:5466
patch @ runtime-core.esm-bundler.js:5068
mountChildren @ runtime-core.esm-bundler.js:5252
mountElement @ runtime-core.esm-bundler.js:5162
processElement @ runtime-core.esm-bundler.js:5145
patch @ runtime-core.esm-bundler.js:5065
componentUpdateFn @ runtime-core.esm-bundler.js:5605
run @ reactivity.esm-bundler.js:185
instance.update @ runtime-core.esm-bundler.js:5712
setupRenderEffect @ runtime-core.esm-bundler.js:5726
mountComponent @ runtime-core.esm-bundler.js:5508
processComponent @ runtime-core.esm-bundler.js:5466
patch @ runtime-core.esm-bundler.js:5068
render2 @ runtime-core.esm-bundler.js:6227
mount @ runtime-core.esm-bundler.js:4427
app.mount @ runtime-dom.esm-bundler.js:1590
start @ client-entry.js?t=1664629411311:71
Promise.then (async)
(anonymous) @ client-entry.js?t=1664629411311:82
Show 6 more frames
runtime-core.esm-bundler.js:38 [Vue warn]: onUnmounted is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement.
warn2 @ runtime-core.esm-bundler.js:38
injectHook @ runtime-core.esm-bundler.js:2699
(anonymous) @ runtime-core.esm-bundler.js:2710
useGsiScript @ index.es.js:40
setup @ index.es.js:77
callWithErrorHandling @ runtime-core.esm-bundler.js:155
setupStatefulComponent @ runtime-core.esm-bundler.js:7187
setupComponent @ runtime-core.esm-bundler.js:7142
mountComponent @ runtime-core.esm-bundler.js:5491
processComponent @ runtime-core.esm-bundler.js:5466
patch @ runtime-core.esm-bundler.js:5068
mountChildren @ runtime-core.esm-bundler.js:5252
processFragment @ runtime-core.esm-bundler.js:5425
patch @ runtime-core.esm-bundler.js:5061
componentUpdateFn @ runtime-core.esm-bundler.js:5605
run @ reactivity.esm-bundler.js:185
instance.update @ runtime-core.esm-bundler.js:5712
setupRenderEffect @ runtime-core.esm-bundler.js:5726
mountComponent @ runtime-core.esm-bundler.js:5508
processComponent @ runtime-core.esm-bundler.js:5466
patch @ runtime-core.esm-bundler.js:5068
mountChildren @ runtime-core.esm-bundler.js:5252
mountElement @ runtime-core.esm-bundler.js:5162
processElement @ runtime-core.esm-bundler.js:5145
patch @ runtime-core.esm-bundler.js:5065
componentUpdateFn @ runtime-core.esm-bundler.js:5605
run @ reactivity.esm-bundler.js:185
instance.update @ runtime-core.esm-bundler.js:5712
setupRenderEffect @ runtime-core.esm-bundler.js:5726
mountComponent @ runtime-core.esm-bundler.js:5508
processComponent @ runtime-core.esm-bundler.js:5466
patch @ runtime-core.esm-bundler.js:5068
render2 @ runtime-core.esm-bundler.js:6227
mount @ runtime-core.esm-bundler.js:4427
app.mount @ runtime-dom.esm-bundler.js:1590
start @ client-entry.js?t=1664629411311:71
Promise.then (async)
(anonymous) @ client-entry.js?t=1664629411311:82
Show 6 more frames
runtime-core.esm-bundler.js:38 [Vue warn]: onUnmounted is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement.
warn2 @ runtime-core.esm-bundler.js:38
injectHook @ runtime-core.esm-bundler.js:2699
(anonymous) @ runtime-core.esm-bundler.js:2710
setup @ index.es.js:123
callWithErrorHandling @ runtime-core.esm-bundler.js:155
setupStatefulComponent @ runtime-core.esm-bundler.js:7187
setupComponent @ runtime-core.esm-bundler.js:7142
mountComponent @ runtime-core.esm-bundler.js:5491
processComponent @ runtime-core.esm-bundler.js:5466
patch @ runtime-core.esm-bundler.js:5068
mountChildren @ runtime-core.esm-bundler.js:5252
processFragment @ runtime-core.esm-bundler.js:5425
patch @ runtime-core.esm-bundler.js:5061
componentUpdateFn @ runtime-core.esm-bundler.js:5605
run @ reactivity.esm-bundler.js:185
instance.update @ runtime-core.esm-bundler.js:5712
setupRenderEffect @ runtime-core.esm-bundler.js:5726
mountComponent @ runtime-core.esm-bundler.js:5508
processComponent @ runtime-core.esm-bundler.js:5466
patch @ runtime-core.esm-bundler.js:5068
mountChildren @ runtime-core.esm-bundler.js:5252
mountElement @ runtime-core.esm-bundler.js:5162
processElement @ runtime-core.esm-bundler.js:5145
patch @ runtime-core.esm-bundler.js:5065
componentUpdateFn @ runtime-core.esm-bundler.js:5605
run @ reactivity.esm-bundler.js:185
instance.update @ runtime-core.esm-bundler.js:5712
setupRenderEffect @ runtime-core.esm-bundler.js:5726
mountComponent @ runtime-core.esm-bundler.js:5508
processComponent @ runtime-core.esm-bundler.js:5466
patch @ runtime-core.esm-bundler.js:5068
render2 @ runtime-core.esm-bundler.js:6227
mount @ runtime-core.esm-bundler.js:4427
app.mount @ runtime-dom.esm-bundler.js:1590
start @ client-entry.js?t=1664629411311:71
Promise.then (async)
(anonymous) @ client-entry.js?t=1664629411311:82
Show 5 more frames
runtime-core.esm-bundler.js:38 [Vue warn]: Missing ref owner context. ref cannot be used on hoisted vnodes. A vnode with ref must be created inside the render function. 
  at <GoogleSignInButton onSuccess=fn<handleLoginSuccess> onError=fn<handleLoginError> > 
  at <MainLayout> 
  at <App>

I have correctly done all the other steps (the setup of the plugin passing clientId + scopes)

kasvith commented 2 years ago

Can you show a code sample and a reproducible example?

philippedasilva-orizone commented 2 years ago

That's strange, I got it working on my Quasar project... The error you get seems to specify that you are trying to use it improperly...

Here is how I used it:

<template>
  <QPage class="flex items-center justify-center test">
    <QCard>
      <QCardActions align="center"
        ><GoogleSignInButton theme="filled_blue" ux-mode="popup" @success="onSignInSuccess" @error="onSignInError"
      /></QCardActions>
    </QCard>
  </QPage>
</template>

<script setup lang="ts">
import { GoogleSignInButton, type CredentialResponse } from 'vue3-google-signin';

function onSignInSuccess(response: CredentialResponse) {
  console.log(response.credential as string);
}

function onSignInError() {
  console.error('error');
}
</script>

Forgetting that I'm using typescript and unocss for my styling, it should be pretty clear to you ;)

kasvith commented 2 years ago

Thanks @philippedasilva-orizone, it should work unless something is misconfigured(also can be a problem in library)

@Chiyo-no-sake can you show some example?

Chiyo-no-sake commented 2 years ago

I solved the problem, sorry for that, it was not a problem of this library. Closing.