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: ua-cam.com/video/f2EqECiTBL8/v-deo.html - If you're just starting out with React, I suggest learning the basics first in my React JS for Beginners full course here: ua-cam.com/video/RVFAyFWO4go/v-deo.html
"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
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.
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.
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.
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. 👍
Your UA-cam 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
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.
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🙂
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
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
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!
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!
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 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
@@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.
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!
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🤟🤟🔥🔥
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!!
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.
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?
Hello, first of all thanks for this tutorial, and I would like to know how the accesstoken data api is made up, in order to understand the backend structure well.🧐🧐
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.
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.
I find all of your React videos to be clear and easy to understand. However, I'm still confused about which one to choose to watch. Thanks anyway. Can use this project with a PHP backend? instead of Node.js
Yes, you can use any backend REST API you choose to build. I have a React playlist on my channel that provides the videos in the order created. You can also look in the description of this video for links to other videos about auth in React.
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.
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.
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.
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.
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.
Hello, I'm newbie, just a question, i just want to make a page for the owner of the website and customer shouldn't access that page, even if they try to write the in address bar and it re-directs them to website. how is that possible? is it done the way u explained and showed in the video?
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?
Great tutorial. My only gripe is nobody uses JS for any serious work (if they do, they should stop). Why no TS if especially for commercial use JS is just a no-no?
Thank you! And I understand the TS request. I think about beginners or those just beyond beginners level first as I teach new students at university every year. I will provide Typescript content on my channel in the near future, but I will always introduce concepts first without it which lowers the entry level.
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?
Dear Dave, can you pls elaborate on why and how this line of code works. Const form = location?.state?.from?.pathname || “/“ my main concern is state.from part. I didn’t find an example of this even in the official doc. Why we didn’t use just location.pathname? Also, initially the state property is empty, but during my tests, the value of it seems always to be “/“. In what cases it will be different? In any case, it would be interesting to know more about the location object. Thanks)
Good question and so far the React Router v6 docs do not provide much on this. However, they do give a nice code example here: reactrouter.com/docs/en/v6/examples/auth ..After you read the info on that page, click their code example to launch it. You will see their LoginPage component uses this which is where I referenced it from.
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.
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: ua-cam.com/video/XBRLVRjZ3CQ/v-deo.html
@@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.
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
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.
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
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
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!
Hi Dave. This is just amazing. Next level detailing. I had one doubt regarding React router dom that, whenever I enter url manually, it gets redirected to the home page. What changes do I need to make inorder for me to get the correct components to be redered even by manually entering the URL and not only from the clicks to the navlinks
Entering a URL manually reloads the app. That is just how React Router and overall, React, works. They are single page apps pretending to be multi-page. If you keep going in this series (links in description), you will see how I handle this in the Persist Login tutorial.
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?
I'm new to authorization. Can you tell me if I can create authorization easily using react router or JWT tokens are better? BTW I'm using firebase for authentication, for backend expressJS and MongoDB
Learned a lot from this! Unfortunately across each route my auth state seems to get reset back to {}. Will look into it further and report back if I find anything
@@andrewvaldez71 keep going in this series. About two more videos and you will reach the persistent login video. I recommend avoiding local storage for auth data.
@DaveGrayTeachesCode im not seeing this issue anywhere, feels like im the only one with it? it says setAuth is not a function? everything is set up the same i have no idea why this error is popping, doesn't seem to make anysense. it pops on the login handleSubmit function...any fixes for this?
when i'm in admin panel index page that is allowed only to admin role and go to another protected route under admin protection and refresh the page it sends me back to admin index page...how to solve that?
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?
Not sure if this was discussed, but the auth loses its value when the page is reloaded, causing the user to effectively log out. Any solution to that? I think I have an idea, but wasn't sure if one existed already
Hello your code is perfect. I would like some assistance please I am using only password to authenticate instead of username, how do we modify the code in this case please? (We are pulling our code from json files). Thanks
Hi Dave! Thanks so much for your tutorial. I have a question. How did you pre-set those users with certain roles? In other words, the user I sign up is just a user not editor nor admin. How do I create an editor or an admin?
I didn't build an admin panel into the backend for this example, so instead, you could just edit the user data in MongoDB to add the desired roles. I should add an admin panel tutorial to show how to make changes to users. Good idea! 💯
I really liked your video. I've started on the series, thanks. I am having a weird issue though. After I login if I navigate to any other page and look at a break point in the RequireAuth component, the context value gets reset to an empty object and I can't access any protected pages. The only setAuth call is in Login. Do you have any tips as to what I should look for to figure out why this is happening?
Hi Dave, Thank you for the beautiful tutorial as always. what if I want the user to be sent to the pages they have the right to see and hide the pages they don't have access to. If you are an editor you will only see editors-allowed pages(different navigation menus for other users)?
You're welcome! You can structure your pages and specify which roles are allowed to see them in anyway you want. This is just one example but the structure is up to you.
Thanks for this tutorial Dave. I had a question, how would I approach setting field level permissions instead of just page/screen level? For example, on a particular page I have 5 textboxes and some roles can edit some and some cannot edit any. How would I approach a solution for this?
Great question! This is something I am doing in my upcoming MERN series, too. You need to evaluate the role(s) and conditionally show or enabled the inputs or buttons based on those roles. Pseudo-logic here, but basically: if (isAdmin) enable
Hi, Dave! Thanks for the video! Few questions: Is it safe to store user role in a Redux store? User can change it via Redux dev tools. Can we hide some admin menu items in the app for non-admin users?
You're welcome! You can do anything you want in your app so no worries on putting in admin options for users to change their own settings. Yes, you can store user roles in Redux and disable Redux devtools in your deployment. I show how to do that here: ua-cam.com/video/3QaFEu-KkR8/v-deo.html
Thanks Dave this is a great tutorial. I'm using the same route structure as you - one issue I'm having is that when I refresh it takes the user back to the login page, when I don't want this to happen as they have an access token. Any help on what I might be doing wrong/how to overcome this issue is appreciated :)
I just did a quick console.log of auth after refreshing and it's an empty object so I guess it makes sense for it to return to the login screen. But how do I overcome this?
Yes, state is reset in any React app when you refresh. It's reloading the app. Keep going in this playlist (link in description). Another tutorial covers the Persistent Login strategy.
So I get that someone can dig in to see roles but can they also modify their own roles? How would we create new users with roles is this done through a rest client mainly?
hello sir, can you provide ur backend code please? I just wanna know ur backend need to specify anything related to token or authentication , etc. or just a normal backend to add account and login.
Excellent, thank you David. One question. Is there any factor that would cause a delay in accessing the return value for the useAuth() hook? I have a problem where one particular route inside the list of RequireAuth routes is rendering without gaining access to the useAuth() object (ie when I console.log the return value of the useAuth() hook it reads null when rendered. As a result I get a redirect away from the page and can't view the desired content. This only happens on one component. I've set up that component the same as the other pages. Any ideas? I can also confirm its not limited to your protected routes solution. I had this same problem with my previous approach.
Really impossible for me to guess about your code & project. That said, if it works for you everywhere else, there must be something about the way you are implementing the one area that it is not working in. It's not the hook if you have it working elsewhere, but something about the structure or what you are trying to do.
Hi Dave Thank u so much for a wonderful tutorial. Helps me a lot. I am new to React and May I ask here, right after user logged in but user can still access log in page. How can we redirect user back to Home every time they try to access log in page? Thank you very much
I'm wondering if there could be a way to hide the user codes to prevent someone from getting a hold of them, because even if we don't specify what each code means, it's not gonna take too long for someone to figure out what they mean and then change the code and give a user access to a page it shouldn't have in the first place. The first thing that came to my mind was using the .env, but i'm not sure if it works.
I don't think the list of icons for the roles is a secret. The user role comes from the server anyway and is simply checked. And if a user can access a protected page, he will just get a broken application
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: ua-cam.com/video/f2EqECiTBL8/v-deo.html - If you're just starting out with React, I suggest learning the basics first in my React JS for Beginners full course here: ua-cam.com/video/RVFAyFWO4go/v-deo.html
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?
@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
"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
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.
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.
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.
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. 👍
Glad it was helpful! 💯
Your UA-cam 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
Thank you for the kind words! 🙏🙏
I so wish that I had found this course 6 months back. Absolute gem!
Thanks!
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.
Thank you, Simon. I appreciate your feedback! 🙏💯
Thanks Dave for these intermediate lectures. On UA-cam it's either beginners or too advanced good to see someone teaching intermediate stuff 👍
You're welcome! 💯
great video for refreshing my memory before applying for a job
Dude, I feel a little more confident in my understanding after each of your tutorials. You rock.
Right on! 🤘
I have followed three videos of this course, as of now. And they all were helpful.
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🙂
You're very welcome!
Sold in less than 30 minutes! Thank you for explaining these concepts with real life scenarios.
Glad it was helpful!
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
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
Glad I could help! 🚀🚀
The playlist on how to use Chrome Dev Tools would be awesome. Please, consider to do it someday...
You have explained the concepts to the core. This video has really helped me to understand those
. Thank you Really helpful..
The best guide for react ever. The attention to detail is just awesome. Thanks Dave
Glad it was helpful!
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!
Glad to hear it! 🚀🚀
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!
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! 💯
@@DaveGrayTeachesCode definitely the "rubber duck" method! Thanks again!
@@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
@@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.
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
Keep making progress! 🚀
Great and clear explanation without filler words. Amazing
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
You're welcome!
Hello sir, your teaching pace and the way of teaching is just awesome 🔥❤️ its much easy to understand even a complex topics 💯💯
Thank you for the kind words!
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!
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🤟🤟🔥🔥
Another banger. I'm going one by one through this series and this one was great too!
Glad to hear that, Shawn! 🚀
Just one tutorial from you and i am loving it. SUBSCRIBED.
the best detailed explanalation of RR6 and Role based control.
Thank you!
You can't imagine how much I appreciate this great tutorial. Thank you Sir for sharing your knowledge.
Glad it was helpful! 💯🚀
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!!
Thank you so much, Mr. Dave.
I love your videos and your way of teaching 🧡
Great tutorials! concise and informative 👏🏻
Thank you, Faris!
you have some great material! I also love the little details you add in while you are going through the code. keep it up!
Thank you, Chris! 💯
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.
Glad it was helpful!
Dave gray made me who i am today. Blessings ❤.
perfect timing, as I am going through the same concept and setting up a Bank App!
Glad it was helpful! 🚀
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!
You're welcome!
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?
Hello, first of all thanks for this tutorial, and I would like to know how the accesstoken data api is made up, in order to understand the backend structure well.🧐🧐
It's at the link in the description to my node.js course. It's the back end built in that course
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.
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.
I find all of your React videos to be clear and easy to understand. However, I'm still confused about which one to choose to watch. Thanks anyway. Can use this project with a PHP backend? instead of Node.js
Yes, you can use any backend REST API you choose to build. I have a React playlist on my channel that provides the videos in the order created. You can also look in the description of this video for links to other videos about auth in React.
@@DaveGrayTeachesCode Thanks Dave. I'll see
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.
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.
Thank you Dave, these guides are awesome and have helped me a lot 😊
Glad to hear!
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.
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.
Best video ever on authorization
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.
Hello, I'm newbie, just a question, i just want to make a page for the owner of the website and customer shouldn't access that page, even if they try to write the in address bar and it re-directs them to website. how is that possible? is it done the way u explained and showed in the video?
Thank you man. Awesome, best tutorial ever. Keep it up
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?
Glad it helped! Yes, my Discord: discord.gg/neKghyefqh
Thank you very much! This is exactly what I've been looking for.
Glad I could help!
Great tutorial. My only gripe is nobody uses JS for any serious work (if they do, they should stop). Why no TS if especially for commercial use JS is just a no-no?
Thank you! And I understand the TS request. I think about beginners or those just beyond beginners level first as I teach new students at university every year. I will provide Typescript content on my channel in the near future, but I will always introduce concepts first without it which lowers the entry level.
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?
Dear Dave, can you pls elaborate on why and how this line of code works. Const form = location?.state?.from?.pathname || “/“ my main concern is state.from part. I didn’t find an example of this even in the official doc. Why we didn’t use just location.pathname? Also, initially the state property is empty, but during my tests, the value of it seems always to be “/“. In what cases it will be different? In any case, it would be interesting to know more about the location object. Thanks)
Good question and so far the React Router v6 docs do not provide much on this. However, they do give a nice code example here: reactrouter.com/docs/en/v6/examples/auth ..After you read the info on that page, click their code example to launch it. You will see their LoginPage component uses this which is where I referenced it from.
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.
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: ua-cam.com/video/XBRLVRjZ3CQ/v-deo.html
@@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.
@@danieltkach2330 you're welcome. I changed it for the role specific routes. 💯
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
I do hope to cover React Native in the future. 🚀💯
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.
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
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
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!
Just invented by me. Any company may have their own codes. 1984 and 5150 are Van Halen albums! 🎸🤘
@@DaveGrayTeachesCode Nice!!
Hi Dave. This is just amazing. Next level detailing. I had one doubt regarding React router dom that, whenever I enter url manually, it gets redirected to the home page. What changes do I need to make inorder for me to get the correct components to be redered even by manually entering the URL and not only from the clicks to the navlinks
Entering a URL manually reloads the app. That is just how React Router and overall, React, works. They are single page apps pretending to be multi-page. If you keep going in this series (links in description), you will see how I handle this in the Persist Login tutorial.
Thank you, Dave. Very useful and well structured course
Glad it was helpful!
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?
I'm new to authorization. Can you tell me if I can create authorization easily using react router or JWT tokens are better? BTW I'm using firebase for authentication, for backend expressJS and MongoDB
Excellent tutorial as always, Dave. Unfortunately react router doesn’t work well with Nextjs which I built my frontend on.
Thank you! I'd like to do some work with NextJS later this year 💯
Learned a lot from this! Unfortunately across each route my auth state seems to get reset back to {}. Will look into it further and report back if I find anything
Found this is a feature not a bug. I’ll need to use localstorage
@@andrewvaldez71 keep going in this series. About two more videos and you will reach the persistent login video. I recommend avoiding local storage for auth data.
@DaveGrayTeachesCode im not seeing this issue anywhere, feels like im the only one with it? it says setAuth is not a function? everything is set up the same i have no idea why this error is popping, doesn't seem to make anysense. it pops on the login handleSubmit function...any fixes for this?
Great video! A HOC like withRole() which handles all the authorisation logic would be handy.
Thank you!
when i'm in admin panel index page that is allowed only to admin role and go to another protected route under admin protection and refresh the page it sends me back to admin index page...how to solve that?
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?
Got the same problem and it only worked when i stored them in the localstorage
Man, this was AWESOME! Thank you very much ❤️❤️
You're very welcome!
Not sure if this was discussed, but the auth loses its value when the page is reloaded, causing the user to effectively log out. Any solution to that? I think I have an idea, but wasn't sure if one existed already
Link in the description to the Persist Login video in this series.
great content, you teach like Tim Buchalka from Australia :) keep up nice work and thank you
You're welcome! 🙏
Thanks Dave very good tutorial!! 1984 and 5150? are you a Van Halen fan? 🤘🤘
Of course! 🤘🎸And you're welcome!
even if we logged in still we can access the login page using the url. Is that correct we still able to access the login page even after logged in?
Hello your code is perfect. I would like some assistance please I am using only password to authenticate instead of username, how do we modify the code in this case please? (We are pulling our code from json files). Thanks
Can the client not manipulate allowedRoles in components? How can we resolve those potential issues?
Hi Dave! Thanks so much for your tutorial. I have a question. How did you pre-set those users with certain roles? In other words, the user I sign up is just a user not editor nor admin. How do I create an editor or an admin?
I didn't build an admin panel into the backend for this example, so instead, you could just edit the user data in MongoDB to add the desired roles. I should add an admin panel tutorial to show how to make changes to users. Good idea! 💯
Thank you, Dave. Very useful.
HELP!!!!in registration from. ui there are no fields to set roles,how are the diferent roles set ???
I really liked your video. I've started on the series, thanks. I am having a weird issue though. After I login if I navigate to any other page and look at a break point in the RequireAuth component, the context value gets reset to an empty object and I can't access any protected pages. The only setAuth call is in Login. Do you have any tips as to what I should look for to figure out why this is happening?
Thank you, Tim. My best suggestion is to download my source code (available at resources link in description) and compare to yours for differences.
Hi, I seem to have the same problem, did you manage to solve it?
Hi Dave, Thank you for the beautiful tutorial as always. what if I want the user to be sent to the pages they have the right to see and hide the pages they don't have access to. If you are an editor you will only see editors-allowed pages(different navigation menus for other users)?
You're welcome! You can structure your pages and specify which roles are allowed to see them in anyway you want. This is just one example but the structure is up to you.
how would you handle auth now with RouterProvider and loaders?
Thanks for this tutorial Dave. I had a question, how would I approach setting field level permissions instead of just page/screen level? For example, on a particular page I have 5 textboxes and some roles can edit some and some cannot edit any. How would I approach a solution for this?
Great question! This is something I am doing in my upcoming MERN series, too. You need to evaluate the role(s) and conditionally show or enabled the inputs or buttons based on those roles. Pseudo-logic here, but basically: if (isAdmin) enable
Hi, Dave! Thanks for the video! Few questions: Is it safe to store user role in a Redux store? User can change it via Redux dev tools. Can we hide some admin menu items in the app for non-admin users?
You're welcome! You can do anything you want in your app so no worries on putting in admin options for users to change their own settings. Yes, you can store user roles in Redux and disable Redux devtools in your deployment. I show how to do that here: ua-cam.com/video/3QaFEu-KkR8/v-deo.html
@@DaveGrayTeachesCode Thank you, that's great additional moments!
Thanks Dave this is a great tutorial. I'm using the same route structure as you - one issue I'm having is that when I refresh it takes the user back to the login page, when I don't want this to happen as they have an access token. Any help on what I might be doing wrong/how to overcome this issue is appreciated :)
I just did a quick console.log of auth after refreshing and it's an empty object so I guess it makes sense for it to return to the login screen. But how do I overcome this?
Yes, state is reset in any React app when you refresh. It's reloading the app. Keep going in this playlist (link in description). Another tutorial covers the Persistent Login strategy.
I discovered my new favourite channel
Glad to hear that, Fernando! 💯
So I get that someone can dig in to see roles but can they also modify their own roles? How would we create new users with roles is this done through a rest client mainly?
Yes, the backend should handle those requests.
This video helped me alot thanks and i wanted to ask do you plan on doing a video on nextjs 13 app dir with role based auth and refresh token?
I have a full course on Next.js with the app router. I will be covering auth in Next.js soon.
@@DaveGrayTeachesCode amazing cant wait
you saved my life!! I love your tutorial!!!! Can't be better :D
Glad I could help! 🚀
hello sir, can you provide ur backend code please? I just wanna know ur backend need to specify anything related to token or authentication , etc. or just a normal backend to add account and login.
U made me understand jwt totally 🎉❤❤❤
Great as always, please keep on uploading, I love your content !
Thank you! I'll keep going! 💯🙏
I cant find the starter code in the repo .. I can find only the completed project
Hi Dave. Is there a video where you have written context/AuthProvider used in this video? Thank you
Yes, the links to all the videos in this series should be in the description.
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
You're welcome!
Hi Dave, Could you please create a course on react with typescript.
I have a Typescript series on my todo very soon list. 🚀
Do you have a Playlist for React Js upto this video?
7:40 whats the purpose of using the Layout and Outlet component?
Excellent, thank you David.
One question. Is there any factor that would cause a delay in accessing the return value for the useAuth() hook?
I have a problem where one particular route inside the list of RequireAuth routes is rendering without gaining access to the useAuth() object (ie when I console.log the return value of the useAuth() hook it reads null when rendered. As a result I get a redirect away from the page and can't view the desired content.
This only happens on one component. I've set up that component the same as the other pages. Any ideas?
I can also confirm its not limited to your protected routes solution. I had this same problem with my previous approach.
Really impossible for me to guess about your code & project. That said, if it works for you everywhere else, there must be something about the way you are implementing the one area that it is not working in. It's not the hook if you have it working elsewhere, but something about the structure or what you are trying to do.
Hi Dave Thank u so much for a wonderful tutorial. Helps me a lot. I am new to React and May I ask here, right after user logged in but user can still access log in page. How can we redirect user back to Home every time they try to access log in page? Thank you very much
In another recent comment I have answered this question. 💯
Thanks Dave. This video cleared all my doubts. 😊
Great to hear! 💯
I'm wondering if there could be a way to hide the user codes to prevent someone from getting a hold of them, because even if we don't specify what each code means, it's not gonna take too long for someone to figure out what they mean and then change the code and give a user access to a page it shouldn't have in the first place. The first thing that came to my mind was using the .env, but i'm not sure if it works.
I don't think the list of icons for the roles is a secret. The user role comes from the server anyway and is simply checked. And if a user can access a protected page, he will just get a broken application