Firebase is very powerfull backend as a service that handles most of the application server side requirements behind the scenes. Firebase can handle web app as well as mobile app, in this tutorial we will focus only on web app.

The goal of this tutorial is to give you basic idea on how to handle user authentication and how to implement some basic authentication strategies with firebase. In this tutorial, we will assume you have already setup a firebase web app. In case you haven't, feel free to refer to our Github repo Firebase Auth, it's a complete firebase auth project based on Vite that implements some of the firebase features we will talk about in this tutorial. Before we start, let's understand what authentication is really about and by extention authorization.

Authentication flow

Authentication is the process by which an app determines the identity of a user, authorization in other hand determines what ressources the user has access to based on his identity. So in order to allow correct access, an app will require a user to sign in by providing his identity. That being said having a user sign in each time when the identity is required is not practical, so instead we persist the user authentication after the first sign in by storing a piece of information about that user in the browser (user session), so for all subsequent requests, the app rely on that instead of continuing asking for login. Of course the session can't stay alive forever, it usually has some time limit for security reasons and there are some mechanisms put in place to renew the session behind the scenes. Firebase relies on the same mechanisms for any authentication flow and allow us to always get correct authentication state through its api.

Firebase provides an event listener that triggers each time user authentication state changes, this is very useful when building an app that needs to be aware of the user authentication state at any time.

onAuthStateChanged

onAuthStateChanged is an event that listens to any change in user authentication state, sign in, sign out,..., below is a simple example on how to implement it.

onAuthStateChanged takes in two parameters, the auth object, and a custom callback, the event return the current user object if any as parameter to your callback. Given the value of user object, you can update your app accordingly.

As alternative, Firebase also offers a way to directly access the current user authentication state without having to set up any callback, unlike onAuthStateChanged, this is straightforward.

Despite its simpler syntax compare to onAuthStateChanged, currentUser is not always recommended, first because currentUser is asynchrounous, so if you are planing to use the user object right after currentUser line, the object might still be empty, it gets populated only after onAuthStateChanged has been triggered. Secondly, not knowing when the user authentication state will change can be difficult to handle with currentUser. The best practice is to use the event listener onAuthStateChanged to get the correct user authentication state.

Now, let's explore some of the authentiction strategies provided by Firebase. We will cover two types in this tutorial, email and password auth, and third party based authentication with Google, and Github

Email and Password Authentication

Email and Password authentication is the most basic of Firebase authentication, as you can guess, it requires users to provide their email and password. Unlike some others authentication methods, it requires the users to sign up first.

createUserWithEmailAndPassword is the method used to signup any user. the method has three parameters, the auth object from Firebase/auth, the email and password provided by the user. Any error from user end, like missing information, password strength, redundant user, or email format is handled by Firebase and can be caught through a try and catch wrapper.

Important note, Firebase always sign in users right after they have been successfully registered. So if your code is redirecting the user or update the UI when a user is signed in, it will trigger right after the sign up.

Even thought, users are automatically signed in after signing up, they still need to sign in manually after being signed out. This is done through signInWithEmailAndPassword method, below is a quick example.

Any user error handled by firebase like missing information, mismatch information, not existing user can be caught through try and catch statement. Both createUserWithEmailAndPassword and signInWithEmailAndPassword return an object containing user information.

Google and Github authentication

Google and Github authentication are similar in a way that they both rely on third party service provider to grant access to the user personal information to your app instead of having the user directly provide those information like we did before. This type of authentication is widely used these days in web app.

Firebase provides signInWithPopup and signInWithRedirect methods to handle this type of authentication. In this tutorial we will focus on signInWithPopup. Both are quite similar, it should be easy to pick up one after learning the other.

signInWithPopup will take auth object and the specific provider for the third party service used.

For both Google and Github, Firebase provide the following class to initialize the provider :

GoogleAuth is straightforward with Firebase, it does not require to setup an Oauth app from Google console, since Firebase belongs to google this is automatically setup on your behalf. When it comes to a different provider, the Oauth app needs to be setup from the third party service before it can be used with Firebase. This is the case with Github, when enabling Github authentication on Firebase, it will ask for a client secret and client id that can only be available after setting up an Oauth app from Github.

To setup Github Oauth app do as followed :

This concludes this brief tutorial on Firebase Authentication, for more information, refer directly to Firebase authentication page.