Wow, I came here looking for anything that I had missed and this turned out to be exactly like the code I came up with. That's a nice boost in confidence!
The problem of this is that it will flicker sometimes because useEffect will fired after the component render, the best way is to use the Navigate Component and check if it's signin
I think you can improve this by implementing the outlet inside the protected route and just placing all the protected routes in the children prop in the browser router.
i set it up a bit differently, feel free to give some criticism if you think it is problematic. I create a layout that has a guard inside and then automatically all the children will be guarded as well because it depends on the parent. with this you can split your routes in seperate files as well. This will also not interfere if you have 2 layouts under root '/' because the protected routes are direct children of the layout import { Outlet, Navigate } from 'react-router-dom'; export function GuardedLayout() { const isAuthenticated = false; if (!isAuthenticated) { return ; } return ( Guarded Layout
I get what you did, and it does work, but I don't like it. Child routes are not meant to be used as protected routes. They have different use cases and this way is harder to understand what is going on. Also, what would happen if you actually need a child route that's not protected? Or if you need to do more customisation?
@@cosdensolutions well if you don't need it to be protected it would go under a different layout that doesn't have the validation. With this we can set rules for each layout on a top level.
Other option is use property loader, (but without property action) then you can checking if user is authenticated, if user is not authenticated, you can redirect to login page, the difference is that you can’t use Navigate or useNavigate, but can use redirect(“/login”) from api of react-user-dom, I think it’s most simple, but your logic with layouts I think is good. And I used too, other option is directly control redirect in AuthProvider, but separe logic of routes in a custom object is the best, because you can check if some page need some specific role from current user, in a app in production, we used a custom object, then all routes is more control, and is more simple fix it if there are errors
Hi Sir, just found our your channel and as a react js developer I find your videos very informative. Thank you for all the efforts, just a request, can we get a video on light and dark mode implementation in our react app Thank your
The Outlet component helps you render content that is shared between different child routes. The examples has no shered content, so no need to use Outlet. But in a more complex case, sure, use Outlet where it fits
Thanks for the awesome kinds of stuff! Could you please also create a video on how to create a proptected route for multiple routes may be 7-10 routes and how to handle code scalability using the component in react? Thank you in advance!
@@cosdensolutions well maybe i started to early to learn nextjs? Do u recomend that? Well im junior just learning everything and to be honest, when it comes to auth or any backend side then i hate coding. I just wanna learn enough to start working anywhere so then i can grow with real life concepts
this is the best tutorial I have ever seen for free.... good job brother I have one question how do we use this "isSignedIn" variable or how do we pass the data into it? I'm just confused in this part.
Please make a video where you demonstrate how to render a navbar with different routes based if user is logged in or not. And if is already logged in how to prevent him on hitting login route again! Thank you!
We don't blindly return children prop directly in ProductedRoute component , we should return the children prop if the user is already authenticated otherwise we should return null... During the mounting phase, the Homepage is trying to access the user object cause Error could happen because the effect is run after the mount... Hope this is correct..
This approach is good for static pages but with loaders it won’t work. Loaders run before the element mount so even if you redirect an http request would be dispatched. With loaders we can implement something like a loader middleware that checks auth, roles and so on and then return a normal react router redirect to redirect the page in a react router way
it's great content only thing is that maybe it would be better to include asynchronous authentication logic as well to have loading state too. it will change your HOC a bit
I would like to have a "standard" starter template to have auth logic like this ready to go. It's simple but when creating multiple projects and setting this up every time is unnecessary and time consuming I think . Very nice video and explanation in every step keep going
Just do it correctly once and you won't have to do it again. You can create a new repository called 'Project', and build it in a dynamic way so that it doesn't tie to any specific product. I did just this, and then have a Bash script that I run to launch a new app, which will create the new repository, modify any of the files using the new app name, deploy a database in a docker container and get everything ready to deploy. It literally takes 10 seconds for you to deploy a brand new app, with database, that you can immediately sign up for. And if you want to update something, go to your template repo, and make the changes there, so that all new apps will base it of that.
@ardianhotii I am open to discuss selling it if you're interested. I wouldn't usually do this, and I have tons of free public NPM libraries and repos of tools that we commonly use, but this Template has taken quite some time to perfection, and has been through 2 live products already. It just seems crazy to give it away for free without having the benefits of open sourcing it, considering all the time we put in it and that it includes literally everything to launch a new app. But this is also something you can do, it will just take you some time, and you'll have to prioritize clean modular code and ensure non of the components are too tightly related to any specific product.
@@paleo3142 I know I believe that putting the hard work for free sometimes its not worth it , but I'm not interested to buy thanks I appreciate it , I'm trying now to make my own nextjs (template - starter-kit) so I don't have to install all the same things over and over again for each project that's so time consuming and I feel you what you have been through because its not that easy to setup a big reusable project
Can you tell me how can i protect the three portals route i mean i have parent admin and teacher portal i need to make them protected based on token of different login how do i make these routes protected?
At that point, you could consider those two separate "apps", so you could make two components for each set of routes. Otherwise, you could add some logic in your auth provider or equivalent that sets the login state of each
I am trying to apply the validations from the loader since this way it is obviously functional but I use the loaders to load data, I use it with the tanstackquery library and well when the user is no longer authenticated what happens is that first it makes all the requests from the loaders which obviously fail and at the end it makes the one that validates that we have a user to protect the route...
amazing! However if user is being changed somehow, importing it already cause the component to be mounted thus we don't need to add another useEffect. The less useEffect the better the performance will be.
Very well made video, but I think most people watching this should first ask themselves if this actually makes sense to use in their application. When it comes to protected routes, auth validation, etc I personally don't think this should ever be handled client side as shown in the video, because you should protect your routes before it gets served to the client; and then work with "protected" components for more granular protection that might be related to show elements based on a user's plan features, role, etc.
If we have a loader function attached to the route, then how would we protect it ? If I use this logic then even though it redirects to the signin page still the loader would have made the network request already.
great 🖤. but make the check in the useEffect will work in the next render cycle and the children will be rendered before the check . is there is anyway to do the check before rendering any child -- if you console log any statement in the protected route it will work and then redirect to the login if the user is not auth.
I am working on a medical application to generate pdf. I am using firebase auth the problem is i am redirecting to "/user" If there is any user. But due to protected route i am unable to open other protrcted pages of application. As protected layout always send me to "/user". How can i solve this?
Hello do you have any idea why mine flickers the protected page for milliseconds and then navigate me back to the home page? It's working properly but the problem is it flickers the authpage
Is this the best way to "fully" protect routes based on roles and permissions in react? I have a nextjs frontend with a laravel backend and Im trying to make the auth work in server components (*just* for this, to check if a user has a role before showing any content). Since Im not being able to make it work because laravel sanctum (the auth im using) works with cookies and I just cant make it work, I was thinking of simply using react. Thanks
I believe that you should always handle core route protection at the server level.You can use Next middleware or use your layouts as long as they are server components.
Q1: why didn't we used the loader function? In real application, context is fetch from backend. We can check are redirect in loader function right? Q2: if I use this new method of createBrowserRouter, what's the best way to fetch context API? Loader runs too much 😅
I think I woudl approach this a little differently, instead of having a ProtectedRoute component, I would have created a custom hook useProtectedRoute. The difference here is that the component that requires protection would be resposible for protecting itself by calling useProtectedRoute.
Will you make a video how to create a custom hook: useProtectedRoute? In addition, you may bring Outlet Component from React Router on the floor and show how to use it in this case- @electrpaleo `You should use Outlet with children, so you can wrap all protected routes under a layout with the router`@@cosdensolutions
hi man! I just wanna ask, I want to freelancing web apps, I've learnt and understand html, css, js, react, tailwind, git. should I learn nextjs or mern?
i need to know this too, i mean there is a lot of video in youtube about a authentication, but i need more advanced like handle role permission route for each user, handle if the token is expired, and so on 🙏
will eventually make a video, but before then I'm actually building a course that will implement a complete authentication like this in great detail so you'll have everything you need (and more)
not really because when creating a production build the bundler you're using vite for instance does a lot of tree-shaking and optimizations, so any imports you're not actually using on your code get eliminated.
what about next.js protected route ? I mean I can use useEffect but , I would like to know best practice because it is displaying flash screen of protect page . Is middleware need ? Or SSR cookie check in SSR page ?
In a real application, the user is retrieved from a server, so initially, it will not be set (null). Therefore, in this scenario, redirection will occur before the fetch is settled. How would you solve this problem thank you 😊
I appreciate the informative content. Could you please create a video tutorial on integrating NextAuth.js with an Express backend? I'm specifically interested in a setup where the access_token and refresh_token are returned in the JSON response but not stored in cookies. Additionally, I'd like to see how the frontend can make server-side requests to the backend using the access token for authentication, with Axios. Thank you!
yeah you can wrap all of them, or what I do is I create an array of all of my routes, specify which ones are protected or not, and just map over the array and wrap the element so it applies to all of them (and then pass isProtected) boolean to the ProtectedRoute component
Is there any difference in terms of behavior if instead of calling the navigate() function inside useEffect, I simply return inside an if statement in the component body?
Is it possible for user to change the isSignedin from the browser i mean like we can change state values in react components from inspect. If yes how to prevent that?
This doesn't tell the full story. Here's the usual bug that you will encounter First, sign in in the sign page, there is usually a button with onClick to set the state to user context, then navigate to a protected route. The problem here is the race condition. How can you ensure the user state is set b4 you navigate to the ProtectedRoute? After all, state updates are all asynchronous. More than often, the state is not updated, and the user is directed to the protected route which brings them back to the sign in page again b4 the user is set. The same but the opposite happens for logout. Similarly, wasn't covered
Omg bro I cannot believe this.. 😂I can hear that you have a slight European accent so i thought maybe you are from Poland or Ukraine or something but I would never guess that u are Romanian living in my home country! 😂 Your videos have helped me with react, especially the one "useEffect - Simply explained", I was struggling with that one lol. How do you like it here, have you learned some Serbian phrases? 😄
We can summarize the logic of custom hook by using the nullish coalescing , I suggest this solution to make learners more deeply understand the logic operator in js 😊
This type of video kind drives me crazy, because it's REALLY helpful but fk useless at the same time U just show how to "block" a website but what about how to update the context and make us available to access to the route
Just today, needed a validation of my knowledge on protected routes. You came outta nowhere again. Thank you for the direct-to-the-point content!
Wow, I came here looking for anything that I had missed and this turned out to be exactly like the code I came up with. That's a nice boost in confidence!
Love your videos dude! So clean, so straight forward, always informative! Keep up the great work!
The problem of this is that it will flicker sometimes because useEffect will fired after the component render, the best way is to use the Navigate Component and check if it's signin
The video production quality is top-tier.
glad I'm subscribed to this channel!! thanks for all of this maan!!
I think you can improve this by implementing the outlet inside the protected route and just placing all the protected routes in the children prop in the browser router.
Why does navigate need to be a dependency in the useEffect hook?
Coincidentally just what I was about to implement. Thanks 🙂
i set it up a bit differently, feel free to give some criticism if you think it is problematic.
I create a layout that has a guard inside and then automatically all the children will be guarded as well because it depends on the parent.
with this you can split your routes in seperate files as well. This will also not interfere if you have 2 layouts under root '/' because the protected routes are direct children of the layout
import { Outlet, Navigate } from 'react-router-dom';
export function GuardedLayout() {
const isAuthenticated = false;
if (!isAuthenticated) {
return ;
}
return (
Guarded Layout
);
};
export const protected_routes: RouteObject[] = [
{
path: '/',
element: ,
children: [
{
element: ,
path: '/private',
}
]
}
];
I get what you did, and it does work, but I don't like it. Child routes are not meant to be used as protected routes. They have different use cases and this way is harder to understand what is going on. Also, what would happen if you actually need a child route that's not protected? Or if you need to do more customisation?
@@cosdensolutions well if you don't need it to be protected it would go under a different layout that doesn't have the validation.
With this we can set rules for each layout on a top level.
Other option is use property loader, (but without property action) then you can checking if user is authenticated, if user is not authenticated, you can redirect to login page, the difference is that you can’t use Navigate or useNavigate, but can use redirect(“/login”) from api of react-user-dom, I think it’s most simple, but your logic with layouts I think is good. And I used too, other option is directly control redirect in AuthProvider, but separe logic of routes in a custom object is the best, because you can check if some page need some specific role from current user, in a app in production, we used a custom object, then all routes is more control, and is more simple fix it if there are errors
I have been dwelling deep in the react ecosystem and you are my go to channel. Love from India 🇮🇳 ❤
I've been doing mine different using react router's but I really like your method better.
Love ❤ all of your videos sir. Your videos very helpful.thank you so much. Keep it up.
Hi Sir, just found our your channel and as a react js developer I find your videos very informative. Thank you for all the efforts, just a request, can we get a video on light and dark mode implementation in our react app
Thank your
You should use Outlet with children, so you can wrap all protected routes under a layout with the router
Would love to see in this video :D
yeah that would also work!
Why not using the in ProtectedRoute components?, and just put that component to wrap entire private route, i think doing that, have more fastest way
The Outlet component helps you render content that is shared between different child routes. The examples has no shered content, so no need to use Outlet. But in a more complex case, sure, use Outlet where it fits
Your understanding is no, please try to learn well about outlet components.
explain then genius @js-lovers
Thanks for the awesome kinds of stuff!
Could you please also create a video on how to create a proptected route for multiple routes may be 7-10 routes and how to handle code scalability using the component in react?
Thank you in advance!
Any update?
If I am not wrong, ReactContext will be removed after page refresh, then how can we use context in that case ?
Love all of your content, keep it up!
funny how I'll come across a video made today on something I'll learning today
Conteúdo incrível 👏👏👏👏
carai brasileiro ta em todo lugar kkk
Love your videos. And i would love to see your teachings for next js
I'm still on client side React for now, will evaluate later on what direction to take but definitely could end up doing some for sure
@@cosdensolutions well maybe i started to early to learn nextjs? Do u recomend that? Well im junior just learning everything and to be honest, when it comes to auth or any backend side then i hate coding. I just wanna learn enough to start working anywhere so then i can grow with real life concepts
Learn React first definitely! Then if you want go to nextjs, but you definitely need the React foundation
@@cosdensolutions Thanks for the response
this is the best tutorial I have ever seen for free.... good job brother
I have one question how do we use this "isSignedIn" variable or how do we pass the data into it? I'm just confused in this part.
Just what I need right now
Please make a video where you demonstrate how to render a navbar with different routes based if user is logged in or not.
And if is already logged in how to prevent him on hitting login route again!
Thank you!
Best Channel that talk about react keep going
We don't blindly return children prop directly in ProductedRoute component , we should return the children prop if the user is already authenticated otherwise we should return null...
During the mounting phase, the Homepage is trying to access the user object cause Error could happen because the effect is run after the mount...
Hope this is correct..
Thank you, was very helpful
This approach is good for static pages but with loaders it won’t work. Loaders run before the element mount so even if you redirect an http request would be dispatched. With loaders we can implement something like a loader middleware that checks auth, roles and so on and then return a normal react router redirect to redirect the page in a react router way
it's great content only thing is that maybe it would be better to include asynchronous authentication logic as well to have loading state too. it will change your HOC a bit
yeah fair point
Thank you for such a great channel. I love it 💙💙
This the best approach
React: Protected Route Component, so clearly explained. Thanks, Darius
{2024-05-30}
Can you show me what extensions you are using?
Can you please make a whole playlist of tutorial on react router dom? You make things very easy.
I would like to have a "standard" starter template to have auth logic like this ready to go. It's simple but when creating multiple projects and setting this up every time is unnecessary and time consuming I think . Very nice video and explanation in every step keep going
Just do it correctly once and you won't have to do it again. You can create a new repository called 'Project', and build it in a dynamic way so that it doesn't tie to any specific product. I did just this, and then have a Bash script that I run to launch a new app, which will create the new repository, modify any of the files using the new app name, deploy a database in a docker container and get everything ready to deploy. It literally takes 10 seconds for you to deploy a brand new app, with database, that you can immediately sign up for. And if you want to update something, go to your template repo, and make the changes there, so that all new apps will base it of that.
@paleo3142 yeah thanks it would be great, is that repo pubilc so I can look at it or you have it private , I would like to have the setup you have
@ardianhotii I am open to discuss selling it if you're interested.
I wouldn't usually do this, and I have tons of free public NPM libraries and repos of tools that we commonly use, but this Template has taken quite some time to perfection, and has been through 2 live products already.
It just seems crazy to give it away for free without having the benefits of open sourcing it, considering all the time we put in it and that it includes literally everything to launch a new app.
But this is also something you can do, it will just take you some time, and you'll have to prioritize clean modular code and ensure non of the components are too tightly related to any specific product.
@@paleo3142 I know I believe that putting the hard work for free sometimes its not worth it , but I'm not interested to buy thanks I appreciate it , I'm trying now to make my own nextjs (template - starter-kit) so I don't have to install all the same things over and over again for each project that's so time consuming and I feel you what you have been through because its not that easy to setup a big reusable project
@@ardianhotii Good luck!
Quick and simple ❤
Can you tell me how can i protect the three portals route i mean i have parent admin and teacher portal i need to make them protected based on token of different login how do i make these routes protected?
I also want to know that
At that point, you could consider those two separate "apps", so you could make two components for each set of routes. Otherwise, you could add some logic in your auth provider or equivalent that sets the login state of each
I think role_id is needed for doing that, so u can make some logic to navigate the user by his role to the right portal routes
@@juanantoniovivaldy i am getting roles from my login api but i think that is not a good approach i need something different
@@cosdensolutions i added roles in protected routes admin for admin routes likewise parent and teacher but that logic is not a good approach i think
I am trying to apply the validations from the loader since this way it is obviously functional but I use the loaders to load data, I use it with the tanstackquery library and well when the user is no longer authenticated what happens is that first it makes all the requests from the loaders which obviously fail and at the end it makes the one that validates that we have a user to protect the route...
amazing! However if user is being changed somehow, importing it already cause the component to be mounted thus we don't need to add another useEffect. The less useEffect the better the performance will be.
Very well made video, but I think most people watching this should first ask themselves if this actually makes sense to use in their application. When it comes to protected routes, auth validation, etc I personally don't think this should ever be handled client side as shown in the video, because you should protect your routes before it gets served to the client; and then work with "protected" components for more granular protection that might be related to show elements based on a user's plan features, role, etc.
If we have a loader function attached to the route, then how would we protect it ? If I use this logic then even though it redirects to the signin page still the loader would have made the network request already.
great 🖤.
but make the check in the useEffect will work in the next render cycle and the children will be rendered before the check .
is there is anyway to do the check before rendering any child
-- if you console log any statement in the protected route it will work and then redirect to the login if the user is not auth.
is this a higher order component? the ProtectedRoute?
yeah
I am working on a medical application to generate pdf. I am using firebase auth the problem is i am redirecting to "/user" If there is any user. But due to protected route i am unable to open other protrcted pages of application. As protected layout always send me to "/user". How can i solve this?
please teach about how to add common header file in createBrowerRouter technique
Hello do you have any idea why mine flickers the protected page for milliseconds and then navigate me back to the home page? It's working properly but the problem is it flickers the authpage
how to manage that issignedin value?
How do I make my login page seperate, please help??
Great! Now I don't need any auth in my backend, I can just use React.
can i do the same using a layout and add my routes under this layout that does the same protection logic ?
yeah
Is this the best way to "fully" protect routes based on roles and permissions in react?
I have a nextjs frontend with a laravel backend and Im trying to make the auth work in server components (*just* for this, to check if a user has a role before showing any content).
Since Im not being able to make it work because laravel sanctum (the auth im using) works with cookies and I just cant make it work, I was thinking of simply using react.
Thanks
I believe that you should always handle core route protection at the server level.You can use Next middleware or use your layouts as long as they are server components.
Awesome content💚💚
Q1: why didn't we used the loader function? In real application, context is fetch from backend. We can check are redirect in loader function right?
Q2: if I use this new method of createBrowserRouter, what's the best way to fetch context API? Loader runs too much 😅
how to protect /sign-in after when i signed-in?
I think I woudl approach this a little differently, instead of having a ProtectedRoute component, I would have created a custom hook useProtectedRoute.
The difference here is that the component that requires protection would be resposible for protecting itself by calling useProtectedRoute.
fair point, would work!
Will you make a video how to create a custom hook: useProtectedRoute? In addition, you may bring Outlet Component from React Router on the floor and show how to use it in this case- @electrpaleo `You should use Outlet with children, so you can wrap all protected routes under a layout with the router`@@cosdensolutions
hi man! I just wanna ask, I want to freelancing web apps, I've learnt and understand html, css, js, react, tailwind, git. should I learn nextjs or mern?
both are fine! Mern might be more versatile though
how to get that user i mean can you tell us the best practices for handling auth in react?
i need to know this too, i mean there is a lot of video in youtube about a authentication, but i need more advanced like handle role permission route for each user, handle if the token is expired, and so on 🙏
will eventually make a video, but before then I'm actually building a course that will implement a complete authentication like this in great detail so you'll have everything you need (and more)
Hi to use this I have to do this right?
{
path: "/",
element: (
),
},
{
path: "/read/:id",
element: (
),
},
{
path: "/update/:id",
element: (
),
},
this way of import, import * as React from react isn't make the app be more weight?
not really because when creating a production build the bundler you're using vite for instance does a lot of tree-shaking and optimizations, so any imports you're not actually using on your code get eliminated.
@@MohamedElguarir thanks
what about next.js protected route ? I mean I can use useEffect but , I would like to know best practice because it is displaying flash screen of protect page . Is middleware need ? Or SSR cookie check in SSR page ?
In a real application, the user is retrieved from a server, so initially, it will not be set (null). Therefore, in this scenario, redirection will occur before the fetch is settled. How would you solve this problem thank you 😊
show a loading spinner until you get a user
I appreciate the informative content. Could you please create a video tutorial on integrating NextAuth.js with an Express backend? I'm specifically interested in a setup where the access_token and refresh_token are returned in the JSON response but not stored in cookies. Additionally, I'd like to see how the frontend can make server-side requests to the backend using the access token for authentication, with Axios. Thank you!
What if we want several routes to be protected? Should we Wrap all Components in ProtectedRoute Component or there is better way?
yeah you can wrap all of them, or what I do is I create an array of all of my routes, specify which ones are protected or not, and just map over the array and wrap the element so it applies to all of them (and then pass isProtected) boolean to the ProtectedRoute component
Yeah I got what you mean. That's good approach. Thanks for your cutting edge videos.@@cosdensolutions
Is there any difference in terms of behavior if instead of calling the navigate() function inside useEffect, I simply return inside an if statement in the component body?
nope, might actually be better because you can do it without an extra render
Is it possible for user to change the isSignedin from the browser i mean like we can change state values in react components from inspect. If yes how to prevent that?
You can, but this was an example. Your isSignedIn should come from the backend
@@cosdensolutions ok thanks for the help
This doesn't tell the full story. Here's the usual bug that you will encounter
First, sign in in the sign page, there is usually a button with onClick to set the state to user context, then navigate to a protected route.
The problem here is the race condition. How can you ensure the user state is set b4 you navigate to the ProtectedRoute? After all, state updates are all asynchronous. More than often, the state is not updated, and the user is directed to the protected route which brings them back to the sign in page again b4 the user is set.
The same but the opposite happens for logout. Similarly, wasn't covered
You let the user state redirect. When user state changes, redirect. No race condition 😁
Solutions for modern day problems, great stuff🚀💯
Bro where are you from, if it's not a secret? 😀
Originally from Romania
@@cosdensolutions Lol I'm from Serbia bro, I wisited Timișoara last winter 😄
I live in serbia atm hahaha, serbian gf
Omg bro I cannot believe this.. 😂I can hear that you have a slight European accent so i thought maybe you are from Poland or Ukraine or something but I would never guess that u are Romanian living in my home country! 😂 Your videos have helped me with react, especially the one "useEffect - Simply explained", I was struggling with that one lol. How do you like it here, have you learned some Serbian phrases? 😄
Why is bro recording in dark theme
wrap {children } in div or react fragment at the time of return {children}..otherwise it may cause a problem in some cases
Best teacher ever!!
We can summarize the logic of custom hook by using the nullish coalescing , I suggest this solution to make learners more deeply understand the logic operator in js 😊
you're amazing
why not keep it !user because it seem better as if any false will get back to sign in page!!!
omagad , this is tutorial wish me search
Custom hooks
nice video
Start NextJs
Osm learning
This type of video kind drives me crazy, because it's REALLY helpful but fk useless at the same time
U just show how to "block" a website but what about how to update the context and make us available to access to the route
Which is the most important part
First
Congrats!