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, 2021, 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

Predictions

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:

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

There are three main ways to use Firebase:

  1. When developing and managing your project, you will use the Firebase Console and maybe even the Firebase CLI Tools.
  2. In your app itself, you often interface with Firebase using the SDKs. There are SDKs for JavaScript, iOS, Android, Go, Java, and other platforms. Yes, web clients, iOS clients, and Android clients can access Firebase services, including databases, directly. 😮😮😮
  3. You can even use Firebase REST APIs in your code to interface with Firebase through plain old HTTPS.

The general idea with Firebase is to create a project then enable just the services you need.

Set up with the (Web) SDK

When using Firebase from JavaScript, you could in theory (but don’t really do this) make a Vanilla JavaScript app and bring in additional products with script tags in your HTML, for example:

<body>
  <!-- Your HTML here -->

  <!-- Firebase stuff at the end -->
  <script type="module">
    // Always import this one
    import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.2.0/firebase-app.js'

    // Import just the services you need, for example, here are three of them
    import { analytics } from 'https://www.gstatic.com/firebasejs/9.2.0/firebase-analytics.js'
    import { auth } from 'https://www.gstatic.com/firebasejs/9.2.0/firebase-auth.js'
    import { firestore } from 'https://www.gstatic.com/firebasejs/9.2.0/firebase-firestore.js'

    const app = initializeApp({ /* Your config */ });

    // Now use the app object to initialize the other services...
  </script>
</body>

Instead, you really should build an app with Node. Take advantage of systems that build Node-based apps with module bundlers. Things like create-react-app set everything up for you. If you used something like this, then you will:

npm install firebase

and include in your code somewhere 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 = getFirestore(app);
// ... and do the same for other services you need

Setup on other platforms

Check the documentation for Firebase setup on iOS+ (Swift and Objective C), Android (Java and Kotlin), Unity, or Flutter.

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

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:

You might also find some articles such as 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, codelabs and tutorials, quickstarts, 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.

Not quite ready? 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