How to Resolve Cookies Not Being Stored in the Browser: A Redux Configuration Fix (MERN & Next.js)

Introduction

When implementing a project based on Brad Traversy's MERN stack eCommerce tutorial with Next.js, I encountered an issue with cookie storage. The tutorial's fetchBaseQuery configuration did not include credentials, but I discovered that adding credentials: "include" was essential for Next.js to store cookies correctly.

Managing cookies is essential for user sessions and authentication in web applications. However, developers may encounter issues where cookies are not stored in the browser, despite being sent from the server. In this article, we'll explore a real-world scenario where a misconfiguration in Redux led to cookies not being stored and how the issue was resolved.

The Problem

Issue Description :

Cookies were visible in the Network tab under Set-Cookie headers but were not being stored in the browser. This issue occurred in a web application built with Next.js, MongoDB, and Express.

Initial Setup :

• Frontend: Next.js

• Backend: Express

• Database: MongoDB

Initial Findings :

After verifying the configurations in Next.js, MongoDB, and Express, it was clear that these were set up correctly. The problem seemed to lie elsewhere.

Diagnosing the Issue

Observations:

• Cookies were visible in the browser's Network tab under Headers > Set-Cookie.

• However, they were not being stored or accessible in the browser.

Initial Troubleshooting Steps:

1. Checked cookie settings in Express (e.g., secure, httpOnly, sameSite).

2. Verified CORS configuration to ensure credentials were allowed.

3. Reviewed Next.js API routes for proper cookie handling.

The Root Cause

Upon closer inspection, the issue was identified in the Redux configuration. Specifically, the fetchBaseQuery configuration did not include the necessary credentials setting.

The Solution

Step-by-Step Fix:

1. Locate the Configuration: The problematic configuration was found in frontend/src/slices/apiSlice.js.

Update _fetchBaseQuery_ : The credentials: "include" option was added to the fetchBaseQuery configuration to ensure that cookies are included in cross-origin requests.

import { BASE_URL } from "@/constants.js";
import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";

const baseQuery = fetchBaseQuery({ baseUrl: BASE_URL, credentials: "include" });

export const apiSlice = createApi({
  baseQuery,
  tagTypes: ["Product", "Order", "User"],
  endpoints: (builder) => ({}),
});

3*. Verify the Fix :* After making the change, cookies were successfully stored in the browser and were accessible for subsequent requests.

Conclusion

Properly managing cookies is crucial for ensuring session and authentication functionalities in web applications. In this case, the issue of cookies not being stored was traced to an incorrect Redux configuration. By adding credentials: "include" to the fetchBaseQuery setup, the problem was resolved, allowing cookies to be stored and utilized effectively.

Additional Tips:

• Always ensure that credentials are configured correctly for cross-origin requests.

• Use browser developer tools to inspect cookies and network requests to troubleshoot issues.