Nicely done.
And one more feature that I would like to add to our app is restricting the access of the checkout page
if we haven't logged in.
And you might be wondering, well, what are you talking about?
We are already hiring the checkout if the user hasn't locked them.
Yep, that is true.
But what do you think is going to happen if I log out and I can clearly see that since I have a login
option.
But if I go to the URL bar and if I just say check out.
Hmm, that's interesting.
So I can still navigate there, even though technically we restricted the access to the page.
Correct.
Because we were not showing the link.
Now the issue here is that we need to set up a private route where again, we're going to check whether
the user has logged in and then if he or she has logged and then, of course, we'll display the page.
If not, then we'll redirect back to the homepage.
Now, if you want to see where I got the info from, I can navigate to the single apps, the library
one and protect the route.
So this is where I got the idea.
Now, I combined a little bit with, of course, the reactor, but idea stays exactly the same.
So now I would want to go back to my application and I'm going to be looking for the app will start
over there.
And if you remember in the pages, there's also a page by the name of private route and just make sure
that you export from next year.
That's a must.
And then in the app, J.S., notice where we're getting all these components now instead of just showcasing
the checkout, using the route, I'll switch this around where I'll say that I wouldn't want to pass
in my private route.
So I have my component, which at the moment doesn't have anything in it.
But instead of route component, we are using this private or component.
And keep in mind that we're still passing the same props.
So that is not changing in here, though.
We have got an and essentially the main idea is following where in that private route I'll check for
my user.
If user exists, then I would just want to return my children, which in this case is the checkout.
If it doesn't exist, then I'll show you another way how we can redirect.
So in other words, I'll show you another way, how we can programmatically navigate to a different
page.
So let's save objects.
Make sure, of course, that you have a private route and all that.
Make sure that your app, the check out and then I'll close all my files now because we only want to
work in the private world and then notice the imports.
So I'm still importing the route from reacquired.
I'm not.
That is the same.
And then I have my redirect component.
So that is going to be that another way, how we can programmatically navigate to a different page.
If you remember when we looked at it the first time, I showed you the history that push and essentially
you can use either of these options.
And then, of course, I also have this use user context.
Now, how do we set up this private route?
Now, first of all, we need to understand that in the app, G.S., when we were setting up this private
route, we're still passing these props.
And that's extremely important because, of course, I want to use them, because if the user has logged
in, then I still want to direct the user to whatever page he or she wants to go on this case, check
out in order to collect those values.
We would want to go here with our programs and I'll say children.
Remember, that was that special one.
And the reason why I'm using children, because, of course, whatever is inside the private room,
that is something that I would want to return.
Because also keep in mind that we can use this private route in multiple places if we set it up correctly.
And then the second thing is the rest of the parameters and emotional address more essentially in JavaScript,
we have the operator by the name of operator.
Now we use this operator when we're working with function parameters, though, so don't confuse.
It would spread.
So spread essentially just spreads out all our values.
If we have an array, then it spreads out into individual items.
But rest operator and when we use it, of course in the function parameter does the opposite.
Where I said DataDot.
And then I can call it whatever I want, but a common convention is calling this arrest.
So this arrest is gathering is everything that we pass in over here.
So we grab the children.
This is going to be the check out, of course, and then we grab the rest of the parameters.
Now, if you would want to blog, you can definitely do so.
So I'm going to go with console log here.
And let's just take a look at the children first and also let's take a look at the first one.
So that is the name again.
You can call this Bugs Bunny.
It doesn't really matter.
Let's see.
Hopefully it's going to work.
So at the moment, I have private route.
And if I take a look at the console notice, I have object.
So, of course, this is going to be those children first and then I have the second one.
Correct.
So these are the rest of the parameters.
Now, why do I want those?
Because when I return the children eventually from this component, I would want to dump them in that
children as well.
Now, let's go back to our component.
And then I would want to grab my user, so let's go with Consed and I'm going to call this my user.
So the same way I'm structuring from user contacts.
OK, we get our hook and then I would want to set up the.
So now exactly like we have in Abcess for us the route I'm going to use my route.
So regardless of my user value, I'm going to go with route some still return this component, then
I'll spread out my rest.
So now I'll spread out those props that I gathered in rest again.
Keep in mind the rest operator.
This is a separate operator.
So here we collect them and then I spread them out on this route, just like we have, for example,
here, remember our exact path.
So now I'm just collecting here.
And I'm spreading them on the road, and then when it comes to route, I'm going to remove this text
and once I have spread out all my props, then I would want to set up a special prop by the name of
ORENDER and then inside of this prop, the runner up.
This is where I'll pass in the function first and say that there's going to be a function and function,
and then I'll say return.
And I would want to set up my condition again.
So ternary operator, my user.
And if the user exists, then I would want to grab the children, which of course in our case is the
check up.
Correct.
And if not, then we return a redirect.
So we go here with children.
And if the user is false and I'm not going to console like we should be in good shape as far as understanding
that.
And then we'll just go with the redirect component.
And we need to keep in mind that we redirect.
We just need to pass the two prop essentially where we're saying where we would want to go with this
component.
So we save it and now we should go back to home, even if we're just trying to access using the URL
bar.
Now, keep in mind, there's no way for us to access using the link.
We are actually protecting that in our neighboring sidebar and all that.
But we were able to navigate before using Uraba, but now we restricted the access so I can type all
day long and I'll be directed back to my homepage.
Why?
Well, because we have restricted around again one more time.
Let's try to login.
In this case, I'm going to use my Twitter option.
And if everything works correctly, we should see the check out and of course, I can navigate to a
checkout page.