React Router Tutorial - 15 - Authentication and Protected Routes

all right for the final video in this series let's learn how to handle authentication with react router when building web applications you'll come across the need to protect some routes in the app from users who are not logged in for example in an e-commerce site the products page might be publicly accessible whereas the profile page or the order history page requires that a user be logged in the react router itself does not have a feature to protect routes but you can implement the functionality without much difficulty in this video let's see how to protect routes using react router and the context api from react first let me go over the scenario we will be implementing in our app we are going to add a new link in the navbar which should take you to the profile page but the profile page is a protected route if you are not logged in you'll be redirected to the login page you can enter a username and click the login button you will then be able to view the profile page which displays the logged in username you also have a logo button on click of which you'll be navigated back to the home page pretty simple scenario as you can see let's head back to vs code and understand how to implement this now there is quite a bit of code we have to write and understand so let's take this one small step at a time step one let's create the profile page add the link in the nav bar and configure the corresponding route in the components folder create a new file called profile. js within the file create a simple that says profile page in the nav bar add a new link to slash profile so copy the nav link paste it and change slash profile the link is also profile in app. js configure the new route so route path is equal to profile and element is equal to the profile component make sure to import the component at the top let's save the file and test to see if this works click on profile and we have the profile page step 1 is complete but we know this route should be a protected route and accessible only if the user is logged in so for step 2 we need to implement the functionality to figure out if the user is logged in or not to keep it simple we're going to maintain a user state variable and provide it to the entire component tree using react context so back in vs code in the components folder create a new file called auth.

js this file perhaps belongs in a separate utils folder but i'm going to leave this in the components folder for now within the file we're going to create an auth context so at the top import create context from react next const auth context is equal to create context the initial value is going to be null next we're going to define the auth provider component so export const auth provider this is equal to an arrow function and within this component we maintain the user state and define the functions to log in and log out begin by importing you state from react next create the state variable let's call the variable user the function set user and the initial value is null now use this setup function to define log in and log out functions so const login receives user and we're going to call set user passing in user similarly const logout doesn't receive any arguments we're going to call set user passing in null now we're going to provide these values using the auth context provider so return auth context dot provider and this is going to wrap the children props the provider component needs a value prop and this is going to be equal to an object with the same key value pairs user login and log out make sure to restructure the children props finally we're going to define a function that returns the value of auth context so export const use auth is equal to a function where we return use context passing in auth context make sure to import use context hook at the top all right now that we have the auth context provider in app. js we wrap the entire component tree with odd provider make sure to import the component at the top all right we now have access to user login and logout functions throughout our application which means we can now proceed with step 3. for step 3 let's implement a login route in the components folder create a new file called login.

js within the file create a simple component now this component needs to accept a username so import you state at the top and create a new state variable user the function is set user and the initial value is an empty string this state variable should be tied to an input element so label username is going to be an input element type is equal to text and on change we get hold of the event and called set user passing in event dot target dot value next add a login button so button the text is going to be login and on click of this button let's assign a function called handle login let's define the function so const handle login is equal to arrow function and within the function we need to call the login function from auth context for that call use auth which is to be imported from the auth file and assign the return value to a constant called auth this should in fact be outside handle login within handle login call auth. login passing in the username once we set the username we navigate the user to the home page for that we use the use navigate hook so at the top import use navigate from react router dom and within the component const navigate is equal to use navigate and then within handle login navigate to the root finally add a login button in nav bar the button should only be shown if the user is not logged in so once again get hold of the auth context so const auth is equal to use auth and make sure to input it at the top then in the jsx curly braces if not auth. user so if the user is not logged in render a link so nav link and this should be to the login route and the text is also login once we have the new link let's configure the route so make a copy of this path is going to be login and element is going to be the login component make sure to import the component at the top so step three is complete for step 4 let's display the logged in username in the profile component and also add a logout button to display the username we once again rely on authcontext so const auth is equal to use auth and make sure to import it at the top import use auth from the auth file within the jsx welcome auth dot user and now to log out let's add a button it's a button the text is going to be log out and on click let's assign a function called handle logout let's define this function const handle logout is equal to an arrow function and within the function call auth.

logout after logging out we redirect the user to the home page so again at the top import use navigate from react router dom call the hook and within the function body navigate to the root with that we have completed the login and log out feature for our application let's head to the browser and ensure it is working as expected click on login and we are at the login route enter vishwas and click the login button we are navigated to the home page click on profile and we see welcome vishwas click on logout and we are back at the home page everything is perfect except of course for the most important bit in this video which is that profile is still not protected so first step number five let's protect this profile route now protecting a route should be a reusable piece of code at the moment we just have to protect the profile page but we might have more protected pages in the future so we're going to create a reusable wrapper component that decides if the component can be rendered or if the user has to log in first in the components folder create a new file called require auth. js within the file create a component within the component get hold of the auth context so const auth is equal to use auth make sure to import it at the top now we check if the user is not logged in so if not auth. user and if this is the case we redirect the user to the login route and we do that using the navigate component from react router so at the top import navigate from react router dom and within the if block we're going to return the navigate component with a to prop is equal to slash login so back to the login route if the user is logged in however we're going to return the children prop so destructure it and return children now all we have to do is in app.

js wrap the profile component with require auth so in the element prop require auth is going to wrap the profile component make sure to import require auth at the top let's now head back to the browser refresh and we are currently not logged in click on profile and you can see we are redirected to the login route login and we are on the home page click on profile and we can now see the profile page log out and we are redirected to the home page our protected route is working as expected now although this works great there is room for improvement if we log in and click the back button we are at the login page again to fix this in login.