Use a Publishable API Key in the Storefront

When sending requests to the /store API routes, you must pass the publishable API key in the header of your request.

What is a Publishable API Key?#

Publishable API keys specify the scope of a request. Admin users create them, and they can only be used on the client-side, such as in a storefront.

Publishable API keys are associated with sales channels. Then, when the publishable API key is passed in the header of a request, the Medusa application automatically infers what sales channel is being used.

How to Create a Publishable API Key?#

You create a publishable API key either using the Medusa Admin or the Admin API routes.

For example, using the Create API Key API Route:

Code
1curl -X POST 'http://localhost:9000/admin/api-keys' \2-H 'Authorization: Bearer {token}' \3-H 'Content-Type: application/json' \4--data-raw '{5  "title": "Storefront Key",6  "type": "publishable"7}'

To add sales channels to the publishable API key's scope, use the Manage Sales Channels API route:

Code
1curl -X POST 'http://localhost:9000/admin/api-keys/apk_123/sales-channels' \2-H 'Authorization: Bearer {token}' \3-H 'Content-Type: application/json' \4--data-raw '{5  "add": ["sc_123"]6}'

Make sure to replace apk_123 with the ID of the publishable API key, and sc_123 with the ID of the sales channel.

How to Use Publishable API Key in Storefront Requests#

In your storefront, pass the x-publishable-api-key in the header of all your requests to the Medusa application.

For example:

Code
1fetch(`http://localhost:9000/store/products`, {2  credentials: "include",3  headers: {4    "x-publishable-api-key": process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY,5  },6})7.then((res) => res.json())8.then((data) => {9  // use products...10  console.log(data.products)11})

Where NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY is an environment variable that holds your publishable API key's token.