Redirected when going from "/login" to "/" via a navigation guard.

[mtzrmzia]

When the user logout redirect to the login page, the redirect happens but i got the Redirected when going from "/login" to "/" via a navigation guard. error

nuxt.config.js

  auth: {
    strategies: {
      local: {
        endpoints: {
          login: { url: 'api/auth/login', method: 'post' },
          logout: { url: 'api/auth/logout', method: 'post' },
          user: { url: 'api/user', method: 'get', propertyName: 'user' }
        },
        tokenRequired: false,
        tokenType: false,
      }
    },
    redirect: {
      logout: '/login',
    },
  },
  router: {
    middleware: ['auth']
  },

login.vue

export default {
  layout: 'auth',
  auth: 'guest',
}

logout button

    async logout() {
      await this.$auth.logout()
    }

[Dimidel]

Same issue here. It's work well but I have the same error in console. My config :

auth: {
    redirect: {
      login: '/login',
      logout: '/login',
      callback: false,
      home: '/'
    },
    strategies: {
      local: {
        endpoints: {
          login: {
            url: '/login',
            method: 'post',
            withCredentials: true,
            headers: {
              'X-Requested-With': 'XMLHttpRequest',
              'Content-Type': 'application/json'
            }
          },
          logout: {
            url: '/logout',
            method: 'post',
            withCredentials: true,
            headers: {
              'X-Requested-With': 'XMLHttpRequest',
              'Content-Type': 'application/json'
            }
          },
          user: {
            url: '/api/user',
            method: 'get',
            propertyName: false,
            withCredentials: true,
            headers: {
              'X-Requested-With': 'XMLHttpRequest',
              'Content-Type': 'application/json'
            }
          }
        },
        tokenRequired: false,
        tokenType: false
      }
    }
  },
  router: {
    middleware: ['auth']
},

[mtzrmzia]

Same issue here. It's work well but I have the same error in console. My config :

auth: {
    redirect: {
      login: '/login',
      logout: '/login',
      callback: false,
      home: '/'
    },
    strategies: {
      local: {
        endpoints: {
          login: {
            url: '/login',
            method: 'post',
            withCredentials: true,
            headers: {
              'X-Requested-With': 'XMLHttpRequest',
              'Content-Type': 'application/json'
            }
          },
          logout: {
            url: '/logout',
            method: 'post',
            withCredentials: true,
            headers: {
              'X-Requested-With': 'XMLHttpRequest',
              'Content-Type': 'application/json'
            }
          },
          user: {
            url: '/api/user',
            method: 'get',
            propertyName: false,
            withCredentials: true,
            headers: {
              'X-Requested-With': 'XMLHttpRequest',
              'Content-Type': 'application/json'
            }
          }
        },
        tokenRequired: false,
        tokenType: false
      }
    }
  },
  router: {
    middleware: ['auth']
},

I thought it was just happening to me, because I've already tried it in two new projects from scratch and it's the same problem

[darkons]

I got this behaviour too, don't know how to solve.

On the other hand you guys are setting router middleware inside auth object. You must set it globally

[mtzrmzia]

the router middleware it's outside off the auth object, i dont know if this is either an error or what beacuse the redirect works

[claudiofabiao]

Same issue here. Using latest version of @nuxtjs/auth-next package.

[MrJmpl3]

