TheLazy.Dev
Portfolio GitHub

Blog

graphql |node |apollo |redis

Cookies Setup in Apollo Studio for NodeJS GraphQL Servers

azzamaddouri

Azza Maddouri

Posted on July 23, 2024

Cookies Setup in Apollo Studio for NodeJS GraphQL Servers

In this tutorial, I'll guide you through enabling cookies between Apollo Studio and a NodeJS GraphQL server. We'll cover how to implement a cookie-based session approach using tools like express-session, ioredis, and connect-redis.

Setting Up Your Session with Redis

First, let's configure your session setup with Redis. Ensure your session is set up correctly with sameSite and secure cookie properties as these are necessary for the desired functionality in Apollo Studio.

const redisClient = new Redis();
redisClient.on("connect", () => {
    console.log("Redis connected");
});
redisClient.on("error", (err) => {
    console.error("Redis connection error:", err);
});

let redisStore = new RedisStore({
    client: redisClient,
    prefix: "myapp:",
    disableTouch: true
});

app.use(
    session({
        name: "myCookie",
        store: redisStore,
        cookie: {
            maxAge: 1000 * 60 * 60 * 24 * 365 * 10, // Alive for 10 years
            httpOnly: true,
            sameSite: "none", 
            secure: true 
        },
        secret: "qpwdomwqeoxqiewpoqjh",
        resave: false,
        saveUninitialized: false,
    }),
);
Enter fullscreen mode Exit fullscreen mode

Configuration for Postman and Apollo Studio

To make Postman work, switch sameSite to "lax" and secure to process.env.NODE_ENV === 'production'. For Apollo Studio, keep the configuration as shown above.

cookie: {
    sameSite: "lax", 
    secure: process.env.NODE_ENV === 'production'
}
Enter fullscreen mode Exit fullscreen mode

Configuring Apollo Studio

  1. Enable Cookies in Apollo Studio:

    • Open Apollo Studio.
    • Click the cog icon in the upper left-hand corner to open the connection settings dialog. Connection Settings Dialog Modal
    • Toggle "Include Cookies" to ON. Include Cookies On

  2. Server Configuration:

    • Add these lines right after initializing the app: 
    app.set("trust proxy", process.env.NODE_ENV !== "production");
app.set("Access-Control-Allow-Origin", "https://studio.apollographql.com");
app.set("Access-Control-Allow-Credentials", true);

  3. CORS Configuration:

    • Add the URL to your CORS origin header and enable credentials in your server.ts: 
    const cors = {
    credentials: true,
    origin: "https://studio.apollographql.com",
};

  4. Apply Middleware:

    • Pass the cors when applying the Apollo Server middleware: 
    apolloServer.applyMiddleware({ app, cors });

Final Server Configuration

Your server.ts should look like this:

const app = express() as any;
app.set("trust proxy", process.env.NODE_ENV !== "production");
app.set("Access-Control-Allow-Origin", "https://studio.apollographql.com");
app.set("Access-Control-Allow-Credentials", true);

const redisClient = new Redis();
redisClient.on("connect", () => {
    console.log("Redis connected");
});
redisClient.on("error", (err) => {
    console.error("Redis connection error:", err);
});

let redisStore = new RedisStore({
    client: redisClient,
    prefix: "myapp:",
    disableTouch: true
});

const cors = {
    credentials: true,
    origin: "https://studio.apollographql.com",
};

app.use(
    session({
        name: "myCookie",
        store: redisStore,
        cookie: {
            maxAge: 1000 * 60 * 60 * 24 * 365 * 10, // Alive for 10 years
            httpOnly: true,
            sameSite: "none", 
            secure: true
        },
        secret: "qpwdomwqeoxqiewpoqjh",
        resave: false,
        saveUninitialized: false,
    }),
);

const apolloServer = new ApolloServer({
    schema: await buildSchema({
        resolvers: [],
        validate: false
    }),
    context: ({ req, res }): MyContext => ({
        req,
        res,
        redis: redisClient,
    })
});

await apolloServer.start();
apolloServer.applyMiddleware({ app, cors });
Enter fullscreen mode Exit fullscreen mode

Setting the X-Forwarded-Proto Apollo Studio Header

In the Shared headers section at the bottom of the dialog, set a header called x-forwarded-proto and assign it a value of https.

x-forwarded-proto: https
Enter fullscreen mode Exit fullscreen mode

Setting the x-forwarded-proto Apollo Studio Header
Make sure to send this header with every request. When you make a login request, you'll have your cookie set.

Cookie Set

Then, use the Me query to check if there's a user logged in and session active.

Active Session

I hope this tutorial helps you set up your cookies properly with Apollo Studio and your NodeJS GraphQL server. Happy coding! 😊

💖 💪 🙅 🚩
azzamaddouri
Azza Maddouri

Posted on July 23, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Cookies Setup in Apollo Studio for NodeJS GraphQL Servers
graphql Cookies Setup in Apollo Studio for NodeJS GraphQL Servers

July 23, 2024