I am using Sitecore Experience Edge and Next.js with JSS. My site requires a section that is secured behind a login, which I know should be handled by the head application and that we should not expose the Edge content delivery token to the browser to make sure that the content cannot be accessed directly.

The problem is, JSS generates a file under ./temp/config.ts that contains the token:

config.sitecoreApiKey = process.env.SITECORE_API_KEY || '<api token will be added here>',

This file is imported into some components and so this exposes the API token to the world. Can we configure JSS to stop exposing that token?

1 Answer 1


The Fix

To make sure that the content delivery api token is not exposed to the browser, you need to remove the following line from the ./scripts/generate-config.js:

  Generates the /src/temp/config.js file which contains runtime configuration
  that the app can import and use.

const defaultConfig: JssConfig = {
  sitecoreApiKey: process.env[`${constantCase('sitecoreApiKey')}`], <---- REMOVE THIS LINE!!!!!
  sitecoreApiHost: process.env[`${constantCase('sitecoreApiHost')}`],
  jssAppName: process.env[`${constantCase('jssAppName')}`],
  graphQLEndpointPath: process.env[`${constantCase('graphQLEndpointPath')}`],
  defaultLanguage: process.env[`${constantCase('defaultLanguage')}`],
  graphQLEndpoint: process.env[`${constantCase('graphQLEndpoint')}`],
  layoutServiceConfigurationName: process.env[`${constantCase('layoutServiceConfigurationName')}`],

This will make sure that the API token is only ever pulled from the server side environment variables.

How do I make GraphQL calls from the browser now?

Once this change is made, you can't make graphql calls directly to Experience Edge as the content token is not known. To do this, you can create an API in route in your Next.js application that will make the call out to Experience Edge and return the results to the browser:

Sample API Creation

... the above us pseudo code and would need to be completed properly. But this now hides away the call to Experience Edge behind an api route in your Next.js app.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.