I’m trying to set a cookie on the browser (client side) after a user logs in. Both client and server are deployed on Vercel, where correct environment variables are set. This is the client call for logging in:

const onSubmit = async (values) => {
    setLoading(true);
    try {
      await axios
        .post(`${import.meta.env.VITE_SERVER_URL}/user/login`, {
          email: values.email,
          password: values.password,
        }, {
          withCredentials: true
        })
        .then((res) => {
          localStorage.setItem(
            "user-info",
            JSON.stringify(res.data.user)
          );
          setUser(res.data.user);
          toast({
            title: "Logged in successfully!",
            variant: "success",
          });
        });
    } catch (err) {
      toast({
        title: "Something went wrong!",
        description: err.response.data.message || "Try again",
        variant: "destructive",
      });
    } finally {
      setLoading(false);
    }
  };

on the server side I use this function to set cookie:

export const genTokenAndSetCookie = (userId, res) => {
  const token = jwt.sign({ userId }, process.env.JWT_SECRET, {
    expiresIn: "151d",
  });

  res.cookie("jwt", token, {
    httpOnly: true,
    maxAge: 151 * 24 * 60 * 60 * 1000,
    sameSite: "None",
    secure: true
  });

  return token;
};

When i test the login in production, on the console i get cookie warnings:

“Cookie “jwt” will soon be rejected because it is foreign and does not have the “Partitioned“ attribute.”

indicating that im getting a cookie in response from the server. However, when i check the storage tab, I don’t see the cookie being set.

I even tested my server response if it’s setting cookies, both locally and the deployed url in Postman, and I’m getting a cookie back in response.

Why am I facing this problem?

EDIT: The cookies are being set in Chrome and the application works as intended. Does not work in Firefox though. Any fixes around that?