With our alert functionality complete we can technically start working on our checkout page.
However there is a catch.
If we're going to head over to our application and if let's say even we're not going to log in we're
still going to be able to access the checkout page and you're probably saying no you cannot because
you don't have the link.
You don't have the option in the cart page as well as we can clearly see that we haven't logged in.
All right.
What if I would draw your mind grenade that if we're gonna head over to our URL and if I'm going to
delete and let's say for WE'RE GONNA TYPE our check out even when we haven't logged in yet still access
the page not something we would want to restrict correct otherwise what is the point of logging in if
user can just bypass that by heading over to a euro.
And the way we're gonna do that we're gonna set up a private or out.
So essentially there's gonna be a wrapper component for our out and then within that wrapper component
we're gonna decide what are we going to render.
Are we gonna render the checkout page.
And of course we're only going to render if the user has logged in or we're just gonna redirect the
user back to a log in page.
So if we're gonna take a look at the finished application you're gonna notice that if I log out and
even if I tried to go to a checkout page.
So let's say checkout.
And of course I need to type it properly.
Checkout page.
Check out page.
Then we're heading over to a signing.
So unless I have logged in I have no access to a check out page.
We're gonna draw back to our application.
I'm going to open up the sidebar first of all I'm going to close all the tabs that I have an open and
the component we're looking for is this private route not private route is within the component we have
the components and then we have the private route but we first need to import it within the app.
Yes.
So I'm gonna open up the app Jess and also we're gonna open up the private road and then as far as importing
within the app Jess we're going to scroll up a bit.
I'm gonna copy and paste and I'm just gonna change the name in here.
So it's not gonna be alert.
It is going to be a private private road.
Like so then we're gonna head down and find our checkout page.
Remember we had a route for The Checkout however in this case instead of her out we're gonna go with
private road.
So let's delete our component and let's write private route which at the moment again is not gonna do
anything because of course all the functionality is gonna be within the private road.
So we're gonna head over to a private road and the imports we're looking for are route and redirect.
So let me write the import route and redirect and that is coming from reactor road or down reactor over
nome.
And then we would want to get a user context as well because again we're gonna check for our token and
if the token is there then of course we know that the user has logged in even the token is not there
then essentially we're going to redirect our user.
So let's go with import and then we're gonna go with user context user context and that of course is
coming from and then we look in the context we look in the user file we have our imports awesome.
And then we're gonna start working on the private road.
And first I would want to access some props and what perhaps I'm looking for.
Well first of all I'm looking for children because keep in mind the private road right now has a child
of checkout.
And again depending on some values we would want to either show it or we're going to redirect the user.
But first I would want to access it on one for sure access my children.
So we're gonna head our back and remember we had the props object and then we could look for the children
and then there is another one.
Another one is a rest.
So we're gonna use a rest.
Operator again coming from me a sixth where I can just get rest of the props that are added to my private
road.
Currently the only prop we have is path but just so we get an idea I'm just gonna add some dummy ones.
Same name John.
And let's say a message is gonna be a hello.
And whenever as always you are in doubt just head over to a right and try to in fact console log what
you're gonna have as a rest because maybe the first time when you see this type of syntax you're like
OK what is happening so let's go with console lan let's console out the rest.
And now in this case of course we're gonna have to navigate to our checkout bridge.
So either you can log in or in my case I'm just going to use the URL again where I must say check out
and if we're going to head over to our dev tools and console we're gonna see a object on what is the
object within the object.
These are the properties.
So essentially what is happening we are collecting whatever parameters are being now the one that we're
really looking for is this parsimonious sports because this is going to direct our user to a proper
page.
But just because I wanted to show you what kind of values you're getting you know it is that each and
every prop that I'm adding to my profile is gonna be available within my arrest.
So that's the reason why we just collect the rest of them instead of writing them one by one we just
say dot dot dot and then just collect the rest of the parameters.
Or in our case of course that is the props and have access them in one object.
All right.
So what are we doing next.
Well we're going to first access the user so let's say cost user of course that is coming from.
React then use context and then we're using the user context.
So now we have access to the user.
And then we're going to return a route.
So we always always are going to turn this route.
We're going to go with a route that has of course our component.
Then we're going to remove the text.
We don't need this particular dummy text.
And then as far as the route first of all I would want to add my props on how I can access my props.
Well you're going to remember we had dot dot dot and then we had the rest.
So this is very similar to what we did previously remember when we were working with the product when
we had the item we were iterating over the items and I just spread out all the properties that I had.
Correct.
So whatever properties I had within that item they were added as a prop.
So that way within the product I could just access them one by one whether that was the image whether
that was title idea in price and this works exactly the same where I'm just collecting whatever props
have been added to my private world.
And then when I render my world component well just add them.
So essentially I just passed them from my private road to a route component and that's it.
And then for the road component we're gonna use a render prop when I say render and then it is going
to be a function.
So we're gonna pass it here as a function by the way let me close the sidebar and then within the function
we're gonna return.
So from the function we're going to turn and we're going to turn either the children so the children
that are within the private route which is the checkout page or we're gonna return a redirect.
So first we're gonna check the user.
We're gonna say user token we're gonna set up our ternary operator if the user token of course exists
then we're gonna go with children then we're going to render the children if the user token does not
exist if it is equal to no then of course it is false.
So now we can use a redirect can have a redirect then let's close out our component and then for redirect
we just need to say where we would want to redirect our user so in my case I'm going to go for logging
of course you can point to any page you'd want we're gonna save it and now what happens the moment we
refresh.
Notice how we head over to a logging bridge what is the reason.
Because we have restricted correctly the access.
So even if I'm trying to access the component or I guess in our case a page using the URL while we cannot
do that anymore because we set up a wrapper and again probably the most confusing part is this one where
essentially we're just gathering rest of the props and we're just setting up the road.
And then within the rules there is a render problem and then within that render Pop we just pass a function
and whatever we return from that function this is what we're going to render.
And then of course within the return we set up our ternary operator where we just check has the user
logged in if he or she has and of course just rendered the children and as always children could be
anything.
In our case it is check our page but you can set up the same functionality for any route you'd want.
Or if the user hasn't logged in then of course we're going to render the redirect component that just
points to some other page.