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

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?

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?

Great news. I like the improvements in new-preview-mode

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.