Configure Firebase
Learn how to configure Firebase Authentication and FirebaseUI.
We'll cover the following
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.
Get hands-on with 1200+ tech skills courses.