Fix preview mode expiration duration (#12118)

packages/next/next-server/server/api-utils.ts

@@ -298,12 +298,14 @@ export function tryGetPreviewData(
   const tokenPreviewData = cookies[COOKIE_NAME_PRERENDER_DATA]
 
   const jsonwebtoken = require('next/dist/compiled/jsonwebtoken') as typeof import('jsonwebtoken')
-  let encryptedPreviewData: string
+  let encryptedPreviewData: {
+    data: string
+  }
   try {
     encryptedPreviewData = jsonwebtoken.verify(
       tokenPreviewData,
       options.previewModeSigningKey
-    ) as string
+    ) as typeof encryptedPreviewData
   } catch {
     // TODO: warn
     clearPreviewData(res as NextApiResponse)
@@ -312,7 +314,7 @@ export function tryGetPreviewData(
 
   const decryptedPreviewData = decryptWithSecret(
     Buffer.from(options.previewModeEncryptionKey),
-    encryptedPreviewData
+    encryptedPreviewData.data
   )
 
   try {
@@ -358,10 +360,12 @@ function setPreviewData<T>(
   const jsonwebtoken = require('next/dist/compiled/jsonwebtoken') as typeof import('jsonwebtoken')
 
   const payload = jsonwebtoken.sign(
-    encryptWithSecret(
-      Buffer.from(options.previewModeEncryptionKey),
-      JSON.stringify(data)
-    ),
+    {
+      data: encryptWithSecret(
+        Buffer.from(options.previewModeEncryptionKey),
+        JSON.stringify(data)
+      ),
+    },
     options.previewModeSigningKey,
     {
       algorithm: 'HS256',

test/integration/prerender-preview/pages/api/preview.js

@@ -6,7 +6,14 @@ export default (req, res) => {
       return res.status(500).end('too big')
     }
   } else {
-    res.setPreviewData(req.query)
+    res.setPreviewData(
+      req.query,
+      req.query.cookieMaxAge
+        ? {
+            maxAge: req.query.cookieMaxAge,
+          }
+        : undefined
+    )
   }
 
   res.status(200).end()

test/integration/prerender-preview/test/index.test.js

@@ -93,6 +93,26 @@ function runTests(startServer = nextStart) {
       cookie.serialize('__next_preview_data', cookies[1].__next_preview_data)
   })
 
+  it('should expire cookies with a maxAge', async () => {
+    const expiry = '60'
+    const res = await fetchViaHTTP(appPort, '/api/preview', {
+      cookieMaxAge: expiry,
+    })
+    expect(res.status).toBe(200)
+
+    const originalCookies = res.headers.get('set-cookie').split(',')
+    const cookies = originalCookies.map(cookie.parse)
+
+    expect(originalCookies.every(c => c.includes('; Secure;')))
+
+    expect(cookies.length).toBe(2)
+    expect(cookies[0]).toMatchObject({ Path: '/', SameSite: 'None' })
+    expect(cookies[0]).toHaveProperty('__prerender_bypass')
+    expect(cookies[0]['Max-Age']).toBe(expiry)
+    expect(cookies[1]).toMatchObject({ Path: '/', SameSite: 'None' })
+    expect(cookies[1]).toHaveProperty('__next_preview_data')
+    expect(cookies[1]['Max-Age']).toBe(expiry)
+  })
   it('should not return fallback page on preview request', async () => {
     const res = await fetchViaHTTP(
       appPort,