Can't find stored session after refresh

Help
, ,
1

Hello, I’m trying to create a simple logging app with express-session, connect-mongodb-session and apollo-server-express and apollo-client for UI.

const start = async () => {
  const app: Express = express();
  const port = process.env.PORT;

  const MongoStore = connectMongo(session);
  const store = new MongoStore({
    uri: `${process.env.MONGO_DATABASE}`,
    collection: "mySessions",
  });

  store.on("error", function (error) {
    console.log(error);
  });

  const schema = await buildSchema({
    resolvers: resolvers,
    authChecker,
    validate: false,
  });

  const server = new ApolloServer({
    schema,
    context: ({ req, res }) => ({ req, res }),
    csrfPrevention: true,
    cache: "bounded",
    plugins: [
      ApolloServerPluginLandingPageGraphQLPlayground({
        settings: {
          "editor.theme": "dark",
          "request.credentials": "include",
        },
      }),
    ],
  });

  app.use(
    cors({
      credentials: true,
      origin: ["https://studio.apollographql.com", "http://localhost:3000"],
    })
  );

  await mongoose
    .connect(`${process.env.MONGO_DATABASE}`)
    .then(() => console.log("Connected to MongoDB!"));

  app.use(
    session({
      name: `${process.env.COOKIE_NAME}`,
      secret: `${process.env.SECRET}`,
      resave: false,
      saveUninitialized: false,
      store: store,
      cookie: {
        maxAge: 1000 * 60 * 60 * 24 * 365 * 10, //10 years
        httpOnly: true,
        sameSite: "lax", //csrf
        secure: process.env.NODE_ENV === "production", //cookie only works in https
      },
    })
  );

  await server.start();
  server.applyMiddleware({ app, cors: false });
  app.listen(port, () => {
    console.log(`Server is running at http://localhost:${port}/graphql`);
  });
};

start().catch((error) => {
  console.log(error);
});

Here is my login function:

  @Mutation(() => User)
  async login(
    @Arg("loginInput") loginInput: LoginInput,
    @Ctx() { req }: MyContext
  ): Promise<User> {
    const user = await UserModel.findOne({ username: loginInput.username });
    if (!user) {
      throw incorrectUsernameOrPassword;
    }

    const isValid = await comparePassword(loginInput.password, user.password);
    if (!isValid) {
      throw incorrectUsernameOrPassword;
    }

    req.session.userId = user.id;

    console.log("SESSION USER: ", user);
    console.log("SESSION: ", req.session);
    return user;
  }

Here I’m finding session from the context to use it for protected routes in UI:

  @Query(() => User, { nullable: true })
  async itIsMe(@Ctx() { req }: MyContext) {
    console.log("ITISME SESSION: ", req.session);
    if (!req.session.userId) {
      return null; //if you are not logged in
    }
    return await UserModel.findById(req.session.userId);
  }

It works on GraphQL Playground. And I can store cookie on UI as well.

Here is UI code:

const apolloClient = new ApolloClient({
  ssrMode: true,
  link: createHttpLink({
    uri: "http://localhost:4000/graphql",
    credentials: "include",
  }),
  cache: new InMemoryCache(),
});

export default withApollo(apolloClient);

onSubmit={async (values: LoginInput) => {
        const response = await login({
          variables: { loginInput: values },
          update: (cache, { data }) => {
            console.log(data);
            cache.writeQuery<ItIsMeQuery>({
              query: ItIsMeDocument,
              data: { __typename: "Query", itIsMe: data?.login },
            });
          },
        });

The problem is that after refresh, cookie does not diaper, but ItIsMe querie does not work as intended.
Meaning when I’m requesting ItIsMe querie it returns null unlike GraphQL Playground behavior.

If anyone knows where the problem could be, please help me out. Thanks.

2