Preview mode Samesite cookie attribute

Hi guys, our team has recently experienced an issue with cookies samesite attribute when previewing Prismic documents. We hope you could help us. Please let us know if we should re-address the question.

Reproduction

Log into Prismic repository dashboard > access document > click Preview

What is expected

Open the app preview

What is actually happening

The following error appears:

Versions

• nuxt: 2.14.3
• @nuxtjs/prismic: 1.3.1
• @prismicio/client: 5.1.0,
• node: 14.4.0
• browsers: Google Chrome: 91.0.4472.114; Safari: 14.1.1
• OS: macOS Big Sur Version 11.4

Additional Details

We preview the app on localhost and via AWS staging > issue is reproduced on both.

nuxt.config.js


import Prismic from '@prismicio/client'

const PRISMIC_ENDPOINT = '...'
const PRISMIC_TOKEN = '...'
const LOCALES_CONFIG = {
  'en-gb': {
    name: 'English',
    code: 'en',
    iso: 'en-GB'
    // file: 'en.js'
  },
  'fr-fr': {
    name: 'Français',
    code: 'fr',
    iso: 'fr-FR'
    // file: 'fr.js'
  },
  'de-de': {
    name: 'Deutsch',
    code: 'de',
    iso: 'de-DE'
    // file: 'de.js'
  },
  'pt-pt': {
    name: 'Português',
    code: 'pt',
    iso: 'pt-PT'
    // file: 'pt.js'
  },
  'es-es': {
    name: 'Español',
    code: 'es',
    iso: 'es-ES'
    // file: 'es.js'
  }
}

export default {
  mode: 'universal',
  target: 'static',
  head: {
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' }
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
  },
  css: ['swiper/css/swiper.css'],
  plugins: [
    '~/plugins/meta',
    '~plugins/common-sections-animations',
    '~/plugins/i18n',
    '~plugins/hubspot-form',
    { src: '~plugins/head-scripts-resolver', mode: 'server' },
    { src: '~plugins/vue-awesome-swiper', mode: 'client' },
    { src: '~plugins/preview', mode: 'client' },
    { src: '~/plugins/prismicLink', mode: 'client' }
  ],
  components: true,
  buildModules: [
    '@nuxt/typescript-build',
    '@nuxtjs/stylelint-module',
    '@nuxtjs/tailwindcss',
    '@aceforth/nuxt-optimized-images'
  ],
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/prismic',    [
      'nuxt-i18n',
      {
        locales: Object.values(LOCALES_CONFIG),
        seo: true,
        defaultLocale: 'en',
        lazy: true,
        vueI18n: {
          fallbackLocale: 'en'
        }
      }
    ]
  ],
  /*
  axios: {},
  prismic: {
    endpoint: PRISMIC_ENDPOINT,
    preview: '/preview',
    apiOptions: {
      accessToken: PRISMIC_TOKEN
    },
    linkResolver: '@/plugins/link-resolver',
    htmlSerializer: '@/plugins/html-serializer'
  },

  optimizedImages: {
    inlineImageLimit: 1000,
    imagesName: ({ isDev }) =>
      isDev ? '[path][name][hash:optimized].[ext]' : 'img/[contenthash:7].[ext]',
    responsiveImagesName: ({ isDev }) =>
      isDev ? '[path][name]--[width][hash:optimized].[ext]' : 'img/[contenthash:7]-[width].[ext]',
    handleImages: ['jpeg', 'png', 'svg', 'webp', 'gif'],
    optimizeImages: true,
    optimizeImagesInDev: false,
    defaultImageLoader: 'img-loader',
    mozjpeg: {
      quality: 75
    },
    optipng: {
      optimizationLevel: 3
    },
    pngquant: false,
    giflossy: {
      interlaced: true,
      optimizationLevel: 3
    },
    svgo: {
      plugins: [
        {
          removeDimensions: true
        },
        {
          cleanupNumericValues: true
        }
      ]
    },
    webp: {
      preset: 'default',
      quality: 75
    }
  },
  router: {
    prefetchLinks: true
  },
  build: {
    transpile: ['gsap'],
    extend(config, _ctx) {
      config.resolve.alias.vue = 'vue/dist/vue.common'
    }
  },
  generate: {
    cache: false,
    routes() {
      return Prismic.api(PRISMIC_ENDPOINT, {
        accessToken: PRISMIC_TOKEN
      })
        .then((api) => {
          const client = api.query(Prismic.Predicates.at('document.type', 'client_story'), {
            lang: '*'
          })
          const category = api.query(Prismic.Predicates.at('document.type', 'category_page'), {
            lang: '*'
          })
          const career = api.query(Prismic.Predicates.at('document.type', 'career_story'), {
            lang: '*'
          })
          const discovery = api.query(Prismic.Predicates.at('document.type', 'discovery_page'), {
            lang: '*'
          })

          return Promise.all([client, category, career, discovery])
        })
        .then((responses) => {
          const clientRoutes = responses[0].results.map((doc) => {
            if (doc.lang === 'en-gb') {
              return `/client/${doc.uid}`
            } else return `/${LOCALES_CONFIG[doc.lang].code}/client/${doc.uid}`
          })

          const categoryRoutes = responses[1].results.map((doc) => {
            if (doc.lang === 'en-gb') {
              return `/category/${doc.uid}`
            } else return `/${LOCALES_CONFIG[doc.lang].code}/category/${doc.uid}`
          })

          const careerRoutes = responses[2].results.map((doc) => {
            if (doc.lang === 'en-gb') {
              return `/career/${doc.uid}`
            } else return `/${LOCALES_CONFIG[doc.lang].code}/career/${doc.uid}`
          })

          const discoveryRoutes = responses[3].results.map((doc) => {
            if (doc.lang === 'en-gb') {
              return `/discovery/${doc.uid}`
            } else return `/${LOCALES_CONFIG[doc.lang].code}/discovery/${doc.uid}`
          })

          return [...clientRoutes, ...categoryRoutes, ...careerRoutes, ...discoveryRoutes]
        })
    }
  }
}

~/plugins/preview.ts

export default async function ({ query, enablePreview }) {
  if (query.preview) {
    console.log('query.preview', query.preview)
    await enablePreview()
  }
}

If you need more information, just let us know. We assume it could be hotfixed by adjusting browsers cookie settings, but we’re not up to use it as a long-term decision.

Related: https://github.com/nuxt-community/prismic-module/issues/144

[wishiz]

Thank you for the answer and sorry for the delay!

Makes total sense and it indeed fixed the issue. I appreciate your support 😃

[lihbr]

You’re welcome! Feel free to reach out to us again in case of any trouble, either on GitHub or our community forum ☺️