Hey! How i can provide additional scopes after user sign in? Smth like this
https://developers.google.com/identity/sign-in/web/incremental-auth#step_2_request_additional_scopes

const option = new gapi.auth2.SigninOptionsBuilder();
option.setScope('email https://www.googleapis.com/auth/drive')

In my app i need split auth logic and request permission for calendar. Thanks

OAuth guidelines recommend using state parameter for preventing CSRF attacks, but in your examples for server-side code handling state isn't involved. It's practically the same when backend initiates sing in, a user authenticates on Google and Google redirects back to the backend with code and when frontend initiates sign in, the user authenticates with google and fronted receives code that is being sent to the backend. So in both cases backend needs state to verify, and sing in must be initiated involving the backend?

I have a typescript VueJS project. When adding this component, I'm getting Could not find a declaration file for module 'vue-google-oauth2' error.
I've added the typedefs from this repo but that had no effect.

flow.fetch_token(authorization_response=authorization_response)
credentials = flow.credentials

I am using Django in backend and VUE in frontend, wanted to use this way.

I have also tried to get the token.pickle with auth_code
flow.fetch_token(code=auth_code)
This also didn't work.

I want to use token.pickle for multiple time like this. is there any way to get that?

I have multiple components that need to authenticate against different distinct apis with seperate scope and potentially seperate clientId.

How can I pull the implementation out of 'global' on main.js and set the gauthOptions locally in each component.

I'm using (a) Handling Google sign-in, getting the one-time authorization code from Google for getting code and then send it to backend. It works great but there is one feature/info more which I need when user make authentication. I need mail address which user choose and authenticated. So is it possible to know address while getting authorizationCode ? I hope it is possible because I don't want to use second approach: (b) Alternatively, if you would like to directly get back the access_token and id_token only for getting address. Thanks!

Describe the bug
I'm used vue-google-oauth2 to get authCode from google, then I want to use it to exchange access and refresh token by below:

curl -d "client_id=0123456789012-xxxxxxxxxxx&\
  client_secret=CLIENT_SECRET&\
  redirect_uri=postmessage&\
  grant_type=authorization_code&\
  code=AUTH_CODE" -H "Content-Type: application/json" -H "Content-Type: application/x-www-form-urlencoded" --header 'Accept: application/json' https://accounts.google.com/o/oauth2/token

but I get an 400 error:

{
  "error": {
    "code": 400,
    "message": "Invalid JSON payload received. Unexpected token.\nclient_id=012345678\n^",
    "status": "INVALID_ARGUMENT"
  }
}

What I went wrong? Thanks for your support

To Reproduce

Replace client_id, client_secret, auth_code and run above Curl command

Expected behavior

Google OAuth response access token and refresh token

How can i exchange code from the server, if my client side is running on port 8080 and server is running 5000?
I tried to do this but i got an error, reporting redirect uri mismatch.
Thanks in advance

Originally posted by @Kapil-chn7 in #53 (comment)

Hello,

I have implement the backend (.netCore 3) part to request access_token and refresh_token by authCode, but apparently I get refresh_token only the first time a user make the login with my App. Looking at google oauthplayground I see that they add another parameter on client request "access_type=offline", after some reading I realized that this is the way to get refresh_token everytime.

Is there any workaround to pass this param as an option ?

Appreciated

Hi,

Is there any way to get authcode which can be exchanged with refresh token everytime I get an authcode.
I get refresh token only the first time.

Thanks

I tried it without nuxt and it does what I want but I cannot figure out how to make it work in Nuxt.

Hi, the library works perfectly and gets the auth code on the frontend.
Now I made a POST route in flask(python web framework) which uses the exact code from the Python backend sample provided in this repo.
For some reason, I get this error - invalid_grantMalformed auth code.
I've been scratching my head over this for a while now.
Can somebody please shed some light on what could be the potential reasons for this error.

Is it possible to render the google login button instead of normal ones using ur lib?

Describe the bug
I'm using this library to get authCode from Google OAuth server, I set scope to adwords and fetch_basic_profile to false but when i see response from server, email profile openid are automatically added as scope.
My gAuthOptions:

