Search code examples
javascriptbashenvironment-variablescommand-line-interface

API key 401 error in .env.development file

I created an .env.development file in order to store my api key and other environment variables. I got an issue that when i use my api key defined in .env.development file and retrieved with the help of dotenvx dependencies, the website failed to load resources with a status of 401. However, if i used my api key directly without the need of retrieving from the .env.development file, the website fetched normally without any trouble. My api key works fine so dont need to worry about that.

Note: I also want to mention that the API key I obtained is from TMDB, an external API. Other environment variables that i defined are working fine in the backend with dotenvx package.

.env.development:

API_KEY="my_api_key"

api-config.js:

const apiKey = process.env.API_KEY;
const apiUrl = "my_api_url";
const apiKeyParams = `my_api_params`;

error:

Error from fetching with the external api key

I have tried manually with cli bash:

$ dotenvx run -- npm run start

and i have tried preload with npx:

"scripts": {
  "start": "npx dotenvx run --env-file=.env.development -- react-scripts start"
}

it all injected environment variables successfully but it still doesnt work.

Solution

  • Apologies for the confusion earlier. I've found a solution. In the .env.development file, instead of defining API_KEY, it should be defined as REACT_APP_API_KEY:

    .env.development:

    REACT_APP_API_KEY="my_api_key"