My current project involves implementing user authentication for a website using the MERN stack, and I have opted to utilize JWT tokens stored as HttpOnly cookies. Interestingly, when I made the request via Postman, the cookie was sent in the "Set-Cookie" field in the response header but not in the Safari Web Inspector, as depicted in the image below. The storage tab also showed no signs of any cookies.
https://i.sstatic.net/5bplK.png
To simplify the debugging process, I have reduced my React login form to just a button that submits the user's username and password:
import React from "react";
// Code for sending the request...
export default test;
In the backend, where all incoming requests are initially handled, this is my index.js setup:
// Code block for setting up express and handling API routes...
app.use("/api/user", userRoutes);
The middleware that the login request goes through looks like this:
// Middleware code for logging in users...
Additional Details
In the login middleware, a boolean value for validCredentials is set and returned to the client successfully. Based on my observations, it doesn't seem to be a CORS issue as I could retrieve this value on the front end without any errors. Additionally, other API requests on the webpage that don't involve cookies function correctly.
Interestingly enough, despite using identical data for both Postman and the React code, the evaluation of validCredentials differs between the two. This raises questions about why the behavior changes once cookies are introduced.
If you have any insights or suggestions on where the problem might lie or how I can address it, I would greatly appreciate your input. As a beginner in web development, I am eager to learn and improve.
EDIT
Following dave's answer, I can now receive the "Set-Cookie" header on the frontend. However, it still does not show up in the Storage tab within the web inspector for reasons unknown.
This is the response header:
https://i.sstatic.net/wYE0G.png
And here is the Storage tab where site cookies usually appear: