Storing Auth Tokens

Deep Dive into Storing Auth Tokens and Refresh Tokens on the Client Side

Introduction

When building secure web applications, managing authentication tokens and refresh tokens is crucial. These tokens need to be stored securely on the client side to prevent unauthorized access and potential security breaches. This note explores the best practices for storing auth tokens and refresh tokens, the risks associated with different storage methods, and how HTTP secure cookies provide a secure storage solution.

Auth Tokens and Refresh Tokens

Auth Tokens:
- Purpose: Auth tokens (often JWTs) are used to authenticate a user and grant access to protected resources.
- Lifespan: They typically have a short lifespan to minimize the risk of misuse.
Refresh Tokens:
- Purpose: Refresh tokens are used to obtain new auth tokens without requiring the user to re-authenticate.
- Lifespan: They have a longer lifespan compared to auth tokens.

Storage Options

Local Storage:
- Method: Storing tokens in the browser’s local storage.
- Risk: Local storage is accessible through JavaScript, making it vulnerable to XSS (Cross-Site Scripting) attacks. If an attacker injects malicious scripts into your application, they can steal tokens stored in local storage.
HTTP Secure Cookies:
- Method: Storing tokens in HTTP-only secure cookies.
- Advantages: Cookies are not accessible via JavaScript, which mitigates the risk of XSS attacks. Additionally, secure cookies are only sent over HTTPS, providing an extra layer of protection against man-in-the-middle attacks.

HTTP Secure Cookies

Definition:

HTTP Secure Cookies: Cookies that are marked with the Secure attribute, ensuring they are only sent over HTTPS connections. Additionally, the HttpOnly attribute makes them inaccessible to JavaScript, providing protection against XSS attacks.

Why Use HTTP Secure Cookies:

Security: By preventing JavaScript access to cookies, the HttpOnly attribute helps protect against XSS attacks. The Secure attribute ensures that cookies are only transmitted over secure HTTPS connections, protecting against interception and man-in-the-middle attacks.
Storage of Sensitive Data: Ideal for storing refresh tokens, as they need to be securely stored for longer periods.

Example:

Set-Cookie: refreshToken=abcd1234; HttpOnly; Secure; SameSite=Strict; Max-Age=3600

Best Practices for Storing Tokens

Storing Auth Tokens:
- Short-Lived: Store auth tokens in memory (e.g., JavaScript variables) instead of persistent storage. This ensures they are cleared when the page is refreshed or the browser is closed, reducing the risk of exposure.
Storing Refresh Tokens:
- HTTP Secure Cookies: Store refresh tokens in HTTP secure cookies to protect against XSS attacks. Set the HttpOnly and Secure attributes to enhance security.
CSRF Protection:
- Use anti-CSRF tokens to protect against Cross-Site Request Forgery (CSRF) attacks. These tokens should be included in all forms and AJAX requests that perform state-changing operations.
Token Expiry and Rotation:
- Implement short lifespans for auth tokens and regular rotation of refresh tokens to minimize the impact of token theft.

Implementing Secure Token Storage

Setting HTTP Secure Cookies in Server:

When a user authenticates, the server issues a refresh token and sets it in an HTTP secure cookie.

const express = require('express');
const app = express();
 
app.post('/login', (req, res) => {
  // Authenticate user
  const refreshToken = generateRefreshToken(user);
 
  // Set refresh token in HTTP-only, secure cookie
  res.cookie('refreshToken', refreshToken, {
    httpOnly: true,
    secure: true,
    sameSite: 'Strict', // or 'Lax' depending on your requirements
    maxAge: 24 * 60 * 60 * 1000, // 1 day
  });
 
  res.send({ authToken });
});

Using Refresh Tokens to Obtain New Auth Tokens:

When the auth token expires, the client sends a request to the server with the refresh token (which is automatically included in the request due to the cookie).

app.post('/refresh-token', (req, res) => {
  const refreshToken = req.cookies.refreshToken;
 
  // Verify and refresh tokens
  if (isValidRefreshToken(refreshToken)) {
    const newAuthToken = generateAuthToken(user);
    res.send({ authToken: newAuthToken });
  } else {
    res.status(401).send('Unauthorized');
  }
});

Summary

Storing auth tokens and refresh tokens securely is crucial for protecting user data and maintaining the integrity of your web application. While local storage is convenient, it is vulnerable to XSS attacks. HTTP secure cookies provide a safer alternative by ensuring that tokens are only accessible via secure HTTPS connections and are not exposed to JavaScript. By following best practices, such as using HTTP secure cookies for refresh tokens, storing auth tokens in memory, and implementing CSRF protection, you can enhance the security of your token storage strategy and safeguard your application against common web vulnerabilities.

Jonas Notes

Explorer