wavezync / vue3-google-signin Goto Github PK

Extend Expiration Time Beyond 60 Minutes

Requesting the ability to set expiration times greater than 60 minutes. This enhancement would provide more flexibility for users who require longer expiration periods. Open to discussion and collaboration on implementation.

We need a FAQ section on the docs.

I see a lot of people coming to discussions thread to understand how to use custom scopes etc.
It would be wise to provide some examples and add relevant docs as a FAQ

I'm trying vue3-google-signin in vue3 using tauri as a backend, but this does not work. The browser windows for authentication is opened in the embedded browser and that is disallowed by google policies, so I get an error message as in the attached screenshot.

Its easier for nuxt users if we provide out of the a box nuxt module

Hi there,

Any chance of removing this debugging statement? Currently this is outputting in our production env.

I find it would be useful only in a development environment. Perhaps we can make this a development environment output instead?

if (process.env.NODE_ENV === "development") {
    console.log("cb triggered"); 
}

Happy to open a pull request if you like.

Hello :)

Is your feature request related to a problem? Please describe.
I'm currently facing a limitation with the static assignment of the clientId value. My backend server provides redirect_uri and clientId, which I wish to dynamically utilize in my application. However, the current implementation does not allow for changing the clientId symbol value after initialization, leading to inflexibility in adapting to different server responses.

Describe the solution you'd like
I would like the ability to dynamically update the clientId value. Specifically, the solution would involve:

1. Using setClientId to change the clientId symbol value.
2. Modifying useOneTap, useTokenClient, useCodeClient hooks to accept clientId as part of the options object, enabling the use of either the initialization value or the dynamically provided clientId.

To implement the above, it would be necessary to optionally accept clientId during app installation.

Describe alternatives you've considered
An alternative could be a more static configuration, but this lacks the flexibility required for different backend responses. I'm open to other suggestions that could provide similar functionality.

Additional context
The inability to dynamically update the clientId hinders the adaptability of the application to different backend environments. Also, there was an issue with the package.json version not being updated, causing a failure in GitHub Action and preventing the NPM version from updating. This is an additional context that might be relevant to the overall functionality and deployment process.

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)

Describe the bug

Whenever loading the library it results into this given error:

GET https://accounts.google.com/gsi/client net::ERR_INVALID_HANDLE

var initialize = () => {
isLoading.value = true;
scriptTag = createScriptTag();
document.head.appendChild(scriptTag); ==> Specifically fails here
scriptTag.onload = () => {
isLoading.value = false;
loaded.value = true;
};
scriptTag.onerror = () => {
isLoading.value = false;
error.value = true;
};
};

To Reproduce

On both nuxt-vue3-google-signin and vue3-google-signin it fails.

On firefox Nuxt 3 gets stuck because of the error.

On Google Chrome it's completely blocked.

<GoogleSignInButton
@success="googleSignInSuccess"
@error="googleSignInFailure"
locale="en_US"
:autoSelect="false"
>

Is your feature request related to a problem? Please describe.
Can we have JWT token's iat and exp fields as part of DecodedGoogleUser?

Describe the solution you'd like
If you are fine with having these two fields as part of the DecodedGoogleUser, I can send a PR for same.
Something like below:

export interface DecodedGoogleUser {
  email: string;
  email_verified: boolean;
  hd: string;
  family_name: string;
  given_name: string;
  name: string;
  id: string;
  picture: string;
  issued_at: number;
  expires_at: number;
}

Hello,
Is there an example of using, say, calendar api with this lib ? And also, something that would use Firebase Google Auth together with this one ? How should they behave or interact ?
Thank you

Thanks for your support to create for the possibility of authentication with google.

Could you imagine using another repo or this to extend Microsoft Login?

The background of my question is that many business applications, i.e. applications within companies in Europe rely on Microsoft products (Office365). Here it would be great if there was a simple way of authentication, similar to this repository.
This would also provide access to the development of "MS Teams" apps.
Is this already in planning?

Describe the bug
Success callback returns incorrect JWT formated access token, somethink like ya29.a0A . Valid JWT token consists from header,payload and signature xxxxx.yyyyy.zzzzz

To Reproduce
Steps to reproduce the behaviour:

1. Go to page with google oauth
2. Click on button to sign
3. See at console response with access_token

Describe the bug
When trying to import the 'vue3-google-signin' library in an ES environment, I encountered a type error indicating the absence of a declaration file for the module. The detailed error message is as follows:

Could not find a declaration file for module 'vue3-google-signin'. '/Users/junolee/Documents/mine/google-news-rss-pusher/node_modules/.pnpm/[email protected][email protected]/node_modules/vue3-google-signin/dist/index.es.js' implicitly has an 'any' type.
  There are types at '/Users/junolee/Documents/mine/google-news-rss-pusher/apps/@front/client/node_modules/vue3-google-signin/dist/plugin.d.ts', but this result could not be resolved when respecting package.json "exports". The 'vue3-google-signin' library may need to update its package.json or typings. ts(7016)

