React Authentication With JWT REST API & Redux Toolkit [2021] - #16 Build MERN Stack CRM System

welcome back guys welcome back in my creative ticket system from scratch using money stack and today we are going to work on adding integrating our back-end rest api and front-end application to make our login logout function working and we are going to load the user data to manage the state using redux toolkit before we jump into the code let me show you what we're going to do in the graph here this is the workflow that we are going to work today so so react.js user authentication route with react router doesn't work token in redux toolkit so basically we'll be um submitting login form and from the server if the login is valid we will receive the ss and refresh json web tokens if the login detail is not valid we will receive the invalid message which will be shown in the login form and once we receive the access and refresh json token we will store them in the destiny storage and local storage i'll explain you while recording why we are storing separately in different location of the browser so once they are stored in the browser memory then we will invoke the get user action and we will check if the token we have stored in our local session um session storage is valid or not if we have a valid token we will receive the user data and we will update the state with the user data and if there is some problem or the token is invalid so we will simply forward back to the login form now and then um once that done we will redirect to the dashboard page hey if you're here for the first time my name is premade side from dented code i create tutorial related to fully stack web development and if you are interested in full stack web development please subscribe the channel and turn all the notifications so that you receive all of my with that saying let's jump into the computer and do some coding after recording of one hour i realized that i have forgotten to trigger the main screen so i have to do all over again right let's do it again i have opened the content app i'm gonna run that one now now the application is running the app is running here now so let me okay open the inspect so the first thing we need to do is go to the application here and if you are not sure where the application is coming from we can always check that where the component is loading from so since this is the root url of the application you can go to the application file which is the entry file and if you see path that's last that's the root of the url and it's loading entry page let's open the entry page like you would need app so this is where everything happening all of our we are loading our login form there and we passing props and then we handling all the state locally in this page but since we are going to use redox um we don't need to handle everything from the parent component because this is the parent component but actually login component is the login form here this one so we are going to do all the tasks here so um before doing that since we are going to manage with the state let's create the login reducer and we have to create few actions for that so let's do that since we are following the docs pattern it's for the react toolkit suggestion we will open the um slicer we have to create the reducer slicer um and it's better to put together with the feature so in our case it's login so i'm going to put inside the login component create a new file called loginslice.js so if you are following along you might have seen in the previous tutorial we did in the ticket page ticketly space we had that ticket slice we did all these tasks so we are going to do exactly same so i'm just going to type anyway so that if you are following along it would be good for you so if possible i recommend you to do typing with me so that you build up your muscle memory okay the first thing we need to import is the create slicer from redox toolkit red slice and let's create a variable for this function so say let's define const it's going to be login slice equals two we have to create the reducer with the create slice it's a function that takes huge object so there are a lot of property you can provide but three of them are important um one of them is name so we're going to call it plugin and we need to provide the initial state so maybe let's define the initial step above so it's an object so we will have each loading um is loading property or variable so that's going to be false at the beginning and we will have is auth that's going to be false as well and also we will have error in case if there is any error while logging so that we can use it just also display that error in our component so that's the um initial step we providing here and actually we need to create the reducers so reducers takes the list of objects so inside there we provide the function so the function let's say when we are logging there are three cases that likely to happen either the plugin is pending or logging a success or login is fail let's create the function plugin let's say pending and it takes state and action so we'll talk about that more later and here now we can update the value which value we need to update so in our case when the the state of the application is is login is pending so let's say is loading is true so since we are not using state and the action okay sorry state we have to say state dot is loading equals to true so we are not using action here so we can just remove the action okay now let's copy that and say loading the login pending so success now we don't need this comma here sorry about that and then when the logging um is success that means is loading is not true anymore so do false and we will have probably is already true because we are already logged in right and in case if there was an error in previous attempt now we can reset the value of error to empty again empty string so no comma here guys this is the just the assignment okay so we have to basically access the property of state with the state dot like how you access the a property of the object i don't need that okay that's done and let's make a copy of this one oh when login is fail so in our case we will have a data coming the actually error so basically the x the the second parameter is action so the action will have a payload inside so we can destructor here and we can now pass that payload to our error and we don't need this um line of the code and of course the is loading is pending is false so that's all we need to do so when we use create slice book from the redux toolkit those reducer will be converted as a accent creator so we can um basically export them so now the login slice will have two things the basically the clear slice will spit out two things that we can destructure that would be reducer not the reducer singular and the actions that's from the variable we have created for this function and now we can um expert default the reducer and we have few actions inside the action the all this reducer will be turned into the action creator which we can export them as well so we do inline export and we can destructure them which is coming from accents now so the accents are logging pending the three of them login success and the login fail and save the file that's all you need to do in this file so now we can import these action creators to trigger our um state so if you see in our state we only have a ticket we haven't got this uh login login state in our uh global state so in order for us to add this reducer in our state we need to go to our store file and here we need to import our reducer we just created so reducer slicer we just created so that's inside the component we have to go to component slash login slash plugin slice plugin component login slash slice let's call it as a login slice and now if you see here the name of the ticket slice here reduce the ticket reducer runs better um so if you see ticket reducer we can store as a ticket we can do same thing down here we need to provide this login reducer right now here just inside the reducers so if you just provide like this only we will have a old login reducer here but we don't want that we just want to be specific and the start name so let's do the login and if we save that now we should be able to see our login i state as well here with the loading is authentic either object okay so that's done with the store we can close this file and now let's go to our uh component now so the first thing we need to do is we need to import on handle sense on summit sends which we were previously passing through the parent component here in entry so we don't need to use our like a parent to pass the props and then using the tile component so what i'm gonna do let's put this one all the way up here because we need to take everything from here including handle on change and handle on summit all this code now related directly related to login component so now we can uh use inside this component i'm just going to paste it we might have few errors that we can fix now okay so since we already get um having on handle chains and the on handle on summit function we don't need to receive them as a props and also email and pass is defined as a local listed here using using state so make sure we are you importing ug state from react and okay that's done okay sorry guys this course should not be inside the return it should be um as soon as the function is defined before the return so return must return the component only not any other function but this has to be that close has to be here somewhere okay now let's see everything is okay okay pass is complaining here it's supposed to be password not pass because this value is coming from our local state here let's save this file this file should be okay but now in entry since we remove fuel code a few line of code here now we need to remove other code as well because now we don't need email here we don't need to do call api from here we're going to do from the login component let's remove that and here to the login form we don't have to pass this as a props anymore because we are handling within the component and with the reset password we are not working on that now so i'm just going to comment this out and save the file it should be still working without any problem there you go yeah but it doesn't do anything yet other than splitting the console.log the email and password that we just typed okay okay props is complaining let's clear that too so in our props type we don't need to check this tool now we can let's simply remove that and save the file we still keep this one though we'll in look into that when we have to do switch on between reset password and login client that's done um so what we're going to do is now we are going to import this action creator from this action um login slice in our login component here so i'm gonna just bring here let's do import it's in the component actually it's in the same folder login slice and i'm going to paste all of them here and why we need here is that basically the best practice is we create another file here called let's say login action and we do all the excellent stuff there but i want to show you that you can do it here as well and the and next uh for the next um thing for the user profile we will do that separately so that you know both way but the better better way is the next way okay for here now uh what are we gonna do on handle summit so as soon as we handle summit we can dispatch this login pending because login pending will say listed the our uh the is loading will make it true so that's what we are going to do let's go to on handle summit as soon as everything fine before we calling to our api here i'm gonna dispatch that so to dispatch that we need to bring something called um use dispatch hook from react redox so let's bring that and to use that we have to go just below the function declaration some way and let's define cons dispatch equals to use dispatch as a function and now we can dispatch our login pending using this dispatch function here okay i'm gonna remove this code here say dispatch the login pending we don't have any parameter we just save like that and um if you see um here and here this is the action section but if i try to login see the login pending is trigger this is the actually the action trigger and our is loading is true so what we can do is is that we can get this value from our state and we manipulate in the form let's say if we have a error which is very error here if the status is loading we put the spinner here let's do that quickly so in order for us to use that we have to again use react redox and we need to use something called use selector hook we can now let's say get const i'm going to come back to this in a second so if you if we do um use selector function it will give us whole state d card login or any state we have here like that but what we can do since we don't need all state we can simply choose what we want so we can simply filter and return the take that login only so that we can only return this object and since we are only returning this object we can destructure this value and provide here the t structure value only property only so that directly we can use them down below so say is loading and we have is auth i don't think we're going to use this um property but i'm still getting it let's do error as well okay so if we have is loading let's go next to our button here next to the button with that spinner i'm going to put here i'm going to put some space and say if we have a is loading is true then let's let's load the spinner actually we need to first import that from the react um booster bootstrap library uh spinner and we're also going to need alert i'm gonna put that for now the spinner let's go back here spinner takes two property uh one is variant what color do you want that spinner to be i'm gonna put primary and the another one is animation animation i want to show in border the border animation so we have glow and border two option so the difference between his glow is like popping up the uh the spinner sorry glow is like a popping up effect and the border is like a round eye effect so i'm gonna put border and make sure we close that tag and we can do same thing in the just right on the top of the form where the email address is here what we can say is if we have an error we can um alert the error here alert variant i'm going to say danger and let's put the message here okay if we save that and just for a second let's go to our login slicer and here let's say um error is dummy error and is loading it is let's say true and if we said that this should work see the error will pop up like this any spinner will work like that so let's put them back again if that we're good to go so let's work on actually um calling the api for login so what we are up to okay this part is done so we supposed to call the um api here so let's do that i'm gonna run in tricast block yeah so if we have error now we can dispatch the error saying the login fill so that we can get the error message in our state don't have error dot message and in here actually we need to now um all the api which we haven't created yet let's um write the function anyway first so i'm going to say const uh is auth equals to await so since we are using a weight make sure we put um async on our parent on our parent function and let's say user login for example and we need to send the email and password because that's how we do in login right okay so we have not created this one yet so what i'm going to do i'm just going to console log the izot let's see what's coming i cannot remember what we have returned from the server so we better check before we manipulate that and let's say that we're gonna get error downward about that now and let's import that function which we haven't created yet uh i'm gonna just to below here so import i'm going to create a function in api folder so file in api folder let's say api now currently we have a speaker api but let's create user api so that we have all the tasks related user related related api call in this file so let's save this file and let's go to our api folder and here let's create a user api that say yes and inside we need to create that function called user login that we imported before sorry that we used in our uh component here uh yeah okay so this is going to receive the form data that's like um as object and here we are going to need to use excuse so i'm going to import the extras here so let's import that because we are going to make a call to api using axios and i'm going to return promises so let's do return new p capital promise and it has either resolve or reject it's an error function and inside here i'm going to run tricat's block because there are million reason things could go wrong when you are dealing with network so simply reject the error here we can also do console log in case um we want to debug it and see what is causing the error and error dot message has the actual message okay that part is done so let's do the actually calling parts so the way we do is let's go back to our api first the the log in user endpoint is this one and we need to pass email and password as a as an object and it's a post method let's work on that so i'm gonna just write down here first const login url is the one that we just copied from and let's use excuse so inside the try block say runs response equals to await so make sure our function is async and now let's go away at uh xco dot post method as we saw before we need to pass this login url the first parameter is the url and second parameter is the object data object as a body since our form data is already an object so we don't have to put inside the parenthesis the object data and that is all we need to do to get the response the the response has so many other information related to um network let's have a look what it comes with the console then log i'm gonna just console log the response and what i'm gonna do is i'm going to resolve the rest dot data because the rest of data actually holds the data that we are interested in so now we can export this function directly from the line okay this will make sure the user login is the same name is a login okay and it's been called here and isaac okay let's um fire up our form and then see what happens so let's i'm interested in console first don't worry about the warning message we will work on that so i'm just gonna send the wrong login information so okay appending because okay this is the thing i was talking about if you go to our api here i am console logging everything coming from the response that was configuration data header rest status code and status text so we are interested in the data only so that's what we are returning so data is saying that invalid message um email or password with status error so we need to fix i mean we need to show that message here right let's let's work on that so um if you see status as error now we can access to this property to check in our login component i'll just close the sidebar and here let's do if is auth dot now we have that data that status equals to error that means we have an error right so inside here we need to dispatch the login file with this message which is is of that message and now if we go to our redux rate here okay this is the action firing point and this is the actually state updating okay so let's write the invalid log in detail as you can see login is pending is fired up and is loading is true we seems like not going any further so if state hang on um i want to come to log actually what is how is coming that is uh yeah i definitely did wrong spelling you guys would have seen already that's why okay now if we try in our redox step tool you should see the the different action is fire at least 2d different action is fired the first one first state says that is loading is true everything else is same as initial state and another action is fired login fail now that has is loading false and the error message if i do click on the login you can see like a quick flash of the spinner did you see that and it's firing up all the action and we are getting the actual error message now let's say we have the correct login information which is this email and the greatest password let's do that login is pending that means we are okay yeah of course because in only case of error we are returning things but we are not returning any success we are not dispatching any success function here so let's return this one from here only so that we don't execute another line and let's do dispatch instead of fail now let's say login success i think that's the one here plugin success here we don't need to pass anything because we are not expecting anything in our login slicer with the login success so let's check that with the correct ml and password let's login see there is a login ending with the login pending that is like initial state but if login is success now that is earth is true that is loading is false okay now we need to do is that we need to make sure that we receive the json web tokens let's make sure that um go to our api call again here so i already have console let's check it quickly now console there you go yes we do have a we do have a x access token and the refresh token the status is success and the message there so what we can do here instead of doing console here just um after the resolving let's do this yeah let's store them in the session stories and local stories the session stories for for temporary reason a local storage for um long term reason so if you store anything on your session storage that token cannot be accessed by any other browser or tab whenever you close the browser the session will be removed as well but the local storage will persist the data even though you um close the browser i'm gonna show you in a second so let's do that so we do have a message here just to check that i'm gonna say if that does hang on res um rest.data that i want yeah i want actually all of that i'm lazy okay equals to success then we can do session storage dot we have to say set item and we need to pass the key value that's going to be ss token so jwt that's whatever you can define i'm going to say just an ss uh sorry ssjwt that's what it coming so i'm just going to put as it is and the value going to be inside the rest.data dot um sorry dot the xs jwt and that's the way you store in session histories and we store in local storage just simply call local storage dot set item is similar to the one at the above and here what you want to do it is that you want to probably define your website name first or something unique to your website in my case i'm going to say crm a rm site and the value i'm going to put the refresh token as a object object like a um key and value pair in case in the future you need to store something else uh inside that object so to do that we cannot just pass object like that straight away we have to store always string so to do that we can do json that is stringify and inside there now we can provide the object now i can say refresh json web token and pass the system wave token so that would be there so that would be like a rest.refresh jwt like this one when we save it and let me show you what happens you see those value you need to go to application and here we have a local storage and session storage let's see if there is anything we need to remove that so that you don't get any confused and here okay in local store is empty the sensor is empty this is the key we have defined here and this is the place you can see the value so let's try to log in with the invalid login credential you don't see anything here in both local local and session storage but let's say we we login with the valid email and password there you go see that we are in the session storage we are storing the ssjs and web token the token mr itself but in the local storage we are using key as a crm site and inside the value actually we um storing the json object with the e is refreshed awt and the token refresh token is the value here so that's the part we are talking about here so i wanted to show you the difference now so let's see we have a listening storage here right so let's say i copy this url and open a new window and i visit the website now go to the application again and check your personal storage there you go you don't have session stories but you do have local stories that's the one different let's close that that's done so that part is done so what we have to do is now we have to redirect to the dashboard and then invoke the user action or vice versa so what i'm gonna do is okay let's remove all this thing from console we don't need that we don't need that save that and we need to um as long as we are logged in successfully we need to redirect to our dashboard page which is this page so let's work on that so to do that um we need to call a hook from the react uh router dome okay so let's import the use history hook okay so similarly how we're using the use dispatch let's do construct use history function now we can use this define function to redirect our application to the dashboard when we have dispatch login success so simply just do history.puss here or you can provide the path where you want to go so that's gonna be password that that and let's do the testing one more time okay if i try to just log in with the um wrong credential this gives us the message and doesn't go anywhere let's do with the correct credential so it should redirect us to the dashboard page there you go we don't need that okay that's working perfect so the thing that we need to do is that as soon as we add in the dashboard page we need to make sure that we get the data for the dashboard and the we also need to get the user profile and store in the um redux store if the user profile already doesn't exist okay let's work on that before doing that um we've been coding for a while i want to just uh commit this change so that if we mess it up anything we don't have to go back all the way and do all the stuff so i'm gonna say quickly here okay okay right so um we are not pushing yet we will put all together later so the next task we need to do is um get the user updating the state where we only have now the ticket and login site let's get the user state as well so we're going to do that in our let me close everything first in our dashboard probably in the folder of the dashboard component where is component component component okay go to the page here's the dashboard i'm going to create a again remember that we need to create the um slice reducer and then we can use the dispatch to dispatch its function and this time we are going to create the better way we are going to create the user slicer reducer and user action okay so first i'm going to say user slice let's say yes and here we need to again import the create slice from the redux toolkit the redux toolkit here nice and let's create a function all um user slide spice here and we need to create the user slice with the slice again this one will take three property one being name i'm gonna say user and the second one is the initial state so let's define that in the top is always better practice to define the initial state instead of defining down here only okay so what we have here is we have user let's say um it's an object and is loading of course false and also if we have any error getting user there we put the message here okay and the third property we need for our create slice is the reducers so they are the list of the function so again we will put get user pending get user success get user fill let's do get user i'm gonna copy that ending is a function it takes state and an error function we are not receiving any x action payload so we don't need to provide that here because we are only doing state dot is loading um equals to true that's all we need and i'm gonna just put the comma here and i'm gonna copy this uh whole thing and instead of pending i'm gonna say access so in that case we will have uh instead.loading false in this stage and we will have type dot um user we will have definitely user that's we're going to get from our action here so so basically action have a payload inside so let's destructure it and use that straight away so the step.user it goes to payload and we will not have any errors so we need to make sure the error is set to empty in case there was an error in previous attempt i think yeah loading user anything that's all we need here and let's create the one for get user fail use case so we done we need payload we will have an error message here and is loading is false yeah we don't have user remove that and we have a error so just pass the error yeah like a payload here and when you save that that's probably it for the creating the reducers let's export this some reducers and action creators as i already explained that and create slice will turn this reducer into the accent creators so i'm gonna do const reducer and actions from this and list to export default reduce reducer not reduce reducer and also let's export export and the accent creator from actions okay so here we will have all of this one get user pending get user success get user fail the way i'm doing here destructoring and passing here just to show you so that you don't get confused so if you don't want to do this one you don't have to do you can access the action property and reducer property from the user slices right straight away like how you access the property in the object like this so just do whichever suits you or whichever you feel comfortable i'm just showing you the both way okay all right that's all done with the i'm gonna copy this one with the slice what you call user slicer now let's copy save that and let's now create the user action here user accent.js that's from the run and add const import from the same directory with the user slice okay and okay i'm gonna save this file one thing we need to do before we start working on this one see if in our state we don't have user yet so we need to load this reducer into our root reducer in our store sorry so let's import that which is insideway in the page i think yeah it's less pages less um dashboard here and the user slice let's call it user reducer and let's start in our um redux store as a user so that we can see here as a user do so okay just i realized that the spelling is wrong maybe let's fix it since we know that make sure the file path is correct let me do it again it's not happy dashboard as user slice save that okay now fine okay that's done now it will so i now state it's still compiling let me restart the application okay we have an error here saying that the dashboard.paste cannot be found in in our crm src folder after js using let's go to our app.js and now we need to update this one to the correct file path which we just changed the name and now everything should work i don't think anywhere else we have used that file path okay yeah let me console that and see okay yeah that's pretty much um working all fine so let's go back to our redox now you should see in our state the user as well with the user is loading an error so we have created that file user slicer and import that in our store and put as a user object in our store so we can close the store we go to uh we don't need app as well so we we need is user slice user action and the the which one go to the login base maybe first login is the login component okay login component in here when we in here when we dispatch login success let's dispatch one of the action um that gets the user from the user action so let's create the action here so it turns um it user profile we are not receiving anything but this is going to be the high order component so it's a high order component that first parameter takes the parameter if there is any if does not have the second function uh takes the dispatch as a parameter and then this is the arrow function so the high order function is the function that takes the function and also returns the function as well and i'm gonna run this one in dry cats so again if we have any issue we dispatch the error here with the get user fail error dot message and here we're going to call the api and before calling the api we're going to dispatch the get user pending um we don't need to pass anything and after calling api if everything is fine we will call the get status let me just save that and call this function inside our login component here it's inside the page pages slash dashboard slash the user action here we have get user profile now we can use this best like how we dispatching other function here after this dispatch login is successful we can also dispatch the sorry the get user profile like so what happens when we um dispatch get user profile it will invoke the function in action i think we have an export that let's go and export that first okay yeah we will this will create this phone call the function and whatever we pass inside the first parameter here um whatever we pass here this parameter will be uh coming in this parenthesis and the dispatch itself will come as a the dispatch itself come as a either function here not component guys high order function and now using that dispatch we can dispatch all the action creators and in our case we already done this too let me show you and then let me show you how it works here so if you see in our um action fighting zone and the state yesterday wouldn't change anything but just check here so we need to have a correct login information in order to activate that trigger that action see here we have a login pending um login users access and then we have a login user pending that means we are triggering our action this action so since this action is triggered now we can call the api to get the user information but to do that let's go to our api endpoint and see what the endpoint we need okay the on the api user backend api here so we need to call this url endpoint with get meter and we also need to pass the authorization access json web token to get the user profile okay let's do that let's go to our api user api yeah what i'm gonna do is i'm gonna um and um user pro value rl a cluster see guys we are keep repeating the same thing so maybe it's good idea we can um just gonna say for now const root url equals to until here take that out and put there and what we can do is simply uh concatenate them same thing with this and contacting up them and now we can use that so what we do is i'm going to copy this um user login hold function and rename it to that url that's user and we are not receiving any parameter we will return the promise and we need to use xu get method now and the the url is now url user profile url and we don't have any data but we have authorization header to send our using that is open the parenthesis and write headers and inside the header as object we need to write authorization and here pass the um the session token so what we can do is um get the token first let's get the token that we have in our session storage remember we have done before i mean store store before before we did set item now we need to do get item and just pass the key that we have used to store it that was access jwt let me quickly show you application funny stories this key we need to provide okay let's go back redux and um okay if we don't have you know what we can do just in case let's say if the token doesn't exist then we just simply reject right we can do that say for now and um and how we receiving here first in error we are not receiving error that message so we're gonna receive error as a message string so we just send string straight away like so here okay that is done so in our case um before resolving let's do console.log the um arrest response and inside now we should be able to see our user data let's see how the user data is coming let's go back to our input um that is login form e e dot um okay when i login in our state in user is there anything not yet but whatever in our console okay yeah we have log in we have the state but what is our user data um that's not right let's divide it together any of actually detecting okay get item access token oh sorry we let let's go more further so we don't need this stuff first let's delete that and i'm gonna say error dot message here and then i want to see what happen as you can see we are stuck in get user pending we are not getting user so let's go to our action oh yeah because we have not called the bloody api function here let's face the user let's import this api calling function function in our user action and here we need to import that let me close the sidebar import that's from the api i think yeah we need to go couple folder up api slash user api that is the function name here it's user now we need to call the fetch user here i'm going to say ernst user equals to wait it's user we don't need to pass any parameter but make sure when you use await we make our parent function async and the user on us now to console.log we have a user here if we do let's save that and quickly run one more time i have the correct login here what's that okay in our state maybe we don't have anything because we haven't done okay we still got the user pending uh what about in console okay yeah that's what i wanted to know how the data is coming so inside the data what we have is okay inside the data we have user so we need to go and move further step down so the user will have another user actually list to response and and let's invoke the um yet success let's dispatch that one here we haven't dispatched that's why oh now i know so the reason we are stuck in our um redox in our um get user pending is that we have not dispatched outget user success so let's do that dispatch hit user success and here we need to pass the user object to pass the user object we have user inside the user so instead of passing this one as a user i'm going to say result and the user is inside the results so the user so we need to do this here in case if there is no user so result but actually you can do 10 over here so if result.user and consult.user.unrescoreid then dispatch this function successfully actually let me put in if statement so this was there we return from here only um just simply return it otherwise if we that's not the case then we can dispatch again get fill with the message saying that user is not found so now everything seems working to me i mean it could be working the log out we have a user data let me see in the state if we manage to populate in the user yes inside the user we have a user inside the user we got all the user information so we don't need the refresh token and the password so that we will fix later in the future but we got the users uh i think um you know what since we are here we only want the name email and id let's return that only we don't need that many stuff so where are we returning that from i'm going to our api endpoint where we are returning the user data from get user profile here instead of responding all user data i'm gonna get um okay i'm gonna do one thing uh inside there user dot unrisker id user profile dot name user profile dot um email i guess so now we need to provide the provide value as well oh i can actually don't have to do this we can destructure them yeah like earnest underscore id name and email from user profile and save that and now we should only have these three value okay it's saying something is okay we don't need to define user id here because we have user id already there okay now let's call our application and do if i hit enter let's go to user date user inside the user now we only have oh we still got okay now we need to go user pending okay it's not still working let me see in my console it did not print yb why why why okay that's not right that's wrong sorry we have the application crash in the server size right we got the id we got the name we got the email correctly yes let me save it and it's for our data let's go back here and i'm gonna refresh this console to okay now i have a correct login again i'm gonna log in and now inside the data we should have only email name and user id should be same in our redux store there you go get user success as they start with the user id username and email okay that part is done as well i'm going to just uh remove a few view console i'm going to post this one as well um okay let's make a comment let's go console here let's see what other things need to be removed from console let's remove this uh console here and they are from the patch user we don't need that that everything seems okay we don't need that okay i'm gonna save the file do one more test before we make commit to our repo so when we um go to our dashboard when we are in dashboard let's say if we log out and then our key is still there the our um listen key is still there so we need to make sure that we remove that key to do that let's go to our header editor component so here what happens when we go to the um log out when we click the layout menu we are redirected to the client login page but the key hasn't been um related so to delete that we simply call the session storage again and say remove item and pass the item that you want to delete which is ss awt and we also have a delete api endpoint in our backend server log out here so let's call this api with the delete method method and the um authorization to delete the uh to delete the access and refresh token from logout you're gonna need this one in case you are logging from the somebody else's computer and you are not going to use that computer again so you don't want to keep the login information there so to do that i'm going to go to again api user api yeah i'm going to just copy actually no i'm just gonna write export honest user log out i'm gonna need nothing here because i don't have to return anything at all so just to handle the error i'm gonna run try catch so if there is an error we're gonna do console dot log error and uh on the top here let's go on the top and define the log out url root url plus we need user and logout only yeah and let's call the xu again in our try i don't need to receive any return from here so i'm going to say await xjs.delete let's pass the url here and we need header though and authorization header we'll just pass the the sony storage dot get item that is hey you do that make sure you make this function async and then await that now this one should delete the e from the server as well like an it invalidate the key let's try to do that so there is a key now it says some storage and let's go back to dashboard so if i log out there you go now it's been deleted we are in the login page but if i try to go to dashboard from the um url endpoint we can still go to dashboard that's not right so we need to protect our router so again this tutorial getting super long guys so we will do that in the next tutorial as well so for now i'm just gonna and i'm gonna say git puss so that you have code right in the repo now now let's see what we are planning for today okay receive the profile update the state redirect to the dashboard page and face the data flow dashboard page i think guys this tutorial getting pretty longer um i think we should keep that one for next tutorial i'm gonna come up with the next tutorial fairly soon so in the next tutorial we'll do that along with other stuff so let's keep this tutorial not very long okay so everything else is achieved today thanks for watching guys hope you like the tutorial if you did then please give me a thumbs up and if you have any question write in the comment section or you can hang out with me in my disco channel the link is in the description below and in the next tutorial we are going to continue this um integration and we try to finish all the integration in the next tutorial so guys if you haven't subscribed yet please do subscribe the channel till then code every day be awesome and have fun i'll see you in the next tutorial bye for now

Channel: Dented Code

Views: 5,116

Rating: 4.8947368 out of 5

Keywords: web development, coding, programming, web development tutorial, web development tutorial for beginners, learn web development, mearn stack tutorial, react router dom, rest api tutorial for beginners, node rest api tutorials, web development 2020, web development roadmap 2020, web development roadmap 2021, reactjs, redux, redux toolkit, react redux, redux tutorial, redux thunk, reduxjs/toolkit, user authentication react

Id: JffmKktI0SM

Length: 55min 19sec (3319 seconds)

Published: Mon Dec 28 2020