React Protected Routes | Role-Based Authorization | React Router v6
Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
React Protected Routes allows you to make part of your React app exclusive to authorized users. Role-Based Authorization allows different levels of access based upon the assigned user roles. This tutorial utilizes React Router v6.
💖 Support me on Patreon ➜ / davegray
⭐ Become a full-stack web dev with Zero To Mastery Courses:
- Advanced React & Redux: bit.ly/AdvReactDev
- Jr to Senior Web Dev Roadmap: bit.ly/WebDevRoadmap-JrtoSr
- Master FAANG Coding Interviews: bit.ly/FAANGInterview
🚩 Subscribe ➜ bit.ly/3nGHmNn
🚀 React JS for Beginners full course - 9 hours: • React JS Full Course f...
🔗 Source Code: github.com/gitdagray/react_pr...
📬 Course Updates ➜ courses.davegray.codes/
React Protected Routes | Role-Based Authorization | React Router v6
(00:00) Intro
(00:53) Welcome and Startup
(01:27) Install React Router v6
(02:17) Update index.js with RRv6
(03:38) Basic Routing Setup
(07:41) useAuth hook
(10:06) RequireAuth component v1
(14:38) Manage browser history
(18:50) Testing with backend authentication
(21:00) RequireAuth component v2
(24:26) Applying Role-Based Routing
(26:35) Object lookup for roles
(28:15) Testing role-based routes
(29:37) Last note on the Unauthorized component
☕ Buy Me A Coffee: www.buymeacoffee.com/davegray
🔗 React Router Version 6 in 20 minutes: • React Router v6 in 20 ...
🔗 React User Login and Authentication with Axios: • React User Login and A...
🔗 React Register Form with Validation, Axios and a11y: • React JS Form Validati...
🔗 Node JS Full Course (with source code) for building the backend REST API that will receive your form submissions: • Node.js Full Course fo...
🔗 FontAwesome for React:
fontawesome.com/v5.15/how-to-...
🔗 RegExr for Regular Expressions: regexr.com/
📚 Accessible Form References:
WebAIM.org - Advanced Forms: webaim.org/techniques/forms/a...
WebAIM.org - Form Validation: webaim.org/techniques/formval...
MDN - Aria Attributes:
aria-invalid: developer.mozilla.org/en-US/d...
aria-describedby: developer.mozilla.org/en-US/d...
aria-live: developer.mozilla.org/en-US/d...
aria-label: developer.mozilla.org/en-US/d...
🔗 ES7 React JS Snippets Extension for VS Code:
marketplace.visualstudio.com/...
🔗 React Dev Tools Extension for Chrome:
chrome.google.com/webstore/de...
📚 References:
ReactJS Official site: reactjs.org/
React Wikipedia: en.wikipedia.org/wiki/React_(...)
React Jobs: www.ziprecruiter.com/candidat...
✅ Follow Me:
Github: github.com/gitdagray
Twitter: / yesdavidgray
LinkedIn: / davidagray
Blog: yesdavidgray.com
Reddit: / daveoneleven
Was this tutorial about creating protected routes and role-based user authorization in React with React Router v6 helpful? If so, please share. Let me know your thoughts in the comments.
#react #protected #routes
Пікірлер: 542
You have an app where users login and authenticate with a server, but is that all? What if there are different levels of authorization based on assigned user roles? In this tutorial you will learn how to React Router v6 to set up role-based user authorization for different parts of your React application. This tutorial uses a Node JS backend that was created in my Node JS for Beginners full course found here: kzread.info/dash/bejne/mGZ506d8mbeofJs.html - If you're just starting out with React, I suggest learning the basics first in my React JS for Beginners full course here: kzread.info/dash/bejne/hIp6o9t_h7Kal9I.html
@akshayc3314
2 жыл бұрын
Hi Dave, What if user is at home page and uses brower back button. Will he get navigate to login page or will remain at home page?
@ambrosearuwa9458
Жыл бұрын
@Dave Gray You are one the best teachers out there, I love the way you use stories to explain from both a client, user or developer point of view
@TeamBerserker032
Жыл бұрын
"src/context/AuthProvider.js Line 5:32: 'children' is missing in props validation react/prop-types" I am getting this error. Can someone please help me to resolve this
@bhavyajain638
3 ай бұрын
I am encountering a problem... Using protected routes, if the user is not logged in, I redirect to login page. But now google has marked my login page as canonical to the order page, because google crawler is not logged in. Any way to sole this issue? Thank you. It is an amazing tutorial.
@bhavyajain638
3 ай бұрын
I am encountering a problem... Using protected routes, if the user is not logged in, I redirect to login page. But now google has marked my login page as canonical to the order page, because google crawler is not logged in. Any way to solve this issue? Thank you. It is an amazing tutorial.
Your KZread channel is so valuable its insane, you don't cut a single corner in your demos. I've been studying for almost a year and feel like this series has been the icing on the cake for my job hunt right now
@DaveGrayTeachesCode
Жыл бұрын
Thank you for the kind words! 🙏🙏
This is EXACTLY what I've been looking for over the past year. I've been stitching most of this together on my own over that time since I started my web dev journey but there was a main issue I had with JWTs and best practice for storing those (AT & RT) - you've cleared it up and then some! Thank you so much. Liked, subbed, belled - you seem like you know what we need to see. There are too many 'guides' and 'courses' that skip over the most important parts often pertaining to best practices such as storing JWT in localstorage for simplicity or because they assume you don't care about security. Very nice to have all in one best practice / security.
@DaveGrayTeachesCode
2 жыл бұрын
Thank you, Karsen! 🙏💯
What a detailed and explanatory video about role wise routes. It feels like an personal tutor who sits besides & guides through the path. Hats Off for your efforts. Blessings. 👍
@DaveGrayTeachesCode
Жыл бұрын
Glad it was helpful! 💯
Great and clear explanation without filler words. Amazing
Dave, I must say I like the style and pace of the videos. I find it really useful when you explain why we should use something unlike some other creators that say just use this.
@DaveGrayTeachesCode
2 жыл бұрын
Thank you, Simon. I appreciate your feedback! 🙏💯
Thanks Dave for these intermediate lectures. On KZread it's either beginners or too advanced good to see someone teaching intermediate stuff 👍
@DaveGrayTeachesCode
2 жыл бұрын
You're welcome! 💯
Just so you know youre a life saver. Your tutorial videos are always on point and helps me sort out most of the things I need to know. Keep doing what you do🤟🤟🔥🔥
Dude, I feel a little more confident in my understanding after each of your tutorials. You rock.
@DaveGrayTeachesCode
2 жыл бұрын
Right on! 🤘
The best guide for react ever. The attention to detail is just awesome. Thanks Dave
@DaveGrayTeachesCode
Жыл бұрын
Glad it was helpful!
I so wish that I had found this course 6 months back. Absolute gem!
@DaveGrayTeachesCode
Жыл бұрын
Thanks!
Sold in less than 30 minutes! Thank you for explaining these concepts with real life scenarios.
@DaveGrayTeachesCode
Жыл бұрын
Glad it was helpful!
Just one tutorial from you and i am loving it. SUBSCRIBED.
You are not only a great help, but also an awesome awesome teacher. Thank you Dave Sir for your work, we appreciate you a ton
@DaveGrayTeachesCode
Жыл бұрын
You're welcome!
great video for refreshing my memory before applying for a job
Thanks Dave, this tutorial helped me set up some simple protected routes for an app I'm working on. Your other React Router videos have been useful as well!
@DaveGrayTeachesCode
2 жыл бұрын
Glad to hear it! 🚀🚀
Thank you so much, Mr. Dave. I love your videos and your way of teaching 🧡 Great tutorials! concise and informative 👏🏻
@DaveGrayTeachesCode
2 жыл бұрын
Thank you, Faris!
You have explained the concepts to the core. This video has really helped me to understand those . Thank you Really helpful..
you have some great material! I also love the little details you add in while you are going through the code. keep it up!
@DaveGrayTeachesCode
Жыл бұрын
Thank you, Chris! 💯
Best video ever on authorization
Thank you, Dave. Very useful.
This is by far the best tutorial I seen on the internet regarding the login/authorization related stuff of react. You never skipped a single piece of code which other youtuber normally do. The way you explain the things is really awesome and this helps me substantially in my job search.Thanks Dave for this great content🙂
@DaveGrayTeachesCode
Жыл бұрын
You're very welcome!
You can't imagine how much I appreciate this great tutorial. Thank you Sir for sharing your knowledge.
@DaveGrayTeachesCode
2 жыл бұрын
Glad it was helpful! 💯🚀
Thank you man. Awesome, best tutorial ever. Keep it up
Another banger. I'm going one by one through this series and this one was great too!
@DaveGrayTeachesCode
Жыл бұрын
Glad to hear that, Shawn! 🚀
Hi Dave. I'm thankful for this tutorial. I learned tons from it and hope you keep on making these kinda videos! God bless you!
@DaveGrayTeachesCode
2 жыл бұрын
You're welcome!
Hi Dave, It's a wonderfully explained lecture about routes so far I have seen. Really appericiate your efforts and the way you are teaching beginners. Thank you so much as this really helped me in my project.
@DaveGrayTeachesCode
Жыл бұрын
Glad it was helpful!
Great as always, please keep on uploading, I love your content !
@DaveGrayTeachesCode
2 жыл бұрын
Thank you! I'll keep going! 💯🙏
perfect timing, as I am going through the same concept and setting up a Bank App!
@DaveGrayTeachesCode
2 жыл бұрын
Glad it was helpful! 🚀
Thank you, Dave. Very useful and well structured course
@DaveGrayTeachesCode
Жыл бұрын
Glad it was helpful!
Thank you Dave, these guides are awesome and have helped me a lot 😊
@DaveGrayTeachesCode
Жыл бұрын
Glad to hear!
Hello sir, your teaching pace and the way of teaching is just awesome 🔥❤️ its much easy to understand even a complex topics 💯💯
@DaveGrayTeachesCode
2 жыл бұрын
Thank you for the kind words!
Thank you very much! This is exactly what I've been looking for.
@DaveGrayTeachesCode
Жыл бұрын
Glad I could help!
Man, this was AWESOME! Thank you very much ❤️❤️
@DaveGrayTeachesCode
Жыл бұрын
You're very welcome!
you saved my life!! I love your tutorial!!!! Can't be better :D
@DaveGrayTeachesCode
2 жыл бұрын
Glad I could help! 🚀
Thanks. This helped me alot
the best detailed explanalation of RR6 and Role based control.
@DaveGrayTeachesCode
Жыл бұрын
Thank you!
Loved it, thank you very much.
@DaveGrayTeachesCode
Жыл бұрын
You're welcome!
Thanks Dave. This video cleared all my doubts. 😊
@DaveGrayTeachesCode
2 жыл бұрын
Great to hear! 💯
Very good Lesson and clear Many thanks Dave !
@DaveGrayTeachesCode
2 жыл бұрын
Glad you liked it! 💯
Awesome stuff Dave!
@DaveGrayTeachesCode
Жыл бұрын
Glad you enjoyed it!
exactly what I need it, thank you very much!
@DaveGrayTeachesCode
2 жыл бұрын
You're welcome! 💯
U made me understand jwt totally 🎉❤❤❤
Awesome just what I was looking for
@DaveGrayTeachesCode
Жыл бұрын
Glad to hear!
Thanks a lot Dave! You helped me a lot!
@DaveGrayTeachesCode
2 жыл бұрын
Glad to hear that, Carlos!
ive been woking on react authentication with react router.really your worked well helped fror me thanks..now i got the motivation.i will do it
@DaveGrayTeachesCode
2 жыл бұрын
Keep making progress! 🚀
thank you dave need more react video
@DaveGrayTeachesCode
Жыл бұрын
Currently, 55 React videos in my playlist: kzread.info/head/PL0Zuz27SZ-6PrE9srvEn8nbhOOyxnWXfp
Hi Dave! 1st of all: Thanks infinitely for your work, your constant contributions to the community and your magnificent skills to teach and share your knowledge and experience. 2nd: I had written a long message to see if you could give me some perspective to sort out an issue I run into when implementing RequireAuth component and I figured out the issue when writing it down to explain it to you just now. You might not know, but you just helped me (again, eheh)! Thanks Dave!
@DaveGrayTeachesCode
Жыл бұрын
Glad to hear that! What you did is kind of like the "rubber duck" theory where programmers explain the issue to something on their desk which helps the thought process. Teaching helps me do the same thing! 💯
@mauroconsolani2576
Жыл бұрын
@@DaveGrayTeachesCode definitely the "rubber duck" method! Thanks again!
@sum41greekfun
Жыл бұрын
@@mauroconsolani2576 If that issue is about the auth context variable loosing its value between refreshing the page I would kinda beg you for the solution :P
@mauroconsolani2576
Жыл бұрын
@@sum41greekfun Hi!! I've been trying to track down my code but couldn't locate if my issue was with the context variable. If I had to guess, on refresh you should check if you have a JWT token stored in your cookies. If so, send a request to you backend with the data you need to fill your auth context variable and recover the "state" of the app.
Thanks for the last tip!
@DaveGrayTeachesCode
Жыл бұрын
You're welcome!
This channel is GOLD
@DaveGrayTeachesCode
2 жыл бұрын
Thank you! 💯🚀🚀
thanks dave for that great tutorial
@DaveGrayTeachesCode
2 жыл бұрын
You're welcome! 💯
Loved the video❤
excellent thank you !
Thanks Dave...learned some new things ❤️
@DaveGrayTeachesCode
Жыл бұрын
Glad I could help!
Very detailed and informative content. Thank You
@DaveGrayTeachesCode
Жыл бұрын
You're welcome!
Im enjoying the video man. Thanks
@DaveGrayTeachesCode
2 жыл бұрын
Glad to hear it! 🙏💯
Dave gray made me who i am today. Blessings ❤.
Amazing stuff! Thanks!
@DaveGrayTeachesCode
2 жыл бұрын
You're welcome! 🙏💯
This video helps me a lot. ThankU so much.
@DaveGrayTeachesCode
Жыл бұрын
Glad to hear that!
Wonderful as usual.
Thanks a lot 🥰
Hi, I want to say a very big THANK YOU for this video and your channel.
@DaveGrayTeachesCode
2 жыл бұрын
You're welcome, Adeyemi! 🙏🙏
great tutorial a complete life saver👍👍
@DaveGrayTeachesCode
Жыл бұрын
Glad it helped!
Thanks Dave for you valuable knowledge sharing it' very helpful to me
great content, you teach like Tim Buchalka from Australia :) keep up nice work and thank you
@DaveGrayTeachesCode
2 жыл бұрын
You're welcome! 🙏
mind blowing tutorial. Hatsoff to you. You are a Superhero for me..
@DaveGrayTeachesCode
2 жыл бұрын
Thank you for the kind words, Balaguru! 🙏🙏
This is what i exactly needed. Thank you so much!
@DaveGrayTeachesCode
2 жыл бұрын
Glad it helped! 🚀
@johnpaulpineda2476
2 жыл бұрын
@@DaveGrayTeachesCode Can you do like this but with firestore and reactjs
@DaveGrayTeachesCode
2 жыл бұрын
@@johnpaulpineda2476 I'm sure it is possible. Adding to the list!
@johnpaulpineda2476
2 жыл бұрын
@@DaveGrayTeachesCode Im waiting. :)
Thank you so much dave....
@DaveGrayTeachesCode
Жыл бұрын
Welcome!
nice course Thank you bro
@DaveGrayTeachesCode
Жыл бұрын
You're welcome!
nice thank you
...u awesome Dave. thanks so very much
What a great tutorial.
@DaveGrayTeachesCode
Жыл бұрын
Thank you!
THank you this is exactly what i am looking for
@DaveGrayTeachesCode
2 жыл бұрын
Glad I could help! 💯
I've been struggling with these access control in react You have also taught me how to add the layout of a page like a "millionaire", I was doing it the dumb way
@DaveGrayTeachesCode
2 жыл бұрын
Glad I could help! 🚀🚀
thank youu Dave
Very informative tutorial 👏👏
@DaveGrayTeachesCode
Жыл бұрын
Glad it was helpful!
You are the GOAT!
You're the best! Thanks!
@DaveGrayTeachesCode
2 жыл бұрын
You're welcome! 💯
I discovered my new favourite channel
@DaveGrayTeachesCode
Жыл бұрын
Glad to hear that, Fernando! 💯
God bless you Dave.
@DaveGrayTeachesCode
Жыл бұрын
🙏💯🚀
Thanks Dave
your're amazing thanks alot!
@DaveGrayTeachesCode
2 жыл бұрын
You're welcome! 🙏💯
Thank you very very very much. It very helpful.😍
@DaveGrayTeachesCode
2 жыл бұрын
Glad it was helpful! You're welcome! 🚀
Thanks for the video sir i learned alot from this video
@DaveGrayTeachesCode
2 жыл бұрын
Glad I could help. You're welcome! 🙏
thanx for the video, very helpful
@DaveGrayTeachesCode
2 жыл бұрын
You're welcome!
TY!!!
thank you so much sir
Thank you so much
@DaveGrayTeachesCode
Жыл бұрын
You're most welcome!
Thank you so much !
@DaveGrayTeachesCode
2 жыл бұрын
You're welcome, Lac! 🙏
thankyou Dave
@DaveGrayTeachesCode
Жыл бұрын
You're welcome!
Awesome tutorial
@DaveGrayTeachesCode
2 жыл бұрын
Glad you liked it! 💯
Dave you're amazing
@DaveGrayTeachesCode
2 жыл бұрын
Thank you for the kind words!
Very helpful
@DaveGrayTeachesCode
2 жыл бұрын
Glad it helped! 💯
You are great sir and thanks
@DaveGrayTeachesCode
2 жыл бұрын
Thank you for the kind words 🙏💯
greate, verry helpful. Thanks you so much
@DaveGrayTeachesCode
2 жыл бұрын
Glad it was helpful! 💯
I absolutely love your tutorials! They are so insightful and correctly paced. The only thing I was wondering is if you could do this same website without axios? Or is that not a good idea? I am currently building a react app for my capstone project in college, and I am not using axios.
@DaveGrayTeachesCode
2 жыл бұрын
You can just use fetch. It doesn't have all of the nice features built-in that axios does though. Axios is a lightweight dependency that will not bog down your project. Given the choice, I would use axios.
Dave this tutorial is amazing complete your node tutorial and now doing this. JWT and authorization was daunting but your tutorials made them very easy to grasp cant wait to incorporate this into my full stack projects! do you have a discord or anything like that?
@DaveGrayTeachesCode
Жыл бұрын
Glad it helped! Yes, my Discord: discord.gg/neKghyefqh
this is awesome this helps me allot
@DaveGrayTeachesCode
2 жыл бұрын
Glad to hear it! 🚀
Thanks for this greaat video
@DaveGrayTeachesCode
2 жыл бұрын
You're welcome, Grisha!
Thank you so much 👍👍👏👏✌✌
@DaveGrayTeachesCode
2 жыл бұрын
You're welcome! 🙏🙏