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.
Related
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
}))
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!!
I have a server that has its own domain and is using HTTPS. I have a website that has its own domain and is using HTTPS as well.
On the home page of the website, there is a login button and a sign up button. Both buttons lead to forms to execute their respective tasks, and both forms send requests to the server that respond with cookies, or at least that's what they are supposed to do.
I am using express-session in combination with Redis to store the session ids. Here is the config for that (connectToRedis is simply a function that returns a RedisClient):
const RedisStore = connectRedis(session);
const redisClient = await connectToRedis();
app.use(
session({
store: new RedisStore({
client: redisClient,
}),
cookie: {
httpOnly: true,
secure: true,
sameSite: "lax",
maxAge: TEN_YEARS,
},
resave: false,
saveUninitialized: false,
secret: SECRET,
name: AUTH_COOKIE,
})
);
For some reason the cookies are not being sent in the requests. The Set-Cookie header isn't even showing up! I tried changing SameSite to none (article), but that didn't work.
This is my first time deploying a production website, so all this HTTPS stuff is kind of new to me.
Thanks for your help, and if you need any extra information, please let me know.
IMPORTANT UPDATE:
Finally, I have made some progress (all it took was a pizza break).
I added the path key to my cookie config and gave it the value of /. I also set proxy to true.
So now it looks like this:
const RedisStore = connectRedis(session);
const redisClient = await connectToRedis();
app.use(
session({
store: new RedisStore({
client: redisClient,
}),
cookie: {
httpOnly: true,
secure: true,
sameSite: "none",
maxAge: TEN_YEARS,
path: "/",
},
resave: false,
saveUninitialized: false,
secret: SECRET,
name: AUTH_COOKIE,
proxy: true,
})
);
With this, the cookie is finally appearing in the requests, but it isn't being set in the browser...
My problem is, that the Frontend doesn't receive the session. Even though the session is stored in my database its not working. This problem only occurs when I use Heroku, locally it's working. I tried already a lot of solutions but none of them were working for me.
I hosted my frontend on Netlify with React and all of my backend is on Heroku.
app.set("trust proxy", 1);
app.use(
session({
key: "userId",
proxy: true,
secret: "verySecureSecret123",
resave: false,
saveUninitialized: false,
store: sessionStore,
cookie: {
secure: true,
expires: 60 * 60 * 24 * 30,
},
})
);
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'
}
}