1
00:00:07,180 --> 00:00:10,120
In this video, let's highlight the link.

2
00:00:10,120 --> 00:00:17,800
For example, log in and register after a user has log in and look out for an authorized user.

3
00:00:17,800 --> 00:00:19,210
So let's get started.

4
00:00:19,330 --> 00:00:22,130
So for this, we have two ways of achieving it.

5
00:00:22,150 --> 00:00:31,090
One is we can pass the login details from the context API into a component or we can take the login

6
00:00:31,090 --> 00:00:34,450
user from the local storage and use that one as a check.

7
00:00:34,720 --> 00:00:41,020
But because we have a central place for managing state, let's handle everything inside the context.

8
00:00:41,020 --> 00:00:50,530
So inside the would component and then the context and then the of context here let's pass in the log

9
00:00:50,530 --> 00:00:51,550
in user details.

10
00:00:51,550 --> 00:00:53,080
That is a user of here.

11
00:00:53,110 --> 00:00:56,080
So here I'm going to pass what is called user off.

12
00:00:56,080 --> 00:00:58,450
And lucky for us, we have it already.

13
00:00:58,480 --> 00:01:00,820
So next step is that inside enough bar?

14
00:01:00,820 --> 00:01:04,750
I can structure this one and I'm going to be pretty easy for us.

15
00:01:04,750 --> 00:01:05,319
Right?

16
00:01:05,349 --> 00:01:10,240
So inside here, let's structure the user off.

17
00:01:11,110 --> 00:01:14,020
And now this one going to be as a check.

18
00:01:14,050 --> 00:01:21,910
The way this works is that we have different lanes for mobile and different lanes for the desktop.

19
00:01:22,610 --> 00:01:29,810
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

20
00:01:29,810 --> 00:01:31,220
link or mobile links.

21
00:01:31,430 --> 00:01:32,050
Yeah, indeed.

22
00:01:32,060 --> 00:01:34,010
So this links are for desktop.

23
00:01:34,160 --> 00:01:34,880
Yeah.

24
00:01:35,330 --> 00:01:40,790
For whom it's going to be available for all log in and the non authorized users.

25
00:01:40,820 --> 00:01:46,340
But for this one I transaction and dashboard, unless you log in.

26
00:01:46,430 --> 00:01:52,070
So we are going to crack this one from here and we are going to make a check.

27
00:01:52,430 --> 00:01:58,150
If you are off, then go ahead and then display those components.

28
00:01:58,160 --> 00:02:05,570
So let me put them inside a fragment like that and here I would paste that.

29
00:02:05,960 --> 00:02:06,350
Great.

30
00:02:06,350 --> 00:02:10,370
So I can remove this fragment from here and this one from here.

31
00:02:11,000 --> 00:02:11,990
Go save it.

32
00:02:11,990 --> 00:02:15,570
And now let's have a look where as to see the links.

33
00:02:15,590 --> 00:02:21,440
Even though I have log out if I check my state here, I can see there is no user here.

34
00:02:21,440 --> 00:02:28,910
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

35
00:02:28,910 --> 00:02:38,570
user of let's see console and indeed we have an object with this property.

36
00:02:38,570 --> 00:02:43,700
So by default this is true because we have some properties inside the objects.

37
00:02:44,240 --> 00:02:49,130
So for this one we are going to use user auth dot token.

38
00:02:49,430 --> 00:02:49,790
Great.

39
00:02:49,790 --> 00:02:52,100
So let's see here.

40
00:02:52,490 --> 00:02:56,660
So come back here, we can assign a specific token.

41
00:02:56,660 --> 00:03:07,820
I see this one as token and then for me state and then I want to grab the user off and then on that

42
00:03:07,820 --> 00:03:09,920
I want the token property.

43
00:03:10,340 --> 00:03:13,010
So now I'm going to use this one as a check.

44
00:03:13,130 --> 00:03:17,360
So inside now by here I will go ahead and restructure the token.

45
00:03:17,510 --> 00:03:19,490
Let's move this one from here.

46
00:03:19,490 --> 00:03:21,140
And now for checking.

