Firebase Authentication and React: Protecting Your Routes.
Using Firebase and react-router to create protected routes in a react app.
One of the most common requirements in web apps is to prevent unauthorized access to certain routes. For example, you may need to allow only signed-in users to visit the /profile route in your app. This task may seem daunting to beginners.
This tutorial requires familiarity with react context and react-hooks. If you know how to setup firebase and firebase auth in a react app, its good, but if you don’t, it’s not a problem. You can follow along and do that later. But, knowledge of the two things mentioned above are kind of must.
We will create a Firebase auth provider which will allow us to consume the authentication data anywhere in the app. We create AuthContext with the following default values
createContext( {userDataPresent:false, user:null} )The idea is to update userDataPresent and user values as the authentication state changes in our app. This is done by updating the state using the useState hook. The onAuthStateChanged method provided by Firebase is used to listen for the changes in authentication state and if a change occurs, update the state accordingly (example below). Changing the state changes the context value that’s being passed down to the consumers and the consumers are able to react accordingly. Since our FirebaseAuthContext component will sit at the highest level in the component tree, any changes made to the state(and in turn, the context value) will force re-render of the rest of the components. Which means, signing out from protected routes will force a redirect. All of this can be seen happening in the example below.
One thing to note here is that, we keep the value returned by the onAuthStateChanged listener in the state after the initial mount ( the event listener returns a function to unsubscribe to the authentication events). This allows us to unsubscribe when the component is unmounted. This can be seen happening inside the useEffect hook.
The function changeState is called whenever the listener fires with new auth data.
The user variable from the context contains the actual user data. It contains null if the user is not signed in. Check this out for more info on the getting signed-in user data from Firebase.
The ProtectedRoute component is the consumer of the context we created earlier. It is basically a wrapper around the Route component provided by react-router.
The idea behind, is to return a Redirect if the user is not signed in , else, return a normal Route with an exact path. The userDataPresent is useful to show some kind of spinner (waiting for the auth state to be determined). The code for spinner can be put inside the return statement inside the else block. Now, ProtectedRoute can be used in place of the normal Route to create a protected route which reacts to the changes in the authentication state of the app.
How I use it
<Switch>
<Route exact path="/Login">
<div id="firebaseui-auth-container">Login</div>
</Route> <ProtectedRoute redirectTo="/Login" path="/Home">
<div>Home</div>
</ProtectedRoute>
<Route exact path="/">
<div>Root</div>
</Route></Switch>
It’s important not to forget about the FirebaseAuthContext. The component should wrap within itself the routes for it to work since it is the Provider.
I’m sure there are other (better) ways to handle what I wanted to. But this is simple and easy for beginners to grasp.
Let me know if it helps you :)
