Go Behind the Experience to see how Tecovas brings the West to life with Sanity 🤠 July 18th

Troubleshooting "Not authenticated - preview not available" error in Sanity and Next.js

3 replies
Last updated: Aug 27, 2022
Suddenly I'm no longer able to preview pages with Sanity and Nextjs."Not authenticated - preview not available", from next-sanity/dist/next-sanity.esm.js:190

When in Chrome I get a flash of the page before it reverts to a 404.

Anyone else experiencing something similar today?
Aug 16, 2022, 10:48 AM
Hi, I'm from the Ecosystem team at Sanity and am currently working on a new API for our
next-sanity
preview mode. The error is common in browsers that block third-party cookies. To solve it you'll have to provide a
token
and
EventSource
props to the subscription hook.
When in Chrome I get a flash of the page before it reverts to a 404.
Not sure about this one could you send me a preview link on dm?
Aug 16, 2022, 11:09 AM
Great news. I like the improvements in new-preview-mode
Aug 16, 2022, 11:29 AM
Hi Lasse, it's been a while but revisiting this thread (and thanks for the preview link in my DMs) I just realised I've seen this problem before. With your setup (assuming its based on what we have in our docs and starters) which uses slugs in the preview link here's why the flash happens. There are 3 steps/requests in this flow and yours if failing on the last step:1. When you first open the link it
sets the signed cookie that before redirecting you to Next.js.2. Next.js is now in Preview Mode, and what that means is that it bypasses the previously statically generated content and it'll call your
getStaticProps
similar to how it works in
next dev
. And in this mode you're giving
@sanity/client
a token, giving it access to query drafts. We recommend this pattern because it avoids a flash of published content before
@sanity/groq-store
loads up and loads your draft docs, overlaying/merging them with the published content.3.
@sanity/groq-store
doesn't have access to the token that were used in
getStaticProps
. It relies on cookie based authentication which is known to fail when: a. your studio and next site are hosted on different domains, this is usually when chrome fails.
b. if you're using a browser that agressively blocks cookies, then you also get the same warning.
4. Because it's throwing an error in addition to logging the warning it can create a uncaught error causing next to jump out of preview mode and reload the page, giving you a 404.
Now, the warning isn't very useful as it doesn't tell you what to do and is easy to miss. Leaving you unsure when, exactly, preview mode is on or off. The fact that it usually always works for the SSR stuff and you can browse your drafts just fine if you disable JavaScript, makes it even more confusing.
We're trying to address these things in the PR above. You don't have to use the experimental preview mode to fix your issue though. You can solve it almost the same way as the example in the PR.
Step 1: Add the token you use in
previewClient
to the Next.js preview data, by calling
res.setPreviewData({token})
.Step 2:
Retrieve the token from the
previewData
prop that is available on
getStaticProps
.Step 3: Return the token the
same way you pass
initialData
Step 4: Pass the token, and an instance of
EventSource
, as props to your
usePreviewSubscription
hook.
This should solve the flash of drafts before 404 issue. Please note that importing
EventSource
in your posts page is very costly and while it's only actually used in preview mode it fails to be properly dead code eliminated. Thus until we have a new preview mode out that solves this, it might be a good idea to have preview mode on different URLs/pages so that your visitors, that won't even know you have a preview mode, don't have to download all that JS.
Aug 27, 2022, 4:37 AM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?