Configure Firebase

For the purpose of this course, we are going to use an authentication feature provided by Firebase. This makes sense, given that you already deploy to Firebase Hosting and have the Firebase SDK installed and configured.

Firebase authentication

Firebase Authentication provides a range of authentication options, from anonymous users to email and password to integration with federated identity providers such as Google, Facebook, Twitter, and GitHub. We are going to use basic email and password authentication, but at the end of the chapter, you will learn how to enable additional providers with a few clicks.

Configuring Firebase authentication

Press Run and start with creating a new branch:

git switch -c add-user-auth

Now, first things first, let’s start by adding the necessary Firebase SDK script to the services/web/src/template.html file. Add it above the /__/firebase/init.js script.

<script src="/__/firebase/X.Y.Z/firebase-auth.js"></script>

Replace X.Y.Z with your Firebase version given in your Firebase web console.

Configure FirebaseUI

For the sake of simplicity, we use FirebaseUI. This is an easy way to get started and not have to worry about “register” vs. “sign in” and “forgot password” user flows.

To enable FirebaseUI, let’s add the following stylesheet above the %sapper.styles% line in the template.html file we already updated:

<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/4.6.1/firebase-ui-auth.css" />

Next, we need to add the FirebaseUI and Firebase JavaScript below the /__/firebase/init.js script and initialize the UI widget:

<!-- FirebaseUI -->
<script src="https://www.gstatic.com/firebasejs/ui/4.6.1/firebase-ui-auth.js">
</script>
<script src="https://www.gstatic.com/firebasejs/4.6.1/firebase.js">
  var firebaseAuthUi = new firebaseui.auth.AuthUI(firebase.auth());
</script>

Click Run to save the changes in the file.