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: kzbin.info/www/bejne/nGOoonh5nrl1gpo - If you're just starting out with React, I suggest learning the basics first in my React JS for Beginners full course here: kzbin.info/www/bejne/iIepcqx8jLRnndE
@akshayc33142 жыл бұрын
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?
@ambrosearuwa94582 жыл бұрын
@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
@bhavyajain6386 ай бұрын
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.
@bhavyajain6386 ай бұрын
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.
@klhmia2 жыл бұрын
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.
@DaveGrayTeachesCode2 жыл бұрын
Thank you, Karsen! 🙏💯
@maxwellshick77982 жыл бұрын
Your KZbin 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
@DaveGrayTeachesCode2 жыл бұрын
Thank you for the kind words! 🙏🙏
@ntjnh2 жыл бұрын
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. 👍
@DaveGrayTeachesCode2 жыл бұрын
Glad it was helpful! 💯
@simonedwards71012 жыл бұрын
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.
@DaveGrayTeachesCode2 жыл бұрын
Thank you, Simon. I appreciate your feedback! 🙏💯
@noone_and_nobody Жыл бұрын
I so wish that I had found this course 6 months back. Absolute gem!
@DaveGrayTeachesCode Жыл бұрын
Thanks!
@SachinYadav-eh7vg2 жыл бұрын
Thanks Dave for these intermediate lectures. On KZbin it's either beginners or too advanced good to see someone teaching intermediate stuff 👍
@DaveGrayTeachesCode2 жыл бұрын
You're welcome! 💯
@karthikts1634 Жыл бұрын
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!
@HologramJay2 жыл бұрын
Dude, I feel a little more confident in my understanding after each of your tutorials. You rock.
@DaveGrayTeachesCode2 жыл бұрын
Right on! 🤘
@brucelee77825 ай бұрын
great video for refreshing my memory before applying for a job
@hanesmitter14692 жыл бұрын
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
@DaveGrayTeachesCode2 жыл бұрын
Glad I could help! 🚀🚀
@aruchgupta Жыл бұрын
Sold in less than 30 minutes! Thank you for explaining these concepts with real life scenarios.
@DaveGrayTeachesCode Жыл бұрын
Glad it was helpful!
@dilrukshiperera-yo5br2 ай бұрын
I have followed three videos of this course, as of now. And they all were helpful.
@mauroconsolani25762 жыл бұрын
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!
@DaveGrayTeachesCode2 жыл бұрын
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! 💯
@mauroconsolani25762 жыл бұрын
@@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.
@anmolarora5630 Жыл бұрын
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!
@caffeinated-pixels2 жыл бұрын
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!
@DaveGrayTeachesCode2 жыл бұрын
Glad to hear it! 🚀🚀
@ayushdedhia252 жыл бұрын
Hello sir, your teaching pace and the way of teaching is just awesome 🔥❤️ its much easy to understand even a complex topics 💯💯
@DaveGrayTeachesCode2 жыл бұрын
Thank you for the kind words!
@mohammedhuzaifa8654 Жыл бұрын
The best guide for react ever. The attention to detail is just awesome. Thanks Dave
@DaveGrayTeachesCode Жыл бұрын
Glad it was helpful!
@praveengopu93252 жыл бұрын
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
@DaveGrayTeachesCode2 жыл бұрын
Keep making progress! 🚀
@kirillzlobin7135 Жыл бұрын
Great and clear explanation without filler words. Amazing
@feyisayoamujoyegbe423811 ай бұрын
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🤟🤟🔥🔥
@nirmalhasposted7 ай бұрын
You have explained the concepts to the core. This video has really helped me to understand those . Thank you Really helpful..
@faris.abuali2 жыл бұрын
Thank you so much, Mr. Dave. I love your videos and your way of teaching 🧡 Great tutorials! concise and informative 👏🏻
@DaveGrayTeachesCode2 жыл бұрын
Thank you, Faris!
@shawn.builds2 жыл бұрын
Another banger. I'm going one by one through this series and this one was great too!
@DaveGrayTeachesCode2 жыл бұрын
Glad to hear that, Shawn! 🚀
@kirillzlobin7135 Жыл бұрын
The playlist on how to use Chrome Dev Tools would be awesome. Please, consider to do it someday...
@Getfit-us2 жыл бұрын
you have some great material! I also love the little details you add in while you are going through the code. keep it up!
@DaveGrayTeachesCode2 жыл бұрын
Thank you, Chris! 💯
@juandaniel67262 жыл бұрын
You can't imagine how much I appreciate this great tutorial. Thank you Sir for sharing your knowledge.
@DaveGrayTeachesCode2 жыл бұрын
Glad it was helpful! 💯🚀
@shubhamnagota Жыл бұрын
the best detailed explanalation of RR6 and Role based control.
@DaveGrayTeachesCode Жыл бұрын
Thank you!
@gilbertnyantakyi3950 Жыл бұрын
Just one tutorial from you and i am loving it. SUBSCRIBED.
@smeuj Жыл бұрын
Hi Dave, thank you very much for this awesome tutorial series, it helped me a lot. Could you please tell me how to keep context from "clearing" when opening link in a new tab. When i use it seems that the context is lost and auth becomes empty in RequireAuth so it redirects me to the login page. Any help would be much appreciated. Thank you
@JokeAdeyanju11 ай бұрын
Dave gray made me who i am today. Blessings ❤.
@ramziosta2 жыл бұрын
perfect timing, as I am going through the same concept and setting up a Bank App!
@DaveGrayTeachesCode2 жыл бұрын
Glad it was helpful! 🚀
@BilalTufail-nw9gs Жыл бұрын
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!
@iwilliamsi2 жыл бұрын
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!
@DaveGrayTeachesCode2 жыл бұрын
You're welcome!
@realarslan33 Жыл бұрын
Best video ever on authorization
@adila4658 Жыл бұрын
I’m a bit confused, I have a login form that connects to sql db then response is 200 if user exists. Why would I need a token if validation is already achieved? Is this a silly question?
@-massimami- Жыл бұрын
Thank you Dave, these guides are awesome and have helped me a lot 😊
@DaveGrayTeachesCode Жыл бұрын
Glad to hear!
@MASTERRAGE2 жыл бұрын
Great as always, please keep on uploading, I love your content !
@DaveGrayTeachesCode2 жыл бұрын
Thank you! I'll keep going! 💯🙏
@brendenferkans68462 жыл бұрын
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.
@DaveGrayTeachesCode2 жыл бұрын
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.
@hamidabdolrahimi4606 Жыл бұрын
Thank you man. Awesome, best tutorial ever. Keep it up
@lucasbertoldo5062 Жыл бұрын
Thank you very much! This is exactly what I've been looking for.
@DaveGrayTeachesCode Жыл бұрын
Glad I could help!
@okeydonkey192 жыл бұрын
you saved my life!! I love your tutorial!!!! Can't be better :D
@DaveGrayTeachesCode2 жыл бұрын
Glad I could help! 🚀
@andysimmons8730 Жыл бұрын
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
@fernandocoluchi50132 жыл бұрын
I discovered my new favourite channel
@DaveGrayTeachesCode2 жыл бұрын
Glad to hear that, Fernando! 💯
@allanbr.8308 Жыл бұрын
Thank you, Dave. Very useful and well structured course
@DaveGrayTeachesCode Жыл бұрын
Glad it was helpful!
@onigbindedavid66302 ай бұрын
U made me understand jwt totally 🎉❤❤❤
@WTFAnyNameWorks Жыл бұрын
Man, this was AWESOME! Thank you very much ❤️❤️
@DaveGrayTeachesCode Жыл бұрын
You're very welcome!
@pmioduszewski2 жыл бұрын
This channel is GOLD
@DaveGrayTeachesCode2 жыл бұрын
Thank you! 💯🚀🚀
@abdulwahab7555 Жыл бұрын
Awesome stuff Dave!
@DaveGrayTeachesCode Жыл бұрын
Glad you enjoyed it!
@legenuspl49062 жыл бұрын
great content, you teach like Tim Buchalka from Australia :) keep up nice work and thank you
@DaveGrayTeachesCode2 жыл бұрын
You're welcome! 🙏
@bojjabheemaraju3872 жыл бұрын
Thanks Dave. This video cleared all my doubts. 😊
@DaveGrayTeachesCode2 жыл бұрын
Great to hear! 💯
@kamrandvr4045 Жыл бұрын
Thank you, Dave. Very useful.
@pinakadhara76502 жыл бұрын
Great video! A HOC like withRole() which handles all the authorisation logic would be handy.
@DaveGrayTeachesCode2 жыл бұрын
Thank you!
@90kidsgamezone76 Жыл бұрын
thank you dave need more react video
@DaveGrayTeachesCode Жыл бұрын
Currently, 55 React videos in my playlist: kzbin.info/aero/PL0Zuz27SZ-6PrE9srvEn8nbhOOyxnWXfp
@khandoor7228 Жыл бұрын
Awesome just what I was looking for
@DaveGrayTeachesCode Жыл бұрын
Glad to hear!
@digitalmarketingtutor2 жыл бұрын
Hi, I want to say a very big THANK YOU for this video and your channel.
@DaveGrayTeachesCode2 жыл бұрын
You're welcome, Adeyemi! 🙏🙏
@ibrahimacanada2 жыл бұрын
Very good Lesson and clear Many thanks Dave !
@DaveGrayTeachesCode2 жыл бұрын
Glad you liked it! 💯
@tallitvak5325 Жыл бұрын
Thanks for the last tip!
@DaveGrayTeachesCode Жыл бұрын
You're welcome!
@vnm_89452 жыл бұрын
exactly what I need it, thank you very much!
@DaveGrayTeachesCode2 жыл бұрын
You're welcome! 💯
@dovakiin02 жыл бұрын
Thank you so much ive been looking on how to stop redirecting to home page every time login check for goddam so long and im so thankful to you
@DaveGrayTeachesCode2 жыл бұрын
You're welcome!
@zee_axis2 жыл бұрын
mind blowing tutorial. Hatsoff to you. You are a Superhero for me..
@DaveGrayTeachesCode2 жыл бұрын
Thank you for the kind words, Balaguru! 🙏🙏
@TurboBet_6 ай бұрын
You are the GOAT!
@rockfox52 жыл бұрын
Excellent tutorial as always, Dave. Unfortunately react router doesn’t work well with Nextjs which I built my frontend on.
@DaveGrayTeachesCode2 жыл бұрын
Thank you! I'd like to do some work with NextJS later this year 💯
@dilrukshiperera-yo5br2 ай бұрын
thanks for the advice.
@saadarman47189 ай бұрын
Wonderful as usual.
@caducoder2 жыл бұрын
Thanks a lot Dave! You helped me a lot!
@DaveGrayTeachesCode2 жыл бұрын
Glad to hear that, Carlos!
@sejanas2 жыл бұрын
Very detailed and informative content. Thank You
@DaveGrayTeachesCode2 жыл бұрын
You're welcome!
@szymonrojek64802 жыл бұрын
Hi Dave, I watched few times these series and learn already a lot but I have got a question - you are passing the data from the server to the context. After reloading the page I got a new state which is an empty state and thats a reason that I have to log in again through the login component. What is the best idea to keep state after the login and do not loose it when the page is reloaded ? Also in the network payload I can see the password wich has been written during the sign in the application - is any chance to hide it? To be honest I learn front end dev and I am a beginner with node but literally I just want to know more what is going on on the backend side :D Thank you so much for your tutorials. BDW do you have a slack community or discord etc? I would join to that kind of group under your mentoring :D
@DaveGrayTeachesCode2 жыл бұрын
Great questions! 1) If you continue in this series, there is a "Persist Login" tutorial that handles the reloading and reauthorization. You will always lose app state when you reload, but that video shows how to maintain a user login. 2) You could possibly encrypt client side, but this isn't common - if there is a major concern here about your network traffic being hacked, you should use a secure connection - say a VPN if available. Also, https is a must. ...You're welcome and yes, I just opened up a Discord community here: discord.gg/neKghyefqh
@johnpaulpineda24762 жыл бұрын
This is what i exactly needed. Thank you so much!
@DaveGrayTeachesCode2 жыл бұрын
Glad it helped! 🚀
@johnpaulpineda24762 жыл бұрын
@@DaveGrayTeachesCode Can you do like this but with firestore and reactjs
@DaveGrayTeachesCode2 жыл бұрын
@@johnpaulpineda2476 I'm sure it is possible. Adding to the list!
@johnpaulpineda24762 жыл бұрын
@@DaveGrayTeachesCode Im waiting. :)
@medAmineRg2 жыл бұрын
thanks dave for that great tutorial
@DaveGrayTeachesCode2 жыл бұрын
You're welcome! 💯
@yashwanthsrinivas Жыл бұрын
What a great tutorial.
@DaveGrayTeachesCode Жыл бұрын
Thank you!
@agroforestryconsultancyroz31572 жыл бұрын
Im enjoying the video man. Thanks
@DaveGrayTeachesCode2 жыл бұрын
Glad to hear it! 🙏💯
@MohamedElnagar-dz8ub6 ай бұрын
Thanks a lot 🥰
@divyanshmalik5512 Жыл бұрын
great tutorial a complete life saver👍👍
@DaveGrayTeachesCode Жыл бұрын
Glad it helped!
@Victor-wh9bs Жыл бұрын
This video helps me a lot. ThankU so much.
@DaveGrayTeachesCode Жыл бұрын
Glad to hear that!
@pratikmadekar5728 Жыл бұрын
Thanks Dave for you valuable knowledge sharing it' very helpful to me
@jonathanhammond55634 ай бұрын
Hi Dave, I have a question. You specified separating concerns between routing and authorization, but what about navigation links that utilize rrd's Link component? I was thinking of conditionally rendering navigation Links based on the user's role. I wasn't sure if this was still against the convention you speak of. I would hope not, but wanted to see!
@danieltkach2330 Жыл бұрын
God bless you Dave.
@DaveGrayTeachesCode Жыл бұрын
🙏💯🚀
@od1ez2 жыл бұрын
Amazing stuff! Thanks!
@DaveGrayTeachesCode2 жыл бұрын
You're welcome! 🙏💯
@azizbekmukhtorov9 ай бұрын
thank youu Dave
@CTILET2 жыл бұрын
My english is a lit bit better than react knowledge but after your videos i repeat English and improve react😊
@DaveGrayTeachesCode2 жыл бұрын
That's great! Keep up the good work! 🚀🚀
@jafeta.7553 Жыл бұрын
Loved it, thank you very much.
@DaveGrayTeachesCode Жыл бұрын
You're welcome!
@njorogekamau38207 ай бұрын
Thanks. This helped me alot
@shaantanukulkarni56687 ай бұрын
Loved the video❤
@kolynzb2 жыл бұрын
THank you this is exactly what i am looking for
@DaveGrayTeachesCode2 жыл бұрын
Glad I could help! 💯
@vampiroast Жыл бұрын
Thanks Dave very good tutorial!! 1984 and 5150? are you a Van Halen fan? 🤘🤘
@DaveGrayTeachesCode Жыл бұрын
Of course! 🤘🎸And you're welcome!
@Bskater9522 жыл бұрын
I just spent last night looking this up lol
@DaveGrayTeachesCode2 жыл бұрын
Good timing! I hope this helps. 💯🚀
@fikilekentane6982 Жыл бұрын
...u awesome Dave. thanks so very much
@vohid_abduraxmanov Жыл бұрын
nice course Thank you bro
@DaveGrayTeachesCode Жыл бұрын
You're welcome!
@bbedyukh2 жыл бұрын
You're the best! Thanks!
@DaveGrayTeachesCode2 жыл бұрын
You're welcome! 💯
@Rameshkumar-rv5vd Жыл бұрын
Thanks Dave
@MsPrakhar12 Жыл бұрын
Very informative tutorial 👏👏
@DaveGrayTeachesCode Жыл бұрын
Glad it was helpful!
@arunan-j6w5 ай бұрын
nice thank you
@msalam42482 жыл бұрын
Thank you so much dave....
@DaveGrayTeachesCode2 жыл бұрын
Welcome!
@muhammedcansoy613110 ай бұрын
excellent thank you !
@andresbreuer2 жыл бұрын
Hi Dave!! This Regiter/Login playlist is AWESOME! I just wanted to know if the role codes you are using (2001, 1984, 5150) are standards or just invented by you. Thanks!
@DaveGrayTeachesCode2 жыл бұрын
Just invented by me. Any company may have their own codes. 1984 and 5150 are Van Halen albums! 🎸🤘
@andresbreuer2 жыл бұрын
@@DaveGrayTeachesCode Nice!!
@tetyanagon334211 ай бұрын
TY!!!
@danieltkach23302 жыл бұрын
In V6 there's a simplified way of doing it with nested routes, would you do a new tutorial please? I found some cool blogs that explain it, but nothing like your examples! Much appreciated.
@DaveGrayTeachesCode2 жыл бұрын
This tutorial uses React Router v6 and covers nested routes. These are protected routes which are nested inside of a RequireAuth component which receives the user roles. If you are just looking for nesting without authentication or roles, you can also see that with the use of Outlet inside the layout component. Outlet represents the child components: reactrouter.com/docs/en/v6/components/outlet ..If you are looking for a different React Router v6 tutorial with nesting, I recommend my intro to React Router v6 here: kzbin.info/www/bejne/jnO1fYmIn79mebM
@danieltkach23302 жыл бұрын
@@DaveGrayTeachesCode thank you for replying Dave, you must be one of the very few teachers here who replies, I can't thank you enough. This stuff is complicated at times and a little reply like that makes a HUGE difference for someone learning this stuff. You are right, you do have the nested routes example I was looking for, but then you removed it in the final version, correct? Since you apply "RequireAuth" individually to each route, that's what confused me, why did you change that? I will have to watch this a couple of times.
@DaveGrayTeachesCode2 жыл бұрын
@@danieltkach2330 you're welcome. I changed it for the role specific routes. 💯
@yomamasofat41327 күн бұрын
7:40 whats the purpose of using the Layout and Outlet component?
@pambisichone45922 жыл бұрын
You tutorial have helped a lot thanks for providing this content especially this series. I just wanted to ask how a can use this same role-based routing approach in my react-native application