title: Vue JS Google OAuth Sign this.$gAuth.isAuthorized always return false
body: <p>This is the code I use to create a Google Client wrapper</p>
  <pre class="lang-js prettyprint-override"><code>var googleAuth = (function () {
    function installClient () {
      var apiUrl = 'https://apis.google.com/js/api.js'
      return new Promise((resolve) =&gt; {
        var script = document.createElement('script')
        script.src = apiUrl
        script.onreadystatechange = script.onload = function () {
          if (!script.readyState || /loaded|complete/.test(script.readyState)) {
            setTimeout(function () {
              resolve()
            }, 500)
          }
        }
        document.getElementsByTagName('head')[0].appendChild(script)
      })
    }
  
    function initClient (config) {
      return new Promise((resolve) =&gt; {
        window.gapi.load('auth2', () =&gt; {
          window.gapi.auth2.init(config)
            .then(() =&gt; {
              resolve(window.gapi)
            })
        })
      })
    }
  
    function Auth () {
      if (!(this instanceof Auth))
        return new Auth()
      this.GoogleAuth = null /* window.gapi.auth2.getAuthInstance() */
      this.isAuthorized = false
      this.isInit = false
      this.prompt = null
      this.isLoaded = function () {
        /* eslint-disable */
        console.warn('isLoaded() will be deprecated. You can use &quot;this.$gAuth.isInit&quot;')
        return !!this.GoogleAuth
      }
  
      this.load = (config, prompt) =&gt; {
        installClient()
          .then(() =&gt; {
            return initClient(config)
          })
          .then((gapi) =&gt; {
            this.GoogleAuth = gapi.auth2.getAuthInstance()
            this.isInit = true
            this.prompt = prompt
            this.isAuthorized = this.GoogleAuth.isSignedIn.get()
          })
      }
  
      this.signIn = (successCallback, errorCallback) =&gt; {
        return new Promise((resolve, reject) =&gt; {
          if (!this.GoogleAuth) {
            if (typeof errorCallback === 'function') errorCallback(false)
            reject(false)
            return
          }
          this.GoogleAuth.signIn()
            .then(googleUser =&gt; {
              if (typeof successCallback === 'function') successCallback(googleUser)
              this.isAuthorized = this.GoogleAuth.isSignedIn.get()
              resolve(googleUser)
            })
            .catch(error =&gt; {
              if (typeof errorCallback === 'function') errorCallback(error)
              reject(error)
            })
        })
      }
  
      this.getAuthCode = (successCallback, errorCallback) =&gt; {
        return new Promise((resolve, reject) =&gt; {
          if (!this.GoogleAuth) {
            if (typeof errorCallback === 'function') errorCallback(false)
            reject(false)
            return
          }
          this.GoogleAuth.grantOfflineAccess({ prompt: this.prompt })
            .then(function (resp) {
              if (typeof successCallback === 'function') successCallback(resp.code)
              resolve(resp.code)
            })
            .catch(function (error) {
              if (typeof errorCallback === 'function') errorCallback(error)
              reject(error)
            })
        })
      }
  
      this.signOut = (successCallback, errorCallback) =&gt; {
        return new Promise((resolve, reject) =&gt; {
          if (!this.GoogleAuth) {
            if (typeof errorCallback === 'function') errorCallback(false)
            reject(false)
            return
          }
          this.GoogleAuth.signOut()
            .then(() =&gt; {
              if (typeof successCallback === 'function') successCallback()
              this.isAuthorized = false
              resolve(true)
            })
            .catch(error =&gt; {
              if (typeof errorCallback === 'function') errorCallback(error)
              reject(error)
            })
        })
      }
    }
  
    return new Auth()
  })()
  
  function installGoogleAuthPlugin(Vue, options) {
    //set config
    let GoogleAuthConfig = null
    let GoogleAuthDefaultConfig = { scope: 'profile email', discoveryDocs: ['https://www.googleapis.com/discovery/v1/apis/drive/v3/rest'] }
    let prompt = 'select_account'
    if (typeof options === 'object') {
      GoogleAuthConfig = Object.assign(GoogleAuthDefaultConfig, options)
      if (options.scope) GoogleAuthConfig.scope = options.scope
      if (options.prompt) prompt = options.prompt
      if (!options.clientId) {
        console.warn('clientId is required')
      }
    } else {
      console.warn('invalid option type. Object type accepted only')
    }
  
    //Install Vue plugin
    Vue.gAuth = googleAuth
    Object.defineProperties(Vue.prototype, {
      $gAuth: {
        get: function () {
          return Vue.gAuth
        }
      }
    })
    Vue.gAuth.load(GoogleAuthConfig, prompt)
  }
  
  export default installGoogleAuthPlugin
  </code></pre>
  <p>And in <code>main.js</code> I used it as follows:</p>
  <pre class="lang-js prettyprint-override"><code>import GoogleAuth from './auth/goauthWrapper.js'
  const gauthOption = {
    clientId: 'XXXXXXXX.apps.googleusercontent.com',
    scope: 'profile email',
    prompt: 'select_account'
  }
  Vue.use(GoogleAuth, gauthOption)
  </code></pre>
  <p>I'm able to access <code>this.$gAuth.signIn()</code> &amp; <code>this.$gAuth.signOut()</code> however, when I try to access  <code>this.$gAuth.isAuthorized</code> it is always <code>false</code>. Even after successful sign in, the value always <code>false</code></p>
  <p>I printed out <code>this.$gAuth</code> on Vue <code>created()</code> and get the following:
  Auth object is this before sign in
  <a href="https://i.stack.imgur.com/JIYTW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JIYTW.png" alt="Auth before sign in" /></a></p>
  <p>Auth object is this after sign in (but I have to manually refresh the page!):
  <a href="https://i.stack.imgur.com/84EXA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/84EXA.png" alt="Auth after sign in" /></a></p>
  <p>I wonder why I'm unable to access the <code>this.$gAuth.isAuthorized</code> when it's <code>true</code>?
  Do I need to do a <em>bind</em>? How would I go about doing that? Thanks!</p>