reactjs - Session Management problem with http-only cookies Node.js,React

Question

I just confused about session management. For session management , currently im using http-only cookies to store my JWT but these cookies cannot be reached by everyone because of browser's cookie settings which I think is bad for the user experience. So when i search about alternative ways like localstorage. I learned that you are not secure enough in these ways. What would you suggest me to do with the issue I mentioned above? Should i change entire auth system to server-side or any ideas ?

//AUTHENTICATE

res.cookie('token', token, {
  httpOnly: true,
  secure: true,
  sameSite: 'None',
  maxAge: 7 * 24 * 6 * 604800,
});

//LOGOUT

res.cookie('token', '', {
  httpOnly: true,
  secure: true,
  sameSite: 'None',
  maxAge: 1,
});
res.clearCookie('token');

question from:https://stackoverflow.com/questions/65651706/session-management-problem-with-http-only-cookies-node-js-react

Answer 1

You should use httpOnly cookie to prevent access from JS, (with xss attach you can execute JS on other users session).

My suggestion (which us base on The Ultimate Guide to handling JWTs on frontend clients) is to use 2 kind of tokens:

1. Refresh Token - stored on httpOnly cookie, is used to update the accessToken only, it is valid for long period (no recommended longer than 1 day)
2. Access Token - stored in memory, attached to each request that needs auth. valid for short period of time (10 mins).

The idea works like this:

1. User logins, your server validates the credentials and generate an httpOnly cookie with the refreshToken and returns as a response the accessToken.
2. Your client app sores the accessToken on some class instance (when used with Axios you can attach it as base Authorization header to all requests).
3. When your app makes a request, it adds the AccessToken as the Authorization header, if the AccessToken expires your api will return 403 UnAuthorized, your client app makes a request to special end point /auth/token with the httpOnly cookie which holds refreshToken, this end point validates the refreshToken, and returns a new accessToken with expiration time of 10mins (which your client app updates the base Auth header with), then your app can retry the previous failed request with the new accessToken.

With this method, there is no access to any kind of tokens from outside of your app. The refreshToken is not accessible at all to your js and the accessToken is held in memory, only if your app has some flaw it will be exposed, and even if the attacker stole it, it is valid only for 10 mins (without the ability to get a new one because it doesn't have the refreshToken)

For more details read the article I've added.