gauthOption = {
    clientId: process.env.VUE_APP_GOOGLE_CLIENT_ID,
    fetch_basic_profile: false,
    prompt: "consent",
    access_type: "offline",
    scope: "https://www.googleapis.com/auth/adwords"
  };

Expected behavior
Server only response for adwords scope without email profile openid

Whenever I try to sign in with google-sign-in button which will call
const gAuthCode = await this.$gAuth.getAuthCode();
It is opening popup windows, abovementioned, every time!

Not really a bug but I am getting the following ESlint warning:

WARNING in /Users/simon/dev/omada/bo/node_modules/vue-google-oauth2/index.ts(138,10):
138:10 Parentheses are required when invoking a constructor
    136 |   };
    137 | 
  > 138 |   return new (Auth as any);
        |          ^
    139 | })();
    140 | 

I have tried different combinations of parenthesis but couldn't propose a fix. Could you please have a quick look into it?

Version: typescript 3.5.3, tslint 5.20.0

Hi. Thank you for sharing good code.
This has helped me to improve my productivity.

During the development, I have questions about access_token.
Is there any way to get access_token from the client side even if I log in with getAuthCode()?
README.md says that I can only access google user object through signIn() function. However, even if I authenticate on the server side with getAuthCode(), client can access to google user object by window.gapi.auth2.getAuthInstance().currentUser.get().getAuthResponse() (GoogleUser.getAuthResponse)
So, I would like to ask you how to access access_token or user profile in login via getAuthCode().

If you have to access windows.gapi.auth2.getAuthInstance (as described above), it would be nice if you have an API that you can access directly from vue-google-auth2.

I'm sure you're busy, but I'd appreciate it if you could help me.

안녕하세요.
먼저 좋은 라이브러리를 공유해주셔서 감사합니다. 덕분에 생산성 향상에 많은 도움이 되었습니다.

웹앱을 개발하던 중 access_token 관련한 궁금증이 생겨서 질문을 남깁니다.
혹시 getAuthCode 함수를 통해 서버 사이드에서 로그인 했을 경우에도 클라이언트단에서 access_token을 획득 할 수 있는 방법이 있나요?
README.MD 에서는 signIn() 함수를 통해서만 google User 객체에 접근할 수 있다고는 하지만.. getAuthCode를 통해 서버사이드에서 인증하더라도 클라이언트에서는 window.gapi.auth2.getAuthInstance().currentUser.get().getAuthResponse() (GoogleUser.getAuthResponse) 를 통해 액세스토큰에 접근할 수 있다고 알고있습니다.
그래서 혹시 getAuthCode를 통한 서버사이드 인증에서도 access_token이나 user profile에 접근하려면 어떻게 접근해야 하는지 질문드립니다.

만약 위에 기술했듯이 직접 window.gapi.auth2.getAuthInstance(이하생략) 를 호출해서 접근해야 한다면, vue-google-oauth2 에서도 직접 접근할 수 있는 API가 있다면 좋을것 같습니다.

바쁘시겠지만 도와주시면 감사하겠습니다.

Greetings and thank you for this project.

I was able to set it up, but I don't know how to actually use it: my backend server gets a token, what can I do with it? how can I fetch information, such as email, from it?

Thanks in advance

It seems $gAuth is not typed and remains as any.
ie: Property '$gAuth' does not exist on type 'MyComponent'.

Getting this when using it with vuejs 2.0, haven't been able to find the root cause. Maybe something with the js api client injection?

Hi,

The function getAuthResponse() never returns a refresh_token.

I've added prompt: 'consent' to the config and I've removed the previously approved application from my Google account (because apparently the refresh_token is only issued on the first approval).

My code is as follows

import GAuth from 'vue-google-oauth2';
const configGAuth = {
    clientId: [CLIENT_ID],
    scope: 'https://www.googleapis.com/auth/drive.readonly',
    prompt: 'consent'
}
Vue.use(GAuth, configGAuth);

Then:

this.$gAuth.signIn()
.then(GoogleUser => {
    var authResult = GoogleUser.getAuthResponse();
})

This always returns:

access_token: "xxx"
expires_at: 1599153341490
expires_in: 3599
first_issued_at: 1599149742490
id_token: "xxx"
idpId: "google"
login_hint: "xxx"
scope: "email profile openid https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/drive.readonly"

