2

In my js file I am using: const apikey = process.env.REACT_APP_API_KEY;

In the .env file I have: REACT_APP_API_KEY = 123456789

Everything is working fine BUT, when I start (npm run start) and then go into source code, there is: const apikey = 123456789;

That means, instead of showing process.env.REACT_APP_API_KEY in source doe to hide the key, it is showing the actual api key.

1
  • For general questions about programing and other frameworks it is better to ask directly in stackoverflow.com.
    – Ismael
    Feb 9, 2023 at 4:41

1 Answer 1

0

I assume you use plain React with create-react-app.

REACT_APP_ environment variables in create-react-app need to be added during build time, are included in the static bundle and are public.

As also mentioned in their docs:

WARNING: Do not store any secrets (such as private API keys) in your React app! Environment variables are embedded into the build, meaning anyone can view them by inspecting your app's files.

Link to the create-react-app docs article:

https://create-react-app.dev/docs/adding-custom-environment-variables/

You should consider using secrets on your server, not your client. In case you would use a full-stack framework like Next.js utilizing React, you can write server and client code in one application (in which only your backend touches your secrets).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.