Firebase Authentication with React

In this article, we will learn how to implement Firebase authentication in a React app.

Firebase is an increasingly popular platform that enables rapid development of web and mobile apps. It offers a number of services such as a real-time database, cloud functions and authentication against various providers.

In the following sections, we will build a React app that has three screens:

  • A login screen (/login).

  • A signup screen (/signup).

  • A home route (/) which is only accessible when authenticated.

Prerequisites##

Step 1: Set up a Firebase project#

Let's create a new project on the Firebase Console. We will call our project react-firebase-auth

Once the project is created, we will navigate to the 'Authentication' tab to set up sign-in methods. For now, let us enable sign-ins with a username and password.

The only other thing left to do before we start building our React app, is to add it to the Firebase project. Once we add a web app to our project, Firebase gives us the app configuration, that looks somewhat like this:

We will add these configuration values into the .env file in our app.

Step 2: Create a React App#

Let's use create-react-app to generate a stock React app. We'll call our app react-firebase-auth.

Once this is done, we need to add a few dependencies using yarn add:

  • firebase for interfacing with our Firebase project.

  • react-router and react-router-dom to add routing to our app.

Step 3: Configure Firebase#

In the app's .env file, we need to add the values supplied by Firebase in Step 1 like so:

More information about how environment variables work can be found in the Create React App documentation.

In the src folder, let us create a base.js file where we will set up the Firebase SDK.


Step 4: Set up routing#

In app.js, we will wrap our app with the Router component from react-router-dom which will allow us to use routes, links and redirects.

Step 4: Implement authentication#

In order to store the authentication status and make it globally available within our app, we will use React's context API to create an AuthContext in src/Auth.js.

We will hold the currentUser in the state using the useState hook, and add an effect that will set this variable whenever the Firebase auth state changes.

We also store a pending boolean variable that will show a 'Loading' message when true.

In essence, the currentUser will be null when logged out and be a defined object when the user is logged in. We can use this to build a PrivateRoute component which allows the user to access a route only when logged in.

The PrivateRoute component takes a component prop which is rendered when the user is logged in. Otherwise, it redirects to the /login route.

We can now use this in our app.js file after wrapping our app with the AuthProvider:

Step 5: Build the screens#

Let us now implement the screens that make up our app.

We can start with the simplest one, which is the home screen. All it will have is the title 'Home' and a 'Sign out' button that logs the user out of the app. This is done by calling the signOut method from Firebase's auth module.

Let's now move on to the signup page, which is slightly more complex.

It will have the header 'Sign up', with a form that includes text inputs for email and password, and a submit button. We wrap the component with the withRouter HOC to provide access to the history object.

When the form is submitted, we will use the createUserWithEmailAndPassword method from Firebase's auth module to sign the user up.

We display an alert in case something goes wrong during this process.

If the user creation succeeds, we redirect the user to the home (/) page using the history.push API.


The login page is very similar to the sign up page, with an identical-looking form. The only difference is that we will log the user in rather than create a new user when the form is submitted.

The component also uses the currentUser value from our AuthContext, and will redirect to the / route when the user is logged in.

And there we have it - we have just implemented a React app with sign up, login and home screens that uses Firebase authentication to register and authenticate users with their email and password.


Conclusion#

We have now learned how to implement Firebase authentication with a React app.

The code used in this article is available at https://github.com/satansdeer/react-firebase-auth and a video version of this article can be found on YouTube.