Nuxt Middleware with Firebase and FirebaseUI: Error: Redirected when going from "/anything" to "/login" via a navigation guard

Question

Nuxt SSR app using FirebaseUI to handle auth flows. Logging in and out works perfectly. When I add Middleware to check auth state and redirect if not logged in I get this error:

Error: Redirected when going from "/list-cheatsheets" to "/login" via a navigation guard.

middleware/auth.js

export default function ({ store, redirect }) {
    // If the user is not authenticated
    if (!store.state.user) {
      return redirect('/login')
    }
  }

There is absolutely no other redirecting that I can find in the app....

I have been digging and trying things for hours. Others who get this error that I have found aren't using Nuxt and none of those solutions work.

Answer 1

As there is a bounty one cannot mark it duplicate thus following up is a copy of my answer at Redirecting twice in a single Vue navigation

---

tldr: vm.$router.push(route) is a promise and needs to .catch(e=>gotCaught(e)) errors.

---

This will be changed in the next major @4

---

Currently@3 errors are not distinguished whether they are NavigationFailures or regular Errors .

The naive expected route after vm.$router.push(to) should be to . Thus one can expect some failure message once there was a redirect. Before patching router.push to be a promise the error was ignored silently . The current solution is to antipattern a .catch(...) onto every push, or to anticipate the change in design and wrap it to expose the failure as result.

Future plans have it to put those informations into the result:

  let failure = await this.$router.push(to);
  if(failure.type == NavigationFailureType[type]){}
  else{}

---

Imo this error is just by design and should be handled:

hook(route, current, (to: any) => { ... abort(createNavigationRedirectedError(current, route)) ...}

So basically if to contains a redirect it is an error, which kinda is equal to using vm.$router.push into a guard.

To ignore the unhandled error behaviour one can pass an empty onComplete (breaks in future releases):

vm.$router.push(Route, ()=>{})

or wrap it in try .. catch

try {

  await this.$router.push("/")
} catch {

}

which prevents the promise to throw uncaught .

---

to support this without redirecting twice means you put the guard to your exit:

let path = "/"
navguard({path}, undefined, (to)=>this.$router.push(to||path))

which will polute every component redirecting to home

---

btw the router-link component uses an empty onComplete

---

Assumption that redirecting twice is not allowed is wrong.

Answer 2

Nuxt SSR app using FirebaseUI to handle auth flows. Logging in and out works perfectly. When I add Middleware to check auth state and redirect if not logged in I get this error:

Error: Redirected when going from "/list-cheatsheets" to "/login" via a navigation guard.

middleware/auth.js

export default function ({ store, redirect }) {
    // If the user is not authenticated
    if (!store.state.user) {
      return redirect('/login')
    }
  }

There is absolutely no other redirecting that I can find in the app....

I have been digging and trying things for hours. Others who get this error that I have found aren't using Nuxt and none of those solutions work.