React & Redux #17. Authentication: Use JWT on Client

hi and welcome in this episode we'll take JSON web token that was returned from server we save it in local storage and we included in every agent request we do then we need to store authenticated user details in Redux store so we can use it later so let's get started first let's save it in a local storage so let's open editor and let's go to actions log in and while we here let's rename it because it's not a good name so I'm going to rename let's call it our actions digest and also as we use it in our form let's go to login form and right here instead of logging let's do our factions yes ok so let's go back to action and here we have this access request so it returns promise so we can have our then with response data and after we get the response we can get token from response data token and now we free to save it in local storage set item and we call it short token like this and that's it let's have a look in the browser so here in a chrome this is the new chrome I just updated it day ago and it changed a little bit the name of the tabs so before it was resources now you can go to application and here you can see the local storage and localhost 3000 ok so now let's try tool again with valid credentials and here we go we have your token saved in local storage so next we need to include this token with each Ajax request as authorization header let's go back to editor and let's create a new file with this function so in client will create new folder utils and inside of it set authorization token yes so we're going to import access and let's expert default function set off the relation token this function will take token and if we provide some token we want to Hatter's to every request and we can do it so let's do if token and we can do it with access defaults headers common and we specify authorization header and it equals to the standard is to have bearer word plus token itself okay so if we have token if you provided some token we set default header of the relation to equal to Bearer and this token and if you pass false then we want to delete this access defaults headers common authorization and here have very stupid mistake I forgot to add function keyword here ah now it's good okay so if we provide the token we add authorization header to every request after that else we delete this authorization header so now we can use this function in two places first when we login in login action as well as user reloads the page so let's go back to our our actions into our login action let's import set off the relation token from UTS set authorization token and right here we're just going to call it with token let's save it and let's have a look in the browser so I'm going to reload the page and I go and I'm going to network tab here so now if I log in you can see that I'm making request and no header here whatsoever that if I making another request no matter what kind of request you'll see that we have authorization header excellent but again if I reload the page and try to log in again we will lose this authorization token so now we need to add this function call to index file so let's open client index and right here after we define our store let's call a set of theorization token with local storage dot token like this and we need to import set of theorization token from you Till's set authorization token so now if you reload the page and try to login we'll have our authorization token right away and of course if we go to application of our local storage and remove it and reload the page and try to log in add no authorization token here so now we have token and we included in each request but we also want to store current user info in your duck store this way we can check if user is signed in on client and have basic info about user like username appetite cetera so we need to dispatch another action that will set current user after login action but first we need to decode your token to get this info so let's go back to editor and let's go to our actions and here let's decode token and for that we're going to import short from JSON web token and here let's cancel the flog Gorge decode token and if we try it now and if you go back to our server here you can see that we have an error we cannot resolve module net and end module DNS JSON web token uses some dependencies that conflict with browser because there are no such models as net or DNS in this context so we need to cancel them out in web pack config so let's open web pack config and here at the bottom let's add another note field and inside of this node we'll get net empty and DNS empty as well and now if we save it and restart server no errors excellent and if you go back to browser let's reload the page and let's login in console we see the object ID and username excellent it works so token is decoded successfully and now this object this information I want to or in Redux store so for that we need to add another piece of store to our relaxer also let's open root reduce them and inside of it we're going to add out reducer so let's copy this then here out so let's create one in reducers out Gs so we create reduce them and initial state is going to be let's set it to initial state and let's define constant initial state here and that's going to be just a simple object with is authenticated field which is by default is false and user details which by default is an empty object like this so now we need to add action to set current user and set is authenticated to true so let's start from reduce reaction to this action so here we will have the case set current user and when we have this kind of action we want to return is authenticated to be equal not is empty action user and the user itself is going to be action user so this action will contain user object if this object is empty then we said is authenticated to false otherwise it's true and we save user object here as well so now we need to import set current to use a constant from action types and let's open types and create this constant ok good so now we need to create action itself so let's go to out actions and here let's define another action that we go and call set current user and it takes user user object and we return that's the pure redux function so we return type to be set current user and user equals user and of course we need to import set current user from types and I think that I made a mistake here yep I did so let's surround it with color braces like this okay so now we have set current user action that sets current user into our store so all that we need to do right now is just dispatch this action from here so instead of console.log it we go into dispatch set current user and we provide decoded token which is user object like this let's have a look at the browser so now if you go to redux right here you can see that both is empty so now I'm going to login and I have an error oh of course is empty I forgot let's go to our producer and also import is empty from lodash is empty and let's try it again so I'm going to login and now you can see that we have these authenticated set to true and user set to user object excellent of course if you roll the page we lose this data but actually we we need to store them so let's fix it for that we go to index and right here we'll run this code only if local storage dot token is there so if it's there we want to set it as well as we want to dispatch set current user action so we call store dispatch set current user and we have jort decode local storage dot token so now we need to import several things first of all we need to import job from JSON web token and also we need to import set current user from actions our actions like this so now if you go back to browser and reload the page you can see that set current user is dispatched and we have in our state is authenticated set to true where the user details of course if you want you can extract this code and separate functions so the index file is a little bit cleaner but we'll stop here so let's commit use Georgian client and set current user in redux store so thanks for your time and if you found this episode useful please share it with your friends and subscribe to this youtube channel or follow me on Twitter to get updates thanks for watching

Channel: Rem Zolotykh

Views: 83,132

Rating: 4.945684 out of 5

Keywords: react

Id: FyyPUIAe6kc

Length: 11min 35sec (695 seconds)

Published: Mon Aug 01 2016