No video

React Protected Routes | Role-Based Authorization | React Router v6

  Рет қаралды 376,441

Dave Gray

Dave Gray

Күн бұрын

Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGra...
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/AdvReac...
- Jr to Senior Web Dev Roadmap: bit.ly/WebDevR...
- Master FAANG Coding Interviews: bit.ly/FAANGIn...
🚩 Subscribe ➜ bit.ly/3nGHmNn
🚀 React JS for Beginners full course - 9 hours: • React JS Full Course f...
🔗 Source Code: github.com/git...
📬 Course Updates ➜ courses.davegr...
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.buymeacoff...
🔗 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.co...
🔗 RegExr for Regular Expressions: regexr.com/
📚 Accessible Form References:
WebAIM.org - Advanced Forms: webaim.org/tec...
WebAIM.org - Form Validation: webaim.org/tec...
MDN - Aria Attributes:
aria-invalid: developer.mozi...
aria-describedby: developer.mozi...
aria-live: developer.mozi...
aria-label: developer.mozi...
🔗 ES7 React JS Snippets Extension for VS Code:
marketplace.vi...
🔗 React Dev Tools Extension for Chrome:
chrome.google....
📚 References:
ReactJS Official site: reactjs.org/
React Wikipedia: en.wikipedia.o...)
React Jobs: www.ziprecruit...
✅ Follow Me:
Github: github.com/git...
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

