javascript - Cookies not storing on mobile browsers but working on desktop - Stack Overflow

admin管理员组

文章数量:1314229

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.

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.

• javascript
• reactjs
• express
• cookies
• axios

Share Improve this question Follow asked May 11, 2022 at 17:04 AlfredoAlfredo 8111 silver badge22 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

I had a similar issue which after much trouble-shooting turned out to be 'prevent cross-site tracking' in the iPhone's safari browser settings. Turning off this option allowed my site to work as expected. I believe chrome mobile has a similar setting, designed to prevent advertisers from tracking.

I ended up getting a custom domain and putting the vercel app at domain. and the heroku backend at server.domain.. I believe this makes the cookies not appear to be 'cross-site' so they are allowed to work even with prevent cross-site tracking enabled.

just change your code to [secure = false]

本文标签： javascriptCookies not storing on mobile browsers but working on desktopStack Overflow