Shareable preview link not showing draft content

Technologies Javascript
#1

We have a site using the Prismic toolbar, and are able to preview content so long as we are logged into the CMS. According to this documentation it should be possible to share this preview with non-Prismic users.

Initially what we found is that https://prismic.link/xxyyzz links are a little malformed, encoding the ampersand in the query string as an html entity &amp. This meant that nothing worked as the token & document id can't be parsed properly.

Example from the link redirect page;

<html>
  <head>
    <title>prismic.io Preview</title>
    <link rel="icon" type="image/png" href="/...2eb5115/images/favicon.png">
    <meta property="og:title" content="prismic.io Preview"/>
    <meta property="og:description" content="The times, they’re a-changing"/>
    <meta property="og:image" content="https://prismic-io.s3.amazonaws.com/prismic-io/previews/my-repo-name/YE_RlBIAAGA21qdB~YEk7shIAACEAum9t/previewYE_RlBIAAGA21qdB~YEk7shIAACEAum9t.jpg"/>
  </head>
  <body>
    <script type="text/javascript">
        function setCookie(name, value, days) {
            var d = new Date;
            d.setTime(d.getTime() + 24*60*60*1000*days);
            document.cookie = name + "=" + value + ";path=/;expires=" + d.toGMTString() + ";SameSite=None" + ";Secure";
        }
        setCookie("io.prismic.previewSession", "YE_RlBIAAGA21qdB~YEk7shIAACEAum9t", 1);
        window.location = "https://localhost:8000/preview?token=https%3A%2F%2Fmy-repo-name.prismic.io%2Fpreviews%2FYE_CqxIAACEA1mUO%3AYFBBghMAACYAbv5M%3FwebsitePreviewId%3DYEk7shIAACEAum9t&amp;documentId=XXXXXXXYYYYYY";

                                                                                                                                                                                             ^ This
    </script>
  </body>
</html>

We implemented a workaround where we first replaced the &amp character with a regular & and then parsed it. What we're getting now is just the published content displaying instead of the draft content.

Here's how we're accessing the preview;

let search = location.search || '';
search = search.replace(/&amp;/, '&');

const params = new URLSearchParams(search);

console.log({
    token: params.get('token'),
    documentId: params.get('documentId')
});

/*
Outputs: 
{
    token: "https://my-repo-name.prismic.io/previews/XXXXX?websitePreviewId=YYYYYY",
    documentId: "XXXXYYYYYZZZZ"
}
*/

const preview = Client.getPreviewResolver(
    params.get('token'),
    params.get('documentId')
);

const path = await preview.resolve(linkResolver);

console.log(path); // e.g. my-article-title

return Client.getByUID('news', path);

Everything renders correctly, but we are seeing the published content.

In the above documentation there is a section about preview cookies, however all of the links in it are 404s, so it's possible there is something I'm missing here.

Any help appreciated!

#3

Hello @andrew.joll

Welcome to Prismic Forum.

Are you including the Primic preview toolbar on every page? You need to make sure to add it on your 404 pages if you want to be able to use the shareable preview. This is mandatory to share content that has not yet been published.

Can you please try to follow the Preview troubleshooting guide?

Let me know if it still doesn't solve the issue. I'd love to dig into more.

Thanks,

Priyanka

#4

Thanks @Priyanka, we are including the toolbar script on every page;

<script async defer src="https://static.cdn.prismic.io/prismic.js?new=true&repo=[REPO-NAME]"></script>

Regarding the troubleshooting guide, what is the 'preview script' mentioned in the first step?

Can you see the preview cookie in the browser?
io.prismic.previewSession cookie is present, but the this doc says it should be io.prismic.preview?

Token content looks fine.

How to test in the Rest API
It seems to be returning draft data when I take the preview token and call the document search api with that ref, so it would appear the problem lies somewhere in javascript.

Are you using a kit?
No, just @prismicio/client and prismic-reactjs, although I've been able to reproduce the same issue with the reactjs-starter project.

Did you configure a route to handle redirection? Is this route using the link resolver?
Our app is React-only, this looks like a server-side Node implementation?

#5

Hello @andrew.joll

  1. Preview script: It's a toolbar script that you already included on every page, as you mentioned.

  2. preview cookie: You can see two cookies but in different hosts under the browser's cookies section. Ideally, you will see io.prismic.preview cookie on the localhost. And io.prismic.previewSession on your repo URL.

  3. You are using the correct Kit.

  4. You won't need to configure a route to handle rejection like the example given. It's in Node. But you need to include the Link Resolver route to your application like given here.. are you implementing this?

Priyanka

#6

Thanks @Priyanka, I'm not seeing the io.prismic.preview cookie on localhost when opening a sharable preview link (but I do see it in browsers which are logged in to Prismic CMS).

I'm not using routing (e.g. react-router), but instead just checking if the browser's location.pathname is '/preview' in the top level component, e.g;

const App = () => {
    const history = useHistory();

    useEffect(() => {
        const getPreview = async () => {
            if (location.pathname !== '/preview') {
                return;
            }

            let search = location.search || '';
            search = search.replace(/&amp;/, '&');

            const params = new URLSearchParams(search);

            const preview = Client.getPreviewResolver(
                params.get('token'),
                params.get('documentId')
            );

            const path = await preview.resolve(linkResolver);

            if (path) {
                history.push(path);
            }
        };

        getPreview();
    }, []);

It redirects to the correct page, but getPreviewResolver does not appear to be setting any cookie, so only the published content is displayed. Is there something else missing?

#7

I am not sure what might be the issue. It would be great if you can share these:

  1. The URL of your repository?
  2. The Github repo?

You can send these through a private message.

Thanks,

Priyanka