Welcome back.
In this video, let's see how we can implement what is called protected route.
If you are coming from React router down version five and below to achieve this concept, unless we
write a lot of code that is using what is called high order function but with react router dom and above
is pretty easy to implement what is called protected route.
So let's see inside the component where we added what is called the off route.
So this off route is going to render a component and before it renders, we are going to make some conditions
to check that if a user is logged in, then we can go ahead and allow the user to see that component.
So let's see how we are going to implement that for this one.
We are going to mimic real authentication system.
So here we go inside the off route, let's declare a variable and call this one as is.
Log in and by default is false.
So let's see, this component is going to render a different component.
So here we need to structure that as children.
And this is a special method from React.
The children simply means a component that is going to pass into this specific component is called children.
So next step is that we are going to move everything inside here and now we are going to render the
children, let's save it.
And now it has reformatted to one line and it is same as this.
So don't worry.
Next is less.
Implement our logic.
Before this component renders we are going to implement our custom logic here.
So here we go.
We are going to check if a user is not logged in.
We are going to exit this component from rendering.
So here we need to send something to the user that hey, please log in.
So here we can render any components.
But to make it simple, let's render a simple text.
And here you will see access.
Denied.
Great.
So now it's time to use it.
We are done with the implementation.
So here, how are we going to use it?
And it's pretty simple.
Let's get back to the app.
And now let's require the off route.
And it's down here and it has been imported as that.
So here we go.
If we are familiar with back end development that is expressed, how do we protect roots?
The concept here is the same.
But for this we are going to wrap this component with any component that we want to protect.
So let's say that I want to protect the admin page, this one.
So this is how we are going to do everything remains the same with the exception of how we are handling
this.
So now we are going to cut the component from here and here we are going to return.
Let's have some space and we bring in the off route.
And as that remember, any component we pass in here will be available as children inside this.
So before this particular component, which is this one returns, we need to check this condition first.
If this one is false, then we are going to return from this component and render this.
So here we go.
So our pass in the admin component, which is admin pitched perfect.
So now let's check it out.
We are done with the authentication or how we can protect roots.
So back here, let's click on admin and you can see that access denied.
But if I change the force to true, let's save it now.
Let's see when I refresh it.
You can see that I got at main page.
So this logic might come from way back end and then we can save the logging user into context or you
state or local storage.
And next is we can put it and then check if a user is logged in and we have a section to talk about
how we can develop a complete authentication system using React and then Node.js.
So now everything works fine.
In the next video, we are going to customize the component using some CSS.
And again, because this section is only by CSS, I'm going to provide the component and then CSS for
you and I'll provide as part of resources for this particular section of video.
So the next step is that let's go ahead and then implement this one.
When I click on put that I want to render all the product page.
So let's get into that in the next video.