How to Secure Your Firebase Project

This story was originally published here.

disclaimer: This is not by any means to be the best practice guide of using firebase in every project. Every project has its own needs and specifications. This guide may not be suitable with your needs.

Do you develop apps using Firebase? If so, we should know that our firebase configs will be exposed to the client (especially for web clients). Then what’s the deal? Many possibilities can be happened and prevented. So many articles already covers on how to secure our firebase project by using security rules, authentication check, etc. I usually define my security rules using a package named @jahed/firebase-rules. But how about preventing someone from making their own client and use our exposed firebase configs to do some shady stuffs towards our realtime database?

Apply Restrictions to the API Key

Every firebase project is a GCP (Google Cloud Platform) project, so we can go to Google Cloud console to configure further our firebase project. We can restrict the API key even though it is exposed. Just follow these steps:

  1. Go to https://console.cloud.google.com/apis,
Credentials Tab
  1. Select the desired firebase project,
  2. Go to Credentials menu,
  3. Look for API Keys section, select the API key which has ...(auto created by Firebase),
API Key Restrictions Tab
  1. You will be directed to a page called Restrict and rename API key, go to Application restrictions section, select HTTP referrers (web sites), add your production web client domain in Website restrictions section. Don't add localhost if you intend to use the firebase project for production.
  2. Hit the save button apply changes.

Voila! Your API key already restricted!

Use Different Firebase Project for Local Development

Now that we already apply restrictions to our API key, how about our local development (localhost)? Well, we can just create a new firebase project which will be used for your local development.

Special Case: Develop Hybrid Mobile App Using Ionic

When developing hybrid app using ionic, chances are we gonna use the same firebase configs for Web and Android / iOS build (firebase web configs). Even though we made several firebase web configs, the API key will remain the same. If we apply restrictions to the API key to be only accessible for certain domain, then the API key won’t be usable for the mobile build. Fortunately, there is a workaround for this. We can just create a new API key which don’t have any domain restrictions just for our mobile build (the API key can’t be easily accessed by the user anyway for Android / iOS build). So, we can use the same firebase configs for our web and mobile builds, but having different API key. Just go to https://console.cloud.google.com/apis/credentials (make sure you already select the corresponding project first), then just create a new API key which will be used for your mobile apps.

References

--

--

--

Don’t have to know everything. Just the right thing.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Synthetic Data Generation

All About Algorithms Part:1

Top Magento Developers in India

Top Magento Developers in India

Retrofit — The easiest way to call Rest APIs is Flutter

Introduction to Regular Expressions

ASP.NET Core EF Relation

Lessons from load balancers and multicast

Hosting a Web Server in Ubuntu MicroK8s

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Agustinus Nathaniel

Agustinus Nathaniel

Don’t have to know everything. Just the right thing.

More from Medium

Using “window” with Gatsby’s runtime SSR mode

Build a Call Forwarder using SignalWire RELAY

Simplifying Authentication in React Apps with SawoLabs