(Next.js, Express session) New session for every request made inside getInitialProps

Question

I am trying to make Express session work with Next.js, and have successfully done so on the client side, but I am having trouble with API calls made from inside getInitialProps.

Note: I am using isomorphic-unfetch to make API calls. My Next.js installation runs on localhost:3000, my Express server on localhost:5000.

Here is an example of a client side API call (outside of getInitialProps):

componentDidMount() {
  fetch('/path/to/endpoint', {
    method: 'GET',
    credentials: 'include',
  }).then((res) => console.log(res));
}

I'm logging res here because I wanted to see the headers. Turns out this request has an empty headers object. If i resolve the promise I get the data I requested though. The session ID from this call stays consistent on the server even if I refresh the page. Everything is working as expected here.

Here is an example of an API call inside getInitialProps:

static async getInitialProps(ctx) {
  fetch('/path/to/endpoint', {
    method: 'GET',
    credentials: 'include',
  }).then((res) => console.log(res.headers));
}

Again, logging to see the headers. This response has headers, they look like this:

Headers {
_headers:
{ 'x-powered-by': [ 'Express' ],
'access-control-allow-origin': [ 'http://localhost:3000' ],
vary: [ 'Origin, Accept-Encoding' ],
'access-control-allow-credentials': [ 'true' ],
'x-frame-options': [ 'SAMEORIGIN' ],
'x-xss-protection': [ '1; mode=block' ],
'set-cookie'['YgJGcZPBgbE_nEqqLZpw0ba0pyaf2eNS','connect.sid=s%3AYgJGcZPBgbE_nEqqLZpw0ba0pyaf2eNS.Oye%2F7%2BsyXrrLJwphEJ3nq3yMkBhM3%2Fm4PCl9KIV%2FTzA; Path=/; Expires=Sun, 05 Aug 2018 15:56:52 GMT;     HttpOnly' ],
'content-type': [ 'application/json; charset=utf-8' ],
'content-length': [ '246' ],
etag: [ 'W/"f6-82FKQ+ERtkxLiKa8hEIeY4kgGgE"' ],
date: [ 'Sun, 22 Jul 2018 15:56:52 GMT' ],
connection: [ 'close' ] } }

As you can see there is connect.sid (express session ID) in my set-cookie header, but the problem is that the connect.sid cookie changes whenever I refresh the page and does not match the session ID of client side API calls (which stays the same even after refreshing the page).

My session object on the Express server looks like this:

app.use(
  session({
  resave: false,
  name: 'connect.sid',
  saveUninitialized: false,
  secret: SESSION_SECRET,
  unset: 'destroy',
  cookie: {
    maxAge: 3600000 * 24 * 14,
    secure: false,
  },
  store: new MongoStore({
    url: mongoUrl,
    autoReconnect: true,
  }),
})

);

If anyone has an idea how I can make API calls from inside getInitialProps work with express session I'd appreciate the input! Thank you in advance.

Answer 1

I found the solution. Instead of using credentials: 'include' I had to send the session cookie in the request header. Here's a working request inside getInitialProps.

static async getInitialProps(ctx) {
      const res = await fetch('path/to/endpoint', {
        headers: {
          cookie: ctx.req.headers.cookie,
        },
      });
      const user = await res.json();

      return { user };
    }