Securing JWTs in React Applications: Storage Options & Best Practices

When working with JWTs (JSON Web Tokens) in a React.js application, it's crucial to store them securely to prevent unauthorized access and potential security issues such as cross-site scripting (XSS) and cross-site request forgery (CSRF). Here are the common places to store JWTs in a React application along with their pros and cons:

Local Storage
- Pros:
  - Easy to implement.
  - Persistent storage: Tokens remain available even after the user closes the browser.
- Cons:
  - Vulnerable to XSS attacks. If an attacker injects malicious scripts into your application, they can access tokens stored in local storage.
```
// Store JWT
localStorage.setItem('token', jwt);

// Retrieve JWT
const token = localStorage.getItem('token');
```
Session Storage
- Pros:
  - Easy to implement.
  - More secure than local storage against XSS as tokens are only available for the browser session.
- Cons:
  - Tokens are lost when the user closes the browser, so it doesn't support persistent sessions.
```
// Store JWT
sessionStorage.setItem('token', jwt);

// Retrieve JWT
const token = sessionStorage.getItem('token');
```
HTTP-Only Cookies
- Pros:
  - More secure than local or session storage as cookies can be marked as HttpOnly, making them inaccessible to JavaScript.
  - Support for same-site attribute to help prevent CSRF attacks.
- Cons:
  - Slightly more complex to implement as it requires server-side changes.
  - Need to handle CSRF tokens separately unless using the SameSite attribute.
```
// Set cookie from server (Set-Cookie header)
// e.g., Set-Cookie: token=<jwt>; HttpOnly; Secure; SameSite=Strict
```
```
// Retrieve JWT from cookie (cannot use JavaScript if HttpOnly)
// Typically, the cookie is automatically sent with each HTTP request based on its domain and path settings.
```

Recommended Approach

Using HttpOnly cookies is the preferred approach in scenarios where security is a primary concern, as it helps mitigate the risk of XSS attacks by preventing JavaScript from accessing the tokens directly. This comes with the trade-off of having to configure server-side mechanisms to manage these cookies.

If ease of implementation is more important and the application environment is relatively secure, local or session storage can be more straightforward solutions. In these cases, it's crucial to ensure that your application is well-protected against XSS attacks.

Here's an example of how you could configure JWTs using HttpOnly cookies in an Express.js backend:

// Express.js example to set HttpOnly cookie
app.post('/login', (req, res) => {
   const { username, password } = req.body;
   
   // Authenticate user and generate JWT
   const jwt = generateJWT(username);

   // Set JWT in HttpOnly cookie
   res.cookie('token', jwt, { httpOnly: true, secure: true, sameSite: 'Strict' });
   res.status(200).send('Logged in');
});

In your React app, you don't need to handle the token directly. Instead, you'll rely on the cookies being sent automatically with each request:

// Fetching data with the token automatically included in the request
fetch('/api/protected', {
  method: 'GET',
  credentials: 'include', // Ensuring cookies are included in the request
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

In summary, while storing JWTs in local and session storage is easier to implement, using HttpOnly cookies is the most secure method to store JWTs in a React application, mitigating the risk of XSS attacks.

Securing JWTs in React Applications: Storage Options & Best Practices

Recommended Approach

Dive deeper: