how to retrieve jwt stored in cookies - node.js

Question

I am exercising authentication for MERN stack and I decided to store JWT inside cookies, where during login new token will be sent to the cookies and during logout the function checks for the token from the request and clears the cookie and removes the token from database. I can send the cookie inside node with res.cookie on http://localhost:3000/ without errors and see the content from chrome application, but when I console.log the cookie with req.cookies from http://localhost:3000/main, it is undefined
backend
server.js
const express = require("express");
const app = express();
require("dotenv").config();
const cors = require("cors");
const cookieParser = require("cookie-parser");
const dbConnect = require("./dbConnect");
const authRoutes = require("./routes/auth");
const refreshTokenRoutes = require("./routes/refreshToken");
const port = process.env.PORT;
dbConnect(); //connect to mongoDb database
app.use(
cors({
// origin: "http://localhost:3000/main",
origin: ["http://localhost:3000", "http://localhost:3000/main"],
methods: "GET, POST, UPDATE, DELETE",
credentials: true,
})
);
app.use(express.json());
app.use(cookieParser());
app.use("/api", authRoutes);
app.use("/api/refreshToken", refreshTokenRoutes);
app.get("/", (req, res) => {
res.send("hello");
});
app.listen(port, () => {
console.log(`listening on http://localhost:${port}`);
});
auth.js
router.post("/login", async (req, res) => {
try {
//check if the input is in a valid format
const { error } = logInBodyValidation(req.body);
if (error) {
res.status(400).json({ error: true, message: error.details[0].message });
}
//check if the user is registered in the database
const user = await users.findOne({
email: req.body.email,
});
const passwordCheck = await bcrypt.compare(
req.body.password,
user.password
);
if (!user || !passwordCheck) {
res
.status(401)
.json({ error: true, message: "invalid email or password" });
}
const { accessToken, refreshToken } = await generateToken(user);
res
.cookie("jwtoken", refreshToken, {
maxAge: 1296000000,
path: "/",
domain: "localhost:3000",
httpOnly: true,
})
.status(200)
.json({
error: false,
accessToken,
refreshToken,
message: "Logged in sucessfully!",
});
} catch (error) {
// res.status(500).json({ error: true, message: "Internal Server Error" });
}
});
req.cookies returns the cookies
refreshToken.js
// logout
router.get("/", async (req, res) => {
try {
const { error } = refreshTokenBodyValidation(req.user);
if (error)
return res
.status(400)
.json({ error: true, message: error.details[0].message });
const userToken = await UserToken.findOne({
token: req.user.refreshToken,
});
if (!userToken)
return res
.status(200)
.json({ error: false, message: "Logged Out Sucessfully!" });
await userToken.remove();
res
.clearCookie("jwtoken")
.status(200)
.json({ error: false, message: "Logged Out Sucessfully!" });
} catch (error) {
console.log(error)
}
});
req.cookies returns [Object: null prototype] {}
Frontend
Login.js
import React from "react";
const Login = ({ email, password, setEmail, setPassword }) => {
const loginUser = async (e) => {
e.preventDefault();
try {
const response = await fetch("http://localhost:5000/api/login", {
headers: {
"Content-type": "application/json",
},
method: "POST",
credentials: "include",
body: JSON.stringify({
email,
password,
}),
});
const data = await response.json();
localStorage.setItem("token", data);
console.log(data);
// window.location.href = "/main";
} catch (error) {
console.log(error);
}
};
return (
<div className="container">
<h1>Login</h1>
<form onSubmit={loginUser}>
<input
title="Email"
// value={email}
placeholder="Enter E-mail"
type="email"
className="email"
onChange={(e) => {
setEmail(e.target.value);
}}
/>
<input
title="Password"
// value={password}
placeholder="Enter Password"
type="password"
className="pass"
onChange={(e) => {
setPassword(e.target.value);
}}
/>
<button>Log in</button>
</form>
</div>
);
};
export default Login;
Logout.js
import React from "react";
const Logout = () => {
const logoutUser = async () => {
const response = await fetch("http://localhost:5000/api/refeshToken/", {
headers: {
"Content-type": "application/json",
},
method: "GET",
});
const data = await response.json();
if (data.user) {
alert("Logged out successfuly");
window.location.href = "/";
}
};
return (
<div className="logout">
<button
className="logout_button"
title="Logout"
onClick={(e) => logoutUser(e)}
>
Log out
</button>
</div>
);
};
export default Logout;

Answer 1

the problem was a CORS error, must include credentials: "include" in the logout fetch request header