Previews Require Sign In

Developing with Prismic
1

Greetings Prismic Community,

I noticed today with a project I'm on (Next (Pages Router)), the previews work great both locally and production so long as I view them from a browser in which I am signed into Prismic. However, for me (and I presume others as well), the main value of the production preview is to send it to others for them to view/review. It appears that the previews (both local/production) don't show the updated content unless I've got the login cookie. Am I crazy? Is this how it's supposed to be?

-Neil

2

Hey Neil, are you using the shareable links from the preview toolbar?

4

Yes, that’s correct. I’m using the get shareable link from the prismic toolbar.

5

We haven't received any reports of similar issues, and the previews should generally reflect the updated content regardless of the user's login status.

You could test in different browsers to see if the issue persists. This can help determine if it's specific to a particular browser or related to browser a screen recording of the issue.

6

Hi @Pau , I'm resurrecting this cry for help because I've been wrangling my way into the new App router course from Alex and enjoying it all the way. I have enabled the previews for both development and production as shown in the course. If I click on the preview eyeball for either of them, the previews work great. I then click on the get shareable link and then copy the link buttons. When I paste that link into Guest session browser or an incognito window, the page shows up in its previous state and never rerenders with the preview content.
I do this so that I can simulate the experience of sending someone a link to preview the changes an editing team has made. If I then log into Prismic on that Guest session and then click on the preview eyeball, the preview works well again.
So, my issue is that whatever is supposed to happen when using the shareable link, it's not happening correctly. I've tried sending the link to my mobile phone and then disconnected from my home wi-fi and used the cellular connection in case it was my network or device. The preview still doesn't work.

7

This post (though with Nuxt) is my exact experience: Shareable Link with Nuxt - #13 by glauberkelvin

8

The “plot” thickens. I have 2 sites using the page router that production preview shareable links work just fine. On these, I notice the urls after a few redirections contain lots of url encoded strings and tokens etc.

On the sites where the production preview shareable links don’t work, the redirect takes me to a url without all of those strings and tokens.

On a hunch, I then added “/api/preview” at the end of the url, and it brought the preview data in. Strange how this work’s intermittently and then also strange how this workaround actually works too.

9

So the video @glauberkelvin posted is essentially the exact same experience I'm getting in 2023 using Next. I've posted a separate post and then stumbled on this one. The video is my exact experience when I preview on another browser. I was hoping it was the incognito/guest cookie issue, but it doesn't seem to have fixed the issue. I looked at the cookies and I do see a cookie set for io.prisimc.preview. Unfortunately, the content remains as the currently published version.

10

Hi Neil,

What you're seeing for the route resolver (server side) vs the link resolver (project side) is normal.

Can you ask the people you're sharing the link with to check their third party cookie settings as described in this troubleshooting article:

Thanks.

12

Also, can you tell me about share with me the contents of your package.json and an example link resolver?

13

Hey Neil, personally for me sharable link previews have been a hit or a miss (mostly a miss) over the last 3-4 years. The things that have worked for me. Tell your colleague to:

  • Use Chrome or Opera (Safari/Brave/Firefox have never worked for me)
  • Don't open the link in incognito
  • don't have ad blockers that could block the Prismic cookie
  • Wait 5-10 seconds

Hope this helps!

1 Like
14

@Phil, thank you for staying with me on this issue. I'd love to find out why I'm intermittently having success with shareable links on previews (with both router systems). As requested, my package.json

{
  "name": "ProjectName",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "concurrently \"npm:next:dev\" \"npm:slicemachine\" --names \"next,slicemachine\" --prefix-colors gray,magenta",
    "next:dev": "next",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "slicemachine": "start-slicemachine",
    "format": "prettier --write ."
  },
  "dependencies": {
    "@prismicio/client": "^7.2.0",
    "@prismicio/next": "^1.3.4",
    "@prismicio/react": "^2.7.2",
    "@types/node": "20.5.9",
    "@types/react": "18.2.21",
    "@types/react-dom": "18.2.7",
    "eslint": "8.48.0",
    "eslint-config-next": "13.4.19",
    "next": "13.4.19",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-icons": "^4.10.1",
    "typescript": "5.2.2"
  },
  "devDependencies": {
    "@slicemachine/adapter-next": "^0.3.13",
    "autoprefixer": "10.4.15",
    "clsx": "^2.0.0",
    "concurrently": "^8.2.1",
    "postcss": "8.4.29",
    "prettier": "^3.0.3",
    "prettier-plugin-tailwindcss": "^0.5.4",
    "slice-machine-ui": "^1.11.0",
    "tailwind-merge": "^1.14.0",
    "tailwindcss": "3.3.3"
  }
}

For my routes, I have (commented out page until I have that set up):

const routes: prismic.ClientConfig['routes'] = [
  {
    type: 'homepage',
    path: '/',
  },
  // {
  //   type: 'page',
  //   path: '/:uid',
  // },
]

I don't knowingly have nor use a link resolver. However, I would like to speak more about the cookies situation. When visiting the shareable link on a site where production previews is not working, I see the following cookie set (from my own domain):

io.prismic.preview is set to '{%22[redacted].prismic.io%22:{%22preview%22:%22https://[redacted].prismic.io/previews/ZPZesxIAACEAazRK:ZPcFTRIAACEAbiYn?websitePreviewId=ZPZnBxIAACEAa1mQ%22}}'

The content is not updated and the URL looks like:

https://projectname.vercel.app

If I then manually enter

https://projectname.vercel.app/api/preview

and hit return, the site reloads (with the unpublished preview content, YAY!) with new cookies from a different domain (https://[redacted].prismic.io) in addition to a new cookie from my own domain:

from prismic domain: io.prismic.previewSession is set to 'ZPZgBRIAACEAazo7~ZPZnBxIAACEAa1mQ'

from my own domain: _prerender_bypass is set to 'a2bd1091f986ea69aed181d8f8aeba2a'

I hope this information helps us make progress. You assistance is greatly appreciated.

15

Hi @kris
I would be very curious if my "workaround" explained above about manually entering your preview path into the URL makes the preview "work." Would you be willing to test it and report back?
-Neil

16

I sent you a private message to try debugging this on my side.

1 Like
17

Thank you! I sent you a response with a preview link

18

Hi Neil,

As I was saying in the private message, I'm very sorry for the long delay, Angelo on our team found the error and created a fix. Basically, the Prismic preview cookie is in an unexpected format (it doesn't contain a _tracker property), which broke the shared preview detection.

@prismicio/next v1.3.6 should fix this issue. No code changes need to be made to the project. It can be installed with:
npm install @prismicio/next@latest

:grin: