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