Is my Fortify / Sanctum / VueJS authentication secure ?

Hello,

I finally succeeded a Fortify / Sanctum / VueJS authentication.

Now I just wanted to share with you what I have done to be sure that my authentication is secure on the VueJS side.

When I log in, I run this code.

async login() {
  let user = await apiAuth.login(this.user)
  this.$store.commit('auth/setLoggedIn', user)
  this.$router.push('/')
}

And the response is retrieve in the store.

setLoggedIn(state, user) {
	sessionStorage.setItem('auth', JSON.stringify(user))
	state.authenticated = true
	state.user = user
},

Then I use a middleware to test if the route is accessible if not authenticated.

{
  path: '/students',
  name: 'students',
  component: Students,
  meta: {
    requiresAuth: true
  }
},
...
router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!store.getters['auth/isAuthenticated']) {
      next({ name: '/login' })
    } else {
      next()
    }
  } else {
    next()
  }
})

Sure I have protected the routes in the back with Laravel.

When I log out, the authenticated and user variables become null in the store.

Is all that secure ?

And another something about what I'm afraid of if that when I log out, the cookies are yet visible (but have their values modified as I log out) in the browser. I thought the cookies are deleted when I log out. Do you really have to be afraid of the cookies ?

Well ... I need some advice to be sure that my code is secure ;).

Thanks for your help ;).

Vincent

martinbean

3 years ago

Level 80

@vincent15000 Why aren’t you using the actual SPA authentication approach from Sanctum and instead rolling what appears to be your own approach?

All that code’s running in the browser. All someone has to do is toggle that value in your store to become “logged in”.

1 like

carlosmora

3 years ago

Best Answer

Level 4

@martinbean IMHO even you can trick the logged in status in the front, the back is still secured because @vincent15000 did "Sure I have protected the routes in the back with Laravel." , no there is no real risk.

1 like

vincent15000

3 years ago

Level 63

@martinbean The store is only useful for me to check if the user is authenticated so that I can show / hide any menu according to the authenticated status.

What else is possible to show some menu only for authenticated menu ?

I don't understand why you think that I don't use the actual SPA authentication approach. The only thing I have done more than the Sanctum documentation is to have a js variable to show / hide the menu. I didn't want to do anything bad, can you please explain me what is wrong ? (once again I have a lot to learn about security with VueJS)

vincent15000

3 years ago

Level 63

@martinbean Oh perhaps I understand how to do another way.

Instead of keeping a value in the browser (authenticated), I can for every page I need, get the connected user via the API : if I retrieve a user, it's the connected user, otherwise it means that no user is connected.

Is that better ?

But I thought it would be easier to keep an authenticated variable in the store in order to manage to show / hide some datas.

What is finally the best way to do what I need ?

vincent15000

3 years ago

Level 63

@martinbean and @carlosmora Necessarily there has to be a way to show / hide some parts of an app according to if the user is connected or not.

So in the front there has to be some information to filter the display of a menu for example, or a flag or something equivalent. I really don't see any other way to do that.

I have thought about setting the menu dynamically from the backend. Would it be a better solution ?

vincent15000

3 years ago

Level 63

@martinbean @carlosmora Sorry I didn't know which was really the best answer, I had to choose one who best answered to my question, and both have very good advice. I choosed @carlosmora because I understand that, even if my app will be weakened as said @martinbean, there is no real risk because all my API routes are protected, and this last comment let me think that I can keep my code as it is.

But I soon change it to retrieve the navigation menu from an API so that to load only what is need according to the status (connected / not connected) of the user and to generate the frontend routes dynamically.

Please or to participate in this conversation.