Search code examples
typescriptexpresssessiongraphqlexpress-graphql

GraphQL Explorer not working with Express Sessions


I'm trying to create a login system with GraphQL and Express, but the sessions aren't being saved. Whenever I log in, req.session.userId stays undefined.

My code:

(async () => {
    await connect(process.env.MONGO_URI!, { dbName: "example" });

    const app = express();

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

    app.use(
        session({
            name: "qid",
            secret: process.env.SESSION_SECRET!,
            store: MongoStore.create({
                mongoUrl: process.env.MONGO_URI,
                dbName: "example"
            }),
            saveUninitialized: false,
            resave: false,
            cookie: {
                maxAge: 6.048e8,
                httpOnly: __prod__,
                sameSite: "lax",
                secure: __prod__
            }
        })
    );

    const server = new ApolloServer({
        schema: await buildSchema({
            resolvers: [HelloResolver, UserResolver],
            validate: false
        }),
        context: ({ req, res }) => ({ req, res })
    });

    await server.start();

    server.applyMiddleware({
        app,
        cors: {
            origin: [__clientUrl__, "https://studio.apollographql.com"],
            credentials: true
        }
    });

    app.listen(__port__, () =>
        console.log(
            `🚀 Server started at http://localhost:${__port__}${server.graphqlPath}`
        )
    );
})();

TypeGraphQL Login Mutation:

    @Mutation(() => User, { nullable: true })
    public async login(
        @Arg("username") username: string,
        @Arg("password") password: string,
        @Ctx() { req }: Context
    ) {
        const user = await UserModel.findOne(
            username.includes("@") ? { email: username } : { username }
        );
        if (!user) return;

        if (!(await verify(user.password, password))) return;

        req.session.userId = user._id;

        return user;
    }

I also enabled cookies in the GraphQL Explorer and set these headings: Headers


Solution

  • I did some research and realized I need to write this when you're creating the ApolloServer instance:

        const server = new ApolloServer({
            schema: await buildSchema({
                resolvers: [HelloResolver, UserResolver],
                validate: false
            }),
            context: ({ req, res }) => {
    >           res.header(
    >               "Access-Control-Allow-Origin",
    >               "https://studio.apollographql.com"
    >           );
    >           res.header("Access-Control-Allow-Credentials", "true");
    
                return { req, res };
            }
        });
    

    This allows cookies to be set in the GQL Explorer. Let me know if this works for you!