Shopify APIs and SDKs

CRandyHill · ‎08-08-2020

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

https://shopify.dev/tutorials/build-a-shopify-app-with-node-and-react/fetch-data-with-apollo

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 (
      <React.Fragment>
        <Head>
          <title>Sample App</title>
          <meta charSet="utf-8" />
        </Head>
       <Provider config={config}>
          <AppProvider>
          <Component {...pageProps} />
          <ApolloProvider client={client}>
            <Component {...pageProps} />
          </ApolloProvider>
          </AppProvider>
        </Provider>
      </React.Fragment>
    );
  }
}

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?

AndyPicamaze · ‎08-09-2020

Hi,

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 app.mybackend.com/page -> xxx.myshopify.com/admin/apps/API_KEY ). 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 xxx.myshopify.com/admin/apps/picamaze 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.

https://apps.shopify.com/picamaze
Animated watermarks for product images and ads

CRandyHill · ‎08-09-2020

Andy,

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

best,

Randy

Shopify APIs and SDKs

Does ApolloProvider expose my API_KEY?

Community Blog Articles

Shopify Community

Support

Shopify

Quick Links