vue-authenticate: Where is the $auth variable defined?

Question

I am trying to implement vue-authenticate, but I'm having an issue with the following example code taken from their documentation:

new Vue({
  methods: {
    login: function () {
      this.$auth.login({ email, password }).then(function () {
        // Execute application logic after successful login
      })
    },

    register: function () {
      this.$auth.register({ name, email, password }).then(function () {
        // Execute application logic after successful registration
      })
    }
  }
})

Where is the $auth property coming from? I can't see it defined anywhere. I've looked through the documentation, and the example code in the repo, but neither provide any help.

It comes [from here](https://github.com/dgrubelic/vue-authenticate/blob/master/src/index.js#L18). It should be defined after you call `Vue.use(VueAuthenticate, options)`. If you are looking to address the specific error, please include more details about the error you're getting. — , Feb 28 '18 at 19:47
@Thebluefish I'm getting $auth is undefined. I have used `Vue.use` and added the authenticate method following the docs. I can't post a new question for 90 minutes now so I'm going to give Google/docs another try. — DeveloperJames, Feb 28 '18 at 20:05
are you trying to reference `this.$auth` in the callback function passed to `then`? Or are you using arrow functions (`=>`) anywhere? Because you could be referencing the incorrect `this`. See https://stackoverflow.com/questions/20279484 — thanksd, Feb 28 '18 at 21:47
You guessed it, the problem was I was using arrow function on the top level `methods` functions. Many thanks. — DeveloperJames, Feb 28 '18 at 22:14

score 1 · Accepted Answer · edited Jul 16 '22 at 01:51

As you know vue-authenticate is a Vue-plugin.

And when you use this plugin using the line.

Vue.use(VueAuthenticate, ...data)

And this is where it gets defined in this file

Object.defineProperties(Vue.prototype, {
  $auth: {
    get() {
      if (!vueAuthInstance) {
        // Request handler library not found, throw error
        if (!this.$http) {
          throw new Error('Request handler instance not found')
        }

        vueAuthInstance = new VueAuthenticate(this.$http, options)
      }
      return vueAuthInstance
    }
  }
})

Also you may want to go through this documentation on Adding Instance Properties.

vue-authenticate: Where is the $auth variable defined?

1 Answers1