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

0 Likes
Greg_Kujawa
Shopify Partner
1016 83 226

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? 

0 Likes
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.

 

0 Likes
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

0 Likes
mkarthique
New Member
12 0 0

No, Its undefined

0 Likes
Greg_Kujawa
Shopify Partner
1016 83 226

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.
0 Likes
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
  },
}

 

0 Likes
Greg_Kujawa
Shopify Partner
1016 83 226

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-...

 

0 Likes
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();
0 Likes
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

0 Likes