Hi There,
I have developed a MERN stack application and I have deployed the client app here: client and the server is here on render: https://task-tracker-seerver.onrender.com , in my app I have added authentication using JWT tokens and the generated tokens after login, are being stored in the cookies, well this is how it is supposed to work like,
in localhost it is working as expected, the token is stored in cookies, but when I deployed my both the client and server apps, there my server is not seting token in the cookies, note: token is being generated, because in the response body of login I was adding generated token as well that is available there, but its not added to cookies.
this is how I am connecting my frontend with backend:
const baseURL = "https://task-tracker-seerver.onrender.com";
const axiosInstance: AxiosInstance = axios.create({
baseURL,
withCredentials: true, // Allow cookies to be sent
});
and
here is how I have added origins in my server:
//setup CORS origin
const corsOptions = {`Preformatted text`
origin: ['http://localhost:3000', 'https://task-tracks.netlify.app'],
methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
credentials: true, // Allow cookies to be sent
};
app.use(cors(corsOptions));
here is how I am setting token in cookies:
// Create a JWT token
const token = jwtUtils.createToken({ userId: user._id });
// Set the token as a cookie
res.cookie('token', token, { httpOnly: true, maxAge: 3600000 }); // 1 hour
res.status(200).json({ message: 'Login successful', token });
I searched almost all over the internet couldn’t find out any solution to it,
the issue I am think here is might be the onrender, it’s a listed public suffix so cookies can’t be shared across different subdomains, but there should be any solution for this?