DEV Community

loading...

Discussion on: Firebase Functions: React users need to stop storing sensitive API keys in .env files!

Collapse
andersjr1984 profile image
andersjr1984 Author

Awesome reply! I'll have to look into that. I know this may be common knowledge to most, but there is some confusing information out there. Some of the common google search returns still suggest using .env files and if you don't read carefully, you may be inclined to use .env when deploying your react app. I wanted to find out why this isn't safe and tried to clearly explain it.

This is an aggregation of several different sources that I used to make a couple API calls. Having all this information in one place will hopefully make someone's life a littler easier, I'm still a newb and I would have loved to be able to follow something like this from the beginning.

Collapse
tracker1 profile image
Michael J. Ryan

I can understand that... I actually do use .env files, but the front end only uses them for the build/dev server to inject the 3 values... for the most part, I only use them for dev, and in the .gitignore so they don't get added. I then inject the necessary environment variables into the CI/CD for build and/or deploy environments. My front end usually has a limited number of them.

And you are right, it's too easy to accidentally inject unexpected values into a build. If you stick to just what you intend to inject such as with process.env.VARNAME in the webpack config, or in a separately loaded JS file that gets injected into the client.