I've even tried this on a brand new Google account and still the same. Is there a configuration option not in the docs? According to Google there's an 'access_type' option that needs to be 'offline' in order to be issued a refresh token but I don't see reference to this in the docs.

When i use this.$gAuth.getAuthCode() function, I can get authCode but if I open network tab I can see also access_token and more info, I'm only want to get authCode without access_token, can I do this? Thank you!

I got rid of TS lint errors by doing this:

import GAuth from 'vue-google-oauth2'
import Vue from 'vue'
declare module 'vue/types/vue' {
  interface Vue {
    $gAuth: any
  }
}

But specifying it as any doesn't really enforce types. Can someone help me figure out to make $gAuth the correct type?

I log in fine.
I call signOut and then go to log in another user and I see I am logged in and can click on me and it does not even ask a password but puts me right in. This is a security breach.

I have looked and see there are 2 possible solutions, call the disconnect or call a revoke token.

I received a syntax error without any details in Internet explorer for this module. Chrome and Firefox are working fine.

Describe the bug
I started a fresh Nuxt project - this project runs on my local machine with no issues. I followed your instructions to add this library as a Nuxt plugin - it compiles with no linting or compilation errors, but all I get in my browser is "Unexpected token 'export'"

To Reproduce
Steps to reproduce the behavior:

1. Create a fresh Nuxt project using npx create-nuxt-app googleauth
2. Confirm everything works on your local machine
3. Add this library with npm install
4. Create the plugin file as per instructions
5. Add the plugin to nuxt.config.js as per instructions

Expected behavior
To work and be available to develop with

Desktop (please complete the following information):

• OS: Windows 10
• Browser Chrome
• Version Latest

Where can we set Samesite=None attribute? This maybe a requirement for upcoming versions of Chrome. Thanks.

How to integrate this with nuxt?

So far I added the plugin: /plugins/google.js

import Vue from 'vue'
import GAuth from 'vue-google-oauth2'

const clientId = 'my_client_id'

Vue.use(GAuth, { clientId })

And in nuxt.config.js:

  plugins: [
    { src: '@/plugins/google', ssr: false },
  ],

Nothing works...

main.js

import GAuth from 'vue-google-oauth2'
const gauthOption = {
  clientId: 59xxxxxxxxxx-xxxxxxxxxxxxxxxxxxxx4u6k42sqsv49.apps.googleusercontent.com',
  scope: 'profile email',
  prompt: 'select_account'
}
Vue.use(GAuth,gauthOption)

View.vue

mounted() {
    let that = this;
    let checkGauthLoad = setInterval(function() {
      that.isInit = that.$gAuth.isInit;
      that.isSignIn = that.$gAuth.isAuthorized;
      if (that.isInit) clearInterval(checkGauthLoad);
    }, 5000);
  }

that.$gAuth.isInit is always false here

I wonder if this is the library's expected behavior. I couldn't find the information in the README.MD but my guess is that my app needs the oauth consent screen verified first by Google before I am able to use it. I am not so sure if it is the case here though.

What do you think the problem is?

Describe the bug
Under TypeScript with "strictNullChecks": true environment (Nuxt.js default configuration), I got the following error and can't compile properly:

ERROR in .../node_modules/vue-google-oauth2/index.ts
153:7 Object is possibly 'null'.
    151 |     GoogleAuthConfig = Object.assign(GoogleAuthDefaultConfig, options);
    152 |     if (options.scope) {
  > 153 |       GoogleAuthConfig.scope = options.scope;
        |       ^
    154 |     }
    155 |     if (options.prompt) {
    156 |       prompt = options.prompt;

To Reproduce
Steps to reproduce the behavior:

1. Set up Nuxt.js as a TypeScript project.
2. Install this module (v1.4.0) and use it inside the project.
3. Run npm run generate.
4. You get the above error.

Expected behavior
Properly generate the static website using npm run generate.

I am using the "Directly get back the access_token and id_token" in a Vue app, having the problem that the promise is never resolved. The account chooser opens, I select an account, after this no promise is resolved nor any other error to be found in the console.

This might not be related to your code since this a) has worked for me before and b) still is working on Safari!

