Nuxt 3 middleware from and to routes are always the same

I am facing a strange problem in my Nuxt 3 application. I do want to add my first middleware to my project called auth.ts. This middleware should protect certain pages from users who are not logged in. Basically it should grant access to the requested page to those who are logged in and navigate those who are not logged in to the login page. Quite simple and straight forward.

However, my to and from variables in my middleware are always the same. This results in an infinite redirection in a navigation guard.

This is my middleware:

export default defineNuxtRouteMiddleware((to, from) => {
    const userStore = useUserStore();

    console.log('From auth middleware')
    console.log('to', to)
    console.log('from', from)
    console.log('authenticated', userStore.authenticated)

    // If the user is authenticated, continue to the requested route
    if (userStore.authenticated === true) {
        return navigateTo(to.fullPath);
    }

    // If the user is not authenticated, redirect to the login page
        return navigateTo('/login');
    })

The authenticated variable comes from my Pinia store.

This is how I add the middleware to my /profile page:

definePageMeta({ middleware: ["auth"] });

This is the error I get:

[Vue Router warn]: Detected a possibly infinite redirection in a navigation guard when going from "/profile" to "/profile". Aborting to avoid a Stack Overflow. Are you always returning a new location within a navigation guard? That would lead to this error. Only return when redirecting or aborting, that should fix this. This might break in production if not fixed.

This is the console log I get from my auth.ts middleware:

From auth middleware auth.ts:4:9

to Object { fullPath: "/profile", hash: "", query: {}, name: "profile", path: "/profile", params: {}, matched: (1) […], meta: Proxy, redirectedFrom: {…}, href: "/profile" } auth.ts:5:9

from Object { fullPath: "/profile ", path: "/profile", query: {}, hash: "", name: "profile", params: {}, matched: (1) […], meta: {…}, redirectedFrom: undefined, href: "/profile " } auth.ts:6:9

authenticated true

When the user is not authenticated it successfully navigates the user to the /login page. But when the user is logged in I always get the error. It would make sense to me if I am already on the profile page and then refresh the page.

But I get this error as well when I am at / and navigate to the /profile page. But how can the from variable be /profile when I navigate from the / page to the /profile page?

Kind regards

That's simply because when it's authenticated, instead of continuing the middleware, you redirect to a new instance of current route which will run a new middleware. To fix it, you should return nothing:

export default defineNuxtRouteMiddleware((to, from) => {
  const userStore = useUserStore();

  console.log("From auth middleware");
  console.log("to", to);
  console.log("from", from);
  console.log("authenticated", userStore.authenticated);

  // If the user is authenticated, continue to the requested route
  if (userStore.authenticated === true) {
    return // returns nothing means continue the middleware, instead of redirect again
  }

  // If the user is not authenticated, redirect to the login page
  return navigateTo("/login");
});

From the official docs:

Possible return values are:

• nothing (a simple return or no return at all) - does not block navigation and will move to the next middleware function, if any, or complete the route navigation