Cookies are not set in integrated playground of Apollo Studio which are connected to local development environment with domain error

Question

I've a node with typescript app which is build with the following components:

    "apollo-server-core": "^3.6.7",
    "apollo-server-express": "^3.6.7",
    "argon2": "^0.28.5",
    "class-validator": "^0.13.2",
    "connect-redis": "^6.1.3",
    "cors": "^2.8.5",
    "dataloader": "^2.1.0",
    "dotenv": "^16.0.0",
    "dotenv-safe": "^8.2.0",
    "express": "^4.17.3",
    "express-session": "^1.17.2",
    "graphql": "^15.8.0",
    "ioredis": "^5.0.4",
    "nodemailer": "^6.7.3",
    "pg": "^8.7.3",
    "prop-types": "^15.8.1",
    "type-graphql": "^1.1.1",
    "typeorm": "^0.3.6",
    "uuid": "^8.3.2"

In this app I'm using cookies as mode of authentication token. Now when I login from my frontend (localhost:3000), the cookie is fetched and set correctly without any errors in the browser.

After that, when I'm running the same mutation on Apollo studio (which has replaced the old graphQL playground) cookies are fetched but are not getting set because of following domain error

Error Message:

This attempt to set a cookie via Set-Cookie header was blocked because its Domain attribute was invalid with regards to the current host url.

Answer 1

1. First we need to enable save credentials for studio and save it.

2. Update the express cookie setup code to allow following headers

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

3. Add the x-forwarded-proto header with https as value for your mutation which will request and set the cookie

With these steps issue of invalid domain should get resolved