How to check if user is logged from the middleware in Nuxt3 Auth0 - middleware

Question

I built a simple login page in Nuxt3 using Auth0 and it works. Now I am trying to build a middleware which will redirect users who are not authenticated to the login page. I am able to use this.$auth0.isAuthenticated variable on the login.vue page but not in my middleware because I get error "Cannot read properties of undefined (reading '$auth0')". How can I access isAuthenticated variable from the middleware?
this is login page: pages/login.vue
<template>
<div>
<p v-if="isAuthenticated">hey {{ user }}</p>
<p v-else>you are not authenticated</p>
<button #click="login">Log in</button>
<button #click="logout">logout</button>
</div>
</template>
<script>
export default {
data() {
return {
user: this.$auth0.user,
isAuthenticated: this.$auth0.isAuthenticated
};
},
methods: {
login() {
this.$auth0.loginWithRedirect();
},
logout() {
this.$auth0.logout({ returnTo: 'http://localhost:3000' });
}
},
};
</script>
and this is middleware page (middleware/auth.global.ts)
export default defineNuxtRouteMiddleware(() => {
if (this.$auth0.isAuthenticated) {
console.log('authenticated')
}
else {
console.log('not authenticated')
}
})

Answer 1

I tried the middleware approach but I've been facing the same problem.
I ended up with this in the <script setup> section of my layout:
import { authGuard } from "#auth0/auth0-vue";
const thisRouter = useRouter();
thisRouter.beforeEach(authGuard);
I feel this is not 100% correct but it seems to work.