typescript - Credentials are not passed to API Gateway - Stack Overflow

I am developing a simple system for practicing redirect requests with an API Gateway. The architecture of my system is the following: enter image description here

It has 2 microservices (one for authorization: login, register, logout; and other for fetch products data).

The auth microservice sets a cookie when user log in and I allow that credentials been passed

res.cookie('auth-token', token, {
    httpOnly: true,
    secure: true,
    sameSite: 'none',
    expires: new Date(Date.now() + 1000 * 60 * 60 * 12),
})

app.use(cors({
  origin: process.env.FRONTEND_URL,
  credentials: true,
}))

I realize the same with API Gateway

app.use(cors({
    origin: process.env.FRONTEND_URL,
    credentials: true,
}));

and Products API

app.use(cors({
  origin: process.env.FRONTEND_URL,
  credentials: true,
}))

The issue is, when I realizes a fetch from nextjs frontend, the auth middleware from API Gateway says that auth-token (cookie) was not provided

const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}products/all`, {
    method: "GET",
    headers: {
        "Content-Type": "application/json"
    },
    credentials: "include"
})

Response {
  status: 401,
  statusText: 'Unauthorized',
  headers: Headers {
    'content-security-policy': "default-src 'self';base-uri 'self';font-src 'self' https: data:;form-action 'self';frame-ancestors 'self';img-src 'self' data:;object-src 'none';script-src 'self';script-src-attr 'none';style-src 'self' https: 'unsafe-inline';upgrade-insecure-requests",
    'cross-origin-opener-policy': 'same-origin',
    'cross-origin-resource-policy': 'same-origin',
    'origin-agent-cluster': '?1',
    'referrer-policy': 'no-referrer',
    'strict-transport-security': 'max-age=31536000; includeSubDomains',
    'x-content-type-options': 'nosniff',
    'x-dns-prefetch-control': 'off',
    'x-download-options': 'noopen',
    'x-frame-options': 'SAMEORIGIN',
    'x-permitted-cross-domain-policies': 'none',
    'x-xss-protection': '0',
    'access-control-allow-origin': 'https://localhost:3003',
    vary: 'Origin',
    'access-control-allow-credentials': 'true',
    'content-type': 'application/json; charset=utf-8',
    'content-length': '36',
    etag: 'W/"24-60JOloLlqLGlwBjvIrwCbf+c3P8"',
    date: 'Wed, 01 Jan 2025 23:24:48 GMT',
    connection: 'keep-alive',
    'keep-alive': 'timeout=5'
  },
  body: ReadableStream { locked: false, state: 'readable', supportsBYOB: true },
  bodyUsed: false,
  ok: false,
  redirected: false,
  type: 'basic',
  url: 'http://localhost:3000/products/all'
}

Also I tried to debug in backend console and cookie does not appear

Do you know how I can solve it?

I am developing a simple system for practicing redirect requests with an API Gateway. The architecture of my system is the following: enter image description here

It has 2 microservices (one for authorization: login, register, logout; and other for fetch products data).

The auth microservice sets a cookie when user log in and I allow that credentials been passed

res.cookie('auth-token', token, {
    httpOnly: true,
    secure: true,
    sameSite: 'none',
    expires: new Date(Date.now() + 1000 * 60 * 60 * 12),
})

app.use(cors({
  origin: process.env.FRONTEND_URL,
  credentials: true,
}))

I realize the same with API Gateway

app.use(cors({
    origin: process.env.FRONTEND_URL,
    credentials: true,
}));

and Products API

app.use(cors({
  origin: process.env.FRONTEND_URL,
  credentials: true,
}))

The issue is, when I realizes a fetch from nextjs frontend, the auth middleware from API Gateway says that auth-token (cookie) was not provided

const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}products/all`, {
    method: "GET",
    headers: {
        "Content-Type": "application/json"
    },
    credentials: "include"
})

Response {
  status: 401,
  statusText: 'Unauthorized',
  headers: Headers {
    'content-security-policy': "default-src 'self';base-uri 'self';font-src 'self' https: data:;form-action 'self';frame-ancestors 'self';img-src 'self' data:;object-src 'none';script-src 'self';script-src-attr 'none';style-src 'self' https: 'unsafe-inline';upgrade-insecure-requests",
    'cross-origin-opener-policy': 'same-origin',
    'cross-origin-resource-policy': 'same-origin',
    'origin-agent-cluster': '?1',
    'referrer-policy': 'no-referrer',
    'strict-transport-security': 'max-age=31536000; includeSubDomains',
    'x-content-type-options': 'nosniff',
    'x-dns-prefetch-control': 'off',
    'x-download-options': 'noopen',
    'x-frame-options': 'SAMEORIGIN',
    'x-permitted-cross-domain-policies': 'none',
    'x-xss-protection': '0',
    'access-control-allow-origin': 'https://localhost:3003',
    vary: 'Origin',
    'access-control-allow-credentials': 'true',
    'content-type': 'application/json; charset=utf-8',
    'content-length': '36',
    etag: 'W/"24-60JOloLlqLGlwBjvIrwCbf+c3P8"',
    date: 'Wed, 01 Jan 2025 23:24:48 GMT',
    connection: 'keep-alive',
    'keep-alive': 'timeout=5'
  },
  body: ReadableStream { locked: false, state: 'readable', supportsBYOB: true },
  bodyUsed: false,
  ok: false,
  redirected: false,
  type: 'basic',
  url: 'http://localhost:3000/products/all'
}

Also I tried to debug in backend console and cookie does not appear

Do you know how I can solve it?

• typescript
• cookies
• microservices
• backend
• api-gateway

Share Improve this question Follow asked Jan 2 at 1:28 Gauss-IslasGauss-Islas 111 bronze badge 2

• Are you making the request from the client-side (browser) or Next.js server-side? – Phil Commented Jan 2 at 1:40
• I am using a server-side component – Gauss-Islas Commented Jan 2 at 1:45

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

First of all in

res.cookie('auth-token', token, {
    httpOnly: true,
    secure: process.env.NODE_ENV==='production',
    sameSite: 'none',
    expires: new Date(Date.now() + 1000 * 60 * 60 * 12),
})

secure: true: This requires HTTPS. If you're testing locally without HTTPS, set it to false, or for future purpose set it to process.env.NODE-ENV ==='production'.

And in authmiddleware try to validate cookie by

const authMiddleware = (req, res, next) => {
   const token = req.cookies['auth-token'];
    if (!token) {
        return res.status(401).json({ message: "Unauthorized" });
    }
    // Verify the token or proceed
    next();
};

app.use(authMiddleware);