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

⭐ Become a full-stack web dev with Zero To Mastery Courses:

👇 Follow Me On Social Media:

User Role-Based Access Control & Permissions in React JS

(00:00) Intro
(00:12) Welcome
(00:25) Starter Code & Dependencies
(01:09) User Stories
(03:18) useAuth hook
(07:02) Footer username & status display
(08:43) Welcome username & links
(11:38) Header icons and navigation
(21:42) NotesList access
(26:09) UsersList logic
(26:43) Why we still need route protection
(29:34) Create a RequireAuth wrapper component
(32:28) Protecting Routes with RequireAuth
(40:35) Note deletion permissions

📚 Suggested Pre-requisites for this MERN course:

📚 Tutorial References:

Was this tutorial on User Role-Based Access Control and Permissions helpful? If so, please share. Let me know your thoughts in the comments.

#user #roles #permissions

[MegaGrinbull]

Dave you are amazing. This is by far the best series I have seen on youtube. You are a legend my man. And to think this is for free? When I get my first paid software development gig, I owe you not one coffee, but ten or more. Thanks, thanks and more thanks.

[Sylar]

TOP!!! Thank YOU ❤️😊, I'm waiting for Your lessons everyday 💪

[bakaryditdadadrame]

As always, excellent lesson from a great teacher!

[МарияТанина-йд]

Thank you for this video, it really helped me figure out auth😊 Greetings from Ukraine

[abdulrahmanagboolaosho]

Thanks so much for the amazing content, I have learnt too much considering this is not a beginner course

[Clash-Roblox]

I'm stuck in login page, I can't go back because the location it remember is the protected page so it redirect me back to login every time I click back arrow on chrome until I login.

[vault_cat]

Hey Dave, wonderful tutorial as usual. I followed you from redux to RTK to now closing out this killing MERN series. I found what's paying off well for beginners like me was to spend lots of extra time researching related knowledge around your coding paradigms & styles and trying to actualize the same functions in different ways:) Just wanted to point out one tiny thing at 24:46:

const tableContent = ids?.length && filteredIds.map(noteId => <Note key={noteId} noteId={noteId} />)


It seems the && operator would return 0 if there is no note at all. Since createEntityAdapter would return an empty 'ids' array and then 'ids?.length' would return 0. The right side of && would return empty array too. This 0 would cause error in react. Thanks!

[satishmaurya]

Thanks a lot Gray sir, for this valuable tuts

[rabeezyoud]

Hi Dave, Thank you for the excellent lesson. How do you get isManager/role name from token if the server only includes role number based on your previous express server?

roles is an array with numbers and you have verify role middleware, but you never included the role name in the token. Did you make changes to the server where the access token now includes the role number and role name?

[shahrukhtemori]

Hi, Dave Gray
I'm having trouble as I go along. The only thing that shows when I try to log out is the blank background color; however, if I refresh the page first, everything goes through without a hitch. The checkbox is always ticked; if I uncheck it, the local storage changes to false. I would greatly appreciate any suggestions you might make. Thank you.

[nurullahbaykara]

great teacher, thank you for educations

[ninofaraguna]

hey dave. been starting amd your videos are the cleanest thing around. please keep going.
i have a question? or lets say a user story to be exact. could we attach a picture or a file to our note when we are creating it.?
would we just add to our note model or make new ones? cheers!

[a.studio]

Hi Dave. Thanks for a great tutorial! I'm not sure if I’m getting things correct, but you are reading all the data (like notes) from mongodb and then filtering them on a view? Isn't that a little unsecure? And what if there is a large amount of data to read. Wouldn’t it be a good idea to filter it at the request (controller) level and get only the notes from a specific user? That’s what I would do with a SQL database, but maybe it’s different with json db.

[iraybi]

Hi Dev, Thanks for your amazing content. Can you please write the reAuthBaseQuery part in typescript, please? Thank you

[_Cyrus]

Hey Dave love the content could I ask/request for a video on filtering notes and pagination. Appreciate it, would like to see how you approach this.

[Mohanakrishnan-ij]

Amazing video, i have a doubt what if a hacker modifies the role or worse removes the protection of routes by disabling the wrapper component that protects the routes ?then he can gain access to protected routes, right?so in that scenario, the only way to protect unauthorized content would be be to Authorize the user for each request ?

[TheDoguBati]

Hi Dave, first of all thank you for putting a lot of effort in all these tutorials, god bless. But i have a little question about jwt-decode. Is there a reason to not return all those user information alongside with the accesstoken since we already have those information in our backend ?

[mohdizzmohdyacob]

25:04 when I console log the filter it returns without result, I might think cause there's no "username" field in my data. But the useAuth username return to a string which the staff who logged in.

I then, change => entities[noteId].user === username

still cannot cause it tries to compare array of users id with a string. eg 2134tr4321, 21342141, 123213 === Joe

so I cant actually fetch Joe's notes. If there's a way to fetch Notes id.username. Or any solutions. Im stuck here for a week already. Any helps is appreciated. Thanks!

[odeyemiincreaseayobami]

Nice Tutorial Sir, please can test be automated testing included in this tutorial or as a tutorial on it own. Will be greatly appreciated Sir

[rishabhmishra]

hey Dave
I just started learning from your courses
I wanted to ask if I can take your react course with react 18
or is it going to create problem because your course is in react 17 ????