I've been researching this for hours now. What could be the reason why the cookies are not being saved in the browser? I'm using express-session. Below are the pieces of code I'm using.
const app = express();
// CORS config
app.use(cors({
origin: process.env.API_URL,
credentials: true,
optionsSuccessStatus: 200
}));
app.use(cookieParser());
// Where the sessions are stored
const MongoDBStore = new MongoDBSession({
uri: process.env.MEDIRECORDS_URI,
collection: "sessions"
})
app.set("trust proxy", 1);
const oneDay = 1000 * 60 * 60 * 24;
app.use(session({
name: "irmp_session",
secret: process.env.AWS_SESSION_KEY,
resave: false,
saveUninitialized: false,
maxAge: 7200000, // 2 hrs validity
store: MongoDBStore,
cookie: {
path: '/',
sameSite: false,
secure: false,
maxAge: oneDay
}
}))
When I try to login using the frontend, the login is successful, the session is stored in the database. However, when I check the cookie storage, it is empty.
After spending hours of researching, I learned that this is due to Chrome's cookie updates. Here is what the update is all about.
As the link states, for a cookie to be saved in Chrome and if it is really needed to set the sameSite to none, developers should set the secure option to be true. Default value of sameSite if not set is lax.
Hope this helps anyone who might encounter the problem.
If anyone here uses heroku or render.com for free, I added all the answers above but it is still not working. I have tried another solution here which is add app.set("trust proxy", 1); before app.use(session(sessionSettings)) and it now saves cookie to different browsers.
Thank you so much for sharing it. I was stack on this for 2 days now, in localhost things worked perfectly, but after deploy my MERN app in differents servers, cookie stoped working...
using express-session:
app.use(session({
.......
.......
cookie:{
maxAge: 24*60*60*1000, //please change it based on your needs
secure: app.get('env') === 'production'?true:false,
sameSite: 'none'
}}));
this will solve the problem!!
Related
I am following Ben Awad full stack tutorial with same stack (
React
TypeScript
GraphQL
URQL/Apollo
Node.js
PostgreSQL
MikroORM/TypeORM
Redis
Next.js
TypeGraphQL
Chakra
)
But newer versions (the video was 2 years old), in 2:59:59, according to the video, when we make a register request through browser(client side) the qid cookies was supposed to get sent automatically but it doesn't work for me. Things work fine when I make request through my server (localhost port 5000, redirect to https://studio.apollographql.com/sandbox/explorer) but when it come to browser I successfullyy register the user but the cookies was not saved.
Here is the code I built in my server to set the cookies (redis connected):
app.use(
cors({
origin: ["http://localhost:3000", "https://studio.apollographql.com"],
credentials: true,
})
)
app.set("trust proxy", true);
app.use(
session({
name: "qid",
store: new RedisStore({ client: redisClient, disableTouch: true }),
cookie: {
maxAge: 1000 * 60 * 60 * 24 * 365 * 10, //10 years
httpOnly: false,
sameSite: "none",
secure: true, // cookie only works in https
},
saveUninitialized: false,
secret: "123456789",
resave: false,
})
);
Thanks guys and I appreciate you guys a lot.
I solved it: set sameSite: 'none' when you want to save cookie through sandbox and lax when you want to save it with browser.
I am trying to use express-session with the Windows IIS server, but I am not receiving cookies at the frontend, I set the following configuration for express-session. Please help me if anyone knows the issue. In localhost, it is working fine.
app.use(session({
genid: function(req) {
return v4() // use UUIDs for session IDs
},
store: new MemoryStore({
checkPeriod: 60 *60000 // prune expired entries every 60 minutes
}),
resave:true,
saveUninitialized:false,
proxy: true,
secret: 'abcdef',
rolling:true,
cookie:{ httpOnly: true, sameSite:"none", secure:true, maxAge:20 * 60000} //20 minutes
}))
So I am running a node.js backend with a react frontend, and for some reason with this setup:
app.use(session({
store: new MongoStore({
mongooseConnection: mongoose.connection
}),
secret: process.env.SECRET_KEY,
resave: false,
saveUninitialized: false,
cookie: {
maxAge: 1000 * 60 * 60 * 24 * 7 * 2, // two weeks
secure: false,
httpOnly: false,
}
}));
I save the username using: req.session.username = username; which does save but then whenever I try to check the session on another page the username is gone.
Full source code: https://github.com/CTF-Cafe/CTF_Cafe/tree/master/backEnd
PS: it works in production completely fine, but not locally I tried with httponly false, and secure false. No change.
Any help appriciated
When you serve your frontend from your backend the session will be working because it has the same origin. However, for your local environment, you will be running React app in a different port, and the Express app would be also different. When a port is different it is already considered a different origin and cookies, sessions won't be shared.
You can proxy your frontend via the node app and this way you can have the same origin and your session will remain.
const proxy = require('express-http-proxy');
const app = express();
...
// Add after your routes
app.use(proxy('http://127.0.0.1:3000')); // assuming your Reacts runs on P3000
Check this answer too.
Express-Session is working in development environment, as it sets the "connect.sid" cookie in my browser. However, in production it's not storing the cookie, and instead of using the same session - it creates a new one every time. I believe that the issue would be fixed if I can somehow save third party cookies, as my app was deployed using Heroku. Lastly, I have also used express-cors to avoid the CORS issue (don't know if this has anything to do with the cookie issue). I have set {credentials: true} in cors, {withCredentials: true} in Axios, as well.
Heroku uses reverse proxy. It offers https endpoints but then forwards unencrypted traffic to the website.
Try something like
app.enable('trust proxy')
And check out
https://expressjs.com/en/guide/behind-proxies.html
Issue Solved! -> Add sameSite: 'none'
Full Cookie config (express-session) for production:
cookie: {
httpOnly: true,
secure: true,
maxAge: 1000 * 60 * 60 * 48,
sameSite: 'none'
}
Adding a "name" attribute to the session config worked for me:
{
secret: process.env.SESSION_SECRET,
resave: false,
saveUninitialized: true,
proxy: true, // Required for Heroku & Digital Ocean (regarding X-Forwarded-For)
name: 'MyCoolWebAppCookieName', // This needs to be unique per-host.
cookie: {
secure: true, // required for cookies to work on HTTPS
httpOnly: false,
sameSite: 'none'
}
}
Server on express (4.16.3), with it the express-session (1.15.6) module works.
Code:
// ...
app.use(session({
secret: 'mySecret',
resave: false,
saveUninitialized: true,
store: new MongoDBStore({
uri: 'my-url',
collection: 'sessions'
})
}))
// ...
The essence of the problem: I open the Yandex browser - assign a session, then close it and when I reopen it - a new session. The matter is that authorization is tied to sessions.
The problem is observed in the Yandex browser, microsoft EDGE and in all mobile browsers, while in chrome and opera works correctly.
Help solve the problem or maybe something can replace the module express-sessions
This is happening because your browser default expire the cookie when the browser is closed. In order to fix you can add cookie:{ maxAge: 60000} to your session.
app.use(session({
secret: 'mySecret',
resave: false,
cookie:{ maxAge: 60000},
saveUninitialized: true,
store: new MongoDBStore({
uri: 'my-url',
collection: 'sessions'
})
if you want to make the cookie to not expire, the best way is to set a large number.
// this will it expire in 200 years
cookie: { maxAge: 9000000000000}
or a very far future date in expire property.
// this will expire in year 9999
cookie: {expires: new Date(253402300000000)}