AppBridgeError: APP::ERROR::INVALID_CONFIG: apiKey must be provided

with_coffee
New Member
2 0 1

So I've been on this issue for about 2 days. I've been working on the Shopify Node with React tutorial and it was going well until I hit the "Add Shopify App Bridge" section. 
When I restart my server and ran 'npm run dev' and go to authenticate my app at https://YOUR_NGROK_ADDRESS.io/auth?shop=YOUR_SHOPIFY_STORE.myshopify.com (I added my credentials). I would end up with this error.

Screen Shot 2021-04-28 at 8.39.13 AM.png

I've seen a lot of others with this issue but none of the solutions worked for me. 

What I've found:

In my next.config.js file, I've console logged the env to see if the api key is coming through. It does. 

require("dotenv").config();
const webpack = require('webpack');

const apiKey = JSON.stringify(process.env.SHOPIFY_API_KEY);

module.exports = {
  webpack: (config) => {
    config.node = {
        fs: 'empty'
    }
    const env = {API_KEY: apiKey};
    config.plugins.push(new webpack.DefinePlugin(env));
    return config;
  },
};


In my _app.js file I console logged the config object, this is also passing in all the correct information.

 

My _app.js file

import React from 'react';
import App from 'next/app';
import Head from 'next/head';
import { AppProvider } from '@shopify/polaris';
import { Provider } from '@shopify/app-bridge-react';
import ClientRouter from '../components/ClientRouter';
import '@shopify/polaris/dist/styles.css';
import translations from '@shopify/polaris/locales/en.json';
import '@shopify/polaris/dist/styles.css';
import { getCookieParser } from 'next/dist/next-server/server/api-utils';

class MyApp extends App {
  render() {

    const { Component, pageProps, shopOrigin } = this.props;
    const API_KEY = process.env.SHOPIFY_API_KEY;
    const config = { apiKey: API_KEY, shopOrigin, forceRedirect: true };
    console.log(config)
    return (
      <React.Fragment>
        <Head>
          <title>Sample App</title>
          <meta charSet="utf-8" />
        </Head>
        <Provider config={config}>
            <ClientRouter />
            <AppProvider>
                <Component {...pageProps} />
            </AppProvider>
        </Provider>
      </React.Fragment>
    );
  }
}

MyApp.getInitialProps = async ({ ctx }) => {
    return {
      shopOrigin: ctx.query.shop,
    }
  }

export default MyApp;




What my console log shows when doing -  console.log(config) in _app.js:

{
  apiKey: 'MY API KEY',
  shopOrigin: 'mydevsite-theme.myshopify.com',
  forceRedirect: true
}


 I'm stumped here because my api key and shopOrgin is being pulled into config when I console log in my terminal but my api key is undefined when I check the console log in my browser inspector. 
Here's what my inspect looks like. 


Screen Shot 2021-04-28 at 9.35.29 AM.png

 

Would greatly appreciate any help because this thing is kicking my butt. 

0 Likes