Problem with vue-google-oauth-2 in Vue.js

Question

I am trying to add a Google Sign-In button to my Vue.js application and I found the vue-google-oauth2 plugin. I installed it and followed exactly the sample.html code to integrate it in my application, this way:

<template>
  <div>
   <h1>Test</h1>
   <button @click="handleClickSignIn" :disabled="!isLoaded">signIn</button>
  </div>
 </template>

 <script>
  /** 
  * You should first need to place these 2 lines of code in your APP ENTRY file, e.g. src/main.js
  *
  * import GAuth from 'vue-google-oauth2'
  * Vue.use(GAuth, {clientId: '4584XXXXXXXX-2gqknkvdjfkdfkvb8uja2k65sldsms7qo9.apps.googleusercontent.com'})
  * 
  */
  export default {
   name: 'test',
   props: [],
   components: {
   },
   data () {
    return {
     isLoaded: false
    }
   },
   computed: {
   },
   methods: {
    handleClickSignIn(){
      this.$gAuth.signIn(function (user) {
         //on success do something
      console.log('user', user)
      }, function (error) {
         //on fail do something
      })
    }
  },
  mounted(){
    let that = this
    let checkGauthLoad = setInterval(function(){
      that.isLoaded = that.$gAuth.isLoaded()
      console.log('checked', that.isLoaded)
      if(that.isLoaded) clearInterval(checkGauthLoad)
    }, 1000);
  }
}
</script>

The problem is that the isLoaded() method never returns true, with the Google Chrome console telling me every time I press on the button that the google api is not ready, that is the plugin console message printed when the GoogleAuthInstance is false. Could anyone help me?

How does your index.js/main.js look like? Have you initialized the Google Auth? Have you looked at github.com/guruahn/vue-google-oauth2#readme? — Sujil Maharjan
– Sujil Maharjan, Commented Oct 19, 2018 at 16:40
I did all those things you asked. I added the two lines in main.js for Google Auth initialization in the project and I also did all the steps presented in the README.md file. — Gianclè Monna
– Gianclè Monna, Commented Oct 22, 2018 at 7:12

TomTom101 · Accepted Answer · 2019-05-17 14:51:26Z

1

Use isInit instead of isLoaded as the latter will be/is deprecated.

answered May 17, 2019 at 14:51

TomTom101

6,9413 gold badges27 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

behzad · Accepted Answer · 2021-02-06 06:38:47Z

0

Add to main.js

import GAuth from 'vue-google-oauth2'


Vue.use(GAuth, {
    clientId: '....apps.googleusercontent.com',
    scope: 'email',
    prompt: 'consent',
    fetch_basic_profile: true
})


new Vue({
...
  render: (h) => h(App),
}).$mount("#app");

edited Feb 6, 2021 at 6:38

behzad

8574 gold badges17 silver badges33 bronze badges

answered Feb 6, 2021 at 2:06

Sergey

512 silver badges5 bronze badges

Collectives™ on Stack Overflow

Problem with vue-google-oauth-2 in Vue.js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related