To Reproduce
Steps to reproduce the behavior:

1. Set up a project with the 'vue3-google-signin' package.
2. Attempt to import the package in an ES module environment.
3. Observe the TypeScript error related to type declarations.

Reproducible Example
Currently, I do not have a reproducible example on platforms like StackBlitz or CodeSandbox. I will update this section if I am able to create one.

Expected behaviour
The expected behavior is for the module to be imported without any type errors, with TypeScript being able to find and use the declaration files correctly.

Additional context
To resolve this issue, the types field should be added under "exports" > "." in the package.json. Additionally, the module field is incorrectly pointing to a CJS module. It should instead specify the entry point for an ES module, typically using a .mjs or .js extension.

Contribution Proposal
I am considering contributing to the 'vue3-google-signin' library to address this issue. I would like to propose corrections to the package.json file, particularly adding the types field under "exports" > ".", and correcting the module field to accurately point to an ES module entry point. I wanted to inquire if contributing these changes would be appropriate.

To work with platforms like Electron/Tauri it's necessary to have a method to do a redirect login flow on system browsers to comply with security policies from google.

As @vincenzoml mentioned he has a requirement to use this library with Tauri, but the browser version of tauri webview prevents google login.

We need a method to obtain the redirect URL so these platforms can do a system call to open the default browser.

Related issue #14

I have tested the button in Nuxt3 and it works well to log in, but what do I do if I want to log out?

Thanks, and sorry if the question is very basic.

Hi!

I use laravel (socialite) as backend
I tried all the combinations suggested, but I always have the same error.

Client error: GET https://www.googleapis.com/oauth2/v3/userinfo?prettyPrint=false resulted in a 401 Unauthorized response:\n{\n \"error\": \"invalid_request\",\n \"error_description\": \"Invalid Credentials\"\n}\n

I used the same google client id for the backend and the front

Front (Nuxt)

const handleLoginSuccess = async (response: CredentialResponse) => {
  const { credential } = response
  await useFetch('/auth/social/google', {
    method: 'post',
    body: { token:  credential,  provider: 'google' }
  }).then((response) => {
    console.log(response.data.value)
  }).catch((error) => {
    console.log(error)
  }).finally(() => {
    loading.value = false
  })
}

Laravel socialite
Socialite::driver($request->input('provider'))->stateless()->userFromToken($request->input('token'));

Merci!!!

Describe the bug
GSI_LOGGER]: Your client application uses one of the Google One Tap prompt UI status methods that may stop functioning when FedCM becomes mandatory. Refer to the migration guide to update your code accordingly and opt-in to FedCM to test your changes. Learn more: https://developers.google.com/identity/gsi/web/guides/fedcm-migration?s=dc#display_moment and https://developers.google.com/identity/gsi/web/guides/fedcm-migration?s=dc#skipped_moment

To Reproduce
Steps to reproduce the behaviour:

1. Go to https://vue3-google-signin.wavezync.com/guide/one-tap-login.html
2. Sign in with one tap
   
3. In console there is this error:
   [GSI_LOGGER]: Your client application uses one of the Google One Tap prompt UI status methods that may stop functioning when FedCM becomes mandatory. Refer to the migration guide to update your code accordingly and opt-in to FedCM to test your changes. Learn more: https://developers.google.com/identity/gsi/web/guides/fedcm-migration?s=dc#display_moment and https://developers.google.com/identity/gsi/web/guides/fedcm-migration?s=dc#skipped_moment

Reproducible Example
If you can please provide a reproducible example with Stackbliz, CodeSandbox or any other suitable service

Expected behaviour
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

i want to change mode to redirect mode
i use this in mobile phone, popup mode is not suitable

Currently, docs for compostables are not clear about accepted options

It seems script is trying to load before mounting the component, making this unusable in SSR environments

Describe the bug
My build fails when trying to import from vue package in the dist/index.es.js on line 1

To Reproduce
I admit I didn't try to reproduce it on another project but on mine it would consist on

1. clone @antfu/vitesse template repository
2. install vue3-google-signin package latest version (should do the same with previous too)
3. implement GoogleSignIn button in an existing page
4. build the project
5. Note the build error in the console output

Expected behaviour
Should build :)

Screenshots

Additional context
I override my local install in node_modules/vue3-google-signinsimply adding the "type": "module" line in package.jsonand the build succeed.

Describe the bug

Hello,

I've noticed that the TypeScript type definitions, previously available in the dist folder, are missing in version 1.3.4 of vue3-google-signin. This change has led to TypeScript compilation errors in my project due to the missing type information.

As a temporary workaround, I have manually added the type definitions to my project like below, but it would be ideal to have them included in the package itself.
import GoogleSignInButton from 'vue3-google-signin/dist/components/GoogleSignInButton.vue';

