I have an ExpressJS app which I am hosting on heroku and a frontend react app I am hosting on Netlify. When a user logs in and their details are correct, they are redirected to the home page which shows content related to them etc. When the user lands on the home page (logged in), a call is sent to the backend to verify the tokens provided to them when they logged in successfully. There are two tokens: an access token and a refresh token, which are both sent as httponly cookies for security purposes. As the backend is on a different domain to the frontend, I am using with credentials set to true on the express backend and on the frontend I have axios.defaults.withCredentials = true.

This works fine on desktop browsers and cookies are being set correctly, etc. In short, users can see content tailored to them and everything works fine. On mobile browsers, when I log in, I can see in Heroku that the tokens which are console logged on the backend upon successful login on desktops are undefined. This leads me to believe that the cookies are not being set correctly on mobile browsers. I say mobile browsers in plural as this behavious is consistent on chrome mobile, safari, etc.

I have messed around with sending the cookies and with same site etc and to be honest, I am not too good with backend stuff.

here is the code from the login page that redirects user to home page which in itself renders a logged in version or a standard home page depending on if user is logged in. Note that signUserInOut is from use context but below is the relevant code.

const navigate = useNavigate();

  const sendToLandingPage = () => {
    navigate("/");
  };

  const sendInformationToApi = async () => {
    const infoSent = await axios
      .post("https://BACKENDURLHEREREPLACED.COM", {
        email: `${usersEmail}`,
        password: `${usersPass}`,
      })
      .then((data) => {
        if (data.data.msg === "SIGN IN SUCCESSFUL") {
          sendToLandingPage();
          localStorage.setItem("USERISLOGGEDIN", true);
          signUserInOut(true);
        }
      });
  }

here we have the relevant home page code to which the user is redirected after successful login.

useEffect(() => {
    async function getData() {
      setLoading(true);
      let checkToken = await checkIfTokenIsValid();
      if (checkToken === "USER CAN PASS") {
        const data = await axios.get("https://BACKENDCODEETC.COM");
        setLoading(false);
      }
    }
    getData();
  }, []);

here we have the relevant code from the backend login route (the tokens are extracted from the cookies)

  res
    .cookie("token", token, {
      httpOnly: true,
      sameSite: "None",
      secure: true,
    })
    .status(200);

  res
    .cookie("refreshToken", refreshToken, {
      httpOnly: true,
      sameSite: "None",
      secure: true,
    })
    .status(200);

All of this works fine on desktop browsers but not on mobile. I have tried various cookie settings, etc but nothing seems to work on mobile.