gatsby-source-prismic-graphql Preview not working with Prismic's private API

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?

Jun 24 '19 10:06 jordyvanraaij

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.

Screen Shot 2019-06-25 at 10 03 20

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

Screen Shot 2019-06-25 at 10 03 43

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!

Jun 25 '19 08:06 mattijsbliek

@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.

Jun 25 '19 08:06 jordyvanraaij

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

AwesomeScreenshot-prismic-io-CFS-Website-2019-07-17-15-07-37

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?

Jul 17 '19 22:07 braican

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

Jul 18 '19 16:07 birkir

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

Aug 01 '19 11:08 jordyvanraaij

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.

Aug 07 '19 16:08 birkir

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

Aug 09 '19 13:08 jordyvanraaij

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

Aug 28 '19 18:08 intothefire

@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

Oct 08 '19 06:10 dphoursa

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

Nov 21 '19 18:11 thundercat1

@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:

npm install with the affected version "gatsby-source-prismic-graphql": "^3.4.0-beta.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'),
        }]
      }
    }