rmartide / vue-google-login Goto Github PK

Hello,

Is there an option for different languages?

Thanks.

When using Vue 3, I got this error:

Uncaught (in promise) TypeError: Cannot read property '_c' of undefined

When setting the logoutButton prop to true the button style disappear and it has no text.

<GoogleLogin
    :params="google.params"
    :renderParams="google.renderParams"
    :onSuccess="onGoogleSuccess"
    :onFailure="onGoogleFailure"
    :logoutButton="google.isLoggedIn"
    ></GoogleLogin>

https://i.imgur.com/kUmCEez.png

Perhaps I am missing something-is there any way to configure this button so that it shows that I am logged into my site or not?

With the default configuration it says "Signed in With Google" whether or not I am signed into my site or not. If I log out of Google, it says "Sign In".

I have the button and my Client ID configured correctly, as far as I know.

"vue-google-login": "^2.0.5",

With version 2.0.5, it doesn't seem to export LoaderPlugin.

This is from the docs.

import { LoaderPlugin } from 'vue-google-login';
Then add the plugin to the Vue instance with the params, client_id is the only property required but you can add some optional.

Vue.use(LoaderPlugin, {
    client_id: CLIENT_ID
});

Line 321-325 in vue-google-login seem to add the objects to the exports but the values are undefined except for default.

Note: Using require instead of import shows all of the objects.
const GoogleLogin = require('vue-google-login');

{GoogleLogin: {…}, LoaderPlugin: {…}, default: {…}, __esModule: true}
GoogleLogin: {name: "GoogleLogin", props: {…}, methods: {…}, beforeCreate: ƒ, mounted: ƒ, …}
LoaderPlugin: {install: ƒ}
default: {name: "GoogleLogin", props: {…}, methods: {…}, beforeCreate: ƒ, mounted: ƒ, …}
__esModule: true
proto: Object

Hi @rmartide
Thanks for this nice plugin.

I would appreciate you if you can let me know how I can manually log out from google after logging in.

In my Vue app, I log the user in using vue-google-login, but, then after collecting the information, I would log the user out of google.

I am using vue-router, so the login page is on /login. I have already tried LoaderPlugin but could not successfully call it as below:
GoogleAuth.then(auth2 => { auth2.signOut(); })
or even
this.GoogleAuth.then(auth2 => { auth2.signOut(); })

or even
this.$GoogleAuth.then(auth2 => { auth2.signOut(); })

How can this be made possible.

Thanks,

When the button loads it jumps from one design to another.... please see images
On load this appears ..

Very quickly it flashes and changes to this...

I'm no front-end dev and I'm not privy to details about the upcoming SameSite cookie changes.

I just noticed these warnings in Firefox and am wondering if we should expect this plugin to break soon?

Some cookies are misusing the recommended “sameSite“ attribute 2
Cookie “G_ENABLED_IDPS” will be soon rejected because it has the “sameSite” attribute set to “none” or an invalid value, without the “secure” attribute. To learn more about the “sameSite“ attribute, read https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie/SameSite cb=gapi.loaded_0:278:21
Cookie “G_AUTHUSER_H” will be soon rejected because it has the “sameSite” attribute set to “none” or an invalid value, without the “secure” attribute. To learn more about the “sameSite“

Cookie “SIDCC” will be soon rejected because it has the “sameSite” attribute set to “none” or an invalid value, without the “secure” attribute. To learn more about the “sameSite“ attribute, read https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie/SameSite

I have a login button integrated within a dialog, this will show up with options to login, the google sign in button is one of them.

I also have the sign-out button, the will only appear if the user is signed in with google.

After using the sign out button - the login dialog closes, and after opening the login dialog again, the google sign-in button no longer appears.

There's no v-if condition on the button element, or any element that contains it.

Important to mention, right after signing out, before the dialog fully closes, the button still appears, and even changes from "signed in" to "sign in", but after the dialog closes, opening it again will not render the button.

Tested in FireFox and Chrome

The dialog code for reference:

<v-dialog
    v-model="loginDialogOpened"
    width="500">
    <v-card width="500">
      <v-card-title>{{ loginString }}</v-card-title>
      <v-card-text v-if="!isLoggedIn() && loginAsAdmin">
        <v-text-field
          v-model="devadminPassword"
          type="password"
          label="password"></v-text-field>
      </v-card-text>
      <v-card-text v-if="!isLoggedIn()">
        <v-btn large color="grey"
          @click="loginAsAdmin = true;"
          >Login As Admin
        </v-btn>
      </v-card-text>
      <v-card-text>
        <GoogleLogin
          :params="googleParams"
          :renderParams="googleRenderParams"
          :onSuccess="googleOnSuccess"
          :onFailure="googleOnFailure"
        >Login</GoogleLogin>
      </v-card-text>
      <v-card-text v-if="isLoggedIn() && withGoogle">
        <GoogleLogin
          :logoutButton="true"
          :params="googleParams"
          :onSuccess="googleLogoutOnSuccess"
          :onFailure="googleLogoutOnFailure"
        >Logout</GoogleLogin>
      </v-card-text>
      <v-card-actions>
        <v-btn large color="green"
          v-if="!isLoggedIn()"
          @click="login"
          >Submit
        </v-btn>
        <v-btn large color="grey"
          v-if="isLoggedIn()"
          @click="logout">
          Logout
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>

