How to correctly store secret keys on React App?

Question

I was happy lasts days using **.env **file with the npm dotenv package and saving there some secret keys i use on my React App...

On my first test opload I noticed that my webbApp runs ok EVEN without specifying the .env secret keys on the sever...

So then, was obious to feels like the secret keys are anywhere on the public files (and yes)

I was looking what im doing wrong, and found many documentation (official) that says literally:

WARNING: Do not store any secrets (such as private API keys) in your React app!

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

official doc here if anyone is looking for more info

After 3 or 4 heartAttacks I write this to ask for help on this concept problem.

Anyone knows some documentation where i can read and understant HOW to correctly save sercret keys on this kind of apps (react apps) ?

why the hell is not like all time backend .env files ?

Some info I found, says something about to serve the secret key ontime from another server.

And... sounds stupid for me, i mean: Ok, i can do that but.. its just stupid cause then:

1. or server will serve the sercret keys "free" vía GET or something like this without no-login-needed.
2. or webbApp would need a secret_login_key to login and get the secret key <- in this case, where to store that secret_login_key ? its a infinite bucle ? XD

So:

1. it is posible.. (of course it is) so TRULY store secret keys on React App ? but where and how ?xD
2. what's the way you store the secret keys on ur react App and u are proud of it?

of course the login typing from keyboard user/pass its the "easyway" to have or not have access tho private information but.. what if i need this to be automatic from my webApp ?

Thanks.

Answer 1

Sensitive data should not be on the frontend, you can use env for information like API_URL but not for tokens and passwords

Here is the possible ways to get sensitive data in the frontend

• Http call to the backend where secrets are hashed
• Http call to an external secret management tool like HashiCorp Vault
• Use of httpOnly cookie that they couldn't be read from the frontend

If you are scripting user and password, you should try a tool like jscrambler to secure your build js files

Answer 2

For automatic access to your webapp from the frontend (React), you need a bearer token that is stored in localstorage (bad idea) or as a cookie of the user's browser. Popular example of bearer token is JWT token.

This is how you generate a bearer token on the user's browser: by using Universal Login (login with Google/Fb/Github/Twitter etc) to a provider like Auth0.

React has to communicate with Auth0, Auth0 will authorise the user and return a bearer token that is stored in localstorage (bad idea)/cookie of the browser.

This is what you are trying to do:Call a protected API from React

This is the walk through example of how to do it: Basic Authentication Quick React Setup

Here are some example use cases with different application architecture scenarios:Application Architecture Scenarios

React's documentation is correct, secrets should not be used directly in the React project. But the problem is how to ensure only authorised users get access to protected paths. One way is to use username and password login but you said its the "easyway" and you need it to be automatic. So another way is to ensure authorisation by bearer token stored in localstorage(bad idea)/cookie of the user's browser - this creates a new problem: how to generate a bearer token to allow access. The solution is to use universal login by Auth0 (or Oauth, or OpenID, or Google Authenticator, or some other token generator that the user can possess (like a mobile app (Google Authenticator) or a hardware token)).

Answer 3

I suggest creating a ".env" to store all your secret keys. In your ".env" file you can make this one Eg:

REACT_APP_API_KEY=5155645fdsffsdfs

And in your component, you'll call it Eg :

const apiKey = process.env.REACT_APP_API_KEY

Answer 4

When API calls are made from the frontend (i.e. your react app) anyone using your app can see the request that was made (with tokens, keys, etc.). You should always secret vars to an .env file and keep this file only on your local machine.The best way to handle this, in my opinion, is to use a framework like next or remix that allow you to create functions/api routes that run on the server. This way your frontend makes a request (no sensitive info there) to your server that has access to your keys/tokens. The real call to an external API will be made from the server (so users won't have access to any sensitive data). Not sure if this is something you're interested in but I feel like it's the best way to deal with API calls.

Answer 5

I found that if you have two seperate folders, one for front end and the other for backend, that just having one env file in the root folder will not suffice. I had to create a .env file as well for the front-end folder while following React's naming convention. However, one work around that I learned is that you can store your secret key in a file which you have .gitignore ignore.