fix(templates): broken preview if alternative auth strategy was used, invalid error handling (#9785)

Previously, live preview did not work with oauth, as no token is present

Author: AlessioGr

examples/draft-preview/package.json

@@ -22,7 +22,6 @@
     "dotenv": "^8.2.0",
     "escape-html": "^1.0.3",
     "graphql": "^16.9.0",
-    "jsonwebtoken": "9.0.2",
     "next": "^15.0.0",
     "payload": "latest",
     "payload-admin-bar": "^1.0.6",

examples/draft-preview/src/app/(app)/next/preview/route.ts

@@ -1,6 +1,5 @@
-import type { CollectionSlug } from 'payload'
+import type { CollectionSlug, PayloadRequest } from 'payload'
 
-import jwt from 'jsonwebtoken'
 import { draftMode } from 'next/headers'
 import { redirect } from 'next/navigation'
 import { getPayload } from 'payload'
@@ -42,23 +41,21 @@ export async function GET(
       return new Response('No path provided', { status: 404 })
     }
 
-    if (!token) {
-      new Response('You are not allowed to preview this page', { status: 403 })
-    }
-
     if (!path.startsWith('/')) {
-      new Response('This endpoint can only be used for internal previews', { status: 500 })
+      return new Response('This endpoint can only be used for internal previews', { status: 500 })
     }
 
     let user
 
     try {
-      user = jwt.verify(token, payload.secret)
-    } catch (error) {
-      payload.logger.error({
-        err: error,
-        msg: 'Error verifying token for live preview',
+      user = await payload.auth({
+        req: req as unknown as PayloadRequest,
+        headers: req.headers,
       })
+    } catch (error) {
+      console.log({ token, payloadSecret: payload.secret })
+      payload.logger.error({ err: error }, 'Error verifying token for live preview')
+      return new Response('You are not allowed to preview this page', { status: 403 })
     }
 
     const draft = await draftMode()

templates/website/package.json

@@ -39,7 +39,6 @@
     "cross-env": "^7.0.3",
     "geist": "^1.3.0",
     "graphql": "^16.8.2",
-    "jsonwebtoken": "9.0.2",
     "lucide-react": "^0.378.0",
     "next": "^15.1.0",
     "next-sitemap": "^4.2.3",
@@ -57,7 +56,6 @@
     "@eslint/eslintrc": "^3.2.0",
     "@tailwindcss/typography": "^0.5.13",
     "@types/escape-html": "^1.0.2",
-    "@types/jsonwebtoken": "^9.0.6",
     "@types/node": "22.5.4",
     "@types/react": "19.0.1",
     "@types/react-dom": "19.0.1",

templates/website/src/app/(frontend)/next/preview/route.ts

@@ -1,7 +1,6 @@
-import jwt from 'jsonwebtoken'
 import { draftMode } from 'next/headers'
 import { redirect } from 'next/navigation'
-import { getPayload } from 'payload'
+import { getPayload, type PayloadRequest } from 'payload'
 import configPromise from '@payload-config'
 import { CollectionSlug } from 'payload'
 
@@ -40,20 +39,21 @@ export async function GET(
       return new Response('No path provided', { status: 404 })
     }
 
-    if (!token) {
-      new Response('You are not allowed to preview this page', { status: 403 })
-    }
-
     if (!path.startsWith('/')) {
-      new Response('This endpoint can only be used for internal previews', { status: 500 })
+      return new Response('This endpoint can only be used for internal previews', { status: 500 })
     }
 
     let user
 
     try {
-      user = jwt.verify(token, payload.secret)
+      user = await payload.auth({
+        req: req as unknown as PayloadRequest,
+        headers: req.headers,
+      })
     } catch (error) {
-      payload.logger.error('Error verifying token for live preview:', error)
+      console.log({ token, payloadSecret: payload.secret })
+      payload.logger.error({ err: error }, 'Error verifying token for live preview')
+      return new Response('You are not allowed to preview this page', { status: 403 })
     }
 
     const draft = await draftMode()
@@ -85,7 +85,7 @@ export async function GET(
         return new Response('Document not found', { status: 404 })
       }
     } catch (error) {
-      payload.logger.error('Error verifying token for live preview:', error)
+      payload.logger.error({ err: error }, 'Error verifying token for live preview')
     }
 
     draft.enable()

templates/with-vercel-website/package.json

@@ -41,7 +41,6 @@
     "cross-env": "^7.0.3",
     "geist": "^1.3.0",
     "graphql": "^16.8.2",
-    "jsonwebtoken": "9.0.2",
     "lucide-react": "^0.378.0",
     "next": "^15.1.0",
     "next-sitemap": "^4.2.3",
@@ -59,7 +58,6 @@
     "@eslint/eslintrc": "^3.2.0",
     "@tailwindcss/typography": "^0.5.13",
     "@types/escape-html": "^1.0.2",
-    "@types/jsonwebtoken": "^9.0.6",
     "@types/node": "22.5.4",
     "@types/react": "19.0.1",
     "@types/react-dom": "19.0.1",

templates/with-vercel-website/src/app/(frontend)/next/preview/route.ts

@@ -1,9 +1,8 @@
-import jwt from 'jsonwebtoken'
 import { draftMode } from 'next/headers'
 import { redirect } from 'next/navigation'
 import { getPayload } from 'payload'
 import configPromise from '@payload-config'
-import { CollectionSlug } from 'payload'
+import type { CollectionSlug, PayloadRequest } from 'payload'
 
 const payloadToken = 'payload-token'
 
@@ -40,20 +39,21 @@ export async function GET(
       return new Response('No path provided', { status: 404 })
     }
 
-    if (!token) {
-      new Response('You are not allowed to preview this page', { status: 403 })
-    }
-
     if (!path.startsWith('/')) {
-      new Response('This endpoint can only be used for internal previews', { status: 500 })
+      return new Response('This endpoint can only be used for internal previews', { status: 500 })
     }
 
     let user
 
     try {
-      user = jwt.verify(token, payload.secret)
+      user = await payload.auth({
+        req: req as unknown as PayloadRequest,
+        headers: req.headers,
+      })
     } catch (error) {
-      payload.logger.error('Error verifying token for live preview:', error)
+      console.log({ token, payloadSecret: payload.secret })
+      payload.logger.error({ err: error }, 'Error verifying token for live preview')
+      return new Response('You are not allowed to preview this page', { status: 403 })
     }
 
     const draft = await draftMode()
@@ -85,7 +85,7 @@ export async function GET(
         return new Response('Document not found', { status: 404 })
       }
     } catch (error) {
-      payload.logger.error('Error verifying token for live preview:', error)
+      payload.logger.error({ err: error }, 'Error verifying token for live preview')
     }
 
     draft.enable()