User Role-Based Access Control & Permissions in React JS | MERN Stack

the react app in our mirnstack project needs user role-based access control and permissions for protected routes and features [Music] hello and welcome i'm dave today we will apply user role-based access control to routes and features in our mirnstack project's react app i'll provide links to example source code and all resources in the description below our starter code today is the completed code from lesson 10 so i've got the package json open let's just change this name to lesson 11 and save the file but after that we also need to add a dependency today so i'm going to press ctrl in the back tick to open up the terminal window and then i'm going to type npm i and then jwt dash decode so we can decode the access token that we're receiving from our backend rest api and then we're going to use that information inside of that token where we store the username and the roles that we receive for our user and now we can see we have jwtd code installed in our dependency list here in the package.json now let's move over to the user stories.md and we've got quite a few here that we haven't checked off but really we can check off a few and by the end of this lesson we'll have most of these complete so the third one add an employee login to the notes app well we've done that and after we add the extra role based access control and permissions today this will be completely in place so i'm just going to check that off now number eight require users to log in at least once per week well we have set our refresh token to expire every seven days so that pretty much completes that and provide a way to remove employee access asap if needed we do have that with the active and inactive state for each employee and once they log in they can't receive that data if they are inactive so we can check that off now that leaves several others that we can go over we're not going to check off number one today or complete that now everything else we've completed in previous lessons including the ones i just checked off but now five and six easy navigation will complete that today display current user and assigned roles will complete that today number fourteen notes can only be deleted by managers or admins we will add that permission in today for those roles anyone can create a note when the customer checks in so even though we haven't checked this off yet we really have that in place but i don't want to check it off until we verify this with the permissions and role-based access control in place then there's employees can only view and edit their assigned notes we will implement that today managers and admins can view edit and delete all notes we'll verify that as well today only managers and admins can access user settings we'll take care of that and only managers and admins can create new users we will also take care of that desktop mode is most important but should be available in mobile we will wait on that just like we did with number one so we will have those two left today for at least the final lesson in this series but let's save our user stories.md and move on let's go to the source directory in our file tree and from there we're going to open up the hooks directory and you can see we have one custom hook that is use persist let's create another new file here let's call this use auth.js i'll paste in our imports and we can quickly look at those we're bringing in use selector from react redux and then our token selector select current token from our auth slice after that we're going to bring in jwtd code from our new dependency jwt dash decode that we just added in our package json from there i'm going to type rafce with our es7 snippets it should quickly create a functional component called use auth and now that we have that let's remove the return as this will be something that starts out with a few values so let's pull in our token which is our access token with our use selector and the select current token selector that's passed into it and then we're going to set some different values here for is manager is admin and status right now false false and the status the default value will be employee after that let's go ahead and return some values and we're going to start off with a username inside of this object that we're returning and it will just be an empty string then we'll have roles and that will be an empty array after that we'll just put in the is manager is admin and status now this will be what is returned if we don't have a token but now let's check to see if we do have a token so we can say if we do have a token then let's look at what happens inside of this if statement because this is where we actually get our values from the access token so we're going to define decoded and we're going to decode the token with jwt decode from there i'm just going to destructure the username and the roles that are stored inside of that access token and if you remember from our backend rest api code we put all of that inside of a user info property inside of the token so we have decoded dot user info and that's where we can destructure the other values such as user name and roles and now we're just going to set some different values and things that might be useful that we could use anytime we pull this hook in we don't have to use all of the values we just want to make this hook very useful for any type of situation that needs to confirm if we have a manager or an admin or just what the username or roles are so we're going to set this value for is manager to check the roles to see if it includes manager because it's an array with the different values inside of it the same for is admin we're just checking for an admin and then we're going to set the status equal to whatever the highest role is so we need to check for is manager first and then we check the status to manager instead of employee that we've set above likewise after checking is manager we can check for is admin and then anyone who is an admin and a manager will have their status set to admin instead so we could have named status highest status if we wanted to be very accurate about that but whatever we're storing in status is the highest role available to that user and then we're returning the username the roles array and then the status is manager and is admin you might think you wouldn't need all of these and you could go without some of them and create other logic inside of your components but i think it's better to just handle the logic here deliver all of the different information in these different forms and then just destructure out of the hook whatever you need at that current time now let's save our new uzoth hook and let's move on to the components directory and go to the dash footer.js file we're going to import our new us hook at the very top and now let's destructure what we need to use inside of the footer so i'll say const we're going to pull in the username and the status and then we'll just set this equal to use auth and now let's scroll down to our content and you can see we have the current user and status here available so let's just put those values in here with username and then we can put status here as well so status and save this file and now let's see how that looks in our app and to test our app we need our backend code running so i also have the code from lesson 8 running in a separate instance of vs code and you can see we have our back-end connected to mongodb it's running on port 3500 for the local host and this is our rest api so now let's go back to the react app code that i have in the other instance of vs code open a terminal window here and type npm start and the app is up and running let's go ahead and go to a login so we can log in and then see our footer that we have in our welcome page so here we go with dan d's information and now we can see in the footer we have current user dandy and his status is admin let's go ahead and log out and check one more so we'll log in and check mark our manager and we'll enter his credentials and now we have current user mark and the status is manager so our footer is working as expected i'm going to close the terminal window and i'll go ahead and close up the components directory for now let's move into features and the auth directory where we have our welcome js file now at the top of the welcome js file let's once again bring in that use auth hook and now as the component gets started here let's bring in the values we need so we're going to destructure username and we also want is manager and is admin and we'll bring all of those in from our new use auth hook and the very first thing we can do is extend our welcome with the username so let's just put the username right here inside of our h1 with the welcome after that let's scroll down and remember we only want to allow managers and administrators admins to view user settings or add a new user so let's put some conditional logic around these links so i will put a curly brace at the beginning and the end but then at the very beginning we can check to see if we have an is manager status or an is admin status set to true and if we do then we can just use the double ampersand so now if we have a manager or admin if either one of these are true then this link will show for the user settings in this welcome page now we can copy this exact same logic and do the same thing for the add new user link so we'll put this right there and then we'll put the curly brace at the end and we have both links now only provided to our admins and managers on this welcome page and let's go ahead and verify that with chrome so right now i'm logged in as a manager mark and it is still showing all four links let me log out and i'll log in as an employee named joe and his only role is employee and joe can only view the tech notes or add a new tech note he does not have the links for the user settings or to add a new user if we log back out and we'll log dandy and the administrator and we'll verify here on the welcome page dan has all four links let's go back to vs code before we move on to the header i just want to point out that yes i've got this conditional logic in here twice you could put it once and then of course have a fragment and put both of these links inside but i wanted to show how to apply this to individual links and we'll see more of that as we move on to the header and apply it to buttons but you could do it either way there's always more than one way to do things and sometimes i get comments saying you could have done this but then i think if i had done that then i would have got a comment saying you could have done what i already did so either way just do it the way you want to but i'm providing it here for each link okay let's move on now back to the components directory and to the dash header this is where we're going to provide that easy navigation that is in our user stories list and i'm just going to come down here and add some more lines to our import as we bring in these different icons from font awesome because i need to bring in several more so now you can see i've got four new icons on top of the existing one that we already had and then underneath our send logout mutation i'm going to bring in our use off hook as well and now scrolling up to start out the component we're going to go ahead and destructure some information from our use off hook so i'll say const and we need is manager and we also need is admin and we'll bring those in from use auth and now i'll scroll again and underneath our use effect i'm going to put in four click handlers all for the new buttons that we're going to add and you can see each one of the buttons is going to have a different navigation destination we're bringing in that use navigate hook that we already had to call the navigate function and so we could go to add a new note add a new user to the notes list or to the users list all from the header we're going to change our is loading and our is error return statements that we have here as well but i'll come back to that right now i want to go underneath where we defined our dash class and we'll look at how that dash class is applied because we created it in a previous lesson but we really didn't look at the result of it too closely we've also got a log out button here between these two i'm going to add our four other buttons and we'll look at what they do so they follow that same pattern that i used before for the dash class and for the log out button so you can see we're defining the button initially with the keyword let and setting it to null and then we're using our reg x's that we created above in the previous lessons as well so we had the three different reg x's here and we're checking those with conditional logic to see if we want to turn the button from null into something more if we're going to use that button and it really depends on the path so here we're making sure that we are on the notes list essentially with this regex and if that's the page we're on then we'll include the new note button here we're doing the same for the users list and then we're including the new user button down here we have a user button as well but now we're making sure that we are not on the users list and we are also making sure that the path name includes dash and we're pulling in that path name from the use location hook but we're also checking to see if we are a manager or an admin so this is the user button for the users list so what we're doing really is checking to make sure we're not already on the users list because then we don't want to provide the button to go to the same page that we're on but we are making sure that we are in the protected pages with dash and then we could provide a new user button if we're a manager or an admin i said a new user button this is actually the users list button now above notice we didn't check to see if we were an admin or a manager for the new user button however we don't really need to because we have to be an admin or a manager to be on the users list in the first place and the only place the new user button will appear is if we are on that users list page and then scrolling down we have a notes button as well and this notes button is checking to make sure we're not on the notes list page and that once again we are in the protected pages that start with dash and you can also see each one of these buttons has the class name icon dash button this applies back to the css that i've created they all have title attributes as well and the on click applies to each of the four handlers that i supplied above these buttons in the code that we recently put in also they all have their own unique icon that we're bringing in from font awesome okay under this underneath the logout button as well but let's put it maybe above the content that we define i want to add an error class like we have previously had in components before where we're checking to see if we have an error and remember this would only be for the log out because we have that send logout mutation and it does have an is error status so if we have logged out and we have an error then we're going to apply the error message class otherwise off screen so this means we're going to present the error in a different way than we had above so i'm actually going to put the error just on top of the header otherwise the way we currently have it it would display inside the header and that would look kind of weird because the header is constrained to a small area at the very top of the page if we put the error above the header it will span the page just on top of the header so let's do that we're going to need a fragment to do that because then we'll have two different elements underneath as children so then after the header will close out this fragment as well and we can save and now we have our error and i could even put a space to set them apart but now we have our error that has the error class we defined so it's typically off screen unless we have an error and then the error message class applies and it will display that message across the top of the page now notice inside of our content here we had add more buttons later and we have our logout button but i'm actually going to define all of the button content above and then we'll put that inside of the content so i'll paste this in and we can take a look and now you can see we're also going to change what we do for the is loading that we previously had above but i'm defining button content we're checking that is loading status again that only applies if we call that send logout mutation and if that's what happens then we have button content equals logging out otherwise the button content is going to equal all of the buttons that we've created if they exist if they're null they won't show up and so either way we're going to put button content in our content below so it could display logging out if we have is loading otherwise it will display the button icons that are appropriate for each page that we're on so now we can scroll down here we can get rid of this note altogether and instead of log out button right here we can just say button content and save now we need to go up and remove the is loading and is error that we previously had in our page right here so we'll remove both of those and we should be good let's check it all out in chrome now i'll pull chrome up oh and we have a blank page we may have an error let's drag this over so i can open up dev tools as well and see what's going on yep we'll scroll up to the top to see where the errors start okay cannot read properties of undefined reading data at the dash header and 130 i think this has to do with us reading our error if we have one so let's go back look at the dash header on line 130 so scrolling down here and there we are yep where the error is displayed i didn't use optional chaining here and we're not checking the is error status first so if we don't have an error that data property doesn't exist we need optional chaining there to make this work and we can save while i'm doing that i'm going to go ahead and highlight the source directory and then i'm going to right click and choose find in folder search for error dot data to see if i did this anywhere else that will have any possible consequence that i hadn't caught i do see it in a couple of places let's look at those quickly in the persist login component i've got error.data and then optional chaining for the message just like we saw in the other file but i am checking the is error property here or i said property value here first so this would only happen if we do have an error which would make this okay but we can be doubly safe just by adding that optional chaining there to the persist login component now let's check out in the api slice where it says it has it but this is where we're setting the value so this is what we need we don't want optional chaining here so this one is fine let's go ahead and close that and close the persistent login component as well go back to the file tree over here and i think we're now ready to check everything out inside of chrome so let's look yep and joe is logged in now and he's got access to the tech notes and add a new tech note but does not have access to those other links for the user so all is like we expect but we're also checking the header now and notice he has an icon to go to the notes list or he can log out because that's all he really has access to let's go to the notes list and he has the notes and now there's an icon for a new note and we click that and we go to the new note now notice the icon changed back to the notes list so this is all working as expected let's log joe out and let's log mark in who will have access to the users as well because mark's a manager now logging him in and we can see at the top we have an icon for the notes list or for the user settings so let's go to user settings there they are now that we're on the user settings page we can create a new user with this icon or go back to the notes list so there we go when we're on the create a new user screen we can now go to the users list with the user settings icon or the notes list so let's go back to the users list let's go to the notes list and now we've got a new note icon or the users list let's go ahead and create a new note we're on the new note page now we can go back to the notes list or the users list let's edit a note now we could go to the notes list or the users list again everything seems to be working like we expect it to for mark as well and of course here on the welcome screen he has access to all of the links too let's log mark out and we'll log back in as joe so here's joe and he is an employee only so he should only have access to the notes and the add new tech note now let's view the tech notes and he can see everyone's notes like he's an admin or a manager so we need to change that as well so let's go back to the code let's close the components directory let's look in features look inside of notes and we'll choose the notes list js now at the top of notes list js we once again need to bring in our use auth hook and as the component gets started let's destructure what we need which is the username is manager and is admin and we'll pull all of those from our use off hook now i'll add an extra line there and let's scroll down to our is success area where we're destructuring the ids from notes now remember we're using our entity adapter from redux and rtk query and so we have an array of ids but we also have entities so what we want to get here is not just the ids but also the entities so we're destructuring both of those from the notes that we get from our hook above the use get notes query we renamed the data notes so now that we have ids and entities we can change this just a little bit and we will only view joe's notes because we can filter these so i'm going to paste this in and we'll go over it i'm going to create a variable called filtered ids then we're going to check if we have a manager or an admin the filtered ids are essentially going to be the same as the actual ids array but we're just going to create a new array right here that holds those so we spread in the ids array but else so if we're joe and we're not a manager or an admin then filtered ids is going to equal the ids array filtered where the note id each id passed in is going to be used on the entities so we can identify the entity and we're going to look at that username for that specific note and see if it matches joe's username and if it does it will be included in this filtered ids array so then we want to move down and change a little bit of our logic for our table content i'm going to press ctrl b to hide the file tree just so we have some more room i'm going to change this from a ternary too because i think we can switch this pattern let's go ahead and use backspace to remove that and i'll say if the ids array has length then we're going to apply the filtered ids to map instead of ids right here we can also just get rid of this null we no longer need the ternary because we're using the double ampersands that we see and i think i can get rid of that parentheses as well nope that one's for map i do need that so what we're doing instead of using a ternary is just saying okay ids have length and then we can filter those uh ids and of course apply that to the entity that we did up here so this is just joe's post by the time we have filtered ids right here where i said post it's his notes actually so we save that and now when we go to view the notes with joe's login we should only see the one note that he currently has so let's go back and check that out and yep only this note is what joe has access to now he can create notes for other people but then after he creates them he won't be able to go back and view them because he only has access to the notes that are assigned to him now if we go back as mark as a manager he should be able to see all of those so let's check that out as well now let's look at the tech notes mark can still see all of the notes no matter who they're assigned to so it works either way now of course as we drag this out and we get a wider screen we can see more columns here as well and i think you see who those are assigned to there but if we open these up now like if we look at bob jones iphone title here for his note it is assigned to joe and if we go back to the list and look at foo city schools with their laptops to repair that's assigned to mark and so on so you can see mark has access to all of these okay we'll log out and let's once again log back in as joe and we'll check everything out looks good tech notes still just joe's note that's all good let's go back to visual studio code i'll pull the file tree back up with control b and that logic we just changed there with the double ampersands instead of a ternary i remember one other place we could use that as well and that was in the users list where we did something very similar so let me scroll down we once again have the id's length here we do not need to filter anything but otherwise we can use that same logic so let me get rid of the ternary put the double ampersand in and then we can get rid of the null as a possible result as well and this works just as well and i like the logic just a little bit better i'm going to bring chrome back up now and we're logged back in as joe and let me take this to the full screen and what i want to show is we've applied permissions to several components and those permissions are applied to the roles instead of any one user so you can assign as many users as you want to those roles and that's more efficient we abstract those permissions away from each individual user to roles so we have role based access control but now i want to highlight that we haven't protected the routes yet so even though joe should not have access to the users really we're just not showing him an icon to get there so if joe were to know the address and just type in users he can still view the users list here so we need to change that by protecting the routes likewise if i log out entirely now and say i were to try to go to one of these pages and i'm not logged in we won't be able to see it but it's not because of a protected route it's just because of an error that we're getting from our api the response and i see we need to add a space there so let's fix that quickly before we add the protected routes i'll pull visual studio code back up and from the last lesson you might remember we were in the app directory working with the api slice and here i'll press ctrl b again to hide the file tree so we can see this better but we had this error message and i left the extra space here but that's not the error message we were seeing we were seeing unauthorized so that space really isn't helping us out let's go ahead and remove that and handle the space somewhere else so i'll save that show the file tree again and now let's go back to our persist login component and that's what's showing this error data message that we have and then it shows please log in again so we need to change this so there's a space and i can do that by making this a template literal so i'm going to start with the back tick and then the dollar sign and the curly brace and then we want to have a curly brace after it all and i'm going to also put a a space and a hyphen and a space actually so we can separate the error message from our please log in again message and there'll be a hyphen in between and then i'll put my closing back tick and then i need a closing curly brace now we'll have that error message and please log in again so let's save that let's go back to chrome now and we can see this has changed so we have our error message space a hyphen or you could call it a dash and then a space and then our link to please log in again which takes us back to the login and now we've shown the reasons to protect our routes one we're really just getting an error we're going ahead and requesting something from the api even when a user isn't logged in and we don't want that even though it returns an error and then when joe is logged in even though he doesn't have the permission to see those icons to take him to the user settings he can still get there if he knows the address we need to change all of that by protecting our routes to protect our routes we need to create one more component inside of our auth directory so i'm going to do that and name it require auth with a capital r and a capital a dot js i'll put the imports first we're going to import use location navigate and outlet from react router we're also going to import our use off hook then i'll use rafce to get our functional component quickly but this is not going to be what we need here so i'll just replace that and here's the content we need so here we're getting the location from our use location hook and we're only bringing in the roles array from use auth now that we have that let's define the content so the content is going to equal this ternary statement and i'm using the roles array and then the sum method which means if this is true at least once this will return true so if we find one of the roles that's all we really need and we also need to pass in the allowed roles as we see here inside of our sum method here so let's pass in those allowed roles and as you can expect this allowed roles is an array that is being passed in so now we're calling includes on that and we're checking each role there so essentially if allowed roles includes one of the roles that the user has that we're getting from use auth then we'll have true and we'll just return the outlet which as you might remember is all of the children whatever we're going to wrap this require auth component around so it is a wrapper to protect whatever we have inside of it whatever routes and make sure they're only sent for these allowed roles otherwise we're going to use navigate and send whoever is trying to access a route that they're not allowed to access back to the login page and what this does here we have the state so we we get the location from used location and we're passing that in here as the from for our state this is a react router thing and then we say replace so we're saying replace this what we don't want is to have this require auth component in the history so say joe tries to access the user settings and then he would use the back button if we didn't do this he would just go back to the require auth and it would send him back to the login again so his back button essentially wouldn't work this will ensure it does so if he's on the say the tech notes list then he tries to access the user settings by typing in the address it'll send him to the login but joe thinks hey i'm already logged in i'm just going to hit the back button he will be able to do that so he could back up and be back at the notes list or he could log in again and that wouldn't hurt anything either so that's our require auth component and we're going to use it as a wrapper more than once inside of our app.js let's now head over to our app.js we can close the features directory in the file tree we haven't looked at the app.js in a little while since we brought in the persist login component in the last lesson at least but now we've got a couple of things to add here for imports one would be the require auth component that we just created but also we need the roles if you remember we created a roles object in the config directory before and we're going to pull those in let's look at that real quick just so we can remember what we have there we have a roles object and it's got keys and values that actually match so we have employee employee manager manager admin admin if you went through my node.js course you've seen this also where the employee is assigned a number the manager's assigned a number this could be different at different companies this is just what we're doing now and you'll see how we can still use dot notation to refer to these when it's constructed as an object and i think that's ideal when we bring this into app.js so we're also importing that roles object and now i'm just going to add a comment here for the public routes so everything is wrapped inside of our original layout that we've talked about in the past and these first two routes are our public routes the public can access the home page of course that's the public page and then they can also access the login page because we have a link from there to the employee login it wouldn't be necessary if all the employees bookmarked it for instance and maybe you wouldn't want that on your homepage but we've done it for this project after that let's go ahead and add the protected routes and i'm going to just mark those as well that's going to be everything after these so protected routes start here with the persist login that we currently have and then they're also wrapped in our pre-fetch component and then we have a separate dash layout that has that header and footer and then all the internal routes for that as well so let's go ahead and mark the end of these as well so i could mark the end of the protected routes we don't really need to do that for the public since there's only those two but the end of the protected routes is going to be down here at the very bottom so i'll put that right there and now let's scroll back up and let's protect all of our routes i'm just going to click here on line 27 and then use shift alt and the down arrow because we want this to be our require auth component at least our first one that we're going to add we want it after the persist login because it's going to need that login data to get that from the use off hook however we want it before the prefetch component so if someone's not authorized we're not going to go ahead and prefetch that data there's no reason for that so let's go ahead and add require auth right here and now require auth needs to pass the allowed roles in and the allowed roles is going to be an array so we're going to create a new array right here by putting in the brackets and now we can put in each role we want to allow to access the protected routes now this is for all of the protected routes even the welcome so really all roles should be allowed to view this at least if they have a role likewise the public should not be able to so we could put in each individual role like we could say roles dot and then you can see we get dot notation we could choose admin employee manager so we could have roles dot admin comma and so on which is what we will do for another route coming up but since it takes all of them we can also say dot dot dot we're just spreading in and then say object dot values and then we'll pass in the roles and this will just spread in all of the roles inside of that object now i'm going to press ctrl b just to make sure that we close this out i couldn't see the end of this yes and that looks fine so we need to go ahead and add one more closing route element here as well so i'll just click on line 47 and bring that down now when i save we'll get the proper indentation and now everything should be protected but it's allowed to all roles now let's go ahead and use require auth once again for a nested route and we need to do that for our users routes so i'm just going to copy all of this and then we'll change the roles and i just want to wrap it around the users routes so i'll bring this down here paste it here and i need one more closing route there and now let's just change the routes or the actual roles i mean that can access the users routes so here we'll say roles dot and a manager can access the users and then roles dot and an admin can access the user so we're passing an array with only those two values and i see a little red to indicate an error over here from vs code and that's because it instantly put a closing route tag there as well but we have that down below so allow save and we've got the proper indentation again and now let's go back to chrome and check everything out so first we'll log in as joe whoops i had my caps lock on there and did it the opposite of what i needed so i need capital j then oe okay here's joe's password we are logged in he only has access to the notes again and we see all the proper links but what about if we try to just go to the users settings once again so i'm going to type in slash users at the end here and he gets kicked back out to the login so that's fine let's see if the back button works as expected yep it took him right back to the dash so that is what we want let's go ahead and try to do the same thing now for mark who should still be able to access all of the routes so here's mark let's go to user settings he can still see the user settings and he can edit a user he could probably even create a new user we can do it with that icon now notice the dash class if you remember us setting that up in the header as well so when we go to the forms that aren't as wide as the lists when we take up the full screen it brings these icons over even with the form so that's what that class was about it's just changing the width a little bit so now if we go back to the user list they're back over here to the right taking up the full screen which is fine we can see this with notes too by the way let's go in and edit a note now our icons are all lined up over here with the form instead of way over here to the right so everything seems to be working just fine for mark 2 and the routes are good let's go ahead and log out now and now let's just try to access those routes and see if we get that error from the api or if we actually just get kicked to the login screen by our require auth component so we'll say dash and users now we're not logged in at all and we get unauthorized please log in again which i believe that does indicate a request is going out so i'll go back to that let's open up dev tools and let's see what we got yes we got the persist login error right here and there's an error object from the auth api slice that's all good let's check the network request as well so here we're at the network and let's try to reload this page and we hit the refresh and that's what gives us the error so that's okay too and really this is better than taking someone straight to the login page if they're trying to access something they don't have access to so now they have to do a little more work and that's just fine with me let's see what happens if we go back to the login page and uncheck trust this device now we're not logged in at all we're on home i'm going to refresh network request is good let's go ahead and try that users again so we're at dash and now users and we're not checking that stay logged in on the login page and we get kicked right back to the login and that's fine too and that's what i expected the first time i didn't think about the trust this device if it was just a public machine and no employees had logged in maybe a customer logging in on their home computer and they tried to access a route that was protected they would just get kicked to the login because they don't have access a quick final note i am back here at the user stories and i was reviewing those and notes can only be deleted by managers or admins i realized we skipped over that one so let's go ahead and finish that before this lesson is over we should go to the features and then the notes directory and now we should go to edit note js and then edit note form js and this is where we will actually work with that trash can icon and only let it appear for managers in admins so i'm going to paste in our use auth hook once again as the import and then from there we're going to destructure what we need and that is is manager and is admin and i'll set this equal to use auth and pull that from the hook i should mention as you might have already noticed the manager can access everything the admin can at this point in the app and really our user stories don't require for more than that however i'm providing each because there could be additions in the future we're just making it flexible possibly we tie this into a ticketing uh financial app or something like that something that dan our stakeholder wants to add in the future so it's still good to have that separation between managers and admins so we're just building it in now okay after we've brought in the is manager and is admin status we need to scroll down and i'm going to scroll down until we're underneath our content here for the error and everything we've created there we go between the error content and the regular content i'm going to define our delete button i'll just paste that in and we can go over it it has the same pattern you've seen before so we have let delete button and it equals null but then if we are a manager or an admin the delete button then has some content and of course it calls the on delete note clicked so let's scroll down into our code now and we can replace where we originally had that delete button which was right here so we'll just grab all of that backspace and i'll put our delete button right there and save now this should not be available to joe but it should be available to mark and our stakeholder dan so let's check that out now inside of chrome i'll pull chrome up and let's we're logged in as joe so let's view the tech notes pulled up joe's only tech note right now and if we go to the edit form he has a save button but not a delete button and that's what we wanted to see so now let's log out and check the same for mark sign back in go to tech notes let's go ahead and look at any one of these notes let's look at joe's again so mark can delete joe's tech note if he needs to so that's what we needed there for that last user story so we have made a lot of progress today and i think we're through most of our user stories we can check off more of those in the next lesson and also in the next lesson we'll be doing a little bit of code review and refactor and then we'll deploy everything the back end and the front end as we wrap up our mirn stack project series remember to keep striving for progress over perfection and a little progress every day will go a very long way please give this video a like if it's helped you and thank you for watching and subscribing you're helping my channel grow have a great day and let's write more code together very soon

Channel: Dave Gray

Views: 40,726

Keywords: user role based access control and permissions in react, role-based access control, user roles, user permissions, user permissions in react, permissions, role-based access control in react, react permissions, react user roles, react user role-based access control, access control, protected routes, protected routing, react protected routes, react protected routing, react user permissions, react access control, mern stack, mern stack permissions, mern stack access control, mern

Id: UhrmPH3TLus

Length: 44min 1sec (2641 seconds)

Published: Fri Sep 02 2022