How do I implement a secure JWT-based authentication flow in a MERN stack application?

All answers to this question.

Never store sensitive tokens in LocalStorage; it is accessible by any JavaScript running on your page, making you extremely vulnerable to XSS attacks. The industry standard is to use an HttpOnly and Secure cookie. This means the browser will send the token automatically with every request to your API, but your client-side scripts won't be able to read it. To prevent CSRF attacks, you should also implement a CSRF token or use the SameSite: Strict attribute on your cookie. This setup ensures that even if a malicious script runs on your site, it cannot steal the user's session token, providing a much higher level of security for your users.

   Answered 2025-02-15 by Melissa Thorne

Melissa, if the cookie is HttpOnly, how does the React frontend know if the user is logged in to show the "Profile" button? Do we need to call a /me endpoint on every refresh?

   Answered 2025-02-20 by Kevin Blake

• Kevin, exactly. On the initial load, your app should hit an endpoint that verifies the cookie and returns basic user info (like name and role) to store in your React state (Redux or Context). For subsequent refreshes, if the state is empty, you re-run that check. While it sounds like an extra request, it’s a very small price to pay for security. You can also store a non-sensitive "isLoggedIn" boolean in LocalStorage to show UI elements instantly, but the actual "protected" data should always wait for the server to validate that HttpOnly cookie.

     Commented 2025-02-25 by Steven Graham

Make sure to set a reasonable expiration time for your tokens. Short-lived access tokens with longer-lived refresh tokens are the best way to balance security and user convenience.

   Answered 2025-03-01 by Rebecca Moore

• This is a great point. Token rotation and short expiration windows are critical for limiting the damage if a session is somehow compromised.

     Commented 2025-03-05 by Christopher Vance