How to Secure Your Firebase Project

UpdatedOctober 18, 2022

•3 min read•View as Markdown

Agustinus Nathaniel

Tech and Art enthusiast. Into product development. OSS

Comments

Join the discussion

No comments yet. Be the first to comment.

More from this blog

2020 Recap

originally posted here I think most would say 2020 is a roller coaster year. Even though, 2020 is one of a hella ride and worth for me to be remembered. I've made a quick recap in 2019 before. So let's review what I've been up to in 2020. What I Lear...

Dec 31, 20205 min read8

Monitor and Measure Site Performance from Time to Time and Automatically using Speedlify

originally posted here TL;DR Want to measure and monitor your site performance from time to time and automatically? Deploy Speedlify through Netlify and use Github Actions (cron schedule) or Zapier to automatically trigger build every desired time. Y...

Nov 7, 20206 min read15

Monitor and Measure Site Performance from Time to Time and Automatically using Speedlify

May 2020 Quarantine Self Challenge

originally posted here Recently I challenged myself to make a web app as soon as possible in two days. Managed to make two. One is a simple Food Recipe App and the other is COVID-19 Data App. Turned out it was so fun. 1. Le Cook Fun food recipe catal...

May 2, 20202 min read12

Stackbit, the Game Changer

originally posted here by the time I wrote this post, Stackbit is still at Beta. Have you ever thought of launching a landing page or a blog with the technology of your choice in just under 10 minutes? Since JAMStack is getting more popular these day...

Mar 22, 20202 min read4

sozonome | hashnode

6 posts

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:

Go to https://console.cloud.google.com/apis, Credentials Tab

Select the desired firebase project,

Go to Credentials menu,

Look for API Keys section, select the API key which has ...(auto created by Firebase), API Key Restrictions Tab

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.

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

Command Palette