Preview not working with Prismic's private API

[jordyvanraaij]

The preview functionality of this plugin is only working when the repository settings of Prismic are set to Open API. When you select either Private API or Public API for Master only the plugin is not working (due to missing auth tokens). Can we add support for this?

[mattijsbliek]

I don’t think that’s true, I got it to work like this:

Create an Application on the API & Security page, you can leave the callback URL blank.

Scroll down and grab the "Permanent access token" that says "Access to master" for the application.

In your code, you can add this access token to gatsby-config.js like so:

// gatsby-config.js
module.exports = {
  ...
  plugins: [
    {
      resolve: 'gatsby-source-prismic-graphql',
      options: {
        accessToken: PRISMIC_ACCESS_TOKEN,
      }
    },
    ...
  ]
}

This got it work for me. Hope this helps!

[jordyvanraaij]

@mattijsbliek I see my question was not clear, I was talking about the preview functionality of the plugin. The preview option only seems to work without authentication enabled. The plugin itself is fine with authentication turned on.

[braican]

I'm having this issue as well. Within my Prismic project, I've set up a permanent access token with access to master+releases:

This is working fine when spinning up the development server or building the Gatsby site. However, when I try previewing content, Prismic redirects me to my /preview endpoint but the request to the API returns a 401 unauthorized code:

Like the OP, when I make the API access public, this preview functionality works.

Is there something we need to do to pass the access token set up in gatsby-config.js to the request that retrieves the preview content?

[birkir]

You have a 401, nothing I can do about that I am afraid. I have confirmed that this works as expected, but be-aware your access token will be exposed.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/401

[jordyvanraaij]

@birkir is this something that can't be fixed? I believe preview plugins of other CMS's work just fine with authentication enabled.

[birkir]

You have to create a reproducible example so we can find the problem you are having.

Me and others are reporting this feature working as expected.

[jordyvanraaij]

Just change the repository security to private in your current setup, just like @braican mentioned.

[intothefire]

+1 on this - definitely seeing this issue on private repositiories

[dphoursa]

@birkir During the commit 6666e3482bd2b316a0658f179038db169137f196 logic of when accessToken is rendered into HTML has been reversed in the gatsby-ssr.tsx:

From (L11-14):

// Remove accessToken if previews are disabled  
if (previews === false) {   
  accessToken = null;   
}

To (L9):

const accessToken = options.previews ? null : options.accessToken;

Was there any reason for this? As it seems to cause issues when trying to preview draft documents

[thundercat1]

I'm struggling with this issue as well. When I make my repo private, Prismic demands an API key and the API call from the browser fails with a 401.

If there is a way to configure the plugin to include the access token in the client bundle, and use it on requests to https://{my-repo}.prismic.io/api I'd happily turn that on for local development and preview builds (which I'll restrict access to anyway). Has anyone found a way to enable that, or worked around it somehow?

-Edit- I'm on v3.4.0-beta.2

[scb-mchaines]

@birkir following up on @dphoursa's comment above -- on the latest beta release, it looks like there is some risk of publicly exposing access keys. Steps:

1. npm install with the affected version "gatsby-source-prismic-graphql": "^3.4.0-beta.2"
2. build with gatsby-source-prismic-graphl config indicating previews: false. Mine looks something like:

   {
     resolve: 'gatsby-source-prismic-graphql',
       options: {
         repositoryName: 'my-repository',
         accessToken: 'secret-access-token',
         path: '/preview',
         previews: false,
         pages: [{ 
           type: 'Page',
           match: '/:uid',
           path: '/',
           component: require.resolve('./src/components/page.js'),
       }]
     }
   }

3. Serve the public directory, and check window.prismicGatsbyOptions.accessToken in the js console of the page. In my case, this exposes the access key.

[kbrock84]

I'm also getting 401 on a private repo. Has anyone found a workaround?

[ohlr]

I am also facing this issue. Did anyone find a solution / reason why this is failing for some?

I am currently on 3.6.3-alpha.12

Might that be related to browser/cookie/OS settings versions?

[lucashfreitas]

@ohlr After 1 year, same issue here.

If I set the API to public it works. But it should work even if the API is private since I am setting the token in the plugin configuration, right?