In this video, let's highlight the link.
For example, log in and register after a user has log in and look out for an authorized user.
So let's get started.
So for this, we have two ways of achieving it.
One is we can pass the login details from the context API into a component or we can take the login
user from the local storage and use that one as a check.
But because we have a central place for managing state, let's handle everything inside the context.
So inside the would component and then the context and then the of context here let's pass in the log
in user details.
That is a user of here.
So here I'm going to pass what is called user off.
And lucky for us, we have it already.
So next step is that inside enough bar?
I can structure this one and I'm going to be pretty easy for us.
Right?
So inside here, let's structure the user off.
And now this one going to be as a check.
The way this works is that we have different lanes for mobile and different lanes for the desktop.
So for us to know if you're on mobile, on desktop, let me add some here to see that I'm on the desktop
link or mobile links.
Yeah, indeed.
So this links are for desktop.
Yeah.
For whom it's going to be available for all log in and the non authorized users.
But for this one I transaction and dashboard, unless you log in.
So we are going to crack this one from here and we are going to make a check.
If you are off, then go ahead and then display those components.
So let me put them inside a fragment like that and here I would paste that.
Great.
So I can remove this fragment from here and this one from here.
Go save it.
And now let's have a look where as to see the links.
Even though I have log out if I check my state here, I can see there is no user here.
So let's console.log the user off and let's see what we are going to have on that and going to be as
user of let's see console and indeed we have an object with this property.
So by default this is true because we have some properties inside the objects.
So for this one we are going to use user auth dot token.
Great.
So let's see here.
So come back here, we can assign a specific token.
I see this one as token and then for me state and then I want to grab the user off and then on that
I want the token property.
So now I'm going to use this one as a check.
So inside now by here I will go ahead and restructure the token.
Let's move this one from here.
And now for checking.
Let's replace with token and you can see that now it is gone.
The same thing applies to look out to.
Let's also make a check.
So here, look out.
Where are you?
Here you are.
So I'm going to cut the button from here and make a check.
If there is token, it means that you are log in and then we can go ahead and then display the button.
And that is it.
Yeah, it's gone forever.
Likewise this transaction here.
But for this button here, you will come back to it later on.
So now we are done with a desktop one.
So if I reduce the browser window like this one and let's see, let me collapse this one and I click
on this link, you can see that I see different link and this links are for mobile.
So here let's look at the mobile one to.
So here.
Yeah, you can see I gave it a comment called mobile.
So here we are going to make the same check.
So let's cut this one and check if you are, log in and it goes like this as we did.
If there is token, then it means you are looking.
So go ahead and render that link likewise and log in for this one.
If you are not log in then we want to show this link.
So here too, let's provide the actual link to the register and here is going to be to property.
Great.
So this to link, if you are not log in then we want to show that.
So here, if there is no token, it means that this user hasn't log in, then go ahead and then render
this to the component that is a log in and register.
Have a look.
Indeed I have lockout out so I see log in and then register and for log out is going to be for logging
users only.
So here if we have to again and then go ahead and then display the pattern.
Yeah.
So let's see.
Great.
So if I look in so let me refresh it and let's look in as John, it's signed and let me check the links
and there you go, I can see that.
But thing this link isn't working because we are not adding the event listener on the log are button
on mobile.
So log out here.
Let's add the event listener on it as on click and here is going to be as log.
Look out.
User action.
So let's try to look out from here.
And indeed, it's.
We log out.
Great.
So the next step is that let's work on the registration of a user for the client side.