Пікірлер: 545
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
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: kzfaq.info/get/bejne/nJh1pKh0zrqmfGw.html - If you're just starting out with React, I suggest learning the basics first in my React JS for Beginners full course here: kzfaq.info/get/bejne/iLx2dNx3vLWYl6M.html
@akshayc3314
@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
@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
@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
@bhavyajain638 5 ай бұрын
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
@bhavyajain638 5 ай бұрын
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.
@klhmia
@klhmia 2 жыл бұрын
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
@DaveGrayTeachesCode 2 жыл бұрын
Thank you, Karsen! 🙏💯
@ntjnh
@ntjnh 2 жыл бұрын
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
@DaveGrayTeachesCode 2 жыл бұрын
Glad it was helpful! 💯
@maxwellshick7798
@maxwellshick7798 Жыл бұрын
Your KZfaq 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
@DaveGrayTeachesCode Жыл бұрын
Thank you for the kind words! 🙏🙏
@simonedwards7101
@simonedwards7101 2 жыл бұрын
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
@DaveGrayTeachesCode 2 жыл бұрын
Thank you, Simon. I appreciate your feedback! 🙏💯
@D4arkl0rd
@D4arkl0rd Жыл бұрын
I so wish that I had found this course 6 months back. Absolute gem!
@DaveGrayTeachesCode
@DaveGrayTeachesCode Жыл бұрын
Thanks!
@SachinYadav-eh7vg
@SachinYadav-eh7vg 2 жыл бұрын
Thanks Dave for these intermediate lectures. On KZfaq it's either beginners or too advanced good to see someone teaching intermediate stuff 👍
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
You're welcome! 💯
@brucelee7782
@brucelee7782 4 ай бұрын
great video for refreshing my memory before applying for a job
@TheLucidWay
@TheLucidWay 2 жыл бұрын
Dude, I feel a little more confident in my understanding after each of your tutorials. You rock.
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
Right on! 🤘
@aruchgupta
@aruchgupta Жыл бұрын
Sold in less than 30 minutes! Thank you for explaining these concepts with real life scenarios.
@DaveGrayTeachesCode
@DaveGrayTeachesCode Жыл бұрын
Glad it was helpful!
@dilrukshiperera-yo5br
@dilrukshiperera-yo5br Ай бұрын
I have followed three videos of this course, as of now. And they all were helpful.
@karthikts1634
@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
@DaveGrayTeachesCode Жыл бұрын
You're very welcome!
@hanesmitter1469
@hanesmitter1469 2 жыл бұрын
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
@DaveGrayTeachesCode 2 жыл бұрын
Glad I could help! 🚀🚀
@mauroconsolani2576
@mauroconsolani2576 2 жыл бұрын
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
@DaveGrayTeachesCode 2 жыл бұрын
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
@mauroconsolani2576 2 жыл бұрын
@@DaveGrayTeachesCode definitely the "rubber duck" method! Thanks again!
@sum41greekfun
@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
@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
@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
@DaveGrayTeachesCode Жыл бұрын
You're welcome!
@ayushdedhia25
@ayushdedhia25 2 жыл бұрын
Hello sir, your teaching pace and the way of teaching is just awesome 🔥❤️ its much easy to understand even a complex topics 💯💯
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
Thank you for the kind words!
@caffeinated-pixels
@caffeinated-pixels 2 жыл бұрын
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
@DaveGrayTeachesCode 2 жыл бұрын
Glad to hear it! 🚀🚀
@mohammedhuzaifa8654
@mohammedhuzaifa8654 Жыл бұрын
The best guide for react ever. The attention to detail is just awesome. Thanks Dave
@DaveGrayTeachesCode
@DaveGrayTeachesCode Жыл бұрын
Glad it was helpful!
@nirmalhasposted
@nirmalhasposted 6 ай бұрын
You have explained the concepts to the core. This video has really helped me to understand those . Thank you Really helpful..
@feyisayoamujoyegbe4238
@feyisayoamujoyegbe4238 10 ай бұрын
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🤟🤟🔥🔥
@kirillzlobin7135
@kirillzlobin7135 Жыл бұрын
Great and clear explanation without filler words. Amazing
@praveengopu9325
@praveengopu9325 2 жыл бұрын
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
@DaveGrayTeachesCode 2 жыл бұрын
Keep making progress! 🚀
@smeuj
@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
@faris.abuali
@faris.abuali 2 жыл бұрын
Thank you so much, Mr. Dave. I love your videos and your way of teaching 🧡 Great tutorials! concise and informative 👏🏻
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
Thank you, Faris!
@Getfit-us
@Getfit-us 2 жыл бұрын
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
@DaveGrayTeachesCode 2 жыл бұрын
Thank you, Chris! 💯
@gilbertnyantakyi3950
@gilbertnyantakyi3950 Жыл бұрын
Just one tutorial from you and i am loving it. SUBSCRIBED.
@juandaniel6726
@juandaniel6726 2 жыл бұрын
You can't imagine how much I appreciate this great tutorial. Thank you Sir for sharing your knowledge.
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
Glad it was helpful! 💯🚀
@JokeAdeyanju
@JokeAdeyanju 10 ай бұрын
Dave gray made me who i am today. Blessings ❤.
@kirillzlobin7135
@kirillzlobin7135 Жыл бұрын
The playlist on how to use Chrome Dev Tools would be awesome. Please, consider to do it someday...
@BilalTufail-nw9gs
@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
@DaveGrayTeachesCode Жыл бұрын
Glad it was helpful!
@shubhamnagota
@shubhamnagota Жыл бұрын
the best detailed explanalation of RR6 and Role based control.
@DaveGrayTeachesCode
@DaveGrayTeachesCode Жыл бұрын
Thank you!
@ramziosta
@ramziosta 2 жыл бұрын
perfect timing, as I am going through the same concept and setting up a Bank App!
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
Glad it was helpful! 🚀
@iwilliamsi
@iwilliamsi 2 жыл бұрын
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
@DaveGrayTeachesCode 2 жыл бұрын
You're welcome!
@shawn.builds
@shawn.builds 2 жыл бұрын
Another banger. I'm going one by one through this series and this one was great too!
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
Glad to hear that, Shawn! 🚀
@hamidabdolrahimi4606
@hamidabdolrahimi4606 Жыл бұрын
Thank you man. Awesome, best tutorial ever. Keep it up
@-massimami-
@-massimami- Жыл бұрын
Thank you Dave, these guides are awesome and have helped me a lot 😊
@DaveGrayTeachesCode
@DaveGrayTeachesCode Жыл бұрын
Glad to hear!
@lucasbertoldo5062
@lucasbertoldo5062 Жыл бұрын
Thank you very much! This is exactly what I've been looking for.
@DaveGrayTeachesCode
@DaveGrayTeachesCode Жыл бұрын
Glad I could help!
@onigbindedavid6630
@onigbindedavid6630 Ай бұрын
U made me understand jwt totally 🎉❤❤❤
@realarslan33
@realarslan33 Жыл бұрын
Best video ever on authorization
@allanbr.8308
@allanbr.8308 Жыл бұрын
Thank you, Dave. Very useful and well structured course
@DaveGrayTeachesCode
@DaveGrayTeachesCode Жыл бұрын
Glad it was helpful!
@WTFAnyNameWorks
@WTFAnyNameWorks Жыл бұрын
Man, this was AWESOME! Thank you very much ❤️❤️
@DaveGrayTeachesCode
@DaveGrayTeachesCode Жыл бұрын
You're very welcome!
@okeydonkey19
@okeydonkey19 2 жыл бұрын
you saved my life!! I love your tutorial!!!! Can't be better :D
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
Glad I could help! 🚀
@MASTERRAGE
@MASTERRAGE 2 жыл бұрын
Great as always, please keep on uploading, I love your content !
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
Thank you! I'll keep going! 💯🙏
@legenuspl4906
@legenuspl4906 2 жыл бұрын
great content, you teach like Tim Buchalka from Australia :) keep up nice work and thank you
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
You're welcome! 🙏
@brendenferkans6846
@brendenferkans6846 2 жыл бұрын
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
@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.
@asdasd-jg1re
@asdasd-jg1re Жыл бұрын
Somehow my auth would not change update after setAuth is called. However, it updates if I browse through my app 1~2 times. After hours of searching on google, I solved this with useEffect, put useNavigate inside there and made auth as dependency. So when auth is updated by setAuth, useEffect navigated the user. It works perfectly fine now but I wonder why yours worked. I went to your source code and copied the code almost exactly but it did not work as intended.
@DaveGrayTeachesCode
@DaveGrayTeachesCode Жыл бұрын
The "almost exactly" might be it - hard to compare if not exact. React Router has had some updates. Check my source package.json to see if you were using the same version or maybe an update is the difference.
@digitalmarketingtutor
@digitalmarketingtutor 2 жыл бұрын
Hi, I want to say a very big THANK YOU for this video and your channel.
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
You're welcome, Adeyemi! 🙏🙏
@kamrandvr4045
@kamrandvr4045 Жыл бұрын
Thank you, Dave. Very useful.
@bojjabheemaraju387
@bojjabheemaraju387 2 жыл бұрын
Thanks Dave. This video cleared all my doubts. 😊
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
Great to hear! 💯
@jonathanhammond5563
@jonathanhammond5563 3 ай бұрын
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!
@fernandocoluchi5013
@fernandocoluchi5013 Жыл бұрын
I discovered my new favourite channel
@DaveGrayTeachesCode
@DaveGrayTeachesCode Жыл бұрын
Glad to hear that, Fernando! 💯
@dilrukshiperera-yo5br
@dilrukshiperera-yo5br Ай бұрын
thanks for the advice.
@ibrahimacanada
@ibrahimacanada 2 жыл бұрын
Very good Lesson and clear Many thanks Dave !
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
Glad you liked it! 💯
@andysimmons8730
@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
@DaveGrayTeachesCode Жыл бұрын
Glad it helped! Yes, my Discord: discord.gg/neKghyefqh
@vnm_8945
@vnm_8945 2 жыл бұрын
exactly what I need it, thank you very much!
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
You're welcome! 💯
@szymonrojek6480
@szymonrojek6480 2 жыл бұрын
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
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
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
@khandoor7228
@khandoor7228 Жыл бұрын
Awesome just what I was looking for
@DaveGrayTeachesCode
@DaveGrayTeachesCode Жыл бұрын
Glad to hear!
@zee_axis
@zee_axis 2 жыл бұрын
mind blowing tutorial. Hatsoff to you. You are a Superhero for me..
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
Thank you for the kind words, Balaguru! 🙏🙏
@90kidsgamezone76
@90kidsgamezone76 Жыл бұрын
thank you dave need more react video
@DaveGrayTeachesCode
@DaveGrayTeachesCode Жыл бұрын
Currently, 55 React videos in my playlist: kzfaq.info/sun/PL0Zuz27SZ-6PrE9srvEn8nbhOOyxnWXfp
@abdulwahab7555
@abdulwahab7555 Жыл бұрын
Awesome stuff Dave!
@DaveGrayTeachesCode
@DaveGrayTeachesCode Жыл бұрын
Glad you enjoyed it!
@pinakadhara7650
@pinakadhara7650 2 жыл бұрын
Great video! A HOC like withRole() which handles all the authorisation logic would be handy.
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
Thank you!
@rockfox5
@rockfox5 2 жыл бұрын
Excellent tutorial as always, Dave. Unfortunately react router doesn’t work well with Nextjs which I built my frontend on.
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
Thank you! I'd like to do some work with NextJS later this year 💯
@pratikmadekar5728
@pratikmadekar5728 Жыл бұрын
Thanks Dave for you valuable knowledge sharing it' very helpful to me
@tallitvak5325
@tallitvak5325 Жыл бұрын
Thanks for the last tip!
@DaveGrayTeachesCode
@DaveGrayTeachesCode Жыл бұрын
You're welcome!
@dovakiin0
@dovakiin0 2 жыл бұрын
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
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
You're welcome!
@pmioduszewski
@pmioduszewski 2 жыл бұрын
This channel is GOLD
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
Thank you! 💯🚀🚀
@sejanas
@sejanas 2 жыл бұрын
Very detailed and informative content. Thank You
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
You're welcome!
@Victor-wh9bs
@Victor-wh9bs Жыл бұрын
This video helps me a lot. ThankU so much.
@DaveGrayTeachesCode
@DaveGrayTeachesCode Жыл бұрын
Glad to hear that!
@TurboBet_
@TurboBet_ 5 ай бұрын
You are the GOAT!
@caducoder
@caducoder 2 жыл бұрын
Thanks a lot Dave! You helped me a lot!
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
Glad to hear that, Carlos!
@imkir4n
@imkir4n Жыл бұрын
Thanks Dave...learned some new things ❤️
@DaveGrayTeachesCode
@DaveGrayTeachesCode Жыл бұрын
Glad I could help!
@johnpaulpineda2476
@johnpaulpineda2476 2 жыл бұрын
This is what i exactly needed. Thank you so much!
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
Glad it helped! 🚀
@johnpaulpineda2476
@johnpaulpineda2476 2 жыл бұрын
@@DaveGrayTeachesCode Can you do like this but with firestore and reactjs
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
@@johnpaulpineda2476 I'm sure it is possible. Adding to the list!
@johnpaulpineda2476
@johnpaulpineda2476 2 жыл бұрын
@@DaveGrayTeachesCode Im waiting. :)
@addictedgamerclashofclansa1251
@addictedgamerclashofclansa1251 3 ай бұрын
Can the client not manipulate allowedRoles in components? How can we resolve those potential issues?
@adila4658
@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?
@HonestPleb
@HonestPleb 4 ай бұрын
Hey Dave, Great playlist btw. I just completed both NodeJS and React Auth playlists. I had a doubt lingering in my mind. Please answer that whenever you can. It seems we can access protected routes which do not require to fetch data from the backend even after the access token get expired. If so, is this something to be concerned about? Should I make it this way that I ask the backend for a new access token every time I open any protected route? or is this overkill?
@MohamedElnagar-dz8ub
@MohamedElnagar-dz8ub 4 ай бұрын
Thanks a lot 🥰
@medAmineRg
@medAmineRg 2 жыл бұрын
thanks dave for that great tutorial
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
You're welcome! 💯
@husseinj7505
@husseinj7505 8 ай бұрын
Hello Dave, Everything is working fine in my code but after I login and refresh the browser, it redirects me to the login page and the useAuth object is being reset. Can you help me please ? Thanks.
@jafeta.7553
@jafeta.7553 Жыл бұрын
Loved it, thank you very much.
@DaveGrayTeachesCode
@DaveGrayTeachesCode Жыл бұрын
You're welcome!
@nikolozmacharashvili1212
@nikolozmacharashvili1212 6 ай бұрын
dave I think you should get some helpers that will devote themselves to answering the questions of your students. I would love to be one and Id do it for free. I came up with this since sometimes there are things which you dont explain, that I want to know
@saadarman4718
@saadarman4718 8 ай бұрын
Wonderful as usual.
@ricardopellecer7670
@ricardopellecer7670 7 ай бұрын
Hi Dave, this is exactly what I needed! Thanks a lot!. I just noticed that if I create a user that is not authorized for certain page and I look for that page directly in the browser search bar instead of using a button like you do, I get redirected to the home page, instead of the unauthorized one. Do you know why is this happening and how could I change it? Once again, thanks a lot for the help!!
@Photoficaj
@Photoficaj 8 ай бұрын
Hi Dave, your video is amazing, but i have ad doubt, i am creating an app which has front end with react and backend on express with apis, now , for authorization of the API i have JWT implemented correctly with passport jwt, but how can i implement stateful session with passport local strategy for the front end? i am very blurry there. Example: when the JWT expires the API requests are unauthorised, but the application doesn't logs the user out as JWT is stateless, therefore the use can still access the protected routes with no data(as the data is fetched from the API). Can you help?
@bhavyajain638
@bhavyajain638 5 ай бұрын
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.
@divyanshmalik5512
@divyanshmalik5512 Жыл бұрын
great tutorial a complete life saver👍👍
@DaveGrayTeachesCode
@DaveGrayTeachesCode Жыл бұрын
Glad it helped!
@agroforestryconsultancyroz3157
@agroforestryconsultancyroz3157 2 жыл бұрын
Im enjoying the video man. Thanks
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
Glad to hear it! 🙏💯
@kolynzb
@kolynzb 2 жыл бұрын
THank you this is exactly what i am looking for
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
Glad I could help! 💯
@violabg
@violabg 2 ай бұрын
how would you handle auth now with RouterProvider and loaders?
@ThefirstAbraham
@ThefirstAbraham 2 ай бұрын
Hi Dave, I want to say thank you for your tutorials. They have really been a great help to me. I do have a question about this tutorial: It seems that once the user logs in, whether the user's access token has expired or not, the user still has access to the protected routes. Is this how it is meant to be? I am aware that the user doesn't have access to the backend API though.
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 ай бұрын
It's been a couple of years since I made this, so I would need to look again to confirm - but you can check the token expiry on the client as well if you want. My memory says you should be redirected already.
@muhammedcansoy6131
@muhammedcansoy6131 8 ай бұрын
excellent thank you !
@yashwanthsrinivas
@yashwanthsrinivas Жыл бұрын
What a great tutorial.
@DaveGrayTeachesCode
@DaveGrayTeachesCode Жыл бұрын
Thank you!
@danieltkach2330
@danieltkach2330 Жыл бұрын
God bless you Dave.
@DaveGrayTeachesCode
@DaveGrayTeachesCode Жыл бұрын
🙏💯🚀
@uvblogs1563
@uvblogs1563 Жыл бұрын
By saving the role information in context API, each time the page refresh the data will be lost and you need to login again to continue.
@DaveGrayTeachesCode
@DaveGrayTeachesCode Жыл бұрын
This is correct. You should keep going in this series where I cover persist login in a separate video.
@MaHyxa
@MaHyxa 2 ай бұрын
I cant understand what am i doing wrong. I did everything step by step, i'm able to setAuth in AuthProvider through Login page, but once i reload page all values are gone. RequireAuth always getting auth empty. How does it store values in your case? I cant find any line of code about storage of auth values. From where RequireAuth is getting auth values if it's gone after navigating from Login page?
@UrBrothaInChrist
@UrBrothaInChrist 2 ай бұрын
Got the same problem and it only worked when i stored them in the localstorage
@user-dc4kw7ho9b
@user-dc4kw7ho9b 4 ай бұрын
nice thank you
@vampiroast
@vampiroast Жыл бұрын
Thanks Dave very good tutorial!! 1984 and 5150? are you a Van Halen fan? 🤘🤘
@DaveGrayTeachesCode
@DaveGrayTeachesCode Жыл бұрын
Of course! 🤘🎸And you're welcome!
@msalam4248
@msalam4248 2 жыл бұрын
Thank you so much dave....
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
Welcome!
@njorogekamau3820
@njorogekamau3820 6 ай бұрын
Thanks. This helped me alot
@od1ez
@od1ez 2 жыл бұрын
Amazing stuff! Thanks!
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
You're welcome! 🙏💯
@pambisichone4592
@pambisichone4592 Жыл бұрын
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
@DaveGrayTeachesCode
@DaveGrayTeachesCode Жыл бұрын
I do hope to cover React Native in the future. 🚀💯
React User Login and Authentication with Axios
31:37
Dave Gray
Рет қаралды 554 М.
Can A Seed Grow In Your Nose? 🤔
00:33
Zack D. Films
Рет қаралды 32 МЛН
Bony Just Wants To Take A Shower #animation
00:10
GREEN MAX
Рет қаралды 6 МЛН
CHOCKY MILK.. 🤣 #shorts
00:20
Savage Vlogs
Рет қаралды 27 МЛН
Every React Concept Explained in 12 Minutes
11:53
Code Bootcamp
Рет қаралды 553 М.
How To Manage User Roles In Node.js
22:45
Web Dev Simplified
Рет қаралды 307 М.
React Redux Toolkit Tutorial for Beginners | Learn Modern Redux
20:49
You don't need a frontend framework
15:45
Andrew Schmelyun
Рет қаралды 119 М.
Learn React Router v6 In 45 Minutes
46:20
Web Dev Simplified
Рет қаралды 548 М.
React protected routes in 4 minutes
4:03
Appwrite
Рет қаралды 10 М.
No-Nonsense Backend Engineering Roadmap
10:16
Codebagel
Рет қаралды 187 М.
Can A Seed Grow In Your Nose? 🤔
00:33
Zack D. Films
Рет қаралды 32 МЛН