Auth-module: Token expired

[Torone]

Version

v4.8.1

Reproduction link

http://sorry-no-link

Steps to reproduce

• Wait for a API token to be expired
• Only errors are shown...

What is expected ?

The user should be logged out, token cleared from cookies/local storage/etc. It should be reactive.

What is actually happening?

I can see the user logged in, the store contains all the user information, navigating on a page that require a user to be logged in do nothing, the page run, try to fetch data with an invalid token, it return error 401, nothing happen.
I tried to create a custom middleware but I can not logout the user manually. It is just broken/stuck.

Additional comments?

It would be nice to have an example about how to handle situations like this.

_{This bug report is available on Nuxt community (#c395)}

[ChanningDefoe]

All the requests are using axios.You can use the nuxtjs/axios module to handle 401 request errors: https://axios.nuxtjs.org/extend.

[Torone]

It is what I'm trying to do but $auth logout doesn't work, the token and the vuex user object not cleared.

[gkkirilov]

@ChanningDefoe The problems is that the auth module should clear its internal storage from the current token and not make subsequent requests with an invalid token

[ChanningDefoe]

@gkkirilov @Torone Try to set resetOnError: true in your options.

[Torone]

@ChanningDefoe Tried and it looks like it does nothing...

[alexanderniebuhr]

Hey guys,

resetOnError indeed does nothing.
We also want to auto-redirect to login page when cookie expires

Are they any new information?

[Torone]

Also, setting the cookie maxAge to a few seconds (just for testing) it is clearly visible that the cookie is deleted correctly. But navigating to a "protected" page where a middleware is looking for loggedIn, it is always true. How can this be if the token doesn't exist anymore? Shouldn't this also update the vuex store automatically?
It would be nice to receive some help with some real working config example.

[Torone]

Since this is still not fixed... Is there a clean way to intercept and clear the store on 401, on the documentation I can not see anything related to this.

$axios.onError(error => {
    if (error.response.status === 401 && error.response.statusText === 'invalidToken') {
      // clear auth here (vuex, local storage, cookies) how?
      redirect('/login')
    }
  })

[MathiasCiarlo]

Automatic logout on expiration if refresh is impossible is being handled in #361 and #457 :)

[ladrua]

@Torone if you create an plugin, and add something like:

export default function ({ $axios, app, redirect }) {
  $axios.onError((error) => {
    const code = parseInt(error.response && error.response.status)
    if (code === 401) {
      app.$auth.logout()
      redirect('/login')
    }
  })
}

I guess it is not ideal, I might get a 401 because I am trying to access some other endpoint I'm not authorized to go to. Look very much forward to refresh token support @MathiasCiarlo

[marco-machado]

Since this is still not fixed... Is there a clean way to intercept and clear the store on 401, on the documentation I can not see anything related to this.

$axios.onError(error => {
    if (error.response.status === 401 && error.response.statusText === 'invalidToken') {
      // clear auth here (vuex, local storage, cookies) how?
      redirect('/login')
    }
  })

Here's how I managed to reset the token in a plugin. Hope it helps.

export default function({ app, $axios }) {
  $axios.onError((error) => {
    if (error.response && error.response.status === 401) {
      app.$auth.reset();
    }

    return Promise.reject(error);
  });
}

[alexanderniebuhr]

Yes it might be a solution to implement custom onError function.

However this does not help with most Projects, since many links do not make any new request to the server. However you still want the user to automatically logout. Not just when he "real" navigates, also when he is just moving in the SPA

Something with setTimeout for the expiration Timestamp to trigger logout function could be one possible workaround. Haven't any look with bulletproof solutions.

[codeofsumit]

I also think a 401 in axios is not enough to reset the token. If a user tries to access a resource he/she's not authorized for, e.g. a private document of another user through a link, this also throws a 401. The user token is still valid though.
I would expect the auth module to reset the token when the authorization endpoint (in auth0's case /userinfo) returns 401. Not axios overall.

[JoaoPedroAS51]

Hi! Refresh support was merged to dev branch, please use dev branch until we release v5 :)

We also fixed local scheme, so now it should reset propely if token has expired.

Updated docs: https://dev.auth.nuxtjs.org

Note: We don't reset the token based on 401 in axios. We check the token expiration.

[codeofsumit]

@JoaoPedroAS51 is there an outlook when v5 is expected? Really looking forward to it 🙌

[Edmund1645]

Also, setting the cookie maxAge to a few seconds (just for testing) it is clearly visible that the cookie is deleted correctly. But navigating to a "protected" page where a middleware is looking for loggedIn, it is always true. How can this be if the token doesn't exist anymore? Shouldn't this also update the vuex store automatically?
It would be nice to receive some help with some real working config example.

Quoting @Torone 's statement, this is what I want to achieve, I want to auto log the users out even when they're idle. at the moment the only way to know if their token is expired is when they navigate to a route that makes a network request and the API returns a 401 error, then i use that to log users out.

For me, this is a bad UX because I imagine them filling a form and then submitting only for users to be logged and having to start all over.

[JoaoPedroAS51]

Closing here, as this issue is fixed in auth v5.

[JoaoPedroAS51]

@codeofsumit Sorry, no ETA yet for an official release. But v5 is already available through @nuxtjs/auth-next and it's recommened to use it instead of v4. See status and #893

[JoaoPedroAS51]

@Edmund1645 I would suggest creating a custom scheme, in order to logout users when they're idle.

Note: Navigating to a protected route when token has expired will now logout users in v5