[FIXED] How Secure are Environment Variables in REACTJS that using .env in the root of project?

Issue

I am using REACT 18.2, and I have a .env file that has REACT_APP_API_URL and REACT_APP_API_SECRET so I can use them during API Calls.

After I do npm run build and run the app, the variables are successfully used within the application using process.env.REACT_APP_API_URL in JS API Calls.

I tried to take out that process.env.REACT_APP_API_URL code and run in the browser console, but null came up. I also searched the source files and did not find the actual value of that .env variable either.

So I guess the question, is it now okay to store secret variables in the project's root .env file without a risk of it being available in the source files accessible by user. If it is still an issue, how would one find that information in the browser inspection?

Note: I have the following packages in my package.json, but do not import them or have config files set up.

"webpack": "^5.64.4", "webpack-dev-server": "^4.6.0", "webpack-manifest-plugin": "^4.0.2", "workbox-webpack-plugin": "^6.4.1", "dotenv": "^10.0.0", "dotenv-expand": "^5.1.0",

Solution

If the application runs on the frontend, and the frontend requires the process.env.REACT_APP_API_URL in order to function, then there's no way to keep it secret. Anything that runs on the frontend can be easily accessible to any interested party who cares enough to open up the devtools and wade through your code. The only way to definitely keep something secret from the client is to never send it to them in the first place. For example, in some circumstances, you could keep it secret by having clients make a request to your backend instead, and make the request to the other API call your backend instead, then echo the response to the client.

If it is still an issue, how would one find that information in the browser inspection?

By opening up the browser devtools, going to Sources, and browsing through the various scripts.

Answered By - CertainPerformance

Answer Checked By - Terry (PHPFixing Volunteer)