Firebase

If you like the idea of making serious web apps quickly without spending too much time on the backend, you’ll want to look at Firebase. Even if you don’t end up using it, it’s a great case study for cloud services.

What is Firebase?

Firebase is a platform for running and managing apps on the cloud. It’s a fully-featured “backend as a service” (BaaS) that scales automatically to millions of users. It offers tons of features for development (authentication, database, storage, messaging), user engagement (insights, experimentation, customization), and operations (testing, troubleshooting of stability and performance, feature rollout, and adoption monitoring). You just focus on writing your awesome app and let Firebase manage the infrastructure and much of the tedious operational concerns.

Firebase is part of Google Cloud.

Make sure to get familiar with:

Firebase Products

As of October, 2022, Firebase provides these 18 products:

Authenti-
cation

AboutDocs

Cloud Firestore

AboutDocs

Realtime Database

AboutDocs

Cloud Storage

AboutDocs

Cloud Functions

AboutDocs

In-App Messaging

AboutDocs

Cloud Messaging

AboutDocs

Machine Learning

AboutDocs

App Check

AboutDocs

A/B Testing

AboutDocs

Dynamic Links

AboutDocs

Google Analytics

AboutDocs

Crashlytics

AboutDocs

Performance Monitoring

AboutDocs

Test Lab

AboutDocs

App Distribution

AboutDocs

Remote Config

AboutDocs

Firebase Hosting

AboutDocs

Currently the Firebase documentation groups the products into three main areas:

GroupProducts
BuildAuthentication • Cloud Firestore • Storage • Hosting • Cloud Functions • Machine Learning • Realtime Database • App Check
Release & MonitorApp Distribution • Crashlytics • Performance Monitoring • Test Lab
EngageAnalytics • Cloud Messaging • Remote Config • A/B Testing • Dynamic Links • In-App Messaging

There are additional sections in the documentation not tied to any of the main products, but are good to know about:

The documentation also shows how to link other Google products into your Firebase app, such as Google AdMob and Google Ads.

Using Firebase

When developing and managing your project, you use either or both of:

In your app itself, you access Firebase services through either or both of:

Setup

The general idea with Firebase is to first create a project (generally you will do this on the Firebase Console) then in your code enable and use just the services you need. For example, in web apps, your initialization code will look something like:

import { initializeApp } from 'firebase/app';
import { getFirestore, /* and maybe other things */ } from 'firebase/firestore';
import { getAuth, /* and maybe other things */ } from 'firebase/auth';
// ... and do the same for other services you need

const app = initializeApp({ /* Your config */ });
const db = getFirestore(app);
const auth = getAuth(app);
// ... and do the same for other services you need

There is complete documentation for Firebase setup on:

And if you are using Firebase form a server, check the docs for how to get set up with the Admin SDK.

Security

Before we get to our code along, a word about security!

Firebase is part of the Google Cloud, so if you are connecting to Firebase services from a server, or the console, your authentication and authorization will be configured through Google Cloud’s IAM.

But what about that SDK for the web client?, How can a web client talk to...a database 😬? The answer is: security rules. You configure rules that will examine all requests from a client—the same kinds of rules you would put in a server that your write yourself. (These security rules apply only to client SDKs; server, console, and API access use IAM instead).

firebasesecurity.png

It’s a good idea to learn everything you can about security rules, both in terms on the general approach and the specifics for different products:

So, yup, if a web client is talking directly for Firebase, there is no way to hide your database credentials at all, and you must rely on the security rules to prevent all the bad things. You can “do a little more” beyond the security rules, for example, you can:

There are some articles with security tips floating around the web, including How to Keep Your Firebase Project Safe and Secure from everyone.

Getting Started

If you have a Google account and are logged in, you can go directly to your Firebase Console and start exploring. Maybe look at the overview page of the docs and follow links to various guides, code labs and tutorials, quick starts, and samples. The Fundamentals page is a good one.

After browsing the guides, reading about the fundamentals, doing a quick start or code lab, and maybe watching some introductory videos, you will be ready to create a Firebase project of your own from scratch.

Two Playlists

The Net Ninja has a playlist on developing web apps with Firebase, using Vanilla JS. For a playlist that uses React, but fewer Firebase features, try this one from Logicism.

Or want to learn from these notes? Let’s do a code-along!

A Code-Along

Let's build a blog web application using React with Firebase Authentication and Firestore.

Step 0: Prerequisites

Step 1: Get the Starter Code

Step 2: Create and Set Up the Project in the Firebase Console

Step 3: Authentication

Step 4: Add Firestore

Step 5: Security Rules

Step 6: Deploy

Step 7: More Security

Step 8: Make it Better