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 (
A signup screen (
A home route (
/) which is only accessible when authenticated.
Visual Studio Code (or another code editor of your choice).
Step 1: Set up a Firebase project#
Let's create a new project on the Firebase Console. We will call our project
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#
create-react-app to generate a stock React app. We'll call our app
Once this is done, we need to add a few dependencies using
firebasefor interfacing with our Firebase project.
react-router-domto 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.
src folder, let us create a
base.js file where we will set up the Firebase SDK.
Step 4: Set up routing#
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
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.
PrivateRoute component takes a
component prop which is rendered when the user is logged in. Otherwise, it redirects to the
We can now use this in our
app.js file after wrapping our app with the
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
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
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
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.
We have now learned how to implement Firebase authentication with a React app.