React, Redux & Firebase App Tutorial #27 - Route Guarding

alright then so we can now sign into the application and we can log out of the application and we can track within the app whether a user is signed out or signed it so now there's a few things I want to do with this knowledge for a start I want to protect certain routes or certain components or pages if you like for example if a user comes to this website and they're not logged in I don't want them to be able to see this dashboard with these projects I don't want one logged in users to see that only people who are authenticated and signed into the app likewise if they try to view the details of a project and go to this URL up here I don't want them to see this page either and if they try to add a new project I don't want them to see this page and what all of these routes these three things to be protected and what I mean by protected is if they try to come to one of these routes and they're not logged in then it's going to redirect you to the login page so let's log out if we try to go to the home page where we list these or try to go to the create project page or view one of these things then instead of showing all of this content it's gonna redirect you to either the log in or the sign up page probably the login page so what we're essentially doing is using route guards that's what they're called really regarding the routes so let's have a look at how we can do that so let's start with the dashboard so open up your components and go to dashboard and open that up and remember we can access the authentication status from state dot firebase to auth that will tell us whether a user is logged in or not logged in because if we have access to the UID on that earth object then they are logged in right so let's add that to our props inside map state to props we'll say off is gonna be state dot firebase dot all right so now we can grab that up here using destructor in so we'll grab off from this top props now which we can do and then what we want to do is check evolve has a UID and if it doesn't then we're going to redirect the user to the login page if it does have a UID we'll skip that and will then return this JSX but let's do that check so if and then it's exclamation mark off dot UID so what we're saying is if this is not with the exclamation mark existed then we're gonna redirect so we'll return a redirect right here now we've not used a redirect before but they're pretty simple to use all we need to do is import it first of all up here so imports redirect and we import that from oops redirect from the react router done so now we can redirect the user to another component so let's use that redirect and then to is gonna be equal to forward slash and will redirect them to sign in okay so it's signing like so okay so let's try this out if we're not logged in then this is true then we're returning this if we are logged in then this is false and then we'll just carry on with this returned right so let's save it and see if this works and now if I go to the dashboard then I can't actually get there you won't let me it redirects us to this page before we get a chance to see the dashboard which is good that's what I want okay but we can still go to forward slash create and we could still go to forward slash project fall / whatever the idea is so let's protect those as well so first of all in the projects and create project let's do the same thing now we don't have a map state of property so let's create that so I'll say Const map state two props which is a function takes in the state and then inside the function we return that object and on that object we want to attach auth to the props and that is going to be states dot firebase dot and remember we have to pass this in to the connect higher-order component down here so let's replace null with that save it and then go up here and then what we'll do inside the render method is we'll use D structure it to get the off property from the props and this time it's equal to this dot props ok so now we've got that and the same again we just want to redirect the user if this thing doesn't exist okay so let's grab that the same check and place it underneath this and let's see if this works now because if we do have that then it will ignore this and it will just return the actual page constant so let's see if this works in a browser okay we get an error redirect is not defined and that's because we've not imported it yet so let's import redirect and that's gonna be from react router Dom okay so save that and view it in a browser now and now if we tried to go to forest left create it redirects us to sign-in let's try that one more time for slash create and we don't get there it shows us Sign In instead okay so we want to protect as well the project details so I'll tell you what I'm gonna do I'm just going to start copying and pasting these little lines first of all the redirect we need that so project details let's import the redirect then I'm going to copy this chunk right here so we're destructuring then doing the check and redirect it so let's paste that right here like so and in fact we can just place off here where we D structure it and place that above the other if check okay so that's done now we need to map that to the props so let's just say down here that off is going to be equal to states dot firebase dot or inside map state to props okay so let's see if that works now so if we try to go to project and let's just do any ID one two three doesn't matter doesn't matter what it is it's going to redirect us to the sign-in page because we're not logged in okay let's try logging in and seeing if these things work so test at the net Ningxia code at UK and then it's test one two three four login okay so even though we've not redirected anywhere we're now logged in because we can see these links will sort this redirect later we should go to the home page so anyway let's go to the home page now and now we can see it it's not redirecting us because we're now logged in new project same thing and if we go to the details of a project the same thing so that is awesome now then there's a couple more things I'd like to do if we're logged in then I deal it I don't want a user to be able to get to the signing page that makes no sense and likewise I don't want them to get to the sign up page because they're already logged in so we could always put some route guards on here that check for the opposite if they are logged in then we redirect them so let's do that okay so what we'll do is go to sign it because we want to redirect them from here if they're logged in okay so let's first of all grab this thing the redirect and paste that here then I want to grab the auth from this top props and I also want to do the little check and redirect down here so let's grab that from here copy and paste now we need to change this we want to redirect them if there is a UID property so we take away that exclamation mark there alright then so now we just need to attach the auth to the props so let's add that down there auth is UPS state dot firebase the off okay so that should work now let's try going to sign in or sign up rather or what was it sign in and now we can't get there it's not doing anything no it's not redirecting us anywhere so let's go to here and that's because it's trying to redirect a sign and we need to change this to just forward slash the dashboard so let's try that again if we try to go to sign-in then it redirects us to the dashboard try it once more okay cool so lastly it the same thing for the signup page let's go over here and up here we need to first of all import the redirect so we'll copy that and go to here and paste it in then we need to be structure here so let's go over here and copy these two lines again from the sign-in it's going to be exactly the same so let's paste that here we don't want the othera just yet okay and then finally we need to attach these down to the props so let us just make those const map state two props and that's equal to a function which takes in the state and inside the function we return an object i realize i'm going quite quick here but it's quite a long video and a half d we're just repeating the same old thing over and over and you should really have the hang of this by now so we want to attach the auth which is on the firebase a rather state dot firebase to off so then we need to connect down here like so and pass in sign up like that and then we pass in map state two props into connect and then up here we have to import connect so import connect from react - Redux like so so let's save this now see if it works let's try to log in or sign in so sign in that redirects us to the home page cool and now sign up now that redirected to the home page but if we log out then we can go to these pages alright so there we've got my friends that is route guard that's how we can use the current authentication status to redirect to user to pages when you don't want them to see other pages that's how we protect our content

Channel: The Net Ninja

Views: 33,915

Keywords: react, react tutorial, react and redux, redux, redux tutorial, firebase, firebase tutorial, react and firebase, redux and firebase, tutorial, react app, redux app, firebase app, route guarding, route guard, route guards, protect routes, auth guard, auth route guarding, auth, route, guard, guarding, redirect, auth redirect, react redirect, redux redirect

Id: xY_27UI2W5U

Length: 10min 17sec (617 seconds)

Published: Sun Oct 14 2018