I'm using Nodejs for my server and Reactjs for my client. In my client, I use axios to perform post/get requests to the server.
During development, everything is working perfectly fine, data is fetched and cookies are set properly. However, when I deploy my server and client to Heroku and Netlify respectively, the cookies are suddenly not set.
Here is my server code:
dotenv.config()
const server = express();
server.use(cors({origin: "https://frontendname.com", credentials: true}));
server.use(express.json());
server.use(express.urlencoded({extended:true}))
server.use(cookieParser())
server.use("/", fetchData)
server.listen(process.env.PORT, ()=>console.log(`Server listening on PORT ${process.env.PORT}`))
mongoose.connect(process.env.MONGO_URI, {useNewUrlParser: true, useUnifiedTopology: true}).then( () => {
console.log("connected to mongoose")
}).catch((error) => console.log(error.message))
My server API code
res.status(201) .cookie("accessToken", accessToken, {domain:"frontendwebsite.com", httpOnly: true, sameSite: 'strict', path: '/', expires: new Date(new Date().getTime() + 60 * 1000 * 4)}) .cookie("refreshToken", refreshToken, {domain:"frontendwebsite.com", httpOnly: true, sameSite: 'strict', path: '/', expires: new Date(new Date().getTime() + 60 * 1000 * 96)}) .json({message: "login verified", username: req.body.username}) .send()
My client API code:
axios.defaults.withCredentials = true
export const loginAuth = async (credentials) => {
return await axios.post("https://backendname.herokuapp.com/loginAuth", credentials).then((res) => {
return res
})
}
I have a strong feeling its due to the domain name that is not correct in the "res.cookie". Since in my development when I'm using localhost for both server and client, it works. My client is hosted on Netlify and server is hosted on Heroku. My client has a custom domain name I got from GoDaddy. I used Netlify DNS on that domain name. Any ideas?
Can you inspect the response coming back from your server (with browser Dev Tools)? Is there any Set-Cookie header / value returning, or is it completely missing?
My guess is the cookie header is there, and being set, but with sameSite set to strict it won't send it to your backend / API. So I think you are right about the domain being incorrect, in res.cookie, you could try that with backendname.herokuapp.com. Since really you want the cookie to be transmitting to / from your backend, especially as it is httpOnly, it will never be used by your frontend / client.
My attempts at logging in are not getting saved to express session in production. I am saving the session in Mongo Store and the sessions are coming up in MongoAtlas as modified (they way they should appear), but for some reason the server is not recognizing that there is an existing session and is making a new one. When I enable express-session debug, it logs express-session no SID sent, generating session on each request to the server. This makes me think that the session id isn't getting sent with the request and that the problem has something to do with my client and server being on different domains (my client address is https://example.com and my server is on https://app.example.com. I originally had my client on https://www.example.com but changed it thinking that the cookie was getting mistaken for a 3rd party cookie (maybe it still is).
My client is hosted on Firebase Hosting and my Express server is hosted on Google Cloud Run
my express-session settings
app.set('trust proxy', true)
app.use(session({
secret: 'myappisasecret',
resave: false,
saveUninitialized: false,
secure: true,
store: new MongoStore({mongooseConnection: mongoose.connection}),
cookie: {
maxAge: 1000 * 60 * 60 * 24 * 7, // 1 week
sameSite: 'lax',
secure: true,
domain: 'mysite.com'
},
proxy: true // I think this makes the trust proxy be useless
}))
Below is my coors server stuff. This code is located above the code above, but I don't think it is causing any issues, but think that it might be important to include.
let whitelist = ['https://app.example.com', 'https://www.example.com', 'https://example.web.app', 'https://example.com']
let corsOptions = {
origin: (origin, callback) => {
if (whitelist.indexOf(origin) !== -1 || origin === undefined) {
callback(null, true)
} else {
console.log('Request Origin blocked: ', origin)
callback(new Error('Request blocked by CORS'))
}
},
credentials: true
}
app.use(cookieParser('myappisasecret'))
app.use(cors(corsOptions))
Since the server wasn't receiving a session id, I thought that maybe my client wasn't sending one so I added credentials: 'include' to my client request code
const reqHeaders = {
headers: {
"Content-Type": "application/json"
},
credentials: 'include' as any,
method: "GET"
}
fetch('https://app.example.com/u/loggedIn', reqHeaders)
.then(res => etc...
When this request gets submitted expression-session debug logs:
express-session saving z3ndMizKoxivXR0N9LBZYkPhDG65uvF2 and then
express-session split response
This makes me think that as it tries to save my user data to the session, it gets overwritten at the same time with an initial session data. I have set resave: false. But even then I still get express-session no SID sent with every request sent to the server.
Apparently when hosting with Firebase and Cloud Run cookie headers get stripped due to Google's CDN cache behavior.
Here's the documentation that describes that:
https://firebase.google.com/docs/hosting/manage-cache#using_cookies
I have no clue how to implement sessions now. F
We have a NodeJS express server with express-session and express-mysql-session enabled. We've connected the session database and can verify there are sessions being created. Our app redirects users without a token cookie to Auth0 for authentication, and they are redirected back to our app at /callback. It does successfully set our ID token that allows our user to be logged in. However, the passport auth0 strategy complains that it cannot verify the authentication state.
'Unable to verify authorization request state.'
The server code is below, with some other parts commented out. Connecting to the session database is successful since we can see our sessions get created with each request.
const options = {
database: process.env.SESSION_DB_NAME || "sessions",
host: process.env.SESSION_DB_HOST! as string,
password: process.env.SESSION_DB_PASSWORD! as string,
port: parseInt(process.env.SESSION_DB_PASSWORD || "3306", 10),
user: process.env.SESSION_DB_USER! as string,
};
const sessionStore = new MySQLStore(options);
app.use(
session({
cookie: {
httpOnly: true,
maxAge: 24 * 3600 * 1000, // 1 day
secure: true,
},
resave: false,
saveUninitialized: true,
secret: process.env.SESSION_SECRET!,
store: sessionStore,
})
);
app.get("/login", (request, response, next) => {
// if there is no session, it's a server error
if (!request.session) {
console.error(new Error("No session in /login"));
return response.status(500).send("Server error: No Session");
}
return passport.authenticate("auth0", {
scope: "openid email profile",
})(request, response, next);
});
console.log("router: Auth0 Callback");
app.get("/callback", (request, response, next) => {
const domain = request.hostname;
console.log(request.session);
passport.authenticate("auth0", (auth0Error, token, info) => {
// if there was a problem authenticating
if (auth0Error) {
console.error(auth0Error);
return response.status(500).send();
}
// ensure we have a session. The middleware should be giving us one.
if (!request.session) {
console.error("No session in /callback.");
return response.status(500).send();
}
// if we couldn't log in
if (!token) {
if (info) {
console.log(info);
return response.status(500).send(info.message);
}
// redirect to the login page
return response.status(401).send("Cannot log you in.");
}
// parse the token we get
const user = jwt.decode(token);
// if there is no valid user token, we've got bigger problems
if (!user) {
console.error("Token is falsey after authenticating.");
return response.status(500).send();
} else if (typeof user === "string") {
console.error("Cannot decode JWT after authenticating");
return response.status(500).send();
}
request.logIn(user, (logInError) => {
// redirect to desired route
// ...
});
})(request, response, next);
});
router.get("/*", (request, response, next) => {
passport.authenticate("jwt", (authenticationError, isAuthenticated, info) => {
// Log in successful via existing JWT
if (isAuthenticated) {
return next();
}
// handle unauthenticated situations
// ...
})(request, response, next);
});
I've tried the following suggestions at https://github.com/auth0/passport-auth0/issues/70:
app.set("trust proxy", 1")
session cookie already set to secure
serving only on https
using mysql session store and default in-memory store
We are running the server in a kubernetes cluster using ClusterIP for our ingress. Env variables are being set correctly, I'm pretty sure. When I run this locally I do not have any issues.
What could cause the session to not be restored but instead recreated with each request?
Your question was posted over a year ago so I figure you've already fixed it, but I thought I'd post my solution to help others. I very recently ran into the same issue, although I was using an Apache reverse proxy instead of a Kubernetes cluster.
I've posted my solution in another SO question: https://stackoverflow.com/a/67891167/8221175
In short, my Apache configuration was missing these lines:
RequestHeader set X-Forwarded-Proto expr=%{REQUEST_SCHEME}
RequestHeader set X-Forwarded-SSL expr=%{HTTPS}
ProxyPass / http://localhost:8001/
ProxyPassReverse / http://localhost:8001/
This, along with other session/cookie configuration for express (see the SO link) fixed it. My sessions now persist and I no longer have the issue.
For those interested in why the 'Unable to verify authorization request state.' message is issued, check out my answer in this GitHub issue: https://github.com/auth0/passport-auth0/issues/89#issuecomment-856971807
I have problem with setting a cookies via express. I'm using Este.js dev stack and I try to set a cookie in API auth /login route. Here is the code that I use in /api/v1/auth/login route
res.cookie('token', jwt.token, {expires: new Date(Date.now() + 9999999)});
res.status(200).send({user, token: jwt.token});
In src/server/main.js I have registered cookie-parser as first middleware
app.use(cookieParser());
The response header for /api/v1/auth/login route contains
Set-Cookie:token=eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJ..
but the cookie isn't saved in browser (document.cookie is empty, also Resources - Cookies tab in develepoers tools is empty) :(
EDIT:
I'm found that when I call this in /api/v1/auth/login (without call res.send or res.json)
res.cookie('token', jwt.token, {expires: new Date(Date.now() + 9999999), httpOnly: false});
next();
then the cookie is set AND response header has set X-Powered-By:Este.js ... this sets esteMiddleware in expres frontend rendering part.
When I use res.send
res.cookie('token', jwt.token, {expires: new Date(Date.now() + 9999999), httpOnly: false}).send({user, token: jwt.token});`
next();
then I get error Can't set headers after they are sent. because send method is used, so frontend render throw this error.
But I have to send a data from API, so how I can deal with this?
I had the same issue. The server response comes with cookie set:
Set-Cookie:my_cookie=HelloWorld; Path=/; Expires=Wed, 15 Mar 2017 15:59:59 GMT
But the cookie was not saved by a browser.
This is how I solved it.
I use fetch in a client-side code. If you do not specify credentials: 'include' in fetch options, cookies are neither sent to server nor saved by a browser, although the server response sets cookies.
Example:
var headers = new Headers();
headers.append('Content-Type', 'application/json');
headers.append('Accept', 'application/json');
return fetch('/your/server_endpoint', {
method: 'POST',
mode: 'same-origin',
redirect: 'follow',
credentials: 'include', // Don't forget to specify this if you need cookies
headers: headers,
body: JSON.stringify({
first_name: 'John',
last_name: 'Doe'
})
})
Struggling with this for a 3h, and finally realized, with axios, I should set withCredentials to true, even though I am only receiving cookies.
axios.defaults.withCredentials = true;
I work with express 4 and node 7.4 and Angular, I had the same problem this helped me:
a) server side: in file app.js I give headers to all responses like:
app.use(function(req, res, next) {
res.header('Access-Control-Allow-Origin', req.headers.origin);
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
This must have before all routers.
I saw a lot of added this header:
res.header("Access-Control-Allow-Headers","*");
res.header('Access-Control-Allow-Credentials', true);
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
but I don't need that.
b) when you define cookie you need to add httpOnly: false, like:
res.cookie( key, value,{ maxAge: 1000 * 60 * 10, httpOnly: false });
c) client side: in send ajax you need to add: withCredentials: true, like:
$http({
method: 'POST',
url: 'url',
withCredentials: true,
data : {}
}).then(function(response){
// do something
}, function (response) {
// do something else
});
There's a few issues:
a cookie that isn't explicitly set with httpOnly : false will not be accessible through document.cookie in the browser. It will still be sent with HTTP requests, and if you check your browsers' dev tools you will most likely find the cookie there (in Chrome they can be found in the Resources tab of the dev tools);
the next() that you're calling should only be used if you want to defer sending back a response to some other part of your application, which—judging by your code—is not what you want.
So, it seems to me that this should solve your problems:
res.cookie('token', jwt.token, {
expires : new Date(Date.now() + 9999999),
httpOnly : false
});
res.status(200).send({ user, token: jwt.token });
As a side note: there's a reason for httpOnly defaulting to true (to prevent malicious XSS scripts from accessing session cookies and the like). If you don't have a very good reason to be able to access the cookie through client-side JS, don't set it to false.
I had the same issue with cross origin requests, here is how I fixed it. You need to specifically tell browser to allow credentials. With axios, you can specify it to allow credentials on every request like
axios.defaults.withCredentials = true
however this will be blocked by CORS policy and you need to specify credentials is true on your api like
const corsOptions = {
credentials: true,
///..other options
};
app.use(cors(corsOptions));
Update: this only work on localhost
For detail answer on issues in production environment, see my answer here
I was also going through the same issue.
Did code changes at two place :
At client side :
const apiData = await fetch("http://localhost:5000/user/login",
{
method: "POST",
body: JSON.stringify(this.state),
credentials: "include", // added this part
headers: {
"Content-Type": "application/json",
},
})
And at back end:
const corsOptions = {
origin: true, //included origin as true
credentials: true, //included credentials as true
};
app.use(cors(corsOptions));
Double check the size of your cookie.
For me, the way I was generating an auth token to store in my cookie, was causing the size of the cookie to increase with subsequent login attempts, eventually causing the browser to not set the cookie because it's too big.
Browser cookie size cheat sheet
There is no problem to set "httpOnly" to true in a cookie.
I am using "request-promise" for requests and the client is a "React" app, but the technology doesn't matter. The request is:
var options = {
uri: 'http://localhost:4000/some-route',
method: 'POST',
withCredentials: true
}
request(options)
.then(function (response) {
console.log(response)
})
.catch(function (err) {
console.log(err)
});
The response on the node.js (express) server is:
var token=JSON.stringify({
"token":"some token content"
});
res.header('Access-Control-Allow-Origin', "http://127.0.0.1:3000");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
res.header( 'Access-Control-Allow-Credentials',true);
var date = new Date();
var tokenExpire = date.setTime(date.getTime() + (360 * 1000));
res.status(201)
.cookie('token', token, { maxAge: tokenExpire, httpOnly: true })
.send();
The client make a request, the server set the cookie , the browser (client) receive it (you can see it in "Application tab on the dev tools") and then I again launch a request to the server and the cookie is located in the request: "req.headers.cookie" so accessible by the server for verifying.
I had same problem in Angular application. The cookies was not set in browser although I used
res.cookie("auth", token, {
httpOnly: true,
sameSite: true,
signed: true,
maxAge: 24 * 60 * 60 * 1000,
});
To solve this issue, I added app.use(cors({ origin:true, credentials:true })); in app.js file of server side
And in my order service of Angular client side, I added {withCredentials: true} as a second parameter when http methods are called like following the code
getMyOrders() {
return this.http
.get<IOrderResponse[]>(this.SERVER_URL + '/orders/user/my-orders', {withCredentials: true})
.toPromise();}
vue axios + node express 2023
server.ts (backend)
const corsOptions = {
origin:'your_domain',
credentials: true,
optionSuccessStatus: 200,
}
auth.ts (backend)
res.cookie('token', JSON.stringify(jwtToken), {
secure: true,
httpOnly: true,
expires: dayjs().add(30, "days").toDate(),
sameSite: 'none'
})
authService.ts (frontend)
export class AuthService {
INSTANCE = axios.create({
withCredentials: true,
baseURL: 'your_base_url'
})
public Login = async (value: any): Promise<void> => {
try {
await this.INSTANCE.post('login', { data: value })
console.log('success')
} catch (error) {
console.log(error)
}
}
it works for me, the cookie is set, it is visible from fn+F12 / Application / Cookies and it is inaccessible with javascript and the document.cookie function. Screenshot Cookies Browser
One of the main features is to set header correctly.
For nginx:
add-header Access-Control-Allow-Origin' 'domain.com';
add_header 'Access-Control-Allow-Credentials' 'true';
Add this to your web server.
Then form cookie like this:
"cookie": {
"secure": true,
"path": "/",
"httpOnly": true,
"hostOnly": true,
"sameSite": false,
"domain" : "domain.com"
}
The best approach to get cookie from express is to use cookie-parser.
A cookie can't be set if the client and server are on different domains. Different sub-domains is doable but not different domains and not different ports.
If using Angular as your frontend you can simply send all requests to the same domain as your Angular app (so the app is sending all API requests to itself) and stick an /api/ in every HTTP API request URL - usually configured in your environment.ts file:
export const environment = {
production: false,
httpPhp: 'http://localhost:4200/api'
}
Then all HTTP requests will use environment.httpPhp + '/rest/of/path'
Then you can proxy those requests by creating proxy.conf.json as follows:
{
"/api/*": {
"target": "http://localhost:5200",
"secure": false,
"changeOrigin": true,
"pathRewrite": {
"^/api": ""
}
}
}
Then add this to ng serve:
ng serve -o --proxy-config proxy.conf.json
Then restart your app and it should all work, assuming that your server is actually using Set-Cookie in the HTTP response headers. (Note, on a diff domain you won't even see the Set-Cookie response header, even if the server is configured correctly).
Most of these answers provided are corrections, but either of the configuration you made, cookies won't easily be set from different domain. In this answer am assuming that you are still in local development.
To set a cookie, you can easily use any of the above configurations or
res.setHeader('Set-Cookie', ['foo=bar', 'bar=baz']); // setting multiple cookies or
res.cookie('token', { maxAge: 5666666, httpOnly: true })
Both of the will set your cookie while to accessing your cookie from incoming request req.headers.
In my case, my cookie were not setting because my server was running on http://localhost:7000/ while the frontend was running on http://127.0.0.1:3000/ so the simple fix was made by making the frontend run on http://localhost:3000 instead.
I struggle with it a lot so follow below solution to get through this
1 check if you are getting token with response with postmen in my case i was getting token in postmen but it wasn't being saved in cookies.
I was using a custom publicRequest which looks like below
try {
const response = await publicRequest.post("/auth/login", user, {withCredentials: true});
dispatch(loginSuccess(response.data));
} catch (error) {
dispatch(loginFail());
dispatch(reset());
}
I was using this method in other file to handle login
I added {withCredentials: true} in both methods as option and it worked for me.
I am late to the party but nothing fixed it for me. This is what I was missing (and yeah, it's stupid):
I had to add res.send() after res.cookie() - so apperently sending a cookie is not enough to send a response to the browser.
res.cookie("testcookie", "text", cookieOptions);
res.send();
You have to combine:
including credentials on the request with, for example withCredentials: true when using axios.
including credentials on the api with, for example credentials: true when using cors() mw.
including the origin of your request on the api, for example origin: http://localhost:3000 when using cors() mw.
app.post('/api/user/login',(req,res)=>{
User.findOne({'email':req.body.email},(err,user)=>{
if(!user) res.json({message: 'Auth failed, user not found'})
user.comparePassword(req.body.password,(err,isMatch)=>{
if(err) throw err;
if(!isMatch) return res.status(400).json({
message:'Wrong password'
});
user.generateToken((err,user)=>{
if(err) return res.status(400).send(err);
res.cookie('auth',user.token).send('ok')
})
})
})
});
response
res.cookie('auth',user.token).send('ok')
server gives response ok but the cookie is not stored in the browser
Solution :
Add Postman Interceptor Extension to chrome which allows postman to store cookie in browser and get back useing requests.