Sunday, 4 September 2022

Cookies Only set in Chrome - not set in Safari, Mobile Chrome, or Mobile Safari

I have a working sign up and sign in end point when using desktop browsers (only Chrome), but when trying to sign up or sign in using a mobile browser, the server times out. I suspect this is because my session cookies and csurf cookies are not being sent over with my fetch request.

I have opened Safari development on my mobile browser, and it does not show any cookies. I suspect now that this is because of MaxAge --

Note that my api and client are on separate domains, Heroku and Netlify. See the code below:

CORS Options

const options = {

  origin: "clientUrl",
  methods: "GET,HEAD,PUT,PATCH,POST,DELETE",
  allowedHeaders: [
    "Content-Type",
    "Access-Control-Allow-Headers",
    "Access-Control-Allow-Origin",
    "Authorization",
    "csrf-token"
  ],
  exposedHeaders: [
    "Content-Type",
    "Access-Control-Allow-Headers",
    "Access-Control-Allow-Origin",
    "Authorization",
    "csrf-token"
  ],

  maxAge: 3600,
  preflightContinue: true,
  credentials: true
};

CSURF Config

app.use(
  csurf({
    cookie: true,
    domain: "clientUrl",
    sameSite: "none"
  })
);

Express Session Config

app.use(
  session({
    //This is our Encryption Key
    secret: process.env.sessionCode,
    //We set resave to false because our mongo store implements the "touch" function
    resave: false,
    //We Set saveUninitialized to false because we don't want to save unmodified
    //sessions to our mongo store
    secure: true,
    domain: "clientUrl",
    saveUninitialized: false,
    unset: "destroy",
    sameSite: "none",
    store: new MongoStore({
      mongooseConnection: mongoose.connection,
      //We encrypt out store code
      code: process.env.storeCode
    })
  })
);


from Cookies Only set in Chrome - not set in Safari, Mobile Chrome, or Mobile Safari

No comments:

Post a Comment