I am using apollo graphql on backend side and using cookie authentication method. But when I set cookie on backend side cookie was in Set-Cookie header but doesn't showed in Browser->application ->cookies
response.cookie('tokens', token, {
httpOnly: true,
secure: true, //process.env.NODE_ENV === 'production',
sameSite: true,
expires: new Date(Date.now() + 1000 * 60 * 60 * 24),
});
Returned response:
Response image
Nothing here.
Application cookies
Tried many advices but nothing worked for me.
You can set the cookie by
context.setCookies.push({
name: "token",
value: result.token,
options: {
domain:'DOMAIN_NAME',
httpOnly: true,
maxAge: 36000,
secure: 'none',
path: '/',
sameSite:'None'
}
});
Remember to make sure domain name is your Server host name,
no need of protocol in domain, i.e., https
set samesite to none
by this, I was able to set the cookie and it was set in application folder in developers tool
you cannot test this in incognito,
in network tab, in the rest call, in cookie section, you can confirm if all attribute is set correct or not.
Related
response cookie screenshot
response header
My site is able to save cookies if the frontend and backend are localhost:3000 talking to localhost:4000, but once I deploy them, it's no longer saving the cookies.
I am using Axios and Express to handle the http requests.
Frontend:
const axiosConfig = axios.create({
baseURL: process.env.REACT_APP_baseURL || "http://localhost:4000" ,
withCredentials: true
});
Backend cookie sending:
const token = jwt.sign(
{
user: existingUser._id,
sciper: input_sciper,
role: role
},
process.env.JWT_SECRET,
{ expiresIn: '1d' }
)
console.log("path /login correct")
res.cookie("token", token, {
httpOnly: true,
secure: true,
sameSite: "None"
}).send()
Express setup:
app.use(cors({
origin: [
"http://192.168.43.169:3000",
"http://localhost:3000",
"https://epfl-course-rank.herokuapp.com",
"https://www.coursefinder.ch"
],
credentials: true,
}));
The screenshot says that the cookie is sent, as it's in the response header, but not set by chrome (nor any other browser). If I hover over the yellow "!" button, it says "the set cookie is blocked because user preferences."
So if I change my cookie preferences to allow all cookies, my site works -- it still doesn't save cookie into Applications but at least it logs in and sends with requests.
I know there are lots of questions asked on CORS/Cookie setting already, but I am still lost after reading through dozens of them.
I set the credentials, the requests are sent with credentials as well.
It's also really bizarre that when I set my chrome setting to "allow all cookies", then my site works. Does this mean that chrome considers my cookie as third party instead of first-party?
Any help /explanations would be greatly appreciated.
I'm trying to perform a request to a backend service using Axios inside getServerSideProps, but it is failing because the session cookie that is needed for authentication is not included in context.req headers.
The application has its client on a subdomain (e.g. app.domain.com) and the backend service, which is based on Node/Express.js, is on another subdomain (e.g. api.domain.com). The cookie is being sent during authentication and seems to be correctly stored in the browser, but interestingly, it is not stored within the client subdomain, but as part of the backend subdomain (api.domain.com).
I'm using cookie-session for handling the response from Express with the following config flags:
app.use(
cookieSession({
signed: false,
secure: true,
httpOnly: true,
sameSite: "strict"
})
);
I've played with the cookie-session middleware config flags, setting sameSite to "none" and httpOnly to false, with no success. I've also checked the contents of the "context" object in getServerSideProps, just to confirm that the cookie is not being sent to the server.
Assuming you have correctly configured a middleware in your backend to send/accept credentials and accept CORS requests (e.g. https://expressjs.com/en/resources/middleware/cors.html), you can try to add the "domain" flag to cookieSession options.
app.use(
cookieSession({
signed: false,
domain: "your-domain.com",
secure: true,
httpOnly: true,
sameSite: "strict"
})
);
This way, the cookie will be stored in the "domain scope" and not restricted to your backend subdomain.
I have a working react frontend on localhost during testing, but when I deploy to AWS, the cookie is not working at all. I can see that cookies are not set when inspecting the web page. I am using cookie Session and here is the setting.
app.use(cookieSession({
name: 'session',
secret: 'blablba',
// Cookie Options
sameSite: 'none',
secure : true,
maxAge: 10 * 60 * 1000,
httpOnly: true,
signed: false
}))
The cors setting
app.use(cors({
origin: 'example.com',
//origin: true,
credentials: true
}));
It is strange, and I assume my app can work when deploy to ec2 instead of s3. But I have to deploy to S3 because I am trying to do ci/cd here.
Thanks!
I have a web page with passport login and express session.
Everything works but the cookie and I noticed what was the problem ( if I define the path of the cookie, the cookie doesn't add to the domain. )
If anyone knows why it happens please tell me.
(session store: connect-mongo 4.6.0)
app.use(session({
secret: 'secret',
store: Store.create({
mongoUrl: 'myMongoURL',
dbName: 'db-sessions'
}),
cookie: {
path: '/menu',
domain: 'mydomain.com',
maxAge: 60000 * 60 * 24,
},
resave: false,
saveUninitialized: false,
}))
When you add a path to the cookie, that cookie will ONLY be sent to the server for a request to that specific path.
So, only a request for the /menu path sent to your server will include that specific cookie. A request to your server for any other path will not include that cookie. The client is only sending the cookie with requests that match that specific path.
Note that a path in the cookie of /menu will match a request to /menu and also /menu/somethingelse.
I am using cookie-session and passportjs to authenticate users in my express app. When I initialize my cookieSession like this:
app.use(cookieSession({
maxAge: 24 * 60 * 60 * 1000,
keys: ['key1']
}));
my cookie is successfully saved to the client. However, the project I am working on requires cross-site requests. Therefore, the secure attribute for the cookie must be set to true and the SameSite attribute must be set to none. In the documentation, these values are able to be set as follows:
app.use(cookieSession({
maxAge: 24 * 60 * 60 * 1000,
secure: true,
sameSite: 'none',
keys: ['key1']
}));
however, when I do this, the cookie fails to save to the client. I'm wondering if anyone knows how to fix this or why this might be happening?
Thank you in advance.
The answer by Luka Darsalia showed me that, in my case at least, the server was refusing to send secure:true cookies to the client, because it thought the client was insecure (due to the request.protocol being http rather than https).
At first I was confused by this, because my address-bar showed https. But then I remembered that the https was only for the connection between my browser and Cloudflare CDN -- the connection between Cloudflare CDN and my actual server was still using http.
Thus, to fix it, I simply had to assure cookie-session (more specifically, this line in the cookies package) that the connection was secure, and thus to go ahead with sending the cookie with the secure:true flag.
To do this, I simply added the following middleware after the cookieSession middleware:
// your existing cookieSession init here
app.use(cookieSession({
[...]
secure: true,
sameSite: "none",
}));
// enable the "secure" flag on the sessionCookies object
app.use((req, res, next)=>{
req["sessionCookies"].secure = true;
next();
});
After authentication use this:
passport.authenticate("local");
req.session.save((error) => {
if (err) {
console.log(err);
} else {
res.redirect("/");
}
});