1

We have an application that uses an API key (Accesstoken). We would like to hide the API key in a .env file.

We have gone through the following steps.

  1. Created a .env file in the source folder (with the .gitignore)

  2. Added in the .env REACT_APP_ACCESSTOKEN = pk.ffe1Ijo.......

  3. In the terminal added the npm install dotenv

  4. Added the into our map.component file - import dotenv from 'dotenv' dotenv.config() const accessToken = process.env.REACT_APP_ACCESSTOKEN;

  5. Added to webpack.config.js -

    externals: ["fs"], resolve: { extensions: ['.js', '.jsx', '.ts', '.tsx'] },

Now we get the error message in the web browser console that fs is undefined. Or that the Acesstoken is not found.

Kalvin
  • 13
  • 3

1 Answers1

1

As per the create-react-app documentation, unless you're creating toy apps, it's not a good idea to store secret keys in your React app.

But, in case you really need to:

If you're using create-react-app, there's no need to install a separate dotenv library, as it's supported out of the box.

Otherwise, dotenv-webpack is probably something you can try. See this other SO question.

Nicky Logan
  • 120
  • 1
  • 8
  • Thank you, we ran the npm i dotenv-webpack command and then amended the webpack.config.js (as shown on the link) and it worked. – Kalvin Jan 27 '21 at 08:57