this.$gAuth.signIn()
      .then(user => {
       // nor this, nor catch is being executed
       }).catch( (e) => {
          console.log("Auth error", e);
        });

I was hoping you have some suggestions of how to debug this and get to the source of it.

Describe the bug
Using this component to authenticate via Google. Works in Chrome, FireFox. Having issues with Edge.

With Edge, in the application click on Login. A separate window opens allowing me to either select my account or to provide credentials. After this, the window just says "One moment please...". In the console this error is outputted "CustomError: Error in protected function: The window does not have an opener!" There are no console messages in the original window (where the application is). This never goes away.

The correct URLs are setup in Google.

An odd behavior is that when testing on localhost (no https), the login works fine. This is happening in our integrated test environment where we do have https.

To Reproduce
Steps to reproduce the behavior:
See above.

Expected behavior
The google authentication window should be dismissed and proceed with the application flow.

Desktop (please complete the following information):

• OS: Windows
• Browser Edge
• Version Microsoft Edge 42.17134.1098.0

Additional context
Component version 1.5.3
Vue 2.6.11

I'm not able to sign in on Instagram viewer. FB viewer and another apps allow but Instagram doesn't.

Hey,

Is there anyway to get refresh token?

Thanks

The package can't manage multiples instances of authorization => rights in the same app.

It could be nice to name the variable this.$gauth to manage multiples rights (scopes) when we ask for this.$gAuth.getAuthCode()

$gAuth.isInit property is never set to true due to the following error being thrown by the module.

details: "Cookies are not enabled in current environment."
error: "idpiframe_initialization_failed"

Chrome then also displays the cookies blocked icon in the URL bar.

My configuration is as follows:

Any idea what could be causing this & how to resolve this?

Does anyone have an example of how to make vue-google-oauth2 work properly with Vue3 + Vuex + VueRouter?

Describe the bug
Typescript vue-cli compiler returns this error.

`ERROR in node_modules/vue-google-oauth2/index.ts(17,13):
17:13 Expected 1 arguments, but got 0. Did you forget to include 'void' in your type argument to 'Promise'?
15 | if (!script.readyState || /loaded|complete/.test(script.readyState)) {
16 | setTimeout(() => {

17 | resolve();
| ^
18 | }, 500);
19 | }
20 | };`

To Reproduce
Steps to reproduce the behavior:

1. Update all npms using ncu -u
2. Execute the serve command in vue-cli

Expected behavior
Expect vue-google-oauth2 to transpile properly.

Hey,
so when i tried to "npm run build" i come with this error:

 npm run build

> [email protected] build C:\wamp64\www\vue\xxx
> cross-env NODE_ENV=production webpack --progress --hide-modules

Hash: 84a6a8eca84724ecbfa8                                                              
Version: webpack 3.12.0
Time: 5615ms
       Asset     Size  Chunks                    Chunk Names
    build.js  1.19 MB       0  [emitted]  [big]  main
build.js.map  1.55 MB       0  [emitted]         main

ERROR in build.js from UglifyJs
Unexpected token: operator (>) [build.js:37030,34]
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] build: `cross-env NODE_ENV=production webpack --progress --hide-modules`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Elior\AppData\Roaming\npm-cache\_logs\2020-05-26T14_39_28_953Z-debug.log

So to understand why this is happen, i removed plugins from main.js
And find out unfortunately, that "vue-google-oauth2" causing this problem.

I have no idea how to solve it, i can provide any info needed..

Hey,

I'm currently trying to integrate your package into my Application. The authentication process of my SaaS-App is my own, so there is no Google Auth.

I just want to get permission to access the Google Calendar of my app users at the end of the day 😄

Right now i've implemented the Google "Sign-In" button via your package with the getAuthCode() method and i'm getting the one-time code from Google. Then the exchange is done on backend-side, to get refresh code and so on. So far so good.

The only problem i'm having now is that after 1 hour (lifetime of code/token) the state isSignedIn of the user is false.

The reason i need the state on frontend-side is, that i want to give the user the ability to "opt-out" from my service and revoke google permissions via disconnect() method. This works perfectly within 1 hour.

I wasn't able to find any example to achieve this. Can you help me?

Thanks!

