Get help on Discord

Next, Sanity, Vercel and Typescript templates - Preview functionality

3 replies
Last updated: Jul 11, 2022
Thanks for a great tool, I'm enjoying exploring how it works. I'm stuck with one thing, though: the Next/Sanity/Vercel/Typescript starter appears to have the preview functionality set up, but it doesn't quite follow the different setup tutorials that I've seen elsewhere on the site and I can't get it working. The latest version is hitting a 
ClientError: Unauthorized - Session not found
 error. I've tried a handful of ways to handle this, including updating to version 2.30 (the starter uses 2.25, which looks like it's before some third party cookie issues were handled). Before going into lots of detail, is there a good place to find the setup for preview as it relates to that starter? (Specifically, I'm talking about this starter: https://github.com/sanity-io/sanity-template-nextjs-blog-comments/tree/e927176140cda50f89617cbff86c7689a726c3f1 )
AI Update

I understand your frustration! The "Unauthorized - Session not found" error is a known issue with older preview implementations, and you're right that the starter template you're using has an outdated approach that conflicts with third-party cookie restrictions in modern browsers.

The issue stems from how preview mode authentication works when your Sanity Studio and Next.js site are on different domains (which is typical with Vercel deployments). As mentioned in the Draft Mode documentation, browsers blocking third-party cookies can cause preview sessions to fail.

The Problem

The older preview setup in that starter (v2.25 era) relied on cookie-based authentication that doesn't work well with third-party cookie restrictions. When you click a preview link from Studio, it tries to set a session cookie, but browsers like Chrome and Safari block it because the Studio and your Next.js site are on different origins.

The Solution

You have a few options:

1. Use the Modern Approach (Recommended)

Instead of the old preview mode setup, use Sanity's newer Visual Editing with Presentation Tool. This approach provides explicit token and EventSource props to subscription hooks, which bypasses the third-party cookie issue entirely. The Visual Editing guide for Next.js has current implementation details.

2. Update the Preview Implementation

If you want to stick closer to the starter's structure, you'll need to:

  • Upgrade to the latest @sanity/client and next-sanity packages (you're on the right track updating from 2.25)
  • Pass authentication tokens explicitly rather than relying on cookies
  • Use the token prop in your client configuration when fetching draft content
  • Ensure your preview API route properly enables Draft Mode with the newer Next.js draftMode() function

The Draft Mode course lesson explains how to properly implement token-based authentication for preview content.

3. Quick Fix for Testing

For local development, you can temporarily disable third-party cookie blocking in your browser, but this isn't a production solution.

Best Path Forward

Since that starter is from the 2021-2022 era, I'd recommend looking at more recent examples. The Next.js App Router Live Preview guide has a complete, modern implementation that handles authentication properly without relying on cross-domain cookies.

The key difference is explicitly providing the read token to your data fetching functions when in preview mode, rather than depending on session cookies to authenticate requests. This completely sidesteps the third-party cookie blocking issue that's causing your "Session not found" error.

For what it's worth, I tried this a few different ways and the latest attempt is giving me a 
Not authenticated - preview not available
message. In Firefox, Safari, and Orion I don't get much more. Chrome gives the following trace. I saw an earlier similar message here, but without any responses...
Hello
user P
, could you try enabling cross-site tracking in your web browser (and then sign out and back into the Studio)? We think it might be related to cookieless auth and this would confirm it…When cookieless auth is used, next-sanity won’t be able to access previews because the auth token is stored in localStorage instead of a cookie.
Well, check it! It works locally and on Vercel! Is this a known issue that I missed in the docs, then, or a temporary workaround? I appreciate the help and am happy to do whatever to make it more clear for people in the future.

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?