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!
@hoaxygen
5 ай бұрын
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!
@FarrukhKarimov
7 ай бұрын
Love your videos dude! So clean, so straight forward, always informative! Keep up the great work!
@FS-yq9ef
8 ай бұрын
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', } ] } ];
@cosdensolutions
8 ай бұрын
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?
@FS-yq9ef
8 ай бұрын
@@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.
@markosmk
4 ай бұрын
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
@athena-alpha
8 ай бұрын
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
@Svene7
8 ай бұрын
The video production quality is top-tier.
@rjwhite4424
8 ай бұрын
I've been doing mine different using react router's but I really like your method better.
@Solo_playz
8 ай бұрын
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!
@abdulrhmanburqaa328
7 ай бұрын
Any update?
@Lykkos-321
8 ай бұрын
glad I'm subscribed to this channel!! thanks for all of this maan!!
@Kay8B
4 ай бұрын
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.
@VINOTHKUMAR-ey1yg
7 ай бұрын
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..
@juanantoniovivaldy
8 ай бұрын
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
@lucasirondesouzacamargo1540
8 ай бұрын
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
@Js-Lovers
8 ай бұрын
Your understanding is no, please try to learn well about outlet components.
@Priva_C
3 ай бұрын
explain then genius @js-lovers
@Admin-up4hh
6 ай бұрын
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
@mrluckyuncle
8 ай бұрын
Coincidentally just what I was about to implement. Thanks 🙂
@nicolas_vl
6 ай бұрын
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
@sitrlax5536
8 ай бұрын
I have been dwelling deep in the react ecosystem and you are my go to channel. Love from India 🇮🇳 ❤
@Anteater23
2 ай бұрын
Why does navigate need to be a dependency in the useEffect hook?
@MadDogg3669
8 ай бұрын
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!
@ProdByGR
5 ай бұрын
This the best approach
@electrpaleo
8 ай бұрын
You should use Outlet with children, so you can wrap all protected routes under a layout with the router
@belkocik
8 ай бұрын
Would love to see in this video :D
@cosdensolutions
8 ай бұрын
yeah that would also work!
@ardianhotii
8 ай бұрын
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
@paleo3142
2 ай бұрын
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
2 ай бұрын
@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
@paleo3142
2 ай бұрын
@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.
@ardianhotii
2 ай бұрын
@@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
@paleo3142
2 ай бұрын
@@ardianhotii Good luck!
@sadique_x_
8 ай бұрын
funny how I'll come across a video made today on something I'll learning today
@muhammademirsyah8037
8 ай бұрын
Love all of your content, keep it up!
@gabrr.community
8 ай бұрын
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.
@kishoreramana1
8 ай бұрын
If I am not wrong, ReactContext will be removed after page refresh, then how can we use context in that case ?
@aakashsingh3711
6 ай бұрын
Can you please make a whole playlist of tutorial on react router dom? You make things very easy.
@AdemBenAbdallah-t6h
8 ай бұрын
Best Channel that talk about react keep going
@johndevnoza4223
8 ай бұрын
Love your videos. And i would love to see your teachings for next js
@cosdensolutions
8 ай бұрын
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
@johndevnoza4223
8 ай бұрын
@@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
@cosdensolutions
8 ай бұрын
Learn React first definitely! Then if you want go to nextjs, but you definitely need the React foundation
@johndevnoza4223
8 ай бұрын
@@cosdensolutions Thanks for the response
@romaghorjomeladze439
8 ай бұрын
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
@cosdensolutions
8 ай бұрын
yeah fair point
@romaghorjomeladze439
8 ай бұрын
Thank you for such a great channel. I love it 💙💙
@fedeabj
8 ай бұрын
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
@paleo3142
2 ай бұрын
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.
@UkrScript
8 ай бұрын
Thank you, was very helpful
@endlessnameless3613
8 ай бұрын
Just what I need right now
@asfandyar8088
8 ай бұрын
Love ❤ all of your videos sir. Your videos very helpful.thank you so much. Keep it up.
@paleo3142
2 ай бұрын
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.
@Pareshbpatel
4 ай бұрын
React: Protected Route Component, so clearly explained. Thanks, Darius {2024-05-30}
@Jacek2048
4 күн бұрын
Great! Now I don't need any auth in my backend, I can just use React.
@foveromw
6 ай бұрын
Quick and simple ❤
@saadniaxi1623
8 ай бұрын
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 😅
@lucasirondesouzacamargo1540
8 ай бұрын
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.
@cosdensolutions
8 ай бұрын
fair point, would work!
@belkocik
8 ай бұрын
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
@AkshayParkad
8 ай бұрын
wrap {children } in div or react fragment at the time of return {children}..otherwise it may cause a problem in some cases
@brNoMundo123
8 ай бұрын
Conteúdo incrível 👏👏👏👏
@gamechallengecategory5974
7 ай бұрын
carai brasileiro ta em todo lugar kkk
@juliaof.kataleko7595
4 ай бұрын
Best teacher ever!!
@dsilver1330
8 ай бұрын
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?
@cosdensolutions
8 ай бұрын
both are fine! Mern might be more versatile though
@osamakaram3942
5 ай бұрын
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.
@ericng3673
6 ай бұрын
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
@cosdensolutions
6 ай бұрын
You let the user state redirect. When user state changes, redirect. No race condition 😁
@royerrrrutti9903
Ай бұрын
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...
@ThanHtutZaw3
8 ай бұрын
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 ?
@tamaniphiri
8 ай бұрын
Solutions for modern day problems, great stuff🚀💯
@lucasmachado6447
8 ай бұрын
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?
@cosdensolutions
8 ай бұрын
nope, might actually be better because you can do it without an extra render
@mfion1
8 ай бұрын
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!
@TanNguyen-lj4zp
4 ай бұрын
Can you show me what extensions you are using?
@gabru4477
8 ай бұрын
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?
@adarsh_malviya
8 ай бұрын
I also want to know that
@cosdensolutions
8 ай бұрын
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
@juanantoniovivaldy
8 ай бұрын
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
@gabru4477
8 ай бұрын
@@juanantoniovivaldy i am getting roles from my login api but i think that is not a good approach i need something different
@gabru4477
8 ай бұрын
@@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
@heech6941
Ай бұрын
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
@RitikRaj-we2sc
7 ай бұрын
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.
@jeandedieuiradukunda6079
3 ай бұрын
you're amazing
@kalyaniingle8718
5 ай бұрын
Awesome content💚💚
@capt_vj
7 ай бұрын
is this a higher order component? the ProtectedRoute?
@cosdensolutions
7 ай бұрын
yeah
@jinshin.19
5 ай бұрын
Hi to use this I have to do this right? { path: "/", element: ( ), }, { path: "/read/:id", element: ( ), }, { path: "/update/:id", element: ( ), },
@davidhusted817
8 ай бұрын
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 😊
@usamaansari4231
4 ай бұрын
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?
@abdhelal
8 ай бұрын
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 😊
@cosdensolutions
8 ай бұрын
show a loading spinner until you get a user
@youssefkhaled2113
8 ай бұрын
can i do the same using a layout and add my routes under this layout that does the same protection logic ?
@cosdensolutions
8 ай бұрын
yeah
@HariharanArjunan-i1k
7 ай бұрын
please teach about how to add common header file in createBrowerRouter technique
@abhinasregmi9742
8 ай бұрын
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?
@cosdensolutions
8 ай бұрын
You can, but this was an example. Your isSignedIn should come from the backend
@abhinasregmi9742
8 ай бұрын
@@cosdensolutions ok thanks for the help
@iury664
8 ай бұрын
this way of import, import * as React from react isn't make the app be more weight?
@MohamedElguarir
8 ай бұрын
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.
@iury664
8 ай бұрын
@@MohamedElguarir thanks
@bizmich_
5 ай бұрын
how to protect /sign-in after when i signed-in?
@Ganievs09
8 ай бұрын
What if we want several routes to be protected? Should we Wrap all Components in ProtectedRoute Component or there is better way?
@cosdensolutions
8 ай бұрын
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
@Ganievs09
8 ай бұрын
Yeah I got what you mean. That's good approach. Thanks for your cutting edge videos.@@cosdensolutions
@fahiyejr1930
5 ай бұрын
How do I make my login page seperate, please help??
@megafirestar5030
8 ай бұрын
how to get that user i mean can you tell us the best practices for handling auth in react?
@juanantoniovivaldy
8 ай бұрын
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 🙏
@cosdensolutions
8 ай бұрын
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)
@UFO_808
8 ай бұрын
Bro where are you from, if it's not a secret? 😀
@cosdensolutions
8 ай бұрын
Originally from Romania
@UFO_808
8 ай бұрын
@@cosdensolutions Lol I'm from Serbia bro, I wisited Timișoara last winter 😄
@cosdensolutions
8 ай бұрын
I live in serbia atm hahaha, serbian gf
@UFO_808
8 ай бұрын
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? 😄
@VvazoLsky
7 ай бұрын
omagad , this is tutorial wish me search
@ignacioarriagadairiarte4338
8 ай бұрын
nice video
@qureshiowais6951
7 ай бұрын
why not keep it !user because it seem better as if any false will get back to sign in page!!!
@amitrana3053
8 ай бұрын
Osm learning
@chukwukaeze4736
2 ай бұрын
Why is bro recording in dark theme
@tanmay4l
8 ай бұрын
Custom hooks
@deepaksurya9742
8 ай бұрын
Start NextJs
@phamtienthinh1795
7 ай бұрын
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
Пікірлер: 132