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:

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

Group	Products
Build	Authentication • Cloud Firestore • Storage • Hosting • Cloud Functions • Machine Learning • Realtime Database • App Check
Release & Monitor	App Distribution • Crashlytics • Performance Monitoring • Test Lab
Engage	Analytics • 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:

The Firebase Console
The Firebase CLI Tools

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

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. 😮😮😮
Plain ol’ REST APIs

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).

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:

Place your firebase config in a file that is not committed to GitHub. This does not actually prevent people from finding your config, but it’s nice to do.
Arrange that Firestore will only respond to requests coming from certain places, by setting the allowed HTTP referrers. This makes development a little clunky, and referrers can be spoofed, but again, it’s something.
Use App Check.

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

Before you begin, make sure you have (1) a Google account, (2) VS Code, and (3) Node.js version 18 or above. Also, you should be pretty good with JavaScript and have previously written React applications with at least useState and useEffect.

Step 1: Get the Starter Code

I’ve provided starter code with very, very basic blog functionality using React only (no Firebase). Start by forking this repository, renaming to just “blog” perhaps (or “blog-code-along” or whatever name moves you), then cloning to your local machine.
Enter the folder for the project you cloned. I created this with create-react-app, so launch VS Code in the project folder and run npm install and npm start in the VS Code terminal, as you would for any create-react-app (CRA) application.
Try out the app (it already fired up at localhost 3000). Make sure it all works.

As this is a code-along, we’ll study the starter code in moderate detail. You should already be able to follow everything, as we’ve made React apps before, but it is good to review, review, review! And there may be some cool new stuff slipped in there: new styles, new JavaScript, etc. Note in particular how we created new folders—components and services—to keep the src folder clean. Understand the folder structure, and browse each of the files:

.
├── README.md
├── package.json
├── package-lock.json
├── public
│   ├── index.html
│   ├── favicon.ico
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── index.js
    ├── index.css
    ├── components
    │   ├── App.js
    │   ├── App.css
    │   ├── App.test.js
    │   ├── Article.js
    │   ├── ArticleEntry.js
    │   └── Nav.js
    ├── services
    │   └── articleService.js
    ├── reportWebVitals.js
    └── setupTests.js

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

Go to your Firebase console and do Create Project.
Do not add Google Analytics for this, as it is just a code-along.
Then in ”Add Firebase to your App”, select Web (It might look like </>).
On the add page, follow the instructions to:
1. Register App: Enter an app nickname, and check the set-up-hosting box
2. Add Firebase SDK:
  - Make sure the “Use npm” button is selected.
  - As instructed run the command npm install firebase on the command line in your project folder.
  - Copy the “Add Firebase SDK” code into a new file in your project, src/firebaseConfig.js
3. The next step instructs you to run npm install -g firebase-tools. You can do this now or even wait until later. It is also possible that you’ve already done it.
4. The next step is “Deploy to Firebase Hosting” but we can wait on that, so just click the button to go back to the Firebase console now.

Back in the console, let’s add two products: Authentication and Firestore. For auth, enable Google only, adding yourself as the main user. For the database, put the security settings in full-on production mode, so no one can read or write. In your code, expand src/firebaseConfig.js, as follows:

import { initializeApp } from "firebase/app"
import { getAuth } from "firebase/auth"
import { getFirestore } from "firebase/firestore"

const firebaseConfig = {
  // THE CONFIG FROM YOUR FIREBASE CONSOLE
}

export const app = initializeApp(firebaseConfig)
export const auth = getAuth(app)
export const db = getFirestore(app)

Step 3: Authentication

Let’s wire in the authentication. We want to do this in a separate service so we don’t pollute the code in App.js. Create a new file called src/services/authService.js. We’ll create two components, one for signing in and one for signing out (both are basically buttons). We’ll also create a custom hook to handle the authentication change notifications that come from Firebase. This is a complex topic, so we will talk about why we need to do things this way in class. Our auth service ]should look like this:

authService.js

import { useState, useEffect } from "react"
import { signInWithPopup, GoogleAuthProvider, signOut } from "firebase/auth"
import { auth } from "../firebaseConfig"

export function SignIn() {
  return <button onClick={() => signInWithPopup(auth, new GoogleAuthProvider())}>Sign In</button>
}

export function SignOut() {
  return (
    <div>
      Hello, {auth.currentUser.displayName} &nbsp;
      <button onClick={() => signOut(auth)}>Sign Out</button>
    </div>
  )
}

export function useAuthentication() {
  const [user, setUser] = useState(null)
  useEffect(() => {
    return auth.onAuthStateChanged((user) => {
      user ? setUser(user) : setUser(null)
    })
  }, [])
  return user
}

Now let’s get this working in our app. In src/components/App.js we want that if someone is logged in, you show the app as in the starter code, with the logged in user’s name and New Article button, but now in addition, the Sign Out component on the header bar. If no one is logged in, we show the Sign In button on the header bar. Here is what the app component should look like:

App.js

import { useEffect, useState } from "react"
import Nav from "./Nav"
import Article from "./Article"
import ArticleEntry from "./ArticleEntry"
import { SignIn, SignOut, useAuthentication } from "../services/authService"
import { fetchArticles, createArticle } from "../services/articleService"
import "./App.css"

