How To Perform User Authentication With React Using Firebase

Easily authenticate users in your React applications by using the Firebase SDKs

What we will create today! Image by the author.

Authenticating users in your applications used to be quite challenging. It was a big security hazard and only the experts would dare to implement and maintain solutions. But nowadays, we don’t have to anymore. There are countless external Identity Providers using secure authentication protocols such as OAuth 2.0 and OpenID Connect that we can utilize without writing code ourselves — and more importantly, without storing user credentials ourselves.

Firebase, “a platform developed by Google for creating mobile and web applications,” has a tremendous amount of features and is impressive in that regard. Today, we’ll focus on user authentication with Firebase by using their Authentication SDK for JavaScript.

If you know what to do, it’s fairly simple. Let’s dive into it! I’ll explain certain concepts along the way.

Note: All the code for the demo application can be found in my GitLab repository.

Firebase Setup

First of all, we need to set up Firebase for our project. In the Firebase Console, create a new project. Give it a name that makes sense (“GerardFirebase,” in my case).

Next, under the section “Authentication” on the left side, enable a sign-in provider. As you can see, there are many of them:

Many sign-in providers are available (screenshot of Firebase Console).

In this article, we’ll focus on enabling our users to sign into our website by using their Google account. So we’ll enable the “Google” entry.

When doing so, we have to provide a name for our application that our users will see when they sign in, together with an email address that will be visible to them (indirectly, though — they have to click a link on the authentication page before it is shown).

Also, pay attention to the “Authorized domains” section: