How to secure your Firebase project even when your API key is publicly available
If you have ever used Firebase services in your web application development, you are well aware that there is no way to hide Firebase config file from public. I myself also tried quite hard, but failed to find any solution for that. In fact found that by design those config information suppose to be public. Then I was worried anybody knows my Firebase config information can create numerous users in my Firebase project, can easily read write data and ultimately can make my project a mess and I will end up with higher payment for Firebase services usage.
To save myself from that disaster, based on many expert’s suggestion online, here is my approach.
Step 1: Do not let anybody login or create user in your Firebase project from any other website but yours
Now how to do it, as you know anybody know your Firebase config just can create a local project, use that config and start creating new users. Whenever we create a new Firebase project, it allows any HTTP referrers (web sites) to communicate with our project using browser key (apiKey mentioned inside our Firebase config). To change that default setting follow below steps —
- Visit https://console.developers.google.com/apis and login
- Select your Firebase project
- Click on Credentials tab
- From API keys list click on Browser key
- Now you can see there are 2 tabs inside. Application restrictions & API restrictions.
- Click on Application restrictions and select “HTTP referrers (web sites)” option
- Then in “Accept requests from these HTTP referrers” section key in your production site address.
Once you done with all these no other site will able to use that API key and perform any action like creating new user in your Firebase project etc. You can add multiple sites here. Please don’t add “localhost” here if you are planning to use this Firebase project for production.
Now since localhost is not included there, if you run your project locally and try to create an user, you will get error like this —
That means nobody can simply use our Firebase config file and login or create user in our Firebase project.
With this approach one problem is you yourself also can’t use that config file during your development in local environment, since localhost also blocked.
To handle that create one test Firebase project using different google account (which is under free plan) and use that while you are developing and testing in local environment. In your project you can setup your Firebase config file like this to use different Firebase project based on environment —
Step 2: Setup proper rules for Firebase Database and Storage
Please note, above setup won’t stop anybody to access your Firebase project database or storage unless you setup proper access rules. Mere knowing your Project ID also people can access your database. To stop all those unauthorized access you must setup proper access rules. Here are some useful articles on Firebase Security and Rules —
