One of the most common requirements of web applications is to prevent unauthenticated access to certain pages. For example, we only allow logged-in users to access facebook.com/profile .
In this article let’s learn how to use Firebase and react-router to create proctected routes with react. To do this requires you to know a little about react context and react-hooks.
First we need to create a Firebase auth provider, after creating it, we can use it to get data after logging in anywhere in the application. createContext( {userDataPresent:false, user:null} )
The idea here is to update userDataPresent and user when the validation state changes in the application. To update the state we use a hook called useState. The onAuthStateChanged function provided by Firebase is used to listen for the authentication state change, meaning that when there is a change in authentication data, the function will be called.
Changing the state will change the value of the context that is passed on to Consumers and Consumers can be aware. Since the FirebaseAuthContext component is placed at the top level in the tree component, any change to the state will re-render the remaining components. For example, when you log out of a page that requires authentication, it will redirect.
Note here that we will store the value returned by onAuthStateChanged listener in the state after initialization. The purpose is to allow us to unsubcribe when the component is unmounted.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | import React, { createContext, useState, useEffect } from 'react'; import { auth } from './firebase'; export const AuthContext = createContext({ userPresent: false, user: null }) export default function FirebaseAuthContext(props) { let [state, changeState] = useState({ userDataPresent: false, user: null, listener: null }) useEffect(() => { if (state.listener == null) { changeState({ ...state, listener: auth.onAuthStateChanged((user) => { if (user) changeState(oldState => ({ ...oldState, userDataPresent: true, user: user })); else changeState(oldState => ({ ...oldState, userDataPresent: true, user: null })); }) }); } return () => { if (state.listener) state.listener() } }, []) return ( <AuthContext.Provider value={state}> {props.children} </AuthContext.Provider> ) } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | import React, { useContext } from 'react'; import { AuthContext } from './firebaseAuthContext'; import { Route, Redirect } from 'react-router-dom'; export default function ProtectedRoute(props) { const authValue = useContext(AuthContext) if (authValue.userDataPresent) { if (authValue.user == null) { return (<Redirect to={props.redirectTo}></Redirect>) } else { return ( <Route exact path={props.path}> {props.children} </Route>) } } return null } |
The changeState function is called whenever the listener receives new validation data. user contains the user information, null when the user is logged out.
The protectedRoute is the consumer of the context we created earlier, used to wrap the react-router’s Route component. The goal is to return the Redirect if the user is not logged in, otherwise return the Route so that the route is accessible but the route is protected. userDataPresent is used to display the spiner denoting the load. Now to use ProtectedRoute, we can do the following:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <Switch> <Route exact path="/login"> <div>Login</div> </Route> <ProtectedRoute redirectTo="/login" path="/home"> <div>Home</div> </ProtectedRoute> <Route exact path="/"> <div>Root</div> </Route> </Switch> |
Simple as that, thank you for taking the time to read the article
This source: https://medium.com/swlh/firebase-authentication-and-react-protecting-your-routes-18d6da04b4c3