Client-Side Routing with Firebase
By: Ashay Parikh
Tags: JavaScript, React, Web Development, Firebase, React Router

Client-Side Routing with Firebase

Problem

Let’s say you are trying to build a web application using React and Firebase. As of right now, you have completed the following steps:

Created a blank, single page application: npx create-react-app . Installed the Firebase npm package: npm install --save firebase Added Firebase in the index.js file of your React: firebase.initializeApp(firebaseConfig); Created a basic signup and login UI Added Firebase Authentication code

Your next step is to route the user to a protected page. However, this brings up a few scary questions:

How do I add multiple pages to my single page application?

How do I create a protected route in React?

How do I tie this to Firebase Authentication?

Solution

You first need to add React Router to your project. React Router is a tool that allows you to handle routes in a web app instead of handling them on a server.

Before:

app.get('/home', function (req, res) { res.render('home') ; })

Now:

<Route exact path=”/home” component={Home} />

To add React Router to your web app, you can install react-router-dom. I have used version 5.2.0, so there is a chance that this code may be deprecated in the future.

npm install react-router-dom

Next, add firebase, useState, useEffect, and react-router-dom to your App.js. Then, inside the function App, add a new state variable. This will be used to determine if a user has logged into the app.

Next, we can use the useEffect hook to update the state variable we created above whenever there is a change in the Firebase user.

Finally, we can add our return statement. You may see that the path is set to the subdirectory, like “/login” or “/dashboard.”

Also, notice that Loading, HomePage, Login, Signup, Admin, and Error are all React Components that need to be imported at the top of your App.js. I won’t include any code for those pages because you should already have your signup and login code in there.

It may look like we are all done, but there is still one more step. Route was imported at the top of App.js, but PublicRoute and PrivateRoute do not exist. In your application, you may have pages that only authenticated users can access, like the Dashboard page. However, you may also have pages that authenticated users cannot access, like the Signup page. After all, why would someone already logged-in need to create another account?

Add the following code to the bottom of App.js, outside of the App function.

Now, you have solved the problem of routing the user to protected pages!

Moving Forward

To expand upon this tutorial, you can do the following:

Add more Protected and Public Routes

Add additional code inside the useEffect hook

Change the Redirect for ProtectedRoute and PublicRoute

If you are running into issues, ask yourself:

Are there any signup, login, or admin components that I am missing?

Have I properly created a Firebase project?

Have I installed and imported all of the required packages?

imported all of the required packages? Am I using an old or new version of React?

Finally, here are some resources that I used to learn all React Routing with Firebase. Please check them out!