Unable to verify user token stored in cookie in MERN app - reactjs

Question

I am trying to verify a logged In user token in my MERN. However, I am getting "undefined" on client-side as API response.
When I hit the endpoint http://127.0.0.1:1000/api/v1/users/login in postman to login a user and this endpoint http://127.0.0.1:1000/api/v1/users/verify to verify a user's token, the token is returned.
But when I do the same in my react app, the token returns undefined. I have spent hours debugging it but unable to figure it out.
Please I need help.
Here is my React (client side) code:
axios.defaults.withCredentials = true;
function Welcome() {
const [user, setUser] = useState("");
const sendRequest = async () => {
const res = await axios
.get("http://127.0.0.1:1000/api/v1/users/verify", {
withCredentials: true,
})
.catch((err) => console.log(err));
const data = await res.data;
return data;
};
React.useEffect(() => {
sendRequest().then((response) => console.log(response.data));
}, []);
return <div>Welcome</div>;
}
Here is my login endpoint.
exports.loginUser = async (req, res) => {
const { name, password } = req.body;
let existingUser;
try {
existingUser = await User.findOne({ name: name });
} catch (err) {
return new Error(err);
}
if (!existingUser) {
return res.status(400).json({ status: "fail", message: "user not found" });
}
const isPasswordCorrect = bcrypt.compareSync(password, existingUser.password);
if (!isPasswordCorrect) {
return res
.status(400)
.json({ status: "fail", message: "invalid email or password" });
}
const token = jwt.sign({ id: existingUser._id }, process.env.JWT_SECRET, {
expiresIn: process.env.JWT_EXPIRES_IN,
});
res.cookie("jwt", token, {
path: "/",
expires: new Date(Date.now() + 1000 * 70),
httpOnly: true,
sameSite: "lax",
});
return res
.status(200)
.json({ message: "Succesfully loggedIn", user: existingUser, token });
};
Here is my verifyToken endpoint
exports.verifyToken = (req, res, next) => {
const cookies = req.headers.cookie;
const token = cookies.split("=")[1];
if (!token) {
res.status(404).json({ message: "no token found" });
}
jwt.verify(String(token), process.env.JWT_SECRET, (err, user) => {
if (err) {
return res.status(400).json({ message: "Invalid token" });
}
req.id = user.id;
});
next();
};
router.route("/verify").get(verifyToken, getUser);//endpoint
exports.getUser = async (req, res, next) => {
const userId = req.id;
let user;
try {
user = await User.findById(userId, "-password");
} catch (err) {
return new Error(err);
}
if (!user) {
return res.status(404).json({ status: "fail", message: "user not found" });
}
return res.status(200).json({ user });
};