Web Security: localStorage vs cookie for storing tokens

The most secure practice is to store the token in the application state. However, it's important to note that if the user refreshes the application, the token will be reset. That can lead to the loss of the user's authentication status.

That is why tokens need to be are stored in a cookie or localStorage/sessionStorage.

localStorage VS cookie for storing tokens

Storing authentication tokens in localStorage can pose a security risk, especially in the context of Cross-Site Scripting (XSS) vulnerabilities, potentially leading to token theft by malicious actors.

Opting to store tokens in cookies, configured with the HttpOnly attribute, can enhance security as they are inaccessible to client-side JavaScript. In our sample app, we utilize js-cookie for cookie management, assuming the real API would enforce the HttpOnly attribute for enhanced security, and the application does not have access to the cookie from the client side.

Implementation using React and Typescript

To implement secure token management in a React TypeScript application with js-cookie, where the real API would enforce the HttpOnly attribute, you can follow these steps:

1. Understanding the Setup

HttpOnly Cookies: These cookies are set by the server and are not accessible via JavaScript, making them more secure against XSS attacks.
Assumption: The server will handle setting and managing HttpOnly cookies. Your client-side code will focus on handling tokens through API responses and requests.

2. React TypeScript Setup

First, ensure you have js-cookie installed:

npm install js-cookie

3. Setting Up Token Management

import React, { createContext, useContext, useEffect, useState } from 'react';
import Cookies from 'js-cookie';

interface AuthContextType {
  token: string | null;
  login: (token: string) => void;
  logout: () => void;
}

const AuthContext = createContext<AuthContextType | undefined>(undefined);

export const useAuth = () => {
  const context = useContext(AuthContext);
  if (!context) {
    throw new Error('useAuth must be used within an AuthProvider');
  }
  return context;
};

export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const [token, setToken] = useState<string | null>(null);

  // Assuming the token is returned from a server and set as an HttpOnly cookie
  useEffect(() => {
    const fetchTokenFromServer = async () => {
      // Example API call to authenticate and retrieve token (token management handled by server)
      try {
        const response = await fetch('/api/authenticate', {
          method: 'POST',
          credentials: 'include', // This sends the HttpOnly cookie to the server
        });

        if (response.ok) {
          setToken(await response.text()); // Assume token returned in response body for simplicity
        }
      } catch (error) {
        console.error('Error fetching token:', error);
      }
    };

    fetchTokenFromServer();
  }, []);

  const login = (token: string) => {
    // If your server returns the token via a non-HttpOnly cookie or body, store it as needed
    Cookies.set('token', token); // Only use this if the token is not HttpOnly
    setToken(token);
  };

  const logout = () => {
    Cookies.remove('token');
    setToken(null);
  };

  return (
    <AuthContext.Provider value={{ token, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
};

4. Using the Auth Context in Components

import React from 'react';
import { useAuth } from './AuthProvider';

const Dashboard: React.FC = () => {
  const { token, logout } = useAuth();

  if (!token) {
    return <p>You are not logged in.</p>;
  }

  return (
    <div>
      <h1>Dashboard</h1>
      <p>Your token is: {token}</p>
      <button onClick={logout}>Logout</button>
    </div>
  );
};

export default Dashboard;

5. Handling HttpOnly Cookies

Since the client-side code cannot access HttpOnly cookies directly, the server must handle these cookies. In a real-world scenario:

Login: When the user logs in, the server sets the HttpOnly cookie, and the client doesn't manage it directly.
API Requests: All requests that need authentication should include the credentials: 'include' option to send the HttpOnly cookie.

6. Server-Side Implementation

Ensure that your server-side API is setting the token as an HttpOnly cookie. For example, in an Express.js server:

res.cookie('token', token, { httpOnly: true, secure: true, sameSite: 'Strict' });

7. Secure Your Application

• Always use https in production to ensure cookies are transmitted securely.

• Consider setting secure: true in your cookies to ensure they are only sent over HTTPS.

• Use SameSite=Strict or Lax to prevent CSRF attacks.

Thank you for reading! If you found this article helpful, please give it a thumbs up. If you have any questions or need further clarification on any topic discussed, feel free to reach out to me. I'm here to help and would love to hear from you! You can find me on Twitter or LinkedIn Looking forward to connecting with you!.

The above is the detailed content of Web Security: localStorage vs cookie for storing tokens. For more information, please follow other related articles on the PHP Chinese website!