Unable to watch the loading variable exported on the $auth object

[jhannah]

I’m attempting to check for authentication status before loading my application as the whole thing is restricted to authenticated users. I followed the Vue quickstart documentation that essentially had me created a plugin. That plugin doesn’t fully initialize before my application does so I need to wait for that to happen.

I found this post which I think is exactly what I need however it’s not working for me. The watch() never fires as if the loading variable is never changed.

import {Auth0Plugin, getInstance} from './auth'

//useAuth0({})
Vue.use(Auth0Plugin, {
  domain,
  clientId,
  onRedirectCallback: (appState: any) => {
    router.push(
      appState && appState.targetUrl
        ? appState.targetUrl
        : window.location.pathname
    );
  }
});

const instance = getInstance();

instance.$watch("loading", loading => {
  if (!loading) {
    //const token = await instance.loginWithRedirect({});
    console.log("Done loading...");
  }
});

The ‘Done loading…’ never get’s logged to the console. Please advise on how I can wait for the Auth0 plugin to fully initialize before my application.

[dan.woda]

Hi @jhannah,

I don’t have an exact answer here, but I can tell you I have seen this type of issue before, and other user’s have resolved it by providing a landing page. Is that not an option?

Let me know,
Dan