fix: support setting cookies from MiddlewareResponse (#2027)

* fix: try building repro

* fix: install next middleware before building

* fix: update test expectation

* fix: use local version of utils

* fix: typo

* fix: some more

* fix: the bug

* fix: typo

* fix: revert changes to next.config.js

* fix: typo

* fix: oops

* fix: header exists (see .has above)

* fix: use headers.get

* fix: move test into cypress code

* fix: revert changes to e2e

* fix: remove console.log

* fix: add another assertion for headers

* revert one more line

* chore: trigger build

* chore: updated config to include cookies/middleware

---------

Co-authored-by: Tatyana <43764894+taty2010@users.noreply.github.com>
Co-authored-by: taty2010 <shydalys123@gmail.com>

Author: Skn0tt

cypress/integration/middleware/standard.spec.ts

@@ -37,6 +37,14 @@ describe('Standard middleware', () => {
       cy.getCookie('netlifyCookie').should('have.property', 'value', 'true')
     })
   })
+
+  // https://github.com/netlify/pillar-support/issues/350
+  it('MiddlewareResponse adds cookies', () => {
+    cy.request('/cookies/middleware').then((response) => {
+      cy.getCookie('middlewareCookie').should('have.property', 'value', 'true')
+      expect(response.headers).to.have.property('x-foo', 'bar')
+    })
+  })
 })
 
 describe('Middleware matchers', () => {

demos/middleware/middleware.ts

@@ -53,6 +53,13 @@ export async function middleware(req: NextRequest) {
     return request.rewrite('/api/hello')
   }
 
+  if (pathname.startsWith('/cookies/middleware')) {
+    const response = await new MiddlewareRequest(req).next()
+    response.cookies.set('middlewareCookie', 'true')
+    response.headers.set('x-foo', 'bar')
+    return response
+  }
+
   if (pathname.startsWith('/cookies')) {
     response = NextResponse.next()
     response.cookies.set('netlifyCookie', 'true')
@@ -129,8 +136,8 @@ export const config = {
   matcher: [
     '/api/:all*',
     '/headers',
+    '/cookies/:path*',
     { source: '/static' },
-    { source: '/cookies' },
     { source: '/matcher-cookie'},
     { source: '/shows/((?!99|88).*)' },
     {

demos/middleware/pages/cookies/middleware.js

@@ -0,0 +1,9 @@
+const Cookies = () => {
+  return (
+    <div>
+      <p>The cookie "middlewareCookie" should be set to true</p>
+    </div>
+  )
+}
+
+export default Cookies

packages/next/src/middleware/response.ts

@@ -11,7 +11,15 @@ export class MiddlewareResponse extends NextResponse {
   private readonly dataTransforms: NextDataTransform[]
   private readonly elementHandlers: Array<[selector: string, handlers: ElementHandlers]>
   constructor(public originResponse: Response) {
-    super()
+    // we need to propagate the set-cookie header, so response.cookies.get works correctly
+    const initHeaders = new Headers()
+    if (originResponse.headers.has('set-cookie')) {
+      initHeaders.set('set-cookie', originResponse.headers.get('set-cookie'))
+    }
+
+    super(undefined, {
+      headers: initHeaders,
+    })
 
     // These are private in Node when compiling, but we access them in Deno at runtime
     Object.defineProperty(this, 'dataTransforms', {

packages/runtime/src/templates/edge-shared/utils.ts

@@ -57,10 +57,15 @@ export const addMiddlewareHeaders = async (
   return response
 }
 
+interface ResponseCookies {
+  readonly _headers: Headers
+}
+
 interface MiddlewareResponse extends Response {
   originResponse: Response
   dataTransforms: NextDataTransform[]
   elementHandlers: Array<[selector: string, handlers: ElementHandlers]>
+  get cookies(): ResponseCookies
 }
 
 interface MiddlewareRequest {
@@ -184,6 +189,12 @@ export const buildResponse = async ({
     if (request.method === 'HEAD' || request.method === 'OPTIONS') {
       return response.originResponse
     }
+
+    // NextResponse doesn't set cookies onto the originResponse, so we need to copy them over
+    if (response.cookies._headers.has('set-cookie')) {
+      response.originResponse.headers.set('set-cookie', response.cookies._headers.get('set-cookie')!)
+    }
+
     // If it's JSON we don't need to use the rewriter, we can just parse it
     if (response.originResponse.headers.get('content-type')?.includes('application/json')) {
       const props = await response.originResponse.json()