xm cloud – Hide API Key in Front-End GraphQL Calls in Sitecore Next.js

admin

We achieved this by following these steps:

Step 1: Hide the API Key in the Front End

Go to your GraphQL client factory file (/src/lib/graphql-client-factory/index.ts). The path may vary depending on your version, but the logic remains the same. Comment out the lines shown below.
This change prevents GraphQL calls from sending the API key.

Screenshot below

enter image description here

Step 2: Attach the API Key on the Server Side

For GraphQL to function, an API key is required, so you’ll need to attach it on the server side. This way, it will not be exposed in front-end requests.

Go to next.config.js, and add the route with the appropriate API key as shown below. Be sure to update your GraphQL endpoint accordingly. Here’s an example of ours:

Screenshot below

enter image description here

Finally, validate that the API key is no longer exposed in front-end requests.

enter image description here

Read more here: Source link