Custom Protected Route Component in React

VSCode Theme | Font → Material Theme Darker | Menlo, Monaco "monospace"

Let's build a custom protected route component in React. This is a component that you use when you want to protect some of your routes and require users to be signed in before accessing them. This is a very common pattern in React applications and it's good to know how to do it! We'll be using React Router for this, but you can implement this with any router of your choice.

[ayberk]

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]

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!

[FS-yqef]

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 <Navigate to="/signin" />;
}
return (
<div>
<h1>Guarded Layout</h1>
<Outlet />
</div>
);
};



export const protected_routes: RouteObject[] = [
{
path: '/',
element: <GuardedLayout />,
children: [
{
element: <PrivatePage />,
path: '/private',
}
]
}
];

[Svene]

The video production quality is top-tier.

[FarrukhKarimov]

Love your videos dude! So clean, so straight forward, always informative! Keep up the great work!

[sitrlax]

I have been dwelling deep in the react ecosystem and you are my go to channel. Love from India 🇮🇳 ❤

[rjwhite]

I've been doing mine different using react router's <outlet/> but I really like your method better.

[athena-alpha]

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

[Solo_playz]

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 <Outlet/> component in react?
Thank you in advance!

[Lykkos]

glad I'm subscribed to this channel!! thanks for all of this maan!!

[Admin-uphh]

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

[juanantoniovivaldy]

Why not using the <Outlet/> in ProtectedRoute components?, and just put that component to wrap entire private route, i think doing that, have more fastest way

[paleo]

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.

[mrluckyuncle]

Coincidentally just what I was about to implement. Thanks 🙂

[KayB]

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.

[nicolas_vl]

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

[xdjghvs]

Best Channel that talk about react keep going

[sadique_x_]

funny how I'll come across a video made today on something I'll learning today

[MadDogg]

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!

[kishoreramana]

If I am not wrong, ReactContext will be removed after page refresh, then how can we use context in that case ?