Issues with Cookies Not Appearing in Browser for GraphQL Requests Across Microservices

[Netvoiangel]

Issue with Cookies in Local Development

Hi everyone,

I have two microservices: Auth (using GraphQL Yoga) and Gateway (using GraphQL Mesh). The services are deployed locally on ports 3000 and 4000 respectively. When I navigate to http://localhost:3000/graphql and perform a mutation request, cookies appear in the browser as expected. However, when I perform the same request at http://localhost:4000/graphql, no cookies appear in the browser.

Here are the relevant configurations:

.meshrc.yaml:

sources:
  - name: Auth
    handler:
      graphql:
        endpoint: http://localhost:3000/graphql
plugins:
  - httpDetailsExtensions:
      if: "env.NODE_ENV === 'development'"
pollingInterval: 3600000
serve:
  playground: true
  hostname: 0.0.0.0
  cors:
    credentials: true
    origin: http://localhost:4000

session.ts:

export function setCookie(ctx: GraphQLContext, name: TokenType, token: string, expires: string | number) {
  ctx.request.cookieStore?.set({
    name,
    sameSite: COOKIES_SAME_SITE as CookieSameSite,
    secure: en(COOKIES_SECURE),
    domain: COOKIES_DOMAIN!,
    expires: new Date(Date.now() + ms(expires.toString())),
    value: token,
    httpOnly: en(COOKIES_HTTPONLY)
  });
}

export function assignAuthorizationCookies(ctx: GraphQLContext, { id, name, email, phone }: { id: string, name: string, email?: string | null, phone?: string | null }) {
  const accessToken = generateToken({ id, name, email, phone }, JWT_TOKEN!, SESSION_EXPIRES!);
  setCookie(ctx, TokenType.ACCESS_TOKEN, accessToken, SESSION_EXPIRES!);
  const refreshToken = generateToken({ id }, REFRESH_TOKEN!, REFRESH_SESSION_EXPIRES!);
  setCookie(ctx, TokenType.REFRESH_TOKEN, refreshToken, REFRESH_SESSION_EXPIRES!);
}

Mutation and Response Details

Mutation:

mutation {
  loginUser(emailOrPhone: "88005553535", password: "password") {
    name
  }
}

Response:

{
  "data": {
    "loginUser": {
      "name": "Name"
    }
  },
  "extensions": {
    "httpDetails": [
      {
        "sourceName": "Auth",
        "request": {
          "timestamp": 1722756057656,
          "url": "http://localhost:3000/graphql",
          "method": "POST",
          "headers": {
            "accept": "application/graphql-response+json, application/json, multipart/mixed",
            "content-type": "application/json"
          }
        },
        "response": {
          "timestamp": 1722756060429,
          "status": 200,
          "statusText": "OK",
          "headers": {
            "set-cookie": [
              "accessToken=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjY2YTMzODFlNDc3YjQwZWI2YzY5MGYwZCIsIm5hbWUiOiJUaW11ciIsImVtYWlsIjpudWxsLCJwaG9uZSI6Iis3OTg3MDU5OTEzNyIsImlhdCI6MTcyM; Domain=localhost; Path=/; Expires=Sun, 04 Aug 2024 21:21:21 GMT; SameSite=Strict; HttpOnly",
              "refreshToken=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjY2YTMzODFlNDc3YjQwZWI2YzY5MGYwZCIsImlhdCI; Domain=localhost; Path=/; Expires=Tue, 03 Sep 2024 21:21:21 GMT; SameSite=Strict; HttpOnly"
            ],
            "content-type": "application/graphql-response+json; charset=utf-8",
            "date": "Sun, 04 Aug 2024 07:21:00 GMT",
            "content-length": "39"
          }
        },
        "responseTime": 2773
      }
    ]
  }
}

CORS Configuration

I also tried configuring CORS, but it didn't help:

app.ts (Auth):

export const yoga = createYoga({
  ...
  plugins: [
    ...
    useCookies(),
    ...
  ],
  cors: {
    origin: 'http://localhost:3000',
    credentials: true,
    allowedHeaders: ['X-Custom-Header'],
    methods: ['POST']
  }
});

.meshrc.yaml (Gateway):

cors:
  credentials: true
  origin: http://localhost:4000

Any ideas on why cookies are not being set for requests to the Gateway service? Thank you!

[ardatan]

Any ideas on why cookies are not being set for requests to the Gateway service? Thank you!

Because Mesh doesn't have this kind of a feature yet :)

[ardatan]

Also would you mind if I ask more about your use case? How do you think we should handle cookies in that case? Because there might be also other services. If we hold cookies from all services, it might cause a leak between services.

[Warxcell]

Not sure I completely understand your issue, but we are using cookies with no issues with Graphql mesh.

This is what I did:

Inside .meshrc.ts

          "operationHeaders": {
            "Cookie": "{context.headers['cookie']}",

• custom plugin which collects all cookies from sub-schemas and forwards them towards client. (and also merges extensions from all sub-schemas, because that was also missing)

const useAddAuthHeaderPlugin = (): MeshPlugin<MeshContext & { extensions: Record<string, unknown> } & {
  bench: Benchmark
}> => {
  return {
    onFetch(payload) {
      const context = payload.context

      /** @ts-ignore WHY IT DOES NOT CONTAINS THE TYPE */
      const cookieStore: CookieStore | undefined = context?.request.cookieStore;

      if (!cookieStore) {
        return
      }

      return async (payload) => {
        payload.response.json()
          .then((data) => {
            context.extensions = {
              ...(context.extensions ?? {}),
              ...Object.fromEntries(
                Object.entries((data.extensions ?? {}) as Record<string, any>)
                  .map(([key, value]) => {
                      const existingExtension = context.extensions?.[key]
                      if (Array.isArray(value) && Array.isArray(existingExtension)) {
                        value.push(...existingExtension)
                      } else if (existingExtension !== undefined) {
                        console.error(`extensions[${key}] (${existingExtension}) will be overwritten by ${value}`)
                      }
                      return [key, value]
                    }
                  )
              )
            }
          })
          .catch((error) => {
            console.error(error)
          })

        const promises: Promise<void>[] = []
        payload.response.headers.forEach((val, name) => {
          if (name.toLowerCase() !== 'set-cookie') {
            return
          }

          if (Array.isArray(val)) {
            val.forEach((val) => {
              const cookie = parseCookie(val);
              promises.push(cookieStore.set({
                name: cookie.name,
                value: cookie.value,
                domain: cookie.domain ?? null,
                path: cookie.path,
                expires: cookie.expires ?? null,
                secure: cookie.secure,
                sameSite: cookie.sameSite,
                httpOnly: cookie.httpOnly,
              }))
            })
          } else {
            const cookie = parseCookie(val);
            promises.push(cookieStore.set({
              name: cookie.name,
              value: cookie.value,
              domain: cookie.domain ?? null,
              path: cookie.path,
              expires: cookie.expires ?? null,
              secure: cookie.secure,
              sameSite: cookie.sameSite,
              httpOnly: cookie.httpOnly,
            }))
          }
        })

        await Promise.all(promises);
      }
    }
  }
}

export default useAddAuthHeaderPlugin;