Cookie not set, even though it is in response headers. Using express-session cookies

Question

Problem:

Trying to set the cookie on login using express-session, but think I'm missing something obvious. The response to the login POST request includes Set-Cookie. I've also set the Access-Control-Allow-Origin and Access-Control-Allow-Headers to wildcards as shown here: https://i.sstatic.net/XS0Zv.png

But we see that in the browser storage (tried with Firefox and Chrome) there is nothing. As shown here

I'm currently setting my express-session as follows (refer to end of post for full code. Adding snippet for easier read):

app.use(session({
        genid: () => { return uuidv4(); },
        store: new MongoStore({ mongooseConnection: mongoose.connection }),
        secret: process.env.SESSION_SECRET,
        resave: false,
        saveUninitialized: true,
        cookie: {
          httpOnly: true,
          secure: false,
          sameSite: true,
        }
      })
    );

Then after I've verified the user is getting logged in, I try to set the userId via:

req.session.userId = user.id;

Possibly Relevant Info

• These sessions are successfully getting stored in Mongo as you can see here, which makes me believe that I'm at least generating the sessions correctly. Now I could be totally wrong here...
• my backend is running on localhost:8000 via: app.listen(8000);
• my client is running on http://localhost:3000/
• trying not to use Apollo GraphQL for learning purposes

Things I've tried so far:

• different combinatons of resave, saveUnitialized.
• remove the cookie parameter.
• stop setting userId
• restarting browser and servers
• Looked at relevant stack overflow posts

Please advise! Even ideas on how to debug this or what other things I can look at would be immensely helpful!

Relevant Code

app.js

const express = require('express');
const { graphqlHTTP } = require('express-graphql');
const mongoose = require('mongoose');
const session = require('express-session');
const MongoStore = require('connect-mongo')(session);
const {v4: uuidv4} = require('uuid');

const graphqlSchema = require('./graphql/schema/index');
const graphqlResolvers = require('./graphql/resolvers/index'); 

const app = express();
const path = '/graphql';

app.use(bodyParser.json());

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'POST,GET,OPTIONS');
  res.setHeader('Access-Control-Allow-Headers', '*');
  if (req.method === 'OPTIONS') {
    return res.sendStatus(200);
  }
  next();
});

mongoose
  .connect(`mongodb+srv://${process.env.MONGO_USER}:${process.env.MONGO_PASSWORD}@cluster0.ccz92.mongodb.net/${process.env.MONGO_DB}?retryWrites=true&w=majority`,
    { useNewUrlParser: true, useUnifiedTopology: true, useFindAndModify: false }
  )
  .then(() => {
    app.use(session({
        genid: () => { return uuidv4(); },
        store: new MongoStore({ mongooseConnection: mongoose.connection }),
        secret: process.env.SESSION_SECRET,
        resave: false,
        saveUninitialized: true,
        cookie: {
          httpOnly: true,
          secure: false,
          sameSite: true,
        }
      })
    );
    app.use(path, graphqlHTTP({
      schema: graphqlSchema,
      rootValue: graphqlResolvers,
      graphiql: true,
    }));

    app.listen(8000);
  })
  .catch(err => {
    console.log(err);
  });

graphql/resolvers/auth.js

const argon2 = require('argon2');
const jwt = require('jsonwebtoken');

const User = require('../../models/user');

module.exports = {
  createUser: async args => {
    try {
      const existingUser = await User.findOne({
        email: args.userInput.email
      });
      if (existingUser) {
        throw new Error('User exists already.');
      }
      const hashedPassword = await argon2.hash(
        args.userInput.password,
        12
      );
      const user = new User({
        email: args.userInput.email,
        password: hashedPassword,
        loggedIn: true
      });
      const result = await user.save();
      const token = jwt.sign(
        { userId: result.id, email: result.email },
        process.env.JWT_KEY,
        { expiresIn: '1h' }
      );
      return {
        userId: result.id,
        token: token,
        tokenExpiration: 1
      };
    } catch (err) {
      console.log("error in resolvers/auth.js");
      throw err;
    }
  },
  login: async (args, req) => {
    const { userId } = req.session;
    if (userId) {
      console.log("found req.session");
      return User.findOne({ _id: userId });
    }
    console.log("looking for user with ", args.userInput.email);
    const user = await User.findOne({ email: args.userInput.email });
    console.log("found user");
    if (!user) {
      throw new Error("User does not exist!");
    }
    user.loggedIn = true;
    user.save();
    const isEqual = await argon2.verify(user.password, args.userInput.password);
    if (!isEqual) {
      throw new Error ("Password is incorrect!");
    }
    console.log("setting session.userId");
    req.session.userId = user.id;
    return { ...user._doc, password: null};
  },
  logout: async (args, req) => {
    if (!req.isAuth) {
      throw new Error('Unauthenticated');
    }
    try {
      const result = await User.findOneAndUpdate(
        { _id: req.userId },
        { loggedIn: false },
        { new: true },
      );
      return { ...result._doc, password: null };
    } catch (err) {
      console.log("logout error", err);
      throw(err);
    }
  },
};

Answer 1

So it turned out to be a CORS issue. I didn't realize that the port would mean a different origin. In this case my client is at 3000 and my server is at 8000.

Given the CORS nature, in the client I need to include credentials (cookies, authorization headers, or TLS client certificates) when I'm fetching:

fetch(config.url.API_URL, {
      method: 'POST',
      body: JSON.stringify(requestBody),
      headers: {
        'Content-Type': 'application/json'
      },
      credentials: "include",
    })

This will tell the user agent to always send cookies.

Then serverside I need to set Access-Control-Allow-Credentials to be true as such:

res.setHeader('Access-Control-Allow-Credentials', true);

This will allow the browser to expose the response (which has the cookie) to the frontend Javascript code.

Since we are using credentials, we will need to specify Access-Control-Allow-Headers and Access-Control-Allow-Origin

res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept')

res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');