How to use global auth guard

[jpmeijers]

auth0-vue/README.md

Line 476 in f459a7e

### Protect a route

Related to auth0/docs#10052

When I do the following, I end up in a redirect loop. How would one use the Auth0 library's auth guard as a global guard (router.beforeEach(authGuard)), but exclude the login page?

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import {authGuard} from "@auth0/auth0-vue";

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/login',
    name: 'login',
    component: () => import(/* webpackChunkName: "about" */ '../views/LoginView.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

router.beforeEach(authGuard);

export default router

[frederikprijck]

As our guard is just like any other guard, it will protect any routes it's being registered with. When u use router.beforeEach, you are telling it to secure every single route.

As our guard is just like any other guard, it isn't aware of routes it should or should not protect. Instead, the consumer should ensure they use our guard only on the routes they want to be protected.

What you want, is something along the lines of this (which is actually not related to our plugin, it's more related to setting up guard using router.beforeEach, that you don't want to be registered with every route):

router.beforeEach((to, from) => {
  if (to.path === '/login') {
    return true;
  }
  return authGuard(to, from);
})

Keep in mind that, after navigating to Auth0 to login with Auth0, the user will be redirected back to your application. At that time, the user is still not considered authenticated as our SDK still needs to exchange the tokens before being considered authenticated.
This means Auth0 will need to be redirected back to a public route.

The reason why you are getting an infinite redirect loop is that I think you are redirecting back to your application's root address, which is secured, which will redirect back to Auth0 because the user is not authenticated yet.

A way around this is to create a public (not protected) /callback route that doesn't do nothing, and use this as the redirect_uri when configuring our plugin.

[jpmeijers]

Thanks a lot for this answer. It fills in the gap between the Vue Router docs and the Auth0 tutorial.

What you explain about the redirect after login makes sense. I tested this now and it seems to work even if the root is not public. But for better user experience it would anyway make sense to make the root and /login both public.