How to Set Up Basic Authentication with Firebase Hosting

Tadashi Shigeoka ·  Thu, April 9, 2020

I’ll introduce how to set up Basic Authentication with Firebase Hosting.

Firebase

Background: Want to Set Up Basic Authentication with Firebase Hosting

Why Use Firebase Hosting?

The only reason for using Firebase Hosting is “because you can start using it for free.”

While Netlify also allows Basic Authentication setup, it’s not available on the free plan, so I passed on that option.

Services Used: Firebase Hosting + Cloud Functions

The services used in this article are Firebase Hosting and Cloud Functions.

Basic Authentication with Firebase Hosting + Cloud Functions

Create Firebase Project

First, add a project from the Firebase Console.

firebase init

$ firebase init

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  /Users/tadashi_shigeoka/works/codenote-net/firebase-sandbox/firebase_hosting_with_basic_auth

? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. Functions: Configure and 
deploy Cloud Functions, Hosting: Configure and deploy Firebase Hosting sites

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add, 
but for now we'll just set up a default project.

? Please select an option: Use an existing project
? Select a default Firebase project for this directory: basic-auth-sandbox (basic-auth-sandbox)
i  Using project basic-auth-sandbox (basic-auth-sandbox)

=== Functions Setup

A functions directory will be created in your project with a Node.js
package pre-configured. Functions can be deployed with firebase deploy.

? What language would you like to use to write Cloud Functions? JavaScript
? Do you want to use ESLint to catch probable bugs and enforce style? Yes
✔  Wrote functions/package.json
✔  Wrote functions/.eslintrc.json
✔  Wrote functions/index.js
✔  Wrote functions/.gitignore
? Do you want to install dependencies with npm now? Yes

> [email protected] postinstall /Users/shige/works/codenote-net/firebase-sandbox/firebase_hosting_with_basic_auth/functions/node_modules/protobufjs
> node scripts/postinstall

npm notice created a lockfile as package-lock.json. You should commit this file.
added 367 packages from 263 contributors and audited 1116 packages in 7.224s

31 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities


=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? public
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
✔  Wrote public/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...
i  Writing gitignore file to .gitignore...

✔  Firebase initialization complete!

Basic Authentication Setup

The sample code for setting up Basic Authentication with Firebase Hosting + Cloud Functions is published in the following GitHub Pull Request, so please take a look.

Firebase Hosting with Basic Auth · Pull Request #1 · codenote-net/firebase-sandbox

Also, the sample code is hosted at https://basic-auth-sandbox.web.app/, so please check it out.

The Basic Authentication “username” and “password” are youruser and yourpassword.

Solution for "Cannot GET /" Error

❌ When static is incorrectly created at the same level as public

When static is incorrectly created at the same level as public, you’ll get a Cannot GET / error message.

$ ls -l
total 32
-rw-r--r--   1 youruser  staff   320  4 9 22:46 firebase.json
drwxr-xr-x   8 youruser  staff   256  4 9 22:41 functions
drwxr-xr-x   2 youruser  staff    64  4 9 22:38 public
drwxr-xr-x   3 youruser  staff    96  4 9 22:38 static

✅ Correctly, static should be created under functions

$ ls -l functions
total 8
-rw-r--r--  1 youruser  staff  320  4 9 22:46 firebase.json
drwxr-xr-x  9 youruser  staff  288  4 9 22:54 functions
drwxr-xr-x  2 youruser  staff   64  4 9 22:38 public

$ ls -l functions
total 248
-rw-r--r--    1 youruser  staff     361  4 9 22:39 index.js
drwxr-xr-x  296 youruser  staff    9472  4 9 22:35 node_modules
-rw-r--r--    1 youruser  staff  118274  4 9 22:35 package-lock.json
-rw-r--r--    1 youruser  staff     711  4 9 22:36 package.json
drwxr-xr-x    3 youruser  staff      96  4 9 22:38 static

Deploy to Firebase Hosting

Finally, deploy to Firebase Hosting.

firebase deploy

That’s all from the Gemba where I set up Basic Authentication with Firebase Hosting.