Access Token

Learn how to set up access tokens in your repository.

Access tokens are an important part of using the Prismic API. Depending on your repository’s API visibility, you may need an access token to access the API.

You can change your API visibility in your repository's Settings > API & Security > Repository security section. You'll see three options.

Private API: requires an access token for any request
Public API for master: requires an access token to preview releases
Open API: does not require an access token

Generate access tokens

You need to be a repository administrator to generate an access token.

If you do not have access to your repository's settings, then contact one of your repository's administrators to help you with this.

In your repository, go to Settings > API & Security > Generate an Access Token section. Then fill in the new configuration:

Application name: The display name to identify your app, For example, My Website.
Callback URL: Only needed if you want to enable interaction OAuth authentication. You can list several comma-separated URLs.

Click on Add this application. This will generate the token, which you can then find under the Permanent access tokens section.

By default, this token can access your master ref. To access your releases ref, create a master+releases token. You can also revoke any access tokens no longer in use.

Use an access token

To use your access token, pass it as an option to the createClient function or include it in your config file, depending on your framework.

Keep your access token safe

Your access token is a sensitive piece of data. Store your access token securely. A common way to store access tokens is to use environment variables. In some cases, environment variables can be exposed in your application, so exercise caution.

Next.js

prismicio.js

Next.js

Copy

  import * as prismic from '@prismicio/client'

  export const createClient = (config = {}) => {
    const client = prismic.createClient('your-repo-name', {
     accessToken: 'your-access-token',
    });
  
    return client
  };

Nuxt 2

nuxt.config.js

Nuxt 2

Copy

  import { repositoryName } from "./slicemachine.config.json"

  export default {
    buildModules: ['@nuxtjs/prismic'],
    prismic: {
      endpoint: `https://${repositoryName}.cdn.prismic.io/api/v2`,
      apiOptions: {
       accessToken: 'your-access-token',
      },
    },
    build: {
      transpile: ['@prismicio/vue'],
    },
  }

Nuxt 3

nuxt.config.ts

Nuxt 3

Copy

  export default defineNuxtConfig({
    modules: ['@nuxtjs/prismic'],

    prismic: {
      endpoint: 'your-repository-name',
     clientConfig: {
       accessToken: 'your-access-token',
     },
    },
  })

gatsby-config.js

Copy

  module.exports = {
    plugins: [
      {
        resolve: 'gatsby-source-prismic',
        options: {
          repositoryName: 'your-repo-name',
         accessToken: 'your-access-token',
        },
      },
    ],
  }

Vue.js

src/main.js

Vue.js

Copy

  import Vue from 'vue'
  import PrismicVue from '@prismicio/vue'

  const endpoint = 'https://your-repo-name.cdn.prismic.io/api/v2'

  Vue.use(PrismicVue, {
    endpoint,
   apiOptions: { accessToken: 'your-access-token' },
  })

React.js

prismic.js

React.js

Copy

  import * as prismic from '@prismicio/client'

  export const client = prismic.createClient('your-repository-name', {
   accessToken: 'your-access-token',
  })

SvelteKit

prismicio.js

SvelteKit

Copy

  import * as prismic from '@prismicio/client'

  const createClient = ({ fetch } = {}) => {
    const client = prismic.createClient('your-repository-name', {
     accessToken: 'your-access-token',
      fetch
    })

    return client
  }

  export default createClient

prismicio.js

Copy

  import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client'
  import * as prismic from '@prismicio/client'

  export const repositoryName = 'your-repo-name'

  const prismicClient = prismic.createClient(repositoryName, {
   accessToken: 'your-access-token',
  });

  export const client = new ApolloClient({
    link: new HttpLink({
      uri: prismic.getGraphQLEndpoint(repositoryName),
      fetch: prismicClient.graphqlFetch,
      useGETForQueries: true,
    }),
    cache: new InMemoryCache(),
  })

Express

config/prismicConfig.js

Express

Copy

  import fetch from 'node-fetch'
  import * as prismic from '@prismicio/client'

  export const client = prismic.createClient('your-repository-name', {
   accessToken: 'your-access-token',
    fetch
  })

Vanilla JavaScript

main.js

Vanilla JavaScript

Copy

  import * as prismic from '@prismicio/client'
  import fetch from 'node-fetch'

  const repositoryName = 'your-repository-name'
  const client = prismic.createClient(repositoryName, { 
   accessToken: 'your-access-token',
    fetch
  })

To learn how to use the Prismic client to fetch data, visit the Fetch Data documentation for your framework:

Was this article helpful?

Not really

Yes, Thanks

Can't find what you're looking for? Spot an error in the documentation? Get in touch with us on our Community Forum or using the feedback form above.

Adjust cookie settings