0

I'd like to hear a technical explanation as to how the .env file manages to inject the correct string for using API keys on the frontend without actually being visible to the browser. It's my understanding that process.env is injected into the JS at runtime, but shouldn't that mean the variables are just as accessible as they would be if they were loaded into your main.js bundle?

I'm just perplexed as to how a secret is actually still a secret while allowing the browser to access and use the API key.

yoursweater
  • 1,883
  • 3
  • 19
  • 41
  • 6
    afaik .env doesn't keep your secret in production mode. don't use secret keys on front-end – Kid Apr 08 '20 at 15:59
  • 1
    There may be a misconception here--of course they're visible to the browser; they have to be in order to be sent. That's one reason why people wrap API calls behind a call to an owned server (e.g., JWT on the client to your server, your server has the API key and makes the actual call). Or you get the API key dynamically (ultimately the same issue) or go through an auth process through the API. Or obfuscate the best you can. Yada^3. – Dave Newton Apr 08 '20 at 16:01
  • .env does not "protect" your keys. The file simply holds onto the keys for you to access in your development environment. You should NEVER push them to your repository. You should look for another way to access the keys in your production environment, such as encoding them in another .env.production file, save that file elsewhere, then decrypt them after pulling that file down. There is no "correct" way to use API keys, other than NEVER push the raw keys. An answer for Android, but relevant [here](https://stackoverflow.com/a/14572051/5078905) – Spencer Pollock Apr 08 '20 at 17:11

0 Answers0