title: Auth0 route guard not working with Nuxt middleware
body: <p>What is the correct pattern to implement Auth0 route guards in Nuxt?</p>
  <p>I've adapted the <a href="https://auth0.com/docs/quickstart/spa/vuejs/01-login#secure-the-profile-page" rel="nofollow noreferrer">Auth0 sample code</a> to create the following middleware:</p>
  <pre><code>import {getInstance} from '~/plugins/auth';
  
  export default function () {
    const authService = getInstance();
  
    const fn = () =&gt; {
      // If the user is authenticated, continue with the route
      if (!authService.isAuthenticated) {
        authService.loginWithRedirect({
          appState: {targetUrl: 'http://localhost:3000'},
        });
      }
    };
  
    // If loading has already finished, check our auth state using `fn()`
    if (!authService.loading) {
      return fn();
    }
  
    // Watch for the loading property to change before we check isAuthenticated
    authService.$watch('loading', loading =&gt; {
      if (loading === false) {
        return fn();
      }
    });
  }
  </code></pre>
  <p>Notice that before the authentication status of Auth0 can be accessed, we must wait for the the instance to finish loading. The Auth0 sample code does this by using <code>$watch</code>.</p>
  <p>My middleware code &quot;works&quot; but has the issue of briefly displaying the protected pages before the async <code>$watch</code> triggers. Is there any way to wait and block the route from continuing to render until Auth0 has finished loading and its auth status can be accessed?</p>
  <p>I've also tried using almost the exact same code Auth0 provides without my own modifications within the <code>beforeRouteEnter</code> hook of the Nuxt pages. This has the same issue which begs the question as to why the Auth0 example presumably works in VueJS using <code>beforeRouteEnter</code> but not in Nuxt?</p>