export default function App() {
  const [articles, setArticles] = useState([])
  const [article, setArticle] = useState(null)
  const [writing, setWriting] = useState(false)
  const user = useAuthentication()

  // This is a trivial app, so just fetch all the articles only when
  // a user logs in. A real app would do pagination. Note that
  // "fetchArticles" is what gets the articles from the service and
  // then "setArticles" writes them into the React state.
  useEffect(() => {
    if (user) {
      fetchArticles().then(setArticles)
    }
  }, [user])

  // Update the "database" *then* update the internal React state. These
  // two steps are definitely necessary.
  function addArticle({ title, body }) {
    createArticle({ title, body }).then((article) => {
      setArticle(article)
      setArticles([article, ...articles])
      setWriting(false)
    })
  }

  return (
    <div className="App">
      <header>
        Blog
        {user && <button onClick={() => setWriting(true)}>New Article</button>}
        {!user ? <SignIn /> : <SignOut />}
      </header>

      {!user ? "" : <Nav articles={articles} setArticle={setArticle} />}

      {!user ? (
        ""
      ) : writing ? (
        <ArticleEntry addArticle={addArticle} />
      ) : (
        <Article article={article} />
      )}
    </div>
  )
}

Now, before moving on, try things out, and make sure you understand all the things.

Step 4: Add Firestore

Database time. In the Firebase Console, create a new Firestore database. Then, add a few documents into a new collection called articles. Each document should have fields title (of type string), body (of type string), and date (of type timestamp). Let Firebase choose the ids.

Now we just need to update the article service so that it uses the database instead of the fake data. Here’s the final result (we’ll explain in class):

articleService.js

// This service completely hides the data store from the rest of the app.
// No other part of the app knows how the data is stored. If anyone wants
// to read or write data, they have to go through this service.

import { db } from "../firebaseConfig"
import { collection, query, getDocs, addDoc, orderBy, limit, Timestamp } from "firebase/firestore"

export async function createArticle({ title, body }) {
  const data = { title, body, date: Timestamp.now() }
  const docRef = await addDoc(collection(db, "articles"), data)
  return { id: docRef.id, ...data }
}

// NOT FINISHED: This only gets the first 20 articles. In a real app,
// you implement pagination.
export async function fetchArticles() {
  const snapshot = await getDocs(
    query(collection(db, "articles"), orderBy("date", "desc"), limit(20))
  )
  return snapshot.docs.map((doc) => ({
    id: doc.id,
    ...doc.data(),
  }))
}

Step 5: Security Rules

Wait, it doesn’t work. Look at the error in the console. It says “Insufficient Permissions” so we need to go to our Firebase Firestore console, to the Rules tab. Edit your rules to be:
```
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow write: if request.auth.uid == '****************************';
      allow read: if request.auth != null;
    }
  }
}
```
substituting your Google user id for the asterisk sequence. This way only you can write to the Firestore but anyone can read as long as they are logged in. (You can find your uid on the Auth part of the console if you enabled Google sign-in and you added yourself as the user.)
Fun test: Log out and log in as a different user, and make sure you cannot write!

Step 6: Deploy

One things about Node apps is that before deploying to an actual service, they need to be bundled up. Fortunately, create-react-app pre-installs the bundler webpack and set you up with a nice script, so do this first:
```
$ npm run build
```
Now we have to get ready to deploy. We’ll be using the command line to do this. If you have not already installed the Firebase command line tools, do it now.
```
$ npm install -g firebase-tools
```
(On some machines you might have to prefix the command with sudo.)
Make sure the install went well and you have the firebase command executable from your command line:
```
$ firebase --version
11.15.0
```
Now login:
```
$ firebase login
```
so that you are authenticated for all subsequent commands (it would be sad if Google didn’t check this, right?)
Now we initialize the project for deployment. This only needs to happen once, before the first deploy:

$ firebase init

When asked to select features, just choose hosting, since auth and firestore were already selected in the console. For the other questions: Select your existing project, and choose build when asked about your project’s public directory.

Now the good stuff:
```
$ firebase deploy
```
The response to this is the public URL at which your app now lives. Try it out! Make sure you can sign in and sign out and create new articles.
Another test: If you have multiple accounts, make sure you cannot create articles from an account other than the one you set up when you set up auth.

Step 7: More Security

Remember that the firebase config values are never hidden. People can always find them, even if you don’t commit them to a public repository. In fact point your browser to: https://{YOURPROJECT}.web.app/__/firebase/init.js and see your credentials, just like the whole world can. Now does this mean people can create an app of their own and hit your firestore and mess up your database? Yes, but there’s one thing we can do.
Go to your Firebase Console, under Auth, and find the Authorized Domains section. Remove localhost.
No go back to your localhost 3000 browser tab and you will see things no longer working. But your deployed app does work. If you deploy this app anywhere except on your authorized domains, no one can log in. And since your security rules are set up so that only authenticated users can read, the only way people can read the blog is to be logged in on your deployed app. No one else can deploy (unless they take over your Google account...but you won’t let that happen, right?)

Step 8: Make it Better

Figure out what should be improved:
CLASSWORK
Let’s try out the app in class and look for things to improve. Sure CSS is one thing. But there are likely many other things that should be worked on. Let’s see what we can come up with.
Some initial ideas:
A few things come to mind:
- Delete articles
- Update articles
- Show the photo of the logged in user
- Display error messages from Firebase
(This list is not exhaustive.)
Make changes. When ready to deploy changes, you just need to do firebase deploy (since you have already logged in and initialized the project).

Firebase

What is Firebase?

Firebase Products

Authenti-cation

Cloud Firestore

Realtime Database

Cloud Storage

Cloud Functions

In-App Messaging

Cloud Messaging

Machine Learning

App Check

A/B Testing

Dynamic Links

Google Analytics

Crashlytics

Performance Monitoring

Test Lab

App Distribution

Remote Config

Firebase Hosting