Issue with $auth being null

[Simisav]

I am building a web application with Vue.js. I am trying to add Auth0 by going through the Auth0 Vue SDK Quickstart. I am able to get the user to log in and display their user information on a profile page. $auth is valid in all of my Vue components.

The issue is I am trying to create an API client with Axios that uses an interceptor to add an Authorization header. When I try to use $auth.getTokenSilently() $auth is always null. I’m doing something very similar to Using Auth0 SPA with Axios Wrapper - #3 by vanpyrzericj - Get Help - Vue Forum. I also tried to use this The prototype this.$auth in Vue main.js always null - #3 by damir to fix the issue but getInstance() is null.

Here is my main.js

Vue.use(Auth0Plugin, {
  domain,
  clientId,
  onRedirectCallback: appState => {
    router.push(
      appState && appState.targetUrl
        ? appState.targetUrl
        : window.location.pathname

const myApp = new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

export default myApp;

Repository.js

import axios from 'axios';
import myApp from "@/App";

const baseDomain = 'http://localhost:8000';
const baseURL = `${baseDomain}/api`;

export const httpClient = axios.create({
  baseURL: baseURL,
  headers: {
    "Context-Type": "application/json"
  }
});

httpClient.interceptors.request.use(async (config) => {
  const token = await myApp.$auth.getTokenSilently(); 
  config.headers['Authorization'] = `Bearer ${token}`;
  return config
}, (error) => {
  return Promise.reject(error);
})

Then in my store.js (Vuex) I am using a factory pattern to use the httpClient. It seems the interceptor is running before Auth0 is fully loaded. If you have any ideas please let me know!

Seems like I should make sure auth0 is ready before anything else.

[Simisav]

After trying a few different solutions this one worked! Make sure to await on the action. Let me know if you have any questions.

Auth0 client is null in Vue SPA component on page refresh

I used the solution provided above and managed to put it into a single Vuex action. The whole Vuex module to those interested: import { getInstance } from "@/auth"; const state = { token: null }; const getters = { token(state) { return state.token; } }; const mutations = { setToken(state, token) { state.token = token; } }; const actions = { retrieveTokenFromAuthz(context) { return new Promise((resolve, reject) => { const instance = getInstance(); instance…

[konrad.sopala]

Thanks for sharing it with the rest of community!