React NPM Build and Environment Variables

Question

When deploying a ReactJS + NodeJS application, what do you do about environment variables used on the React-side? Running NPM BUILD folds any secret API keys into the final code, making it visible to anyone who inspects the source code. Moving the.evn information to a.env file located server-side before using the npm build command doesn't solve the issue. I've tried to search around but I can't find any actual solutions.

Thanks

Answer 1

Thanks folks, all extremely helpful. I'll be moving the secret keys to the server side and changing the way my code works to compensate the adjustment, The other issue was Google Maps API. which can't be moved in the code but can be restricted to specific IP or URL use in the Google Cloud Platform

https://cloud.google.com/blog/products/maps-platform/google-maps-platform-best-practices-restricting-api-keys

Answer 2

You cannot make secret keys invisible on the client side. Even receiving it as an environment variable from the server, the keys will be incorporated into the build and will be publicly accessible.

So that your React app is not vulnerable, the only way is to save keys and secrets in the backend. That is, the backend is the only one with access to keys and secrets. Client only makes requests without storing sensitive data.