When using desktop browsers (specifically Chrome), my sign up and sign in endpoint works perfectly fine. However, I encounter a server timeout issue when attempting to sign up or sign in using a mobile browser. This problem arises from the session cookies and csurf cookies not being sent over with the fetch request.
Upon inspecting Safari development in my mobile browser, I noticed that no cookies are being displayed. I suspect this could be due to the MaxAge setting.
It's worth noting that my API and client exist on separate domains, Heroku and Netlify respectively. Here is a snippet of the relevant code:
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({
secret: process.env.sessionCode,
resave: false,
secure: true,
domain: "clientUrl",
saveUninitialized: false,
unset: "destroy",
sameSite: "none",
store: new MongoStore({
mongooseConnection: mongoose.connection,
code: process.env.storeCode
})
})
);