How to build an eCommerce Website using React Redux, GraphQL, Firebase #7 – React Hooks

welcome to the seventh video in this tutorial series on building an e-commerce website using react Redux graph QL and firebase now in today's video we're going to be looking at react hooks before we get started writing any code I want to give you guys a rundown of some of the react hoaxes that we're going to be learning about and using in this tutorial and the first one is the use state react and what this allows us to do is access and use state within our functional components and we're going to be using that throughout our earth flow within our sign in our sign up and email password components and and generally throughout the application it's one of the most commonly used react hooks because it's very very useful another reactor that we're going to be looking at is the use effect react hook and this is a hook that is used in a similar way to component did mount or a component will unmount lifecycle hooks that are used in clawful components and we're going to be using that to to handle how we subscribe to our event listener which again is how we determine and handle things like when the users or status changes when they sign in or sign out of our application and we're going to be using this hook within our app j/s file another thing that I'm going to be doing in this tutorial is showing you how to write a custom react hook and this is going to again change the way that we handle restricting access to certain pages within our application to only users only access so basically only users that are currently logged into our application they can access this page access this route and we're going to be writing a custom react hook combined with a higher-order component to change the way that we currently handle restricting access to routes within our application so it's going to be a lot of refactoring a lot of cleaning up as well in this tutorial but it's gonna be really really interesting I know you guys are gonna enjoy it so so let's go ahead and make a start I will be posting a direct link in the description of this video to the official github repository for this project at the end of each of these tutorials I'm creating PRS and then pushing the code I'm writing to this repository I'm merging all of my PRS with monsters so that if at any point you want to compare the code that you're writing or maybe you just want to come to this repository you want to browse the project look at the architecture look at the files look at the code feel free to do that of course I really appreciate if you'd start the project if you want to focus to your own github repository your own account feel free to do that again this is just a great way to to work and to develop its complete versioning so that you know you can create your own branches and things like that if you're familiar with git and I really encourage you just head over to this link again will be in the description of the video check out the code I'm writing and and I think that will will definitely help you I also want to ask you guys to subscribe to my youtube channel again just this week we reached 20k subscribers that's really a milestone for me and I really hope to grow this channel more your support absolutely helps me and again your feedback your comments your likes and things like that guides me in terms of the content that I'm looking to release in the future so please head over to my youtube channel that's youtube.com forward slash simple Tut you can also find my github page by visiting github.com forward slash simple Tut but on my youtube channel I also have a playlist for this series and again I'll be posting a link in the description of this video and all the videos I release in this series will be added to this playlist and it's just a great resource for you if you're following this series video by video you know being able to easily find the next video or go back to earlier one in the series you know if you want to pause rewind rewind rewind following code along of course I also encourage you guys to visit our official website that's simple TOCOM so let's make a start the first component that I want to convert is going to be our sign-in component so let's quickly take a look at this component in the browser so currently this is our login component we have a fairly simple form with just an email and password we also have this option to sign in with Google and to resist a link here to the email password form so the first thing that we're going to do is head back over to the code editor let's go into our sign-in component and the first thing I want to look at is state so currently we are using well actually the first thing I want to do is convert this from a class to actually just being a functional component so to do that I'm just going to replace this class keyword with Const because it's going to be defined as a Const then of course we're we're saying extend extends component we're just going to say it's going to equal a functional well equal function so it's going to take props and it's going to equal function of course here we have our render method well we don't need this isn't a class so it's not gonna have a render method so we can just remove that and remove the closing bracket and then we one-by-one have to go through and refactor the different parts of this component so that it will work as a functional component and and work with hooks now this is not a class anymore so we don't need a constructor we can just delete that code entirely and I can also tell you that don't need this handle change method because we're going to use a react hook and we're also going to write it a little bit differently now the first thing that I want to do is I want to look at how we previously used state within this component now the way that we use it before was we destruction from state we passed it as the value that gets displayed within our inputs and we also had this separate handle change which when the user typed we actually fired a method that updated the state value so as you type you're just rendering out the value in the state rather than actually typing into an dumb input field but we still need to use State within our component but of course this is a functional component now so we're not going to use this kind of state so what we need to do is delete that line and we're going to use our first react hook so I'm going to delete this line where we imported component and restructure that from react and instead we're going to D structure the use state hook and this hook actually allows us to use an access state within our functional component and the way we can use that is we just declare it as a Const and we're gonna use this use State hook and the first thing that we need to do is declare the piece of state right so we need one for email and we need one for password these are the two fields we have within this component so let's do email first so I'm going to declare the state as email and then we need a function that we can use and we can call to update this state and the way we do that is we use the set key word we prefix it with set we say set the name of the piece of state so in this case it will be set email and we use camel casing now we can pass a default value in the use state hook and in this case we're going to set the default value to be an empty string and that's all you need to do you can then use and access the state via email and you can use the set email function to update the state so let's do the same thing for email and I'll type that out a lot quicker so this it's going to be use state the default value will be an empty string and then and then of course we'll declare the state as password and we'll say set password which will be the function we use to update the state that looks great now if we scroll down the page you're going to see that previously we're using this handle change prop to parse this method where we actually handled updating the state as the user types in our form field the way that this is now going to work is we're going to use this set email and set password functions to update the state manually so to do that we'll just take the event and then we're going to use this set email function and it's going to take the event target dot value and that will actually update the state as the user types in the field which eventually will then render out within the form field because we're passing the state to the input field let's do the same for our password field so again we'll take the event we'll call password which will accept the e which is event.target value and we'll save that that looks great now the next thing that I want to do here is look at our handle submit method that is used when the user actually clicks log in and they they try to log in so what we want to do here is I want to convert this as a to a constabie a function now and there's not a huge amount here we need to change I can say that we don't need this line at all because we already have access to the email and password it's within the scope of our functional component so this is already declared that's fine but here we're resetting the form right so we're actually we're resetting the form fields where we're you know they're if they're logging in successfully before they're redirected we're actually we're emptying the fields so instead of doing this what I'm going to do is I'm going to call set email and I'm gonna pass it an empty string and I'm gonna also call set password and I'm gonna pass that also an empty string but I think it would better if this was actually a function in itself so up here I'm going to say reset form and this is going to again equal a functional component and I'm just going to pass these two calls here into this function so that here all I'll have to do is call reset form and that will work the same way I can also completely remove this initial state object because we don't need that more now finally if we actually look at our form and the unsubmitted that we're currently using as you can see we're using the this keyword which we don't need anymore so all we need to do is just remove that this keyword we can save it and that's all the work involved in converting this classful component to a functional component that uses react hooks so let's head over to the browser and let's test the form make sure it's not broken so let's go to login and I'm just going to use this so of course here I'm gonna type in the email and as you can see I'm still able to type in the field which means that the use state hook is working let's also enter the password that works just as well let's click on login and as you can see it works just fine so that means that we've successfully implemented react hooks it's it's not affected our site or application at all and that's that's been successful so the next component that we want to refactor is our registration component and these are very similar components so there's not going to be much difference in how we approach it or how we write the code so I can probably write this a little bit quicker now that you guys have already kind of I've already kind of explained it once to you already but let's let's go through this process again so the first thing that we need to do is convert this from a class to a functional component so instead of this being class its Const we don't need extends component we need this to equal a function which accepts props we can also remove our constructor we know how we want to handle the on change event so we'll get rid of this handle change method completely let's just scroll down and we'll remove this render method here because we don't need that anymore awesome let's scroll up here and again we don't want to use or D structure from State at all so I'm going to remove this line here let's come back to the top and where we destructs your component we're going to remove component we're going to import use state and again we then need to declare that within our component so the first one is going to be our display name oops so okay so the way it works is like this so we'll say use state the default value will be an empty string the first piece of state is going to be display name then we'll say set display name then we want to do the same for email so we'll declare the state as email and set email again use state posit an initial string we want to do the same for password state so password and set password equals use state and we're going to pass it an initial empty string we need our confirm password and we're going to pass it the set confirm password function use state initialize with an empty string and finally we're going to have errors and set eras equals use state I'm gonna pass it an empty array and we can delete this initial state object that we previously had here okay cool now let's just collapse this handle form submit because we're gonna come back to this so let's scroll down the page and let's look at our return so in here we have our form inputs now on these components I was directly passing the on change event within my form input here you'll see that I'm actually I have a handle change event a prop that I can pass to my form component where I actually call on the unchanged event so like I was doing here in my sign-in component I passed handle change well I want to do that within my signup so what I'm actually gonna do is for these components I'm going to refactor a little bit so I'm going to remove this line with the unchanged event I'm gonna pass it the custom handle change prop and I'm going to take the event and then I'm going to pass it to set display name with the event target dot value and we can do that for each one of these form input components so I'm going to just take the event and pass it to the equivalent update function so this will be set email we're gonna pass it the event of target value now the only reason I'm converting this from handle change from unchanged is because on my form input component I declared this custom prop where I actually call this event on the unchanged where I actually call this handle change method on the on change event so in actuality this is actually completely the same as this it's just that I built this form component where I have a custom prop that will will handle this for me the reason that this was working before is because I actually allow myself to pass custom props to this input field anyway which actually does the same thing but I just have this custom prop within my form input component I wrote in an earlier video in this series and I want to use this in my component here for consistency so hopefully that makes sense but if not then hopefully you can just follow the follow what I'm doing and it will it will it will make it will make sense to you as we go so again we have this event so we'll take the event we'll call the set password function and we'll pass it eat up target value and finally we have confirmed password handle change it's gonna take the event and it's gonna be set confirmed password we're gonna pass it the event dot target value cool now again let's scroll up to the top here and you're gonna see that we need to look at this handle change method that we previously used we can remove the this keyword because it's just going to be a function now and we need to convert this method to a function so we'll just declare this as a Const again we don't need to D structure these values from any kind of state here and again because we're inside the scope of our component of our function we already have access to these these values so we don't need to worry about that what we do here is we have this set state for our errors array well we don't need to do that either well in the same way the way this will work is have set errors we'll call that function and we'll pass it our errors array now we also have this again the line where we reset our form so what I'm going to do again I'm going to have this custom reset function we're going to call this reset and we're just going to call each one of these functions here and pass it an empty string so we have set display name we have set email we have set password and we have come confirm password and we have our errors array which is going to default to an empty array so we can now call this reset function in replace of our set state and that will do the same thing let's just scroll down and take a really quick look and make sure we've not missed anything it looks good and all I'm gonna do now is I'm gonna save the file and come back over to my browser let's reload the page I'm not seeing any errors pool I'm not seeing any errors so let's try and sign up so the full name will be Joe Bloggs we'll say Joe at email com possibly be 1 2 3 4 5 6 1 @ 1 2 3 4 5 6 1 hat and let's try and register it and there you go we're not only signed up but we're also logged into the application that's great so let's now look out and there you go so let's go ahead and refactor this component and again this is a little bit simpler but the first thing we want to do is replace cloths as const this is going to be a functional component remove extends component it's going to equal function so it's going to accept props we can delete our constructor we can delete this handle change method let's scroll down we don't need a return a render method so we're gonna delete that line and also the closing curly bracket and of course if we scroll up here you're going to also see that we have we're destructuring email and errors from state let's delete that entirely we need to be structure from react they use state hook and we're going to use that to access state within our functional component the two pieces of state that we need are going to be so again use state the first one is going to be email and we're gonna use the set email function to to actually update this email state but the default value will be an empty string and then finally we needed an errors piece of state and errors away we're gonna have set errors as our update function and we're going to use state to initialize that with an empty array cool let's come down and scroll down here and you're going to see that we have our form input here and again as I previously explained we're going to use our custom handle change event here and we're going to call the event as a function and we're going to use the set email function here and pass it the event or get value now on our form when the user clicks the submit button what we want to do is call this as a function so we'll need to convert our handle submit to be a function from a method and what we want to do here is again we don't need to disrupt your email from a state because again it's inside this scope we already have access to the user's email and what we can do if we just come down here again this is a functional component so there's no this keyword we have access to Propst because we're passing it in here that works the same way and again here we're setting the errors so rather than calling this dot set state will just say set Paris and we'll pass it our error array and now we can just scroll up let's delete this initial state object that we had before and we can save the file and we're ready to test this in our web browser so let's come back over let's go to the web browser and let's go to our reset page this is our email reset email form let's enter an email of an account we have registered click on the email password button ok redirects us to login and as you can see here I'm receiving my reset email form and everything is still working as expected ok so at this point we have successfully converted over the main clawful components that we have in our applications so far that's to do with our earth flow it's our sign in sign up and email password components we've converted them over to be functional components and we've utilized react hooks so far we've only looked at the use state react hook I would argue it's probably the most useful react hook that there is so it's great that we're familiar with that already but it's time for us to look at a different component that we'll need to use a different react hook in and that is going to be our app.js file now this is the lost or one of the lost classful components we have in our application right now and all our app.js file does is it actually is where we define our routes and we're not actually using state within this class at all in actual fact we're not going to use state at all in this component but what we are doing is we have utilized some lifecycle hooks within our class and those are obviously component did mount and component will unmount and we're using those lifecycle hooks currently to subscribe to an event from firebase that with with an event listener that tells us to update the application when the user logs in or they sign out of our application and we're dispatching an action to our Redux store to actually update our store with the users information when they are logged in or not and that information again is coming from firebase and we're doing that in our component did mount and then of course when we unmount from this component we run subscribing to ensure that we don't have any memory leaks in our application and we're not using state where where again we're subscribed where we're connected to the redux tour so we're actually getting this current user object from from props which means again we don't need state in this component it's coming through from our Redux store but after I've refactored this component I then want to show you just to let you know we're also going to refactor and in I would say also cleanup how we're currently handling a restricting access to pages and we're gonna look at writing a custom react hook which is an another really useful topic for us to cover in this tutorial so that we can actually rewrite this with a custom react hook and hired a component okay so I think we're ready to start the refactor of our app.js file and the first thing that we need to do is just convert this over from being a class to being a functional component so instead of cloths we're gonna declare it as a Const and we're gonna pass it a function that's gonna take props and of course that means we don't need this render methods so I'm going to remove this line here and I'm gonna remove the closing bracket as well now I can scroll up and the first thing that I want to look at is these lifecycle hooks we're currently using and that would be of course the component did mount and component will unmount now we're using these methods effectively to subscribe using an event listener to an event that takes place from from firebase where the users or status changes within our application so when the user signs in or signs out we get the users data back from firebase and we dispatch an action to our Redux store to update the users information and store their data so that we know that they're signed in or that they're they're looked out right that's how this works and then when this component unmount we use the component we'll unmount lifecycle hook to unsubscribe from this event and that ensures that we don't have any memory leaks in our application so of course we still need the same functionality but we don't want to use these lifecycle hooks because it's not a class anymore we don't have access to these lifecycle hooks so how are we going to do that well we have another react hook that I'm going to import in replace of component we're going to D structure from react and this is called the use effect hook and this works in a very similar way to how our light component did mount works and the way it works is that it's a function we can colle we can pass it a function here and we can pass a second array which what this will do is basically accept any dependencies so for example if I had a Const here of let's say account value which was equal to zero whenever this count changed if I passed this here I could have some code here and whenever this value here of count change so this changed to 1 it would rerun this code and that's effectively how use effect works it also allows us to return something and this effectively will take care of the component will unmount lifecycle hook so whatever this component unmount it will allow us to run the code within this return function and that's basically the structure of our use effects react hook right that's basically how it works so what I want to do first of all is I want to take the code that we currently have within component did mount and I want to move it from that lifecycle hook inside of my use effect reactor and then I'm going to show you how we can refactor it I'm also going to move my code inside of the user will sorry component will unmount and I want to move that inside of as I explained this return function and then I'm going to show you slowly how to refactor this this logic now currently we have this o'the listener here which is where we basically handled our event listener I'm going to remove this entirely we don't need this line anymore because we're going to be able to declare this as a constant it's not a class we don't need to this keyword we're just gonna get going to declare this as auth listener and that also means that in our return we can remove again the this keyword and just call this as a function and the reason that this is a function is because the on earth state changed from firebase returns a function that you can call to unsubscribe from this event listener so that's just fine and in fact that's really all we need to do in order to refactor this code but I will say that we're currently destructuring this from props within our use of fact hook I don't think we need to do that I think we can do it outside of our use of our hook so I'm going to move that outside and of course also we don't need to this keyword we just have we're passing in props here so I'll remove that and we can continue to D structure the set current user action that gets dispatched now if I scroll down you're also going to see that we're destructuring the current user object right here from props I'm gonna take that line away and I'm just going to use the comma 2d structure that from props up here now this current user object is actually again coming from the Redux store it's getting this information here but what we're doing is we're using that currently to conditionally manage restricting access to our pages right currently that's how it's working in our application and that's fine but I am going to refactor that in just a moment but before we do let's come back over to the browser and let's just reload this page and just check that what we've refactored so far is still working and it hasn't broken anything in our application we can test that out by going to our login page and just signing in so I'm gonna do that and I'll enter my password click on login and as you can see I'm logged into the application my header is updated I can click on logout now and I can look out ok so at this point we've managed to refactor our app.js file and it is working but what I want to do now is I want to look at how we're handling restricting access to pages within our application currently we are destructuring the current user from our props within the app J's file itself and we're using that to conditionally render a component within the render prop of our routes but I actually want to refactor this and I want to use a custom react took that will actually handle getting the value of the current user object from the Redux store and I want to use a higher-order component to actually handle restricting access to our our actual routes and I'll explain that a little bit more as I write the code so but the first thing that I want to do is I want to create my higher-order component that I can then wrap and use within my routes so to do that within my source folder I'm gonna create a new folder and I'm just gonna call it hoc which stands for higher-order component and I want to cool this with both Jas and effectively all this is gonna be is basically a Const which is gonna be cooled as I said with auth we can actually give it a cap w so we're gonna call it with auth and all it's going to do it's going to equal props and we're then going to call a custom react hook that is going to eventually go and effectively return the current user object from the read out store and then we're going to basically call props the children - if the user is successfully signed in and they are a valid user then we want to return the the page that that otherwise would be restricted so we need to go ahead and create our custom react hook right so to do that I'm gonna have another new folder within my source directory called custom hooks and I want to have a single file that I can import my custom hooks from so I'm gonna create an index file that I'm not gonna write my custom hooks in but I want to export them from so actually for this custom hook I'm gonna have a separate file and I'm gonna call this use earth s now use is a very important keyword here because all custom hooks should be prefixed with use so in this case I'm cooling it I'm cooling the file the name of the hook but the hook is going to be called use auth so that's a very important thing for you to be aware of the first thing that we need to do is import something from react Redux and we want to import the use selector function that's gonna allow us to map state from our react we don't store so to do that we need to write a function that's similar to the one we write when we write map state to props but it's just gonna be called map state and we want to D structure from the state they use State but once we get that we're gonna call it the function we're just gonna get the current user from the user current user and then what we can do is write our custom hook so we're gonna cool this again we're going to cool it use earth and it's just going to take Propst will be a function and we're going to get that value and all we do is we say Const we use that use selector function we pass it map state and that will give us the current user which we can then return the current user and that will mean that I can access that within my with auth higher-order component so I already mentioned I don't want to import that directly from this file so I'm going to export default use auth here but within the index file here I'm going to import that so it's going to be used or from and from use auth and then I'm just going to export an object here and I'm gonna export use off and the reason I've structured this in this way is that I want a single file that I can import these these custom hooks from but I want to write the the actual hooks separately so within my higher-order component I'm going to be able to import that so we're gonna import that from again the single file which is our custom hooks and we want to import use auth and we can actually call this here we can cool use auth and we're going to pass it our props now we do need to export default here with auth like that but this is where we need to come back over and just figure out what we want to do here so we want to use a custom will we want to use that use affect react hook and if the current user is is no is not defined it means that the user is not logged in so if they're trying to access this page they need to be redirected in some way to login so first of all let's just go ahead and import that so we need to import from from react we need to import use effect and I think I'm gonna import this first because it's react right and that means we'll just use that here so we're gonna use that within our hook will say use effect here so that takes a function and the second argument is the dependencies and in this case the dependency is current user so whenever current user changes we want to rerun this code but what is the code that we want to run well it's a check so we're going to have it if here which conditionally checks if the user of the current user object is null and if it is no we want to handle that we want to run some some action we want to do something and I want a way of redirecting the user to the login page to do that I need to come back over to my higher-order component and I need to import something from react router so we want to import from aldi structure from react router dumb and we want to import with router and when we export our higher-order component we need to wrap with earth with router so now that I've done that I'm going to be I'm gonna have access to the history of within react router and remember we're passing props to our custom hook our user oath and then user oath we have access to props so what I'll do is if the user a current user is no then we're gonna access props dot history don't push and we'll redirect the user to login route and again I have access to history because of with router and we're pausing the probes to the custom hug and that's all we need to do so I can now come back over to app J s and on routes where I'm currently restricting access to and in fact we don't actually have that we don't have a route that we're restricting access to because in this case we're doing the reverse if the user is logged in right then we're redirecting them to the home page because we don't think that the user who's already got an account and are logged in needs to access registration because you know they've already signed up they don't need to sign up again but what are with authors doing is the reverse if the user is not logged in then we want them to be logged in to access this page so we need a new page to restrict Sutton to restrict access to so I'm gonna create a new page so I'm gonna create a new a new folder and I'm gonna call this the dashboard and it's gonna be very very simple for now it's just gonna have an index JS file ok we'll create styles of styles dot s CSS in here it's just going to import react from react and we want to create a functional component so Const dashboard from oops not from what am i doing it's yeah it's a functional component so the props like that will just return something for now we'll just return a h1 that says you're looked in and we'll export that so export defaults dashboard and we'll import that stylesheet even though we're not gonna write anything just yet and that's pretty much it it's pretty simple simple simple page component so within my my routes so in an app J s here we can import that new page so we'll import dashboard from the page component we just created so pages the slash dashboard and then we can create a new new route here so we'll have that route setup here we'll just for now let's let's copy our recovery route let's rename the path to dashboard and we'll conditionally render that not conditionally sorry will render the dashboard component here within our main layout so we have our we have our dashboard component and that's fine so let's try and access this page now and we should see the page because as you can see we've not restricted and yeah to the page but you know I'm gonna actually add a link in the header over here too so let's come back over to our header components so we can actually link to this page let's come over here and in our header component we have a list for when the user is logged in and they're logged out so I'm gonna copy a link here there we go link register we'll just call this our dashboard and we'll link to that as well here we'll create the link and let's actually just add this link up here to is added in both scenarios right so let's let's come over to the browser again you'll see that we have the link in our header so we can we can access this page now quite easily we're not restricting access to it right but it shouldn't be right now because we've not coded it too so let's come back over to the code and restrict access to this page and I'll show you how that works so within app j/s what we're gonna do is we're gonna import first of all our higher-order component so when import are hired a component will import that up here at the top we'll say we want to import with auth from our higher-order component with off so cool let's let's go ahead and do that we have with oath and we want to wrap our entire component here so just like that we're gonna wrap with off we can save it and let's come back over to the browser and as you can see we have an error and is due to a spelling error so let's come back over to the brow the code and head over to my custom hook so we have that here in the usual and I spelled history wrong so I got the are in the Oval with the wrong way around so let's save that again let's come to the browser and as you can see it is working so I can actually come to and from the page and I'm being redirected to login I can't access the page so now let me login and demonstrate that it actually does work so I'm gonna log in and I'm redirected so let's go to dashboard and as you can see I am now logged in I can access the page because I'm logged in and again let's log out so I'm on the page and I look out I'm redirected now to log in so you can see that using a custom react hook and using the this higher-order component i've refactored how I'm handling those those pages but I want to show you something else so currently if I log in again so I'm gonna look in and into my password and login if I come back I cannot access the login route this is to do with again if I come back over to the routes app.js file we're doing this right we're preventing the user from visiting the registration page when they are are logged in because they don't need to log in again they don't need to register again but I want to do this in a different way so I'm going to remove this current user this is conditional here and I'm just going to render I'm just going to render my my layout so I'm just gonna render registration and just gonna render the login route come over to the signup component and I want to import something from react routed um which is going to be with router and will need to wrap where we export our component so where we export signup need to rap with router that will give us access to the history and we can use that so we can say props dot history don't push call that function and we're gonna push them to the home page and we want to do the same thing on our sign-in component so where we actually are already importing link I'm gonna additionally import with router let's scroll down and again we're gonna wrap this with router and again that gives us access to the history prop so we'll we reset the form here within handle submit we're gonna call props dot history don't push and push the user again to the home page let's come back over to our header component because I really added the extra list item just to demonstrate the code so actually when the users before they've before they've logged in I'm going to remove that link to the dashboard and when they are logged in as well as logout have the dashboard link which is fine but I want to rename this to my account so I'm gonna save that that's amazing so all we need to do is test this out in the browser so let's come to the home page and let's login or let's actually sign up so let's just enter here Joe bloke's we'll say Joe Bloggs that's outlook.com and the password and confirm password and register the user and you'll see they're redirected to the home page we now have this link for my account in the header they can click that they can access the page let's log out we're redirected to login let's log in with that same user so let's go to Joe Bloggs I believe it was Outlook that was the email I used send to the same password plug-in and we're again redirected to the home page with a link to my account in the header I can move around the site I can access that page but if I come to login I can't let's also try and access that just entering it in the browser so let's go to dashboard right let's enter that you can see I'm immediately sent to to login I cannot access that page okay that brings us to the end of this video tutorial but before we check in the code let's just run our commit so get commit I'm gonna call this commit react hooks refactor check in and let's push that up and as always once I complete this tutorial I'm going to merge with master so again you can find all of this code on the official repository for this project they'll be a direct link in the description of this video in the next video tutorial we're going to be looking at user levels we're going to be looking at creating an admin area so obviously we'll need admin admin rights access but of course that we're also going to create an admins area where we can create new products that we can eventually use on the front end of our application what as always please like comment and most importantly subscribe have a great day

Channel: SimpleTut

Views: 7,998

Keywords: ecommerce, react, react redux, GraphQL, React Context API, Node, Node JS, redux, online store, stripe, stripe api, shopping card, paypal, firebase, react router, react router dom, routes, routing, Google Sign-In, Google Auth, Google Sign In Authentication, login, signin, react hooks, useState, useEffect, useSelector

Id: famf6filtnM

Length: 59min 15sec (3555 seconds)

Published: Sun May 24 2020