Auth0 only fills in data on third refresh

Help
,
1

Please include the following information in your post:

  • Which SDK this is regarding: @auth0/auth0-spa-js
  • SDK Version: e.g. 1.17.0
  • Platform Version: e.g. Node v14.17.3
  • Code Snippets/Error Messages/Supporting Details/Screenshots:
    I have a Vue.js application that uses Auth0 for the accounts. I have it so that you can register and log in currently. I have a callback URL that catches the requests and it is meant to store some data from Auth0 that my app needs. However, on the first load, it fails to store the data - seems to be picking up the default values - however on the 3rd load it will load everything perfectly fine( after 2 page refreshes).

I do not have any error messages in my Chrome console to provide just that my console.log output Vue {_uid: 2, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}, null and {} respectively for the console.log in the callback created method.

What am I doing wrong here to cause the default values to show on load 1 but not load 3?

Callback created

created() {
setTimeout(() => {
console.log(this.$auth)
console.log(this.$auth.token)
console.log(this.$auth.user)
localStorage.setItem(‘token’, this.$auth.token)
localStorage.setItem(‘user_data’, JSON.stringify(this.$auth.user))
if(this.$auth == null || this.$auth.id_token[‘https://tenanttalk.io/account_signup_type/is_new’]) {
this.$router.push(‘/setup’)
} else {
// Load user data from Auth0

    // Go to chat page
    // this.$router.push('/chat')
  }
}, 500)

}

Auth0 plugin file whole

/**

  • External Modules
    */

import Vue from ‘vue’;
import createAuth0Client from ‘@auth0/auth0-spa-js’;

/**

  • Vue.js Instance Definition
    */

let instance;

export const getInstance = () => instance;

/**

  • Vue.js Instance Initialization
    */

export const useAuth0 = ({
onRedirectCallback = () =>
window.history.replaceState({}, document.title, window.location.pathname),
redirectUri = ${window.location.origin}/callback,
…pluginOptions
}) => {
if (instance) return instance;

instance = new Vue({
data() {
return {
auth0Client: null,
isLoading: true,
isAuthenticated: false,
user: {},
error: null,
token: null,
id_token: null
};
},
methods: {
async handleRedirectCallback() {
this.isLoading = true;
try {
await this.auth0Client.handleRedirectCallback();
this.user = await this.auth0Client.getUser();
this.isAuthenticated = true;
} catch (error) {
this.error = error;
} finally {
this.isLoading = false;
}
},

   loginWithRedirect(options) {
     return this.auth0Client.loginWithRedirect(options);
   },

   logout(options) {
     return this.auth0Client.logout(options);
   },

   getTokenSilently(o) {
     return this.auth0Client.getTokenSilently(o);
   },

   getIdTokenClaims(o) {
    return this.auth0Client.getIdTokenClaims(o);
   }
 },

 async created() {
   this.auth0Client = await createAuth0Client({
     ...pluginOptions,
    //  responseType: 'id_token',
     domain: pluginOptions.domain,
     client_id: pluginOptions.clientId,
     audience: pluginOptions.audience,
     redirect_uri: redirectUri,
   });

   try {
     if (
       window.location.search.includes('code=') &&
       window.location.search.includes('state=')
     ) {
       const { appState } = await this.auth0Client.handleRedirectCallback();

       onRedirectCallback(appState);
     }
   } catch (error) {
     this.error = error;
   } finally {
     this.isAuthenticated = await this.auth0Client.isAuthenticated();
     this.user = await this.auth0Client.getUser();
     this.$auth.getTokenSilently().then(token => this.token = token)
     this.$auth.getIdTokenClaims().then(id_token => this.id_token = id_token)
     this.isLoading = false;
   }
 },

});

return instance;
};

/**

  • Vue.js Plugin Definition
    */

export const Auth0Plugin = {
install(Vue, options) {
Vue.prototype.$auth = useAuth0(options);
},
};

main.js where plugin is added directly after imports

import { Auth0Plugin } from ‘@/auth/auth0-plugin’;

// Install the authentication plugin
Vue.use(Auth0Plugin, {
domain,
clientId,
audience,
onRedirectCallback: (appState) => {
router.push(
appState && appState.targetUrl
? appState.targetUrl
: window.location.pathname,
);
},
});