How to get HTTP-only cookie in React?

Question

I'm currently developing a MERN stack application and the authentication I use is JWT and saving it in my cookie. This is how I send the cookie after the user login.

              res
                .cookie("token", token, {
                  httpOnly: true,
                  secure: true,
                  sameSite: "none",
                })
                .send();

And I am logging in the user by getting the "token" cookie in my backend. However, I implemented Redux with this application and every time I refresh the page, it automatically logs out. What I want is to detect in my front-end(React) the "token" cookie in my browser and I can't get it. I've tried using npm js-cookie and still can't get it. Is there a way to get the "token" cookie? Or use redux-persist based on what I've read? Please help, thanks.

Answer 1

Like already explained by an other answer, you can't access httpOnly cookies via JS.

I personally would recommend you to use a diffrent approach. Sure, cookies and httpOnly sounds like a good Idea, and you may think that cookies are a thousand times better than localStorage, but at the end, it doesn't really matter if you store the token in localStorage or in a cookie. You could argue about cookies vs localStorage for hours, but both have their vulnerabilities (e.g.: cookies: CSRF-Attacks (https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html), localStorage: XSS).

Now, while you could theoretically use localStorage here, I am not advocating using it. I would recommend you to just ditch both cookies and localStorage and store the JWT in your app-state (be it with the context-api, redux etc.) and send the JWT with an authentication header with all the request you make from the front to backend. Of course your backend would then need to verify that token. You could, for example, just implement an authentication middleware that you add to all the routes that need authentication. Expiration is also really easy because you don't have to sync the expiration of the JWT and the cookie anymore. Just set the expiration on the JWT and the verification of that token in the auth middleware will catch that. If you want to know why this method is safe against CSRF-attacks, look here: Where to store JWT in browser? How to protect against CSRF?

Here are some good articles, I would really recommend you read a bit of the first one: https://hasura.io/blog/best-practices-of-using-jwt-with-graphql/ https://medium.com/@ryanchenkie_40935/react-authentication-how-to-store-jwt-in-a-cookie-346519310e81

Edit: Why you may not want to use JWT's for user authentication.

While JWTs have been a popular choice for user authentication, several factors favor the use of traditional HTTP-only cookie sessions.

Key Considerations:

1. In the event an attacker obtains a JWT, there is no straightforward method to revoke their access. Conversely, with cookies, it is possible to invalidate the session. While storing the JWT in React state may offer some safety over using localStorage, the risk remains that an attacker could gain access to the token. Even if you opt to store JWTs on the server-side and perform validation, this negates the stateless advantage of using JWTs, prompting the question of why not simply use traditional sessions?

2. JWTs are inherently designed for short-lived tokens, often with lifespans of 5 minutes or less. For session management purposes, this duration proves inadequate. Additionally, there are security concerns associated with JWTs. You can read more on that here.

In conclusion, stateless JWTs lack the capacity for invalidation or updates and may potentially pose security concerns depending on their storage location. Conversely, stateful JWTs resemble session cookies in functionality but may lack the proven and well-vetted implementations as well as robust client support.