Perfect.
And once we're able to log in and log out now, I would want to restrict access to a checkout page based
on those values.
So if you remember, when we're setting up sidebar and a number, we added the checkout and I said that
the reason why we're adding it manually, because eventually we will check for the value of the user.
And of course, based on that value will either display or hide the link to a checkout page.
And also, we have the same setup.
We have products.
And it was in a card.
Remember, in court for the time being, we placed a link to a checkout.
But again, this is either going to be a button for logging or if, of course, the user has logged
in, then he or she can navigate to checkout.
So let's go one by one.
I'm looking for essentially three components, and that's why I will close everything that I have currently
open.
And we're looking for a bar that's going to be one that also I would want to do it in the sidebar.
And then the last one is going to be that card totals component as well.
So we're going to start with our number.
And remember, we have a link for the checkup, correct now, in this case, I must have skipped it,
but of course will create a link and I would want to grab my user context, since in there I have access
to my user.
Correct.
Again, we'll just check if the user exists, then we're displaying the link to check out.
If not, then we don't.
So we'll go here with use user context.
OK, awesome.
And where we have the on our list right next to my lunch, I'm going to set up my end operator where
I'm going to say if the user exists, only then must play the check out.
Like remember we need to use the operator, then we have a list.
So we go with list item and then set of the system, which is a link to.
And then we would want to navigate to a checkout page, for example, and check out online instead of
this link, let's just say a text of checkout.
Now you can set up your list, of course.
And what was the name of the file?
I believe we went we linked, right, so in the confidence you can add the checkout page and do some
nifty logical here where you're checking whether text might be matched to the checkout and then based
on that and the user displayed.
But I just find this approach a bit more straightforward since we just showcase, hey, if the user
exists, awesome.
Then we'll display the list item, if not than we want.
Now, again, if you have multiple things that you would want to toggle, yeah, you can probably consider
doing something programmatically over here.
But for one, I think it's good enough if we just say if the user exists, then display this list item
and once we go back, we should be able to see the checkout.
And of course we do.
So now we can navigate to check out Page.
And I would want to do the same thing essentially in the sidebar as well and not speed this up.
I will copy and paste a few things here and there.
So it's an aggregator.
We have sidebar, copy and paste, we have already use user contacts, so that's a good start.
And then again, we have the same thing we have to check out, and this one has closed sidebar.
So the only thing I need to add over here is my user.
So check for the value of that user.
And if it exists, then, of course, I would want to render my list item and.
Now we have it.
And the last thing is the card totals component, where, again, same deal.
We have used user contacts.
So let's go up, let's grab that sucker and let's access that value in the card totals.
And in this case, not only I would want to get the my user value, but I also do want to get a login
with redirect, because what we're going to do is set up a if statement, again, essentially a temporary
operator where if we don't have the user, then I would right away direct to the login option.
But if the user has logged in, then of course we display this nice link to a checkout.
Then let's scroll down to our checkout and let's set up our condition where we're going to go with my
user.
So if it exists, then of course I'll grab my link.
And copy and paste, if it doesn't exist, then I would want to set up a button that will navigate to
a log option.
So in this case, we're not going to go with lunk.
We're just going to go with a button and line on click is going to be that login with the redirect.
So I'll add a starling here.
Here's a class name, B10, and let's just right here login inside of the button.
Now I also want to add probably a type, so type will be equal to a button that's safe.
And now let's navigate to a court notice here I have option proceed to checkout and of course I can
navigate through that page.
However, if I log out now, of course, if we navigate to a cart, we'll see a log in option.
So again, same thing.
We have a login option in the number and we also have it in the card.
So once we click, we are directed to the auth zero setup page, where again are Google, Twitter,
or of course you can go with email as well.
So I'm going to go with Google just to showcase that.
Of course it will still work and we're back in Harrap or this time, of course, we can see that we
have logged in.