CODEWITHSUNDEEP
cookiesgraphqlapollo-servergraphql-playground
amkhrjee
amkhrjee

Reputation: 946

Allowing Cookies in the Apollo GraphQL playground (version 3)

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?

Upvotes: 1

Views: 1765

Answers (1)

Hilda Lam
Hilda Lam

Reputation: 61

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,
    },
  });

Upvotes: 6

Related Questions