Somebody can help to this issue, reproduce the issue using CodeSandbox and Mocky? (https://designer.mocky.io)

Example: https://codesandbox.io/s/nuxt-starter-n4b6v-n4b6v

That's help to check the config and files and why the bug happen.

[mtzrmzia]

These are the versions I'm using

  "dependencies": {
    "@nuxtjs/auth": "^4.9.1",
    "@nuxtjs/axios": "^5.3.6",
    "nuxt": "^2.13.0"
  }

And this is the example with the issue: https://codesandbox.io/s/nuxt-starter-n4b6v-igmc4 in the console the error appears when i login and then logout

[conseromarketing]

Having the same issue 👍

[vejja]

Same

[ponnex]

Same hope this get's fixed or the error gets ignored at least

[Dimidel]

I finally found a solution to avoid this error:

1. Add home: false to the redirect config

   redirect: {
   login: '/authentication/login',
   logout: '/authentication/login',
   callback: false,
   home: false
   },

2. Add the redirect after being logged. In my case :

   async login() {
   try {
   await this.$axios.$get('/sanctum/csrf-cookie')
   await this.$auth.loginWith('local', { data: this.form })
   (...)
   this.$router.push({ path: '/dashboard' })
   } catch {
   (...)
   }
   }

Hope this will help

[basiteaal]

Still same issue here.

Login works excellent including the me/user call. URL in address bar is changed as we would expect; the content is loaded as well but the only thing visible is the login page. However; if I reload I keep the login state (= good) and the token as well and I'll see the correct content.

What to do?

Thanks.

[rmirabelle]

Same. The workaround works well. But of course, having to manually redirect after login sort of defeats the purpose.

[malobaidan]

well I was facing the problem fixed it by by converting the method to async await, the router was trying the push the path and did not wait for the creds to be received from the server

[StanleyMasinde]

well I was facing the problem fixed it by by converting the method to async await, the router was trying the push the path and did not wait for the creds to be received from the server

I didn't know it was a promise

[mohamadrezahedayati]

I finally found a solution to avoid this error:

1. Add home: false to the redirect config

redirect: {
  login: '/authentication/login',
  logout: '/authentication/login',
  callback: false,
  home: false
},

1. Add the redirect after being logged. In my case :

async login() {
  try {
    await this.$axios.$get('/sanctum/csrf-cookie')
    await this.$auth.loginWith('local', { data: this.form })
    (...)
    this.$router.push({ path: '/dashboard' })
  } catch {
    (...)
  }
}

Hope this will help

this solution will remove navigation guard. 😲

[kartalsez]

I finally found a solution to avoid this error:

1. Add home: false to the redirect config

redirect: {
  login: '/authentication/login',
  logout: '/authentication/login',
  callback: false,
  home: false
},

1. Add the redirect after being logged. In my case :

async login() {
  try {
    await this.$axios.$get('/sanctum/csrf-cookie')
    await this.$auth.loginWith('local', { data: this.form })
    (...)
    this.$router.push({ path: '/dashboard' })
  } catch {
    (...)
  }
}

Hope this will help

When I add home: false field, the problem was solved. Thnx :)

[kempsteven]

Any one has a fix to this yet?

The solution above works but it will remove the navigation guard.

[kartalsez]

Hi @kempsteven. @mohamadrezahedayati's solution worked on my nuxtjs project. My nuxt.config.js auth part is like this:

auth: {
    redirect: {
      login: '/login',
      logout: '/login',
      home: false
    },
    strategies: {
      local: {
        endpoints: {
          login: { url: '/api/v1/user/sign_in', method: 'post', propertyName: 'user.auth_jwt' },
          logout: { url: '/api/v1/user/sign_out', method: 'delete' },
          user: { url: '/api/v1/user/me', method: 'get', propertyName: 'user' }
        },
        tokenName: 'auth-token'
      }
    }
  }

[kempsteven]

@kartalsez Yes i believe it should work, but that will remove the navigation guard, try changing your url to /login when youre authenticated

[may17]

@kempsteven maybe you could use an own middleware for public routes to solve the issue. Something like that:

// ./middleware/public.js

export default function ({ store, redirect }) {
  if (store.getters.isAuthenticated) {
    return redirect('/')
  }
}

Anyway. Thanks @Dimidel. That solves the error for the moment but as mention before it ships some drawbacks everyone should keep in mind.

[rognales]

I managed to remove the error after adding home: false. But i still get NuxtError is not defined which is there with the original error.

