FROM CACHE - en_header

APP::ERROR::INVALID_CONFIG: apikey must be provided

mkarthique
New Member
12 0 0

I am working on a react/node js application integrating azure vault for secret keys.

The .env file is not used.

The vault values are fetched through cicd pipelines and set as application configuration values.

The values are getting retrieved at the server.js end.

When i try to send the value to the _app.js file using next.config.js, the value is not reflecting an it comes as undefined.

next.config.js

 

const apiKey =  process.env.SHOPIFY_API_KEY
console.log('JSON.stringify : ' + process.env.SHOPIFY_API_KEY);
module.exports = {
   env: {
      customKey: apiKey,
    },
};

 

 

_app.js

 

const config = { apiKey: process.env.customKey, shopOrigin: Cookies.get("shopOrigin"), forceRedirect: true };

 

 

Below is the error thrown: 

APP::ERROR::INVALID_CONFIG: apikey must be provided 

 
 

ERROR.JPG

Replies 12 (12)
Greg_Kujawa
Shopify Partner
1023 84 266

You say that you aren't storing the API credentials in the traditional .env file. As is outlined here --> https://shopify.dev/tutorials/build-a-shopify-app-with-node-and-react/embed-your-app-in-shopify. So if there isn't an .env file or else it's there and doesn't contain the API credentials, why is your code still looking for it in that spot?

const apiKey =  process.env.SHOPIFY_API_KEY     // This is null, right?

 

How are you handling the API credentials that are being pulled in your server.js file? 

mkarthique
New Member
12 0 0
const apiKey =  process.env.SHOPIFY_API_KEY 

This is a value we are setting during the CICD release.

We are setting multiple test environments like DEV/QA where each will be a corresponding store.

Their secrets will be set during the CICD release to the respective environment and i am able to retrieve this value in the server.js.

Only issue here is that the key is not getting sent to the _app.js from next.config.js. Even when i hardcode it in next.config.js it does not reflect in _app.js.

 

mkevinosullivan
Shopify Staff
Shopify Staff
7 3 3

If you're using 

const config = { apiKey: process.env.customKey, shopOrigin: Cookies.get("shopOrigin"), forceRedirect: true };

in your _app.js file, I think you may just need

const config = { apiKey: customKey, shopOrigin: Cookies.get("shopOrigin"), forceRedirect: true };

to pick up the value from next.config.js

mkarthique
New Member
12 0 0

No, Its undefined

Greg_Kujawa
Shopify Partner
1023 84 266

You don't appear to be loading your next.config.js file into your _app.js file by using a "require" line. Discussed here --> https://stackoverflow.com/questions/7612011/how-to-get-a-variable-from-a-file-to-another-file-in-nod... 

I think you would find joy by adding this to your _app.js file:

const { theExportedVariableYouNeed } = require('./next.config.js');    // Assuming both JS files reside in the same directory.
mkarthique
New Member
12 0 0

Your suggestion would work fine if the values are available during build but i am trying to set them during runtime from azure vault because of which the parameters within next.config.js is coming as undefined.

Is there a way to set the value during runtime.

I tried below options as well but it wasnt working and the build was failing as the values were coming as undefined.

const apiKey = JSON.stringify(process.env.SHOPIFY_API_KEY);
module.exports = {
    serverRuntimeConfig: { // Will only be available on the server side
    API_KEY: apiKey
  },
  publicRuntimeConfig: { // Will be available on both server and client    
    API_KEY: apiKey // Pass through env variables
  },
}

 

Greg_Kujawa
Shopify Partner
1023 84 266

I'd suggest researching some similar scenarios, taken in the general sense of dynamically retrieving a server-side variable in client runtime. Not as much of a Shopify-specific issue as a Node.JS challenge.

Here are a couple of article I ran across. Maybe they will help steer you in the proper direction!

https://blog.salsitasoft.com/dynamically-updating-client-side-configuration-using-server-side-enviro...

https://stackoverflow.com/questions/27773521/how-can-i-dynamically-access-a-global-variable-in-node

https://stackoverflow.com/questions/46440029/how-can-i-dynamically-create-a-variable-dynamically-in-...

 

janmensik
New Member
1 0 0

your env file must be named ".env" and you need this code where you need keys:

const dotenv = require("dotenv");
dotenv.config();
bryantabaird
New Member
2 0 0

Spent an hour on this, figured I'd help the next dev who wanders here.

 

Shopify.Context.initialize({
  //API_KEY: process.env.SHOPIFY_API_KEY,
  API_KEY: process.env.NEXT_PUBLIC_SHOPIFY_API_KEY,
  API_SECRET_KEY: process.env.SHOPIFY_API_SECRET,
  SCOPES: process.env.SHOPIFY_API_SCOPES.split(","),
  HOST_NAME:
    process.env.VERCEL_URL ||
    process.env.SHOPIFY_APP_URL.replace(/https:\/\//, ""),
  API_VERSION: ApiVersion.October20,
  IS_EMBEDDED_APP: true,
  SESSION_STORAGE: new Shopify.Session.MemorySessionStorage(),
});

 

 

I scrapped the next.config.js file, since it was no longer needed, and then access the variable with process.env.NEXT_PUBLIC_SHOPIFY_API_KEY

https://nextjs.org/blog/next-9-4#new-environment-variables-support for detail. Good luck future traveler. Send cookies 🙂

Ezat
Tourist
4 0 3

If you are using the nextjs to build your app try to put your  SHOPIFY_API_KEY in the next.config.js file. like so:

 

 

module.exports = {
  env: {
    SHOPIFY_API_KEY: 'somerandomkeys',
  },
};

 

Hiroshi
Tourist
10 0 0

Hello, same problem here, sadly none of the posted solutions solve the bug. Any other idea?

xavier-redcod
Shopify Partner
30 1 1

I had the same issue and this solution worked for me :

 

_app.js :

import getConfig from "next/config";
const { publicRuntimeConfig } = getConfig();
<AppProvider>
        <Provider
          config={{
            apiKey: API_KEY || this.props.api_key,
            ...
          }}
        >
        ...
        </Provider>
</AppProvider>
MyApp.getInitialProps = async ({ ctx }) => {
  return {
    ...
    api_key: publicRuntimeConfig.API_KEY,
  };
};

next.config.js

module.exports = {
  ...
  publicRuntimeConfig: {
    API_KEY: process.env.SHOPIFY_API_KEY,
  },
};