Allow cookies to be sent alongside request

Using:

  • apollo-server-express (3.0.1)
  • Apollo Studio

In GraphQL playground, I could change “request.credentials” value from “omit” to “include” via the playground’s settings to allow cookies to be sent alongside the request.

How to I replicate this setting in Apollo Studio since the GraphQL playground is now retired?

Thank you in advance!

3 Likes

@calscks the Explorer / Sandbox Cookies section of the docs might help.

@hwillson I did everything mentioned in the docs, yet the playground says “Unable to reach server”. My editor and nodemon shows no errors. Everything works when I turn the Allow Cookies toggle off.

Here is the express part of my code:

 app.use(
    session({
      name: "myCookie",
      store: new RedisStore({ client: redisClient, disableTouch: true }),
      cookie: {
        maxAge: 1000 * 60 * 60 * 24 * 365 * 10, //10 years
        httpOnly: true,
        secure: true,
        sameSite: "none",
      },
      saveUninitialized: false,
      secret: "guydgwyagdakhdkui7iudh",
      resave: false,
    })
  );

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

  const apolloServer = new ApolloServer({
    schema: await buildSchema({
      resolvers: [HelloResolver, PostResolver, UserResolver],
      validate: false,
    }),
    context: ({ req, res }): MyContext => ({ em: orm.em, req, res }),
  });

  await apolloServer.start();
  apolloServer.applyMiddleware({ app });

  app.listen(4000, () => {
    console.log("Server started at http://localhost:4000");
  });

Any clue on what I am getting wrong?

1 Like

Did you find a solution? Running into exact same issue

Try this

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

apolloServer.applyMiddleware({ app, cors })

Not working here, as this setting is to decide:

whether to expose the response to the frontend JavaScript code when the request’s credentials mode (Request.credentials) is include.

mdn -link

the prerequesty is that that the client(was GraphQL playground before, now should be the Apollo Studio) request with Request.credentials set to ‘inlucde’. But I can find no settings related in Apollo Studio.

As a workaround, I find this stackoverflow question to use ApolloServerPluginLandingPageGraphQLPlayground plugin as the landing page

@calscks @aniruddh @bashgardev @daolanfler In addition to setting the right headers on your request response per the docs, did you turn on “Include cookies” from the Sandbox Connection Settings modal?

This is what sets the Sandbox to actually set credentials: include as part of the request. I attached some screenshots to find this setting:


Yes, I have. And this is the server’s cors and cookie setting:

const corsOptions: CorsOptions = {
  origin: "https://studio.apollographql.com",
  credentials: true,
  // exposedHeaders: ["Set-Cookie", "connection"],
};
cookie: {
    maxAge: 1000 * 60 * 60 * 24 * 365 * 10, // 10 years
    httpOnly: true,
    secure: true,
    sameSite: 'none'
}

Hi there,

Any chance you might be able to send a runnable repro or codesandbox? :pray:

Taking a wild stab, if using express-session, cookie-session, or something else based on cookies (the npm package), I wonder if you might be hitting the same problem as this person did in this issue, and if that’s the case, then perhaps the workaround described here might also work for you?

(essentially express-session is silently refusing to set the set-cookie header for localhost http endpoints to adhere to an older revision of the spec; one workaround is to trick it into setting it anyway by saying the request comes from a secured proxy; express-session’s maintainer also proposes another workaround by overwriting the value of req.secure )

Hello
To solve that you need to pass cors when applying the apolloSever.applyMiddleware

like so:

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

I’m also having the same issue here and adding the ‘cors’ object to the applyMiddleware method does not fix the issue.

Has there been any progress on this everyone? @daolanfler @aniruddh
(I also feel like we are all debugging the same outdated tutorial)

Try setting X-Forwarded-Proto: https in your apollo sandbox