auto login on vue application with jwt authentication-CodePudding

I use jwt tokens to authorize actions and to request protected ressources from my backend.

Frontend: Vue, Vue Router, VueX, Vuetify

Backend: Express, jwt tokens, cookieParser

If I successfully call the login route an accessToken and user data (username, email, userId) will be delivered back to the frontend. Additionally to that I send back an httpOnly cookie (containing the refreshToken) and insert the refreshToken on the other side in my database. Via the vuex store I trigger the state.loggedIn to true and assign the user object to state.user. In the same function I save the user object to my localStorage.

To know If a user should be automatically logged in after reopening a new tab, closing window, etc. I read out the data of the localStorage and initiate the vueX store at the beginning with loggedIn and user.

// read out localStorage for the user
const user = JSON.parse(localStorage.getItem('user'));

const initialState = user
    ? { user, loggedIn: true, accessToken: null }
    : { user: null, loggedIn: false, accessToken: null };

Before a protected route will be called I use the beforeEach method on the vue router object to check if my vueX getter auth/getUser returns a user object. If not, the vue router redirects to the login page, so the user can authorize himself again.

const routes = [
  { path: '/login', name: 'Login', component: Login, meta: { authRequired: false }},
  { path: '/home', name: 'Home', component: Home, meta: { authRequired: true }}
]

const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes });

router.beforeEach(async (to, from, next) => {
  if (to.meta.authRequired) {
    let user = VuexStore.getters['auth/getUser'];
    if (!user) {
      next({ path: '/login'});
    }
  }
  next();
});

But, who guarantees that the user object in the localStorage is valid and not just set to true. Is this the way to go, or should I use the received accessToken or the cookie with the refreshToken in any way for the auto login process? Thanks.

CodePudding user response：

Yeah you're almost there. What you're looking for is a refresh token:

https://hasura.io/blog/best-practices-of-using-jwt-with-graphql/#silent_refresh https://auth0.com/blog/refresh-tokens-what-are-they-and-when-to-use-them/

Essentially you want to keep track in your localStorage when the current token expires. And then auto-refresh the token in the background when it's about to. So the user isn't auto-logged out.

Edited to add:

But, who guarantees that the user object in the localStorage is valid and not just set to true. Is this the way to go, or should I use the received accessToken or the cookie with the refreshToken in any way for the auto login process? Thanks.

Your API guarantees that. The second that user will try to interact with your API using an invalid access token, your API throws an error. It won't work. So if a user starts messing with client-side data, that's fine. Just never trust it server-side ;-)