After successful login, the “JWT” cookie is received in frontend. To delete this cookie, user need to logout. But after pushing the logout button, why user receive the below error message and the JWT cookie is still in frontend ? How to delete this cookie correctly ?
react-dom.development.js:13123 Uncaught Error: Objects are not valid as a React child (found: object with keys {message, name, code, config, request, response}). If you meant to render a collection of children, use an array instead.
FRONTEND
//in Component for logout:
const Secret = () => {
const handleLogout = async (req, res) => {
try {
await apiAxios.post("/auth/logout", {withCredentials:true})
} catch (error) {
console.log("b ", error)
setMsg(error)
}
}
return (
<div>
<button onClick={handleLogout}>Logout</button>
</div>
);
}
BACKEND
// routes.index.js
router.post("/auth/logout", auth.logoutUser)
// auth-controller.js
const logoutUser = (res, req, next) => {
if (req.cookies["JWT"]) {
res.clearCookie("JWT", {
httpOnly: true,
sameSite: "lax",
secure: false
)
return res.sendStatus(204)
} else {
console.log("error")
}
}
Thanks for your time. Solution has been found as following:
issue in backend logoutUser with the parameter (res, req, next). It should be (req, res, next). Then JWT cookie can be deleted.