what is the point of using react environment variables?

user_6377312 0
Viewed 120

Reacts documentation says "Environment variables are embedded into the build, meaning anyone can view them by inspecting your app's files".

I am assuming its because the .env. file where I would define them will be included in the build (or not because of that?!)?

So then,what the point of using react environment variables if i cannot hide any keys? Or do I just not understand it and I can hide keys using react environment variables (a tutorial I am watching says you can hide them using it)?

What if I define those variables inside my shell? Are they exposed as well?

Thank you!!

reactjs environment-variables
3 Answers

Environment variables help because they can let you customize settings without changing the source code. In terms of the code that runs, the end result is the same - yes, whatever client runs the code will be able to see what's going on, including any API keys you include with the app - but it makes the development process easier when there's a single place where you can set settings that can differ between environments without changing the code itself.

This is of the greatest benefit when using source control like Git. If you make a change to a build setting - such as the change to an API key - it wouldn't make sense for that change to be checked into the codebase's history. Rather, the convention is to instead have the application read its environment variables, and have those not checked into source control, allowing the settings to be easily changed without changing anything else in the application's code itself.

See An Introduction to Environment Variables and How to Use Them for a decent summary.

if i cannot hide any keys?

Hiding API keys is a completely separate issue - it's not something that environment variables are meant to solve. If you want to hide your keys, there are at least two approaches:

  • Put the keys on your server, and then have the client make requests to your server, and have your server use the (secret) API key to the external service, then echo the result back to the client
  • Some APIs which provide keys also provide the ability to whitelist requests from certain domains, and to block requests from others. For example, depending on what you're using, you may have the ability to go into the API's settings to enable your key with mysite.com, and block it from being recognized as valid from any other site. This way, even if the API key is public, it's not (much) of a problem.
user_95152070

Environmental variables in react are always prefixed with REACT_APP_ and are used when you want to change values across your frontend react application. They're not designed to hide API keys which are intended to be private.

Variables that do not start with that prefix will not be visible in the final build (You can also use two .env files).

No variables defined inside your server shell will be exposed.

user_130653930

I'm not sure if they would be exposed if you define them in your shell, but the case is that: when you are pushing your folder to git control system like GitHub, the environment variables are not uploaded. So, you will have to define them secretly, in appropriate when you are going to host your website. This is how they are in your files:

var id = process.env.REACT_APP_CLIENT_ID;
var key = process.env.REACT_APP_KEY;

where as they will be called from .env.local files where they are officiall mentioned.

I'm currently familiar with using environment variables in vercel and this is how you can do it: https://vercel.com/docs/concepts/projects/environment-variables The whole point is that they help you secure APIs from external applications.

user_190045770
Related