Beautiful, once we're done setting up our user context.
Now let's take our party on the road and first, let's take a look where we are using that info.
And of course, remember the component by the name of card buttons in there.
We had a login button right next to the card.
So what I would want, of course, is once I click on login button, I would want to try to log in like
so.
And then also once I have logged in, I would want to try to log out.
Correct.
So eventually we will set up this ternary operator where if we have logged in, then of course we have
log out button and then we haven't logged in and we have a log in one.
But for now.
I would just want to set up both of these buttons and then showcase the values we're getting back from
zero, and once we are on the same page, once we understand what we're getting back, then, of course,
we'll set up our condition.
So I'm going to navigate right now to my card buttons.
So let's hop over there.
So card buttons component.
Notice how I have used user context again, that is the hook and what values I would want to get.
Well, let's see.
I'm going to go with const and we're looking for login with redirect with online redirect.
Redirect, that is my function, of course, then I would want to get my user, which, of course is
going to be null, and then log out as well, and all of that is coming from use user context and mine,
where I have the button for the login, of course, and the functionality actually to log in the zero
and side by side, I'll set up a button as well for the log again.
Eventually there's going to be a binary operator for the time being.
It's not going to be type submit.
We're going to go here with a button and the class name will be exactly the same off and then beaten.
So that's not going to change.
However, we're going to go with a log or functionality over here.
That's why I'll say log out and we're going to go with F.A.A. user minus.
Again, if you don't like my icons, feel free to change them around.
So say it and remember that we won't be able to see them on a small screen.
So if you want, you can navigate big screen or you can simply open up the card.
Now, don't worry.
Again, this is off.
That's not what we care about right now.
I have login and I have a login.
So for the login button, I'm going to go here and we'll say on click.
So once we click, then we would want to invoke login with a redirect.
Correct.
Let's save this one.
And then for to log button.
There's a bit more functionality because we need to invoke it and we need to pass and some data.
So we'll say another and click and we'll set up, of course right now our function and let's invoke
it, let's say logout function.
But then in the log out, we just need to pass in the re-erect parameters.
So we set up a object and the property we're looking for is a return to and we go with window location.
And then Argin, again, this is exactly what they ask in the documentation, that's all.
It's not like I'm making this up.
So return to window, location, origin.