Use Publishable API Keys in Client Requests

In this document, you'll learn how to use Publishable API Keys in client requests.

Note

Publishable API keys are only for client-side use. They can be publicly accessible in your code, as they are not authorized for the Admin API.

Default Behaviour In Product Store API Routes

If you don't pass a publishable API Key for the store API Routes /store/products and /store/products/{product_id}, the default sales channel of the store is assigned to the request.

---

Using Medusa JS Client

When using Medusa’s JS Client, you can pass it to the client only once when you create the instance of the client:

const medusa = new Medusa({
  maxRetries: 3,
  baseUrl: "https://api.example.com",
  publishableApiKey,
})

This will add the API key as in the header parameter x-publishable-api-key on all requests.

You can also use the setPublishableKey method to set it at a later point:

const medusa = new Medusa({
  // ...
})

// at a later point
medusa.setPublishableKey(publishableApiKey)

---

Using Medusa React

You can pass the publishable API key to the MedusaProvider component:

const App = () => {
  return (
    <MedusaProvider
      queryClientProviderProps={{ client: queryClient }}
      baseUrl="http://localhost:9000"
      // ...
      publishableApiKey={publishableApiKey}
    >
      <MyStorefront />
    </MedusaProvider>
  )
}

Then, the API key will be passed in the header parameter x-publishable-api-key of every request.

---

Using Other Methods

For other ways of sending requests to your Medusa backend, such as using the Fetch API, you must pass x-publishable-api-key in the header of every request. Its value is the publishable API key’s id.

fetch(`<BACKEND_URL>/store/products`, {
  credentials: "include",
  headers: {
    "x-publishable-api-key": publishableApiKey,
  },
})

---

See Also

• Manage publishable keys as an admin