DEV Community

Cover image for Hide Firebase API Keys in ReactJS Project using Environment Variables
Ayush Agarwal
Ayush Agarwal

Posted on • Originally published at blogs.ayushdev.com

Hide Firebase API Keys in ReactJS Project using Environment Variables

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);

Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  • 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);
Enter fullscreen mode Exit fullscreen mode
  • "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. If you wish to check out my Hashnode x Netlify Hackathon Blog, here's the link to it :

Diabytics | Hashnode x Netlify Hackathon

Discussion (10)

Collapse
adelpro profile image
adelpro

These api keys are public keys, to protect you firebase project from unauthorized access you have to use the new "App check" from the firebase team ( in beta stage)
Link: firebase.google.com/docs/app-check

Collapse
derick4l profile image
Derick McMillian

So you're saying doing this App Check is mandatory in order for the env variables to work?

Collapse
adelpro profile image
adelpro

Im saying that after doing the ""App Check", api key can be shared in public, because it will work only if the request comme from an authorized domaine (YOUR WEB SITE FOR EXEMPLE) else the request will be rejected even with the correct API.

Thread Thread
derick4l profile image
Derick McMillian

Nice. I understand now, thanks.

Thread Thread
adelpro profile image
adelpro

You are welcome

Collapse
ayushdev_24 profile image
Ayush Agarwal Author

This is really a nice suggestion. Thanks a lot for mentioning it Adelpro !

Collapse
derick4l profile image
Derick McMillian

Thanks for this article! It really helped me out πŸ‘πŸΎπŸ‘πŸΎπŸ‘πŸΎ

Collapse
ayushdev_24 profile image
Ayush Agarwal Author • Edited on

You are welcome Derick !

Thanks for sparing some time to read the article. :)

Collapse
ritualjoint profile image
Andras E

some reason returns undifined in localhost :/ is there a reason for this looks like it can`t access it

Collapse
ayushdev_24 profile image
Ayush Agarwal Author

Hi Andras , sorry but I didn't get your question.