#Live preview with restricted access

11 messages · Page 1 of 1 (latest)

timber salmon
#

Hi Payload team and community,

I’m trying to set up live preview for frontend pages using Payload CMS. My goal is to make the preview accessible only to logged-in admin users or via a password-protected link, so it’s not publicly accessible.

Does anyone have a recommended approach, plugin, or configuration to achieve this? For example:

Can livePreview.url be dynamically restricted based on the logged-in user?

Or is it better to handle this entirely on the frontend using JWT/auth?

Any guidance, examples, or tips would be greatly appreciated.

Thanks!

thorn bluffBOT
#
New Community-Help Thread Created!

Help is on the way! To mark it as solved, use the /solve command. In the meantime, here are some existing threads that may help you:

Documentation:

Community-Help:

near wigeon
#

Live preview is only accessible via admin panel.

You can use your existing frontend so you don't need separate frontend pages to display your content.

#

From the live preview docs.

you add this to your site

'use client'
import { RefreshRouteOnSave as PayloadLivePreview } from '@payloadcms/live-preview-react'
import { useRouter } from 'next/navigation.js'
import React from 'react'

export const RefreshRouteOnSave: React.FC = () => {
  const router = useRouter()

  return (
    <PayloadLivePreview
      refresh={() => router.refresh()}
      serverURL={process.env.NEXT_PUBLIC_PAYLOAD_URL}
    />
  )
}

And when there are changes made to the document it should be reflected inside the live preview window.

https://payloadcms.com/docs/live-preview/overview

timber salmon
#

Hi, thanks for the clarification and the code snippet.

So just to confirm, there’s no built-in solution or recommended approach for having a preview that’s accessible only via a password-protected link or outside the admin panel, correct?

I found a potential approach using generateStaticParams combined with cookies on the frontend, would it make sense to try implementing restricted live preview through that method?

Thanks for any guidance.

#

I want to share a URL with an investor, so that the investor can see the draft content of a page without having access to the CMS.

I’m exploring ways to make a restricted live preview possible for this use case. Any recommendations or examples would be appreciated.

old needle
#

Hey @timber salmon not currently! It's come up a few times (mostly from our marketing guy) but I don't believe it's been roadmapped at this point.

timber salmon
old needle
#

Hey I get the need for sure! WordPress of all platforms has this, so I understand

tidal marsh
timber salmon
# tidal marsh Would love to know what that solution ends up being!

Hi,

I found a possible solution using Cookies together with generateStaticParams. From what I can see, this approach seems to be similar to what Payload itself uses in some preview flows.

The idea is that access to the preview page is stored in the URL along with a cookie that lives for 72 hours. After that the cookie expires and the page becomes inaccessible again.

Example link:
/share-preview?slug=test-preview&collection=pages&expires=1773506124725&token=b477d870e0623faae9ed4cf83d7eca76240b75545475b185f7971cbd0b462f81

In this case the page does not need to be published - the draft version is enough.