Protecting react routes with firebase auth

There are several ways to protect routes in ReactJS. One of them is listening for the change in the state of the authentication.

Step to protect the routes using firebase authentication

1. Create a list of all routes (including protected and public). By default, the routes are protected in this approach

2. Create a list of public routes that should be accessible irrespective of the authentication state

3. While listening to the changes in the authentication state, if the user is logged in and the current route path is login then redirect the user to the dashboard or home page

4. If the user is not logged in and the current route path is not included in the public routes then redirect the user to the login page

Advantages

1. You won’t have to repeatedly write the authentication condition in every route

2. The authentication state change is triggered when we call the sign-in or sign-out methods from the firebase library. But apart from that, it is also triggered when you delete the site data from the dev tool’s application storage, session storage, or cookies

3. Simply calling the sign-out method will trigger the auth state change and redirect the user to the login page

4. If the user is logged out from anywhere be it firebase console, session timeout, sign-out method, or anything else then the user will still be redirected to the login page automatically if the current path was a protected route

Congratulations! Your app is now secure!