Check auth status of users in a Vue.js Frontend with an HTTPOnly JWT Token in ASP.NET Web API

Question

I'm building a web application with an ASP.NET Web API backend and a Vue.js frontend. I've implemented JWT authentication and am storing the access token in an HTTPOnly cookie for security reasons. However, I'm facing a challenge in checking users auth status on the frontend.

Since the token is HTTPOnly, it's inaccessible from JavaScript, including Vue.js. This means I can't directly check if a user is authenticated on the frontend.

My question is how can I effectively check users auth status on the Vue.js frontend while maintaining the security of the HTTPOnly JWT token? Are there any recommended strategies or patterns to achieve this?

You can have a dedicated endpoint for checking auth status. If user info fetching is lightweight or you use OPTIONS method, you can use it, for instance. You can ping it occasionally but there may be no need for that. As long as a user successfully logged in, consider them logged in. When you receive 401/403 from another api call, you need to make another request to that endpoint to make sure it's authentication and not authorization problem, then change client side status to guest. Or skip the extra req if there's clear distinction between 401 and 403 in your api — Estus Flask
– Estus Flask, Commented Nov 12, 2024 at 13:11
The question is too broad for SO, try softwareengineering.stackexchange.com if you still have unsolved questions — Estus Flask
– Estus Flask, Commented Nov 12, 2024 at 13:16

Anubrij Chandra · Accepted Answer · 2024-11-12 13:12:02Z

0

you can create a authorized endpoint in web api like GetAuthStatus and validate it on client side on route change. it recommended to keep the token in HttpOnly cookie.

Something like this

[Authorize]
[HttpGet]
public IActionResult GetAuthStatus()
{
     return Ok(new { isAuthenticated = true, userName = User.Identity.Name 
     });
}

answered Nov 12, 2024 at 13:12

Anubrij Chandra

1,4422 gold badges15 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Check auth status of users in a Vue.js Frontend with an HTTPOnly JWT Token in ASP.NET Web API

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related