1

I am building a firebase application using React v17.0.2 that uses dotenv v8.2.0 to populate the firebaseConfig object.

When I run npm run build it bundles the scripts and puts it in the build folder (obviously) but I noticed that when I view the javascript file that was bundled in the build I can see all the dotenv values. This is a huge security risk as it contains the api key for the firebase app.

For clarity this is what the firebaseConfig variable looks like

const firebaseConfig = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_DATABASE_URL,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGE_SENDING_ID,
  appId: process.env.REACT_APP_APP_ID
};

Is there a way to hide or encrypt these values?

Dharmaraj
  • 47,845
  • 8
  • 52
  • 84
Matthew David Mellows
  • 21
  • 2
  • 1
    There isn't any risk involved (as long as you have security rules setup correctly). Checkout: [Is it safe to expose Firebase apiKey to the public?](https://stackoverflow.com/questions/37482366/is-it-safe-to-expose-firebase-apikey-to-the-public) – Dharmaraj Jan 06 '22 at 11:27
  • 3
    No, there isn't. Because if you hid or encrypted them, you'd also have to ship the code to unhide or decrypt them to the client. The whole point of the `REACT_APP_` prefix is that you _don't_ use it for things that shouldn't be exposed to the client. – jonrsharpe Jan 06 '22 at 11:28
  • I am confused on your point @jonrsharpe, how else am I supposed to get the variables into the firebaseConfig object? – Matthew David Mellows Jan 07 '22 at 14:23

0 Answers0