Hey,
After using handleClickGetAuth(), on every refresh i see XHR request to:
"https://accounts.google.com/o/oauth2/iframerpc?action=issueToken..."
And
"https://accounts.google.com/o/oauth2/iframerpc?action=checkOrigin&origin=..."

I don't understand why it keeps sending on each refresh although i didn't set anything to run on load/created.
Only the function "handleClickGetAuth()" which trigger onclick

Describe the bug
SyntaxError: Unexpected token 'export' after nuxt app compiled

To Reproduce
Steps to reproduce the behavior:

1. Install package and create a plugin: 'vue-google-oauth2.js'
2. Include the plugin in nuxt.config.js
3. Wait for nuxt app compile successfully
4. Access nuxt app on browser

Expected behavior
Nuxt app running without error

Screenshots

**Desktop

• OS: Mac OS
• Browser: Chrome
• Version: 85.0.4183.121

If I use clientId as a config parameter, I see the following error Missing required parameter 'client_id' in the console as a response to the Google load.

import Vue from 'vue'
import GoogleAuth from 'vue-google-oauth2'

Vue.use(GoogleAuth, {
  clientId: 'xxxx',
  scope: 'profile email'
})

If I use client_id it works. Am I missing something?

Code taken from the sample keeps looping because the it never gets initialized

I've added the localhost and correct port to the Authorized JavaScript origins and changed the client ID to be my own. It however keeps looping through this section of code

created() { let that = this; let checkGauthLoad = setInterval(function() { that.isInit = that.$gAuth.isInit; that.isSignIn = that.$gAuth.isAuthorized; if (that.isInit) clearInterval(checkGauthLoad); }, 1000); }

Would I break anything if I import and use the package just in the login component?

I mean, I just need to login and provide the JWT from my backend after google auth passes. Am I forgetting anything?

Describe the bug
shown error, when the google sign-in popup closed

To Reproduce
Steps to reproduce the behavior:

1. Go to Front-end Demo
2. test sign-in
3. google sign-in popup open, and complete google login, and popup close.
4. See error in parent page
   error: "popup_closed_by_user" (cb=gapi.loaded_0 (268,25))

Desktop (please complete the following information):

• OS: Window
• Browser Edge

Not always, but sometimes this happens.

Describe the bug
scope to only 'email' is not effective. It always seem to be overridden and asking for more?

To Reproduce
Steps to reproduce the behavior:

1. Init with
   const gauthOption = {
   clientId: 'xxxxxx.apps.googleusercontent.com',
   scope: 'email',
   prompt: 'select_account'
   }
   Vue.use(GAuth, gauthOption)
2. Popup will display
3. Because the request sent has '&scope=openid%20profile%20email&'

Expected behavior
Ask only for the user email

Desktop (please complete the following information):

• Ubuntu
• Chrome

Wondering if it could be related to

Note: By default, the fetch_basic_profile parameter of gapi.auth2.init() is set to true, which will automatically add 'email profile openid' as scope.
https://developers.google.com/identity/sign-in/web/sign-in

Here's the code I ran
const googleUser = await this.$gAuth.signIn()
console.log(googleUser.getAuthResponse())

The prompt has been set to 'consent'.
However, the Refresh token is not returned.
I know that the Refresh token is created only when the token is retrieved for the first time according to Google's specification.
Therefore, I have to revoke the token before retrieving it.

Expected behavior
We also want the Refresh token to be returned.

Screenshots
The contents of googleUser.getAuthResponse are as shown in the image.

How will it be affected on google+ API shutdown set to start from March 7, 2019

Im using Nuxt 2.14.12, but getting this error

Everything must be fine

Added Api code to get access token as pugin (~/plugins/googleAuth.js)

import Vue from 'vue'
import GAuth from 'vue-google-oauth2'
export const gauthOption = {
    clientId: "/key/",
    scope: 'profile email',
    prompt: 'select_account'
};
Vue.use(GAuth, gauthOption)

calling function

try {
    let user = await this.$gAuth.signIn();
} catch (e) {
    console.warn(e);
}

**Desktop

• OS: Windows 10
• Browser - Chrome last verion
• Nuxt - 2.14
• Vue 2.6 (I guess)