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.

Permanent access tokens view
Permanent access tokens view

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',
     },
    },
  })
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
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.