How to set up a secure drafts preview on your front-end?

[hdodov]

Payload has documentation on setting up previews, but how am I supposed to implement draft previews? In other words:

• https://example.com/unfinished-post should return 404
• https://example.com/unfinished-post?token=XXX should display the draft

The question is - where could that token come from?

I know that Payload provides the user's JWT token in GeneratePreviewURLOptions. I could add it in the URL like so:

preview: (doc, opts) => `https://example.com/${doc.slug}?token=${opts.token}`

Then, my front-end server could use the JWT token in its calls to Payload to display the content.

However, this opens up opportunities for session hijacking. If I send the preview URL to someone, they could copy the JWT token from the URL and manually put it in a payload-token cookie. This would give them access to the admin and they'll be authenticated as me. That's not good.

What would be the proper way to implement this?

[joncys]

The proper way as I understand, and as I've done it is to only use Payload as the access control source of truth.
That essentially means allowing draft access only for users that are logged in and restricting not logged in (outside) api calls to published only, like this in the collection config:

// in the collection  definition
access: {
    read: ({ req }) => {
      if (req.user) return true

      return {
        _status: {
          equals: 'published',
        },
      }
    },
  },

Then, whenever you need to call the API to get the drafts, you add draft=true to the API call and pass the payload token so that PayloadCMS can parse it on it's own and manage access control for you.

If you're running PayloadCMS and your FE on the same domain it should just work.

However, if you're calling PayloadCMS from your BE or server side framework (like next.js), you will need to make sure you pass the cookie to the request something, like this:

const payloadCookie = cookies().get('payload-token')?.value ?? ''
  const response = await fetch(
    `${getAPIURL()}/articles${stringifyWhere(where)}&draft=true`,
    {
      headers: {
        Cookie: `payload-token=${payloadCookie};`,
      },
    }
  )

Or you can authenticate via JWT in the Authorisation header, like this:
https://payloadcms.com/docs/authentication/overview#identifying-users-via-the-authorization-header

[joncys]

If you want sharable preview urls you could have a readOnly (or hidden) field with a random key (text) generated in it that you generate on entity create or regenerate on every save or however you want to handle it.

Then you would attach that to the preview url, like {url}?previewKey=AJTD8randomstringfMwPl

And you could verify that these match in the access function.

That way your sessions are safe and outsiders can preview stuff by being shared the preview key for the particular document / entity.