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 &. 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&documentId=XXXXXXXYYYYYY";
^ This
</script>
</body>
</html>
We implemented a workaround where we first replaced the & 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(/&/, '&');
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!