Ayush Agarwal

Posted on Mar 7, 2022 • Edited on Aug 5, 2023 • Originally published at blogs.ayushdev.com

Hide Firebase API Keys in ReactJS Project using Environment Variables

#firebase #codenewbie #react #javascript

Hello developers! Welcome to my tech blogs. This one is going to be short yet valuable. So recently participated in Hashnode x Netlify Hackathon, wherein I built a project in which I used Firebase for authentication and data storage.

While Firebase makes a lot of our work more accessible, there is one essential work to do in projects using Firebase, which, if ignored by developers, can pose a huge security threat. You must have guessed what I am talking about since it's mentioned in the title, which in the first place brought you to this blog.

Note - Although this blog will mainly talk about Firebase, the method discussed can be used on any API keys, not just Firebase keys.

So, with the pretext set, let's start!

When you start with Firebase and create your project on Firebase, it will generate a code with keys to integrate Firebase with your ReactJS project. You copy the code generated in a file named "firebase.config.js".

This is how this piece of code looks :

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

// Initialize Firebase
const firebaseConfig = {
  apiKey: "AIzaSyDPzm_FNgMyqDK6TuJ17Aadao7DcQLAEfM",
  authDomain: "projectname.firebase.com",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
  measurementId: "",
};

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);

I have kept most of the values empty. Now, this code is what gets Firebase up and running in your ReactJS. But when you complete your project and wish to push the codebase to Github to say deploy the project or even showcase it on Github, it is not healthy to commit this file "firebase.config.js".

Doing it exposes your Firebase API keys to the public which can be used for DDoS attacks and other security vulnerabilities.

Now you might argue my project is just a test project, and I don't care about security. Yes, this might be true that exposing the keys might not matter for you or one particular project. But it is always good to have a good development practice, especially if it is about security.

How can I protect my API keys then?

We will use environment variables to hide the keys. Create a new file named _".env"_in your project root folder.
All the sensitive information from the config file will be written here.
You can follow the syntax below to populate environment variables, which we will later use in config files without using the values. Little confusing, right? , Let's see it in action,

.env file :

REACT_APP_API_KEY = AIzaSyDPzm_FNgMyqDK6TuJ17Aadao7DcQLAEfM
REACT_APP_AUTH_DOMAIN = projectname.firebase.com

That's it about writing environment variables, write a variable name, and put the value here.
One important to note here is REACT_APP is compulsory to add; otherwise, your ReactJS project will not recognize the variables.

Next step is using this variable in the actual config.js file.

firebase.config.js file :

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

// Initialize Firebase
const firebaseConfig = {
  apiKey: `${process.env.REACT_APP_API_KEY}`,
  authDomain: `${process.env.REACT_APP_AUTH_DOMAIN}`,
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
  measurementId: "",
};

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);

"process.env" is to access the env comment variables, and after that is the variable name we wish to use.
Other values can be replaced similarly. Add it in the .env file and call it in the config file.

Note - You should not forget to add the .env in gitignore; otherwise, the whole purpose of hiding the API keys would be defeated.

Hey Ayush, how will I deploy the project if I don't commit the .env file?

This is a general question that must have come to your mind. Since we are not commenting on the environment variables, how will our deployment service say "Netlify" recognize the variable name in the config.js file, which will cause Firebase to break down.

Don't worry; all the deployment services have a feature to enter/configure the environment variables. For example, Netlify asks you to enter all the environment variables before deploying the site, with an option to edit later too.

That's it for this blog. I hope this will help someone make their project better. Thanks for reading the blog; looking forward to reading your thought on the same.

Lastly, Your support keeps me going, and I give my 100 percent to these blogs! If you've found value, consider fueling the blog with a coffee ☕️ donation at the below link.

Buy me a COFFEE!

Thank you! 🙏