Allowing Cookies in the Apollo GraphQL playground (version 3)

user_12404524 0
Viewed 794

According to the apollo docs:

If your server uses cookies to authenticate, you can configure your endpoint to share those cookies with https://studio.apollographql.com. To set this up, your cookie's value must contain SameSite=None; Secure. Additionally, these CORS headers must be present in your server's response to Studio:

Access-Control-Allow-Origin: https://studio.apollographql.com
Access-Control-Allow-Credentials: true

I have done everything mentioned there. I am using express, so I used the cors middleware to set the headers:

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

But still whenever I turn on the toggele for "Allow Cookies" in the playground, the status goes red (i.e., "Unable to reach server"). My editor and nodemon show no errors. Turning off the Allow Cookies toggle solves the problem but disables the cookie functionality.

How do I solve this problem?

graphql-playground apollo-server graphql cookies
1 Answers

If you are using the cors middleware, you may need to set the cors in the apollo.applyMiddleware to false and let your cors middleware works.

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

...

  apolloServer.applyMiddleware({
    app,
    cors: false, 
  });

Or, you could also use the cors option provided by the apollo-server instead.

  apolloServer.applyMiddleware({
    app,
    cors: {
      origin: 'https://studio.apollographql.com',
      credentials: true,
    },
  });
user_128524370
Related