Does ApolloProvider expose my API_KEY?

17 0 5

This is a newb question for sure. I built my app based on this tutorial, and it's working well so far.

But while upgrading to Typescript, I'm just noticing this section of code (since typescript doesn't known what API_KEY is).

class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props;
    const config = { apiKey: API_KEY, shopOrigin: Cookies.get("shopOrigin"), forceRedirect: true };
    return (
          <title>Sample App</title>
          <meta charSet="utf-8" />
       <Provider config={config}>
          <Component {...pageProps} />
          <ApolloProvider client={client}>
            <Component {...pageProps} />


It appears that Next.js is fetching the API_KEY from my .env file on the server and inserting it into a client-side page? Is this a security issue I need to fix, or am I misunderstanding what's going on here?

Replies 2 (2)
41 1 15


If you run 'npm run build' and then 'grep -r API_KEY .' you'll see that the API_KEY is exposed. The only use of it I was able to see is to get redirected to the embedded app url if you try to access any page directly (e.g -> ). This behaviour is controlled with forceRedirect config param.

When you create an app from your Partners dashboard it has a handle assigned and the app can be accessed by appending the handle to the url (e.g in my case). I haven't tested it in production but my guess is that if you put apiKey: your_product_handle will work.

Wondering what security issues you might have exposing just the API key without the password?

Good luck.
Animated watermarks for product images and ads
17 0 5


Thanks! This was very helpful. Didn't want to be alarmist, just to better understand possible security issues.