Auth0 Home Blog Docs

The prototype this.$auth in Vue main.js always null

Hi,

I’m trying to integrate Auth0 with my Vue app. I use the following tutorials as guide:

  1. https://auth0.com/docs/quickstart/spa/vuejs/01-login
  2. https://auth0.com/docs/quickstart/spa/vuejs/02-calling-an-api

However, I’m unable to access this.$auth in main.js of the Vue app. I’ve successfully logged in with Auth0 and in the app I can access all $auth.user in the template (*.vue files). The this.$auth in Navbar.vue script can be accessed with no problem at all for calling the this.$auth.logout function. The same also work for App.vue.

What I actually need is to get the access token with this.$auth.getTokenSilently(). Which is needed to call an Auth0 protected API throughout the app especially in my store files (vuex).

From the tutorial I know that the plugin should make the $auth & this.$auth to be available throughout the Vue app. But somehow I’m unable to access in in main.js. It always return null. Am I missing some things? I’m still a Vue noob by the way.

Thanks!

It seems that this.$auth is not updated without refresh of the page (login and callback was at the page home). I manage to add the login info into vuex store in another page, callback & redirect to home with success. Is this a clean solution? Or is there a better way to do it? TIA