Share link stoped working with Nuxt.js

Hello!

I have difficulties getting the share link feature to work. As far as we can remember, it used to work for a while. As this is a ongoing live site, we constantly upgrading the system and are using Nuxt.js "^2.15.3" and the corresponding @nuxtjs/prismic package "^1.3.2" right now.

If i open up the generated share link in inkognito browser tab (Chrome 96) it seams like the cookie "io.prismic.previewSession" is set with the correct prismic repro as a domain and a share id as a value. This looks ok so far. If i do a curl -L on the preview link, i see the page that should set this cookie and redirect to the previewing page like so:

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", " [ID HIDDEN ]", 1);
window.location = "http://localhost:3000/berlin";

This makes sense, but shouldn't the window.location redirect to the 'http://localhost:3000/preview' with a corresponding token as seen here prismic/prismic.js at afa7116d582c6e187b95169352e6e4d5f1af4e0c · nuxt-modules/prismic · GitHub

I'm kind of curious how this should otherwise work with e.g. a static build.

Please let me know, how i can further debug this issue and get it to work, since our client is relying on this workflow. I'm happy to provide you the prismic repro and access to the nuxt project on demand via DM.

Thanks in advance
Florian

Hello @u2463-dev, thanks for reaching out.

You need to make sure your client's machine has the localhost server running to see a http://localhost:3000/preview URL. Otherwise, it’s going to throw an error. Local host servers are meant for testing the site in a local environment.

We tried and reproduced the issue with a Nuxt site deployed to Netlify using “@nuxtjs/prismic”: “^1.3.2" and “nuxt”: “^2.15.3". We were able to run the shareable link without any issues with the latest version of Chrome. I recommend you suggest that your team update their versions of Chrome to be able to use these links

Hello Pau, thanks for your reply.

  1. Sure https://localhost:3000 ist running and https://localhost:3000/preview is working as expected. (Normal preview feature when logged in works fine)
  2. The tested Chrome version was the most recent Chrome 96 (Release date 2021-11-15)

As i pointed out, the page that is reached when navigating to a share link redirects to window.location = "http://localhost:3000/berlin"; as /berlin is the page that should be previewed.

So /preview is not called when the user navigated to the share link. As i would assume, this cannot work. How would the @nuxt/prismic package know, how to fetch the preview?
This is out of my control. Could you please explain how to proceed, and check if this might be a migration issue on prismic repository side?

Would be happy to provide repository name via DM.
Thank you for your effort
Florian

Hi Team,

The redirect for previews works as so:

  • Shared previews redirect to the previewed page because they already know its location which is retrieved upon shared preview link creation (when clicking the "share preview" button on the toolbar)
  • The sole reason "regular" previews are redirecting first to /preview is because Prismic's doesn't know yet the location of the previewed page (which /preview is responsible for computing)

So basically the whole flow looks like this:

  1. You create a preview session on Prismic
  2. You're redirected to /preview
  3. /preview gets the document ID and token (which is actually a ref) through query parameters which allow the previewed page's location to be computed
  4. Once the previewed page's location is computed, you're redirected to it
  5. Once on the previewed page, the toolbar kicks in
  6. The toolbar performs a ping pong to Prismic, actually retrieving the preview session and setting it in the browser's cookies
  7. Because the preview session is then set inside the browser's cookies, @prismicio/client is then able to query previewed (unpublished) content
  8. Regular preview is working
  9. Then, if you want to share that preview, you open the toolbar
  10. Then you click "share preview"
  11. When you do so, your location and a screenshot of the page is sent to prismic.io
  12. prismic.io creates the shared preview using that information
  13. Once created it sends you back the shared preview link which is now available for you to copy and share
  14. When another user clicks the shared preview link you sent them, they are redirected to prismic.io
  15. prismic.io sets the cookie through the snippet the user found with curl -L
  16. prismic.io then redirects the user to the location it had registered
  17. Once on the location, the toolbar kick's in again
  18. It does its ping pong again with Prismic, retrieving the preview session and setting it in the browser's cookie
  19. And then @prismicio/client is able to query previewed (unpublished) content from the shared preview

So for your issue, we're not sure what's going on. Have you made any attempts to change the @nuxtjs/prismic standard behaviour?

Can create a minimal reproduction and share it with us?

Thanks.

Hello team. We close the threads after a week with no new activity. If this happens and you want to continue the conversation, you can easily flag it to reopen it and add a new comment.
Thanks.