Express/node cookie connect.sid missing on client in production (Heroku) although visible on localhost

Viewed 104

I have a React App that is deployed on Netlify and a GraphQL/express backend deployed on Heroku.

I use the connect.sid cookie to the server to persist login and handle other backend requests e.g. stripe payments. The cookie is generated in my local development environment; however, in production (server + postgres db deployed on Heroku + client deployed on Netlify) the connect.sid cookie is not sent back to the client.

However, when viewing the Heroku logs, I can tell that the cookie is being generated. It is just not usable or visible by the client.

Here is my node server:

const startServer = async () => {
  if (typeOrmOptions.url) {
    await createConnection(typeOrmOptions); // --> was this before
  } else {
    await createConnection(); // --> was this before
  }

  const server = new ApolloServer({
    typeDefs,
    resolvers,
    context: ({ req }: any) => ({ req }),
    introspection: true,
    playground: true
  });

  const app = express();

  const forceSsl = function(req, res, next) {
    if (req.headers["x-forwarded-proto"] !== "https") {
      return res.redirect(["https://", req.get("Host"), req.url].join(""));
    }
    return next();
  };

  app.use(forceSsl);

  app.set("trust proxy", 1);

  app.use(
    session({
      resave: false,
      saveUninitialized: false,
      cookie: {
        maxAge: 86400000,
        domain
      },
      store: new MemoryStore({
        checkPeriod: 86400000 // prune expired entries every 24h
      }),
      secret: "keyboard cat"
    })
  );

  server.applyMiddleware({
    app,
    cors: {
      origin: webUrl,
      credentials: true
    }
  });

  app.listen({ port: port }, () =>
    console.log(
      ` Server ready at http://localhost:${port}${server.graphqlPath}, weburl = ${webUrl}`
    )
  );
};

startServer();

Here is the React client

const serverUrl =
  process.env.NODE_ENV === "development"
    ? "http://localhost:4000"
    : "https://server-domain.com";

const client = new ApolloClient({
  uri: `${serverUrl}/graphql`,
  credentials: "include"
});

function App() {
  console.log(serverUrl, "uri");
  return (
    <ApolloProvider client={client}>
      <ThemeProvider theme={theme}>
        <Routes/>
      </ThemeProvider>
    </ApolloProvider>
  );
}

export default App;
  • Output of the Network on localhost
  • Output of the cookie on localhost
  • Output of the Network in production
  • Output of the cookie (or lack thereof) in production
  • Output of the console in production
  • Output of the Heroku logging

As you can see, the sessions are being logged server side ... they just aren't making it to the client.

Banging my head against the wall -- would appreciate any help!

Any suggestions on how to fix this?

0 Answers
Related