The dialog - before signing in:

After signing in:

After signing out:

Hello

I was trying to use this plugin for implementing google login in my Vue project.
But I'm getting the below error.
"idpiframe_initialization_failed", details: "Not a valid origin for the client: http://localhost:8080…whitelist this origin for your project's client ID."}

I checked my cookie settings, 3rd party cookies are allowed by default.
I already have my localhost in google credentials in OAuth 2.0 Client IDs.

I'm getting this error from vue-google-login project in the console when I'm loading the project. Then when I try to sign in after clicking login button, once I give the password, it goes to onFailure() method instead of onSuccess(googleUser) method. Any hints what might be going wrong in my case?

ERROR in app.js from UglifyJs Unexpected token: name (e) [./node_modules/vue-google-login/dist/vue-google-login.min.js:1,2044][app.js:58921,2001] npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

I'm trying to use this plugin with nuxt but it does not work in the server side, it says window is not defined.
I've wrapped the component inside tags but it does not work in server side.

Im using Firebase Functions for SSR deployment and this is my code:

Template side

<client-only>
            <GoogleLogin
              :params="gAuthParams"
              :onSuccess="onGoogleSignInSuccess"
              :onFailure="onGoogleSignInError"
              class="btn btn-block btn-success"
            >
              <b-icon icon="google" />
              {{ !isSignIn ? $t('signUp') : $t('signIn') }}
              {{ $t('withGoogle') }}
            </GoogleLogin>
</client-only>

Script side:

import Vue from 'vue'

import GoogleLogin from 'vue-google-login'
import { LoaderPlugin } from 'vue-google-login'
Vue.use(LoaderPlugin, {
  client_id: GoogleAuthCredentials.client_id,
})

export default {
    components: { GoogleLogin }
}

I tried passing these options with the plugin for security reasons, but it doesn't recognize them.

When I first click to signin that have show popup and show to shoose an acount.
but in second click that have show popup but no show to shoose an acount.

have some one to tell me that want to show an acount for select every click button signin ?

thank you.

In google credentials there is:

• Authorized redirect URIs

How to configure this value?

See migration guide here:
https://developers.google.com/identity/gsi/web/guides/migration

if using google ui render, the button will show after about 2 seconds, is any hook when it was ready to show?

Hello,
I'm using the vue-google-login component in my project.

I have to go to sign-in page from a different page with route.
When the login page renders the component doesnt show up
When i f5 the page the component renders with no reason.

I even put an interval in beforeMount method and try to rerender the component every three seconds thinking that it would be a problem about the clientId which can be null at initial value.

But couldn't solve it.

Thanks in help.

Hi,
I am facing a peculiar problem with my website. I am using the plugin in a login modal (bootstrap-vue) alongside a custom login form. The google sign in button fails to show up only sometimes. Either some or all of the 'samesite' cookie messages in the console are missing, meaning I guess that the scripts did not run (properly). The sign in button then appears after one or more refreshes. What could be causing this?

Thanks.

Putting response_type = 'code' into params doesn't help. I still receive the same response. But when I used google api in vanilla js with something like this:

gapi.auth2.authorize( { immediate: false, response_type: "code", cookie_policy: "single_host_origin", client_id: "XXX", scope: "email profile", },

I got this response, which is what I'm looking for:

Is there an option to call grantOfflineAccess but not by using the 'Auth api'?
I can use the 'Auth api' in parallel to the regular button & onGoogleSuccess function, but its popup the google login screen again (that blocked by chrome)
So I want to call grantOfflineAccess from the onGoogleSuccess function if possible to get the authorization code
Or other option to Sign-In for server-side

My app was reading the access_token inside the onSuccess method like below:

onSuccess (login) {
    const accessToken = login.ws.access_token
}

Suddenly, it is not available anymore, but inside another attribute:

onSuccess (login) {
    const accessToken = login.xc.access_token
}

Is there a method that I can use instead so I don't relay on an attribute like this?
Any chances that GoogleOAuth2 has been updated?

Iam trying to Intergrate the vue-google-login to my chrome extension ... it raises above error
"Script not loaded correctly, did you added the plugin or the client_id to the component?"

I have implemented in the correct way as you have instructed in the read me ..
Do you know what is the cause of the above issue?

Hi,

Cuando compilo mi WepApp hecha en Quasar-framework a android o electron-win23 el botón de inicio no aparece para hacer Login...

gracias.

Hello, is there an option to add scope?
tried to add it to params: scope: "https://www.googleapis.com/auth/gmail.readonly",

same as above