To Reproduce
Steps to reproduce the behaviour:

1. Import GoogleSigninButton to your project as described in README.
   import { CredentialResponse, GoogleSignInButton } from 'vue3-google-signin';
2. See the type error.

Expected behaviour

1. The import should return no type errors with the import like below.
   import { CredentialResponse, GoogleSignInButton } from 'vue3-google-signin';

Additional context
It occurs in the development environment.

I'm trying to use useTokenClient on a vite and vue 3 project to have custom buttons. But the project show this error on console.

Currently, we don't add any types to the global namespace, But since we use the google library we have all the methods available in the global object. Its nice to have this when you install the library

Describe the bug
When using FedCM sign-in in Google Chrome, the clientId field passed to the callback may be undefined.

To Reproduce
Steps to reproduce the behaviour:

1. Log in to Google Chrome
2. Open a page that calls useOneTap() method to display Google’s OneTap sign in UI.
3. When clicking Continue as [[your name]], onSuccess() is not called, and onError() is called without arguments.

Reproducible Example
If you can please provide a reproducible example with Stackbliz, CodeSandbox or any other suitable service

Expected behaviour
A clear and concise description of what you expected to happen.

Screenshots

Desktop (please complete the following information):

• OS: [e.g. iOS] Windows 11
• Browser [e.g. chrome, safari] Chrome
• Version [e.g. 22] 125.0.6422.142

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Hi!
After many hours on this and lot of searchs, i come here...

Describe the bug
On a fresh new Nuxt project I'm trying to add Google OneTap SignIn with nuxt-vue3-google-signin.
I added the exact same code as provided in the doc but I have this console error after clicking login button.
The errors seems coming from vue3-google-signin.

Screenshots

Desktop (please complete the following information):
Firefox 122.0
Node v20.11.0
NPM 10.4.0
Nuxt 3.10.0
Vue 3.4.15
nuxt-vue3-google-signin 0.0.10

Memory Leak on server using onetap composable on app.vue

I face Memory Leak issue on my nuxt 3 application in production when I use OneTap Composable in my app.vue file to have the ability to login my users in whole application
is there any solution to fix this issue or something in the package should be fixed?
i also use SSR in my app and run the onetap login() in onMounted to make sure it is hydrated on client-side and also the isReady variable is not working on production environment
it would be great to help me guys
thanks

here's my code

onMounted(() => { setTimeout(() => { if (!isAuthenticated.value) { console.log("One tap"); login(); } }, 200); });

const { login, isReady } = useOneTap({ onError: handleOneTapError, disableAutomaticPrompt: true, onSuccess: handleOneTapSuccess, });

Discussed in #27

by @philippedasilva-orizone

      const base64Url = jwt.split('.')[1];
      const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
      const jsonPayload = decodeURIComponent(
        window
          .atob(base64)
          .split('')
          .map(function (c) {
            return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
          })
          .join('')
      );
      const decodedToken = JSON.parse(jsonPayload);
      console.log(decodedToken);

Hello,
I am not able to login, I get this error after obtaining a credential. I am using the most basic example:

<template>
  <GoogleSignInButton
    @success="handleLoginSuccess"
    @error="handleLoginError"
  ></GoogleSignInButton>
</template>

</template>

<script setup>

import {GoogleSignInButton} from "vue3-google-signin";
const handleLoginSuccess = (response) => {
  console.log('response:')
  const { credential } = response;
  console.log("Access Token", credential)
}

const handleLoginError = (response) => {
  console.log("Error logging in")
}
</script>

<style>

</style>

👋🏻 @kasvith!

I have helped maintain vue-gapi over the years, and your plugin was brought to my attention as we do not currently support Google Identity Services.

My availability is becoming limited, so I would certainly be open to working with you to bridge these projects via any number of options, including:

• deprecating vue-gapi and pointing people here
• moving these projects under a generalized GitHub organization
• extracting some core framework-agnostic library (that could be used across Vue, React, etc)

Let me know if you have any thoughts / preference!

Also looping in @fmeyertoens and @cedpoilly who have helped with vue-gapi as well 😄

Describe the bug
hello i using one tap.
but after i success login.
The One Tap is still showing.
how to disabled it when user already logged in ?

When the button is clicked and the login() function is executed, we have no way to control the pop-up window closing situation. If you close it, there is no feedback for that case. Using AuthCodeFlowErrorResponse, this case cannot be managed.

It would be great to add more events for cases such as the window closing, an error occurring during the window launch, etc.

This event, for my needs, would be useful to manage the states of my custom button: if the button is clicked and the pop-up window has opened, I want to prevent the button from being pressed. In case the user closes the window, the event tells me so and then I can manage the button to re-enable it.

Tell me if you think it's a good idea to create more events like this.

Thanks for read me!!

Hi, I tested this library and I get credential, but I don't know why I don't get user profile data like : username, email, phone number ?