Hiding API Keys with Environment Variables (env file)

Hi there, I’m using the Firebase Real Time DB in my project and would love to save my API keys in an env file (or anything else that might have a similar security effect).
A few code examples I found via Google hinted that there might be something like this, but I couldn’t find any documentation or examples…
Help would greatly be appreciated :wink:


Hey @marky did you find a solution to this by any chance? We’re looking for the same kind of solution for firestore

Why are you looking into hiding them? Google “expects” us to use those API keys in a public environment and that’s why they provide the domain whitelisting function. Your API won’t accept calls that are not from the domains you specify.

You also need to setup Security Rules properly, in order to control what can be changed/read and who can do that in the DB.

Once you take those security measures, no one with the API keys can do things that they`re not supposed to

1 Like

You can use Design Sync to convert to Next JS, build and deploy with .env files and set up webhooks for automatic publish. It is pretty easy to set up. There is a 1 time fee, but it is worth the money.

Publish API Keys in Vercel or Netlify publish / “exports” from Webflow. Your process.env keys can be in embed script in webflow and the Vercel / Netlify publish will look for the code.