I have a NestJs app that uses HttpOnly cookies for authentication. In development everything works perfectly. My NextJs client (http://localhost:4200) uses Graphql to send a login request to my NestJs server (http://localhost:3333), which sets httpOnly cookies in the response, and then the client successfully adds the cookies to the browser storage.
However, when I deploy both apps to Render.com, everything works apart from the final step. The cookies are successfully received in the response, but are not added to the browser storage. Interestingly, if I use the GraphQL playground of the deployed production server to make the login request, everything works. So, clearly, the issue seems to be that the request is coming from a subdomain.
My production configuration:
Client: https://swingapple-web-staging.onrender.com
Server: https://swingapple-api-staging.onrender.com
Cookies settings (Server):
sameSite: process.env.NODE_ENV === 'production' ? 'none' : 'lax',
secure: process.env.NODE_ENV === 'production',
domain: process.env.NODE_ENV === 'production' ? '.onrender.com' : undefined
Nestjs's GraphQLModule settings (Server):
playground: true,
introspection: true,
autoSchemaFile: true,
sortSchema: true,
context: ({ req, res }) => ({ req, res }),
cors: {
credentials: true,
origin: [process.env.CLIENT_URL, 'http://localhost:4200']
}
Relevant Nest main.ts config (server):
app.set('trust proxy', 1);
graphql-request settings (client):
credentials: 'include'
I've spent days trying to figure this out so any help would be really appreciated!