Vue Devtools shows that ```loggedIn:true```` while my token already expired. If i explicitly click logout, then no issue until token expired again.

[AlexeyKot]

Same problem

[daomtthuan]

Hello everyone who has this issue or same this! The reason of this issue comes from the router of latest version Nuxt that is not compatible to router of Auth module. We can fix this by this way: Step 1: disabled rediect to home of Auth module config

// nuxt.config.js (or nuxt.config.ts)
auth: {
    redirect: {
      home: false,
    },
}

Step 2: in login form, you must redirect after login successful by yourself

// Call login method
// Then check callback rediect
if (this.$auth.$state.redirect) { // If rediect to login page from page that is required authentication (auth midleware), go that page
  this.$router.push(this.$auth.$state.redirect);
} else { // Otherwise, go to home page
  this.$auth.redirect('home');
}

Hope useful to you!

[ayumitamai97]

As stated in the nuxt auth docs, both this.$auth.loggedIn and this.$store.state.auth.loggedIn indicates whether the user is authenticated or not. They seem to always return the same value.

I don't know why but sometimes they return different values against expectation.

export default {
  data() { ... },
  methods: {
    async login() {
      await this.$auth.loginWith('local', {
        data: {
          auth: { ... }
        }
      }).then((response) => {
        // do something
      }, (error) => {
        // handle errors
      });
      const token = await this.$auth.getToken('local')
      await this.$apolloHelpers.onLogin(token)
      console.log('this.$store.state.auth.loggedIn: ' + this.$store.state.auth.loggedIn)
      console.log('this.$auth.loggedIn: ' + this.$auth.loggedIn)
    }
  }
}

Is this related to the incompatibility?

The reason of this issue comes from the router of latest version Nuxt that is not compatible to router of Auth module.

---

Here is a part of my package.json:

{
  "dependencies": {
    "@babel/core": "^7.11.6",
    "@babel/preset-env": "^7.12.7",
    "@nuxtjs/auth": "^4.9.1",
    "@nuxtjs/axios": "^5.12.2",
    "nuxt": "^2.14.7",
  },
  "devDependencies": {
    "@nuxt/typescript-build": "^2.0.3",
  }
}

---

EDIT: https://github.com/nuxt-community/auth-module/issues/437 seems relevant

[Pacheco95]

In my case it's not redirecting neither in login or logout but the requests are being sucessfuly called

async signIn() {
  this.loading = true
  await sleep(1000)
  try {
    await this.$auth.loginWith('local', {
      data: {
        email: this.email,
        password: this.password,
      },
    })
  } catch (e) {
    if ((e as AxiosError).isAxiosError) {
      this.error = (e as AxiosError).response?.status
    }
  } finally {
    this.loading = false
  }
}

// logout page
<template>
  <div></div>
</template>

<script>
export default {
  created() {
    this.$auth.logout()
  },
  layout: 'auth',
}
</script>

// nuxt.config.js
{
  router: {
    middleware: ['auth'],
  },

 auth: {
    redirect: {
      home: '/',
      login: '/auth/signin',
      logout: '/auth/signin',
    },
    watchLoggedIn: true,
    strategies: {
      local: {
        token: {
          property: 'authToken',
        },
        user: {
          property: 'user',
        },
        endpoints: {
          login: { url: '/auth/dash-login', method: 'post' },
          logout: { url: '/auth/logout', method: 'put' },
          user: { url: '/auth/self', method: 'get' },
        },
      },
    },
  },
}

https://user-images.githubusercontent.com/12385467/103926119-43d35680-50f7-11eb-85f3-5ca2f0d7c825.mp4

[Pacheco95]

I found the problem. As you can see in the video above, there is an error about duplicated store namespaces. The namespaces are:

@Module({ name: 'auth/signin', stateFactory: true, namespaced: true })
@Module({ name: 'auth/recover-password', stateFactory: true, namespaced: true })

I jsut changed them to

@Module({ name: 'signin', stateFactory: true, namespaced: true })
@Module({ name: 'recover-password', stateFactory: true, namespaced: true })

and now it's working perfectly

[bmulholland]

I've lost the plot here. What's the issue? Just that a console message appears stating an error? I took a look at @MrJmpl3 but I'm not sure what I need to do to reproduce the issue, or even what I'm looking for. And @Pacheco95's solution is code that's not present in this code base?

It would be most helpful if someone could write a concise summary of the problem and what's expected instead. Thanks :)

[toniengelhardt]

Not sure if that helps someone but I had this issue with auth-next 5.0.0-1620773067.c356fed because I added 'auth' to vue-persistedstate. Removing it resolved the problem.

[cvalues]

Hi, same error with the following multilang workround:

file: plugins/auth.js

export default function({app, $auth }) {
  $auth.onRedirect((to, from) => {
    return app.localePath(to);
  })
}

Error: Redirected when going from "/profile" to "/signup" via a navigation guard. middleware: 'auth',

The routing works but the message comes up.

KR

[ed-bbwmc]

I had the same issue when I added custom middleware to the nuxtjs.config.js router.middleware: ['auth', 'backoffice'], the first auth middleware passes because the user is logged and the second middleware backoffice checks if the user has permission to access to backoffice. So it goes into a infinite redirect :D, my solution for now is: logout the user and redirect to login page. This stopped the infinite redirect.

[rognales]

This is my config. Which working as expected. However, i will get The error if, my Auth provider is a bit slow i.e. first request. Subsequent login/logout cycle works as expected. Maybe there's a race condition somewhere?

auth: {
    strategies: {
      'laravelSanctum': {
        provider: 'laravel/sanctum',
        url: 'http://localhost:8000'
      },
    },
    redirect: {
      login: '/login',
      logout: '/login',
      home: '/'
    }
  },

[bmulholland]

I'm still not sure what the problem is here, or if there's any action needed from us. I'm going to close this out, but feel free to keep discussing here. If you find something in the module that needs to change, please open a new issue with specifics about that.

[sundayz]

I can confirm this only happens the first time you log in. If you log out and login again, there's no error.

In my case with Nuxt 2.15.8 and nuxt-auth 5.0.0 the error is logged but the redirects seem to work fine.

The error comes from here, I'm wondering if the loggedIn listener is being called twice, or if it's being called during another redirect?

  this.$storage.watchState("loggedIn", (loggedIn) => {
    if (!routeOption(this.ctx.route, "auth", false)) {
      this.redirect(loggedIn ? "home" : "logout");
    }
  });

[augnustin]

Still have the error with:

    "nuxt": "^2.15.8",
    "@nuxtjs/auth-next": "5.0.0-1642674937.d38a8d7",

Can't find a proper fix, even this solution doesn't work :(

The redirect still works though.

[augnustin]

So I found a workaround this issue along with #205.

Calling app.$auth.redirect('home') would raise the error, so I bypassed this call by using router.push directly.

It may behave slightly differently but until now I haven't found any difference.

Posting it here in case some need it later:

// ~/plugins/authWithRedirects.js

export default function ({ app, store }) {
  const oldLogout = app.$auth.logout.bind(app.$auth)
  const oldLogin = app.$auth.login.bind(app.$auth)

  app.$auth.logout = async (...args) => {
    await oldLogout(...args);
    app.$auth.redirect('logout');
  }

  app.$auth.login = async (...args) => {
    await oldLogin(...args);
    const nextUrl = app.$auth.options.rewriteRedirects && app.$auth.$storage.state.redirect || app.$auth.options.redirect.home;
    app.router.push(nextUrl);
  }
}

And in nuxt.config.js:

  auth: {
    redirect: {
      login: '/login',
      logout: '/login',
      home: '/home',
    },
    rewriteRedirects: true, // this is the default option
    strategies: {
      // ...
    },
    plugins: [
      '~/plugins/authWithRedirects.js',
    ]
  },

Hope it helps

[djflyte]

Hi all. I also got this error, my solution turned out to be the following. I just removed the "await" before

this.$auth.loginWith('local', { data: this.login })

working example

// pages/login.vue

userLogin() {
  this.$auth.loginWith('local', { data: this.login })
    .catch(e => console.error(e))
}

// nuxt.config.js

  auth: {
    redirect: {
      logout: '/login'
    },
    strategies: {
      local: {
        scheme: 'refresh',
        token: {
          property: 'accessToken',
          maxAge: 60 * 30,
          global: true
        },
        refreshToken: {
          property: 'refreshToken',
          data: 'refreshToken',
          maxAge: 60 * 60 * 24 * 7
        },
        user: {
          property: ''
        },
        endpoints: {
          login: { url: '/api/auth/login', method: 'post' },
          refresh: { url: '/api/auth/refresh', method: 'post' },
          user: { url: '/api/auth/user', method: 'get' },
          logout: { url: '/api/auth/logout', method: 'post' }
        }
      }
    }
  }

There are no more errors and navigation guard is working.

[begueradj]

@flytestb nope, that does not make difference (and sense)

[begueradj]

Still facing the same issue by the second half of 2023. And this is not the only long term issue this module suffers from

[kissu]

@begueradj Vue2 is sunsetting anyway, try to slowly migrate towards Nuxt3. 😄 There is no point in maintaining/fixing something obsolete.

[begueradj]

@kissu Indeed, you are right, thank you for the note. It's funny that you are the first Nuxt.js helper and I am the top asker but we never interacted earlier on StackOverflow :)

[kissu]

@begueradj we kinda did on your last answer, even tho not directly yes. You started helping people 3 months ago and I took a break overall at the beginning of the year. 😁

[dariospampinato]

Hi everyone, I had the same problem only on my iPad. I have fixed it going to safari settings and disabled the setting "disable all cookies". I hope that this help you. Dario