What is the best way to secure Firebase API keys in a react app so it is not accessible publicly?

Question

I currently have a React app using Firebase authentication & uses Firestore as the database.

I currently have the app deployed using Amazon's Amplify service. My Firebase API keys, including the database URL and firebase app Id are all added as environment variables in the AWS console.

When I inspect the public bundle, I can see that all the API keys are public.

My questions are:

• Does this sound right?
• Is there a best practice for how to handle this situation?
• Do I need to build a back-end to handle this?

Answer 1

Your API keys, database URL, app id etc are meant to be public.

According to the firebase docs:

The content is considered public, including your platform-specific ID (entered in the Firebase console setup workflow) and values that are specific to your Firebase project, like your API Key, Realtime Database URL, and Storage bucket name. Given this, use security rules to protect your data and files in Realtime Database, Cloud Firestore, and Cloud Storage.

The way you're meant to make your connection to firebase secure is to use security rules. You can add custom rules to make sure your DB is secure.

For example: You can make sure only userId 12345 has rights to create, read, update and delete records for userId12345.