47
00:03:21,140 --> 00:03:26,000
Let's replace with token and you can see that now it is gone.

48
00:03:26,240 --> 00:03:28,250
The same thing applies to look out to.

49
00:03:28,250 --> 00:03:29,810
Let's also make a check.

50
00:03:30,020 --> 00:03:31,670
So here, look out.

51
00:03:31,670 --> 00:03:32,390
Where are you?

52
00:03:32,420 --> 00:03:33,500
Here you are.

53
00:03:33,770 --> 00:03:37,670
So I'm going to cut the button from here and make a check.

54
00:03:37,670 --> 00:03:43,850
If there is token, it means that you are log in and then we can go ahead and then display the button.

55
00:03:43,850 --> 00:03:45,140
And that is it.

56
00:03:45,260 --> 00:03:47,300
Yeah, it's gone forever.

57
00:03:47,450 --> 00:03:49,760
Likewise this transaction here.

58
00:03:49,760 --> 00:03:53,270
But for this button here, you will come back to it later on.

59
00:03:53,270 --> 00:03:55,400
So now we are done with a desktop one.

60
00:03:55,400 --> 00:04:02,870
So if I reduce the browser window like this one and let's see, let me collapse this one and I click

61
00:04:02,870 --> 00:04:08,000
on this link, you can see that I see different link and this links are for mobile.

62
00:04:08,210 --> 00:04:11,840
So here let's look at the mobile one to.

63
00:04:11,870 --> 00:04:12,890
So here.

64
00:04:12,890 --> 00:04:16,220
Yeah, you can see I gave it a comment called mobile.

65
00:04:16,220 --> 00:04:19,339
So here we are going to make the same check.

66
00:04:19,550 --> 00:04:26,420
So let's cut this one and check if you are, log in and it goes like this as we did.

67
00:04:26,690 --> 00:04:30,640
If there is token, then it means you are looking.

68
00:04:30,650 --> 00:04:36,290
So go ahead and render that link likewise and log in for this one.

69
00:04:36,680 --> 00:04:39,950
If you are not log in then we want to show this link.

70
00:04:39,950 --> 00:04:49,340
So here too, let's provide the actual link to the register and here is going to be to property.

71
00:04:51,170 --> 00:04:51,860
Great.

72
00:04:52,070 --> 00:04:56,930
So this to link, if you are not log in then we want to show that.

73
00:04:56,930 --> 00:05:04,940
So here, if there is no token, it means that this user hasn't log in, then go ahead and then render

74
00:05:04,940 --> 00:05:09,500
this to the component that is a log in and register.

75
00:05:09,530 --> 00:05:10,280
Have a look.

76
00:05:10,280 --> 00:05:17,810
Indeed I have lockout out so I see log in and then register and for log out is going to be for logging

77
00:05:17,810 --> 00:05:18,740
users only.

78
00:05:18,860 --> 00:05:26,750
So here if we have to again and then go ahead and then display the pattern.

79
00:05:26,870 --> 00:05:27,500
Yeah.

80
00:05:27,830 --> 00:05:28,850
So let's see.

81
00:05:29,450 --> 00:05:30,080
Great.

82
00:05:30,080 --> 00:05:38,480
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

83
00:05:38,480 --> 00:05:41,000
and there you go, I can see that.

84
00:05:41,000 --> 00:05:46,730
But thing this link isn't working because we are not adding the event listener on the log are button

85
00:05:46,730 --> 00:05:47,750
on mobile.

86
00:05:47,780 --> 00:05:49,790
So log out here.

87
00:05:49,790 --> 00:05:56,780
Let's add the event listener on it as on click and here is going to be as log.

88
00:05:58,180 --> 00:05:59,180
Look out.

89
00:05:59,200 --> 00:06:00,430
User action.

90
00:06:00,610 --> 00:06:03,350
So let's try to look out from here.

91
00:06:03,370 --> 00:06:04,510
And indeed, it's.

92
00:06:04,510 --> 00:06:05,620
We log out.

93
00:06:05,650 --> 00:06:06,200
Great.

94
00:06:06,220 --> 00:06:12,160
So the next step is that let's work on the registration of a user for the client side.