1
00:00:00,180 --> 00:00:02,910
Beautiful, once we're done setting up our user context.

2
00:00:03,330 --> 00:00:10,620
Now let's take our party on the road and first, let's take a look where we are using that info.

3
00:00:11,100 --> 00:00:16,660
And of course, remember the component by the name of card buttons in there.

4
00:00:16,680 --> 00:00:20,250
We had a login button right next to the card.

5
00:00:20,640 --> 00:00:27,240
So what I would want, of course, is once I click on login button, I would want to try to log in like

6
00:00:27,270 --> 00:00:27,680
so.

7
00:00:28,020 --> 00:00:32,540
And then also once I have logged in, I would want to try to log out.

8
00:00:32,700 --> 00:00:33,070
Correct.

9
00:00:33,330 --> 00:00:39,690
So eventually we will set up this ternary operator where if we have logged in, then of course we have

10
00:00:39,690 --> 00:00:43,680
log out button and then we haven't logged in and we have a log in one.

11
00:00:44,010 --> 00:00:44,790
But for now.

12
00:00:45,690 --> 00:00:50,670
I would just want to set up both of these buttons and then showcase the values we're getting back from

13
00:00:51,450 --> 00:00:56,790
zero, and once we are on the same page, once we understand what we're getting back, then, of course,

14
00:00:56,820 --> 00:00:58,850
we'll set up our condition.

15
00:00:59,250 --> 00:01:03,570
So I'm going to navigate right now to my card buttons.

16
00:01:03,960 --> 00:01:05,590
So let's hop over there.

17
00:01:05,920 --> 00:01:07,930
So card buttons component.

18
00:01:08,310 --> 00:01:15,190
Notice how I have used user context again, that is the hook and what values I would want to get.

19
00:01:15,390 --> 00:01:16,130
Well, let's see.

20
00:01:16,380 --> 00:01:23,760
I'm going to go with const and we're looking for login with redirect with online redirect.

21
00:01:25,370 --> 00:01:30,440
Redirect, that is my function, of course, then I would want to get my user, which, of course is

22
00:01:30,440 --> 00:01:38,710
going to be null, and then log out as well, and all of that is coming from use user context and mine,

23
00:01:38,750 --> 00:01:46,880
where I have the button for the login, of course, and the functionality actually to log in the zero

24
00:01:47,180 --> 00:01:51,470
and side by side, I'll set up a button as well for the log again.

25
00:01:51,700 --> 00:01:56,060
Eventually there's going to be a binary operator for the time being.

26
00:01:56,420 --> 00:01:58,310
It's not going to be type submit.

27
00:01:58,880 --> 00:02:06,310
We're going to go here with a button and the class name will be exactly the same off and then beaten.

28
00:02:06,590 --> 00:02:07,820
So that's not going to change.

29
00:02:07,830 --> 00:02:11,720
However, we're going to go with a log or functionality over here.

30
00:02:11,960 --> 00:02:18,080
That's why I'll say log out and we're going to go with F.A.A. user minus.

31
00:02:18,090 --> 00:02:22,820
Again, if you don't like my icons, feel free to change them around.

32
00:02:23,090 --> 00:02:27,290
So say it and remember that we won't be able to see them on a small screen.

33
00:02:27,530 --> 00:02:32,190
So if you want, you can navigate big screen or you can simply open up the card.

34
00:02:32,360 --> 00:02:33,100
Now, don't worry.

35
00:02:33,500 --> 00:02:35,120
Again, this is off.

36
00:02:35,450 --> 00:02:37,490
That's not what we care about right now.

37
00:02:38,270 --> 00:02:40,760
I have login and I have a login.

38
00:02:41,120 --> 00:02:45,960
So for the login button, I'm going to go here and we'll say on click.

39
00:02:46,000 --> 00:02:51,650
So once we click, then we would want to invoke login with a redirect.

40
00:02:51,950 --> 00:02:52,460
Correct.

41
00:02:52,760 --> 00:02:53,690
Let's save this one.

42
00:02:53,900 --> 00:02:55,910
And then for to log button.

43
00:02:56,360 --> 00:03:02,360
There's a bit more functionality because we need to invoke it and we need to pass and some data.

44
00:03:02,720 --> 00:03:09,920
So we'll say another and click and we'll set up, of course right now our function and let's invoke

45
00:03:09,920 --> 00:03:12,530
it, let's say logout function.

46
00:03:12,800 --> 00:03:16,910
But then in the log out, we just need to pass in the re-erect parameters.

47
00:03:17,180 --> 00:03:25,910
So we set up a object and the property we're looking for is a return to and we go with window location.

48
00:03:26,210 --> 00:03:33,200
And then Argin, again, this is exactly what they ask in the documentation, that's all.

49
00:03:33,620 --> 00:03:35,030
It's not like I'm making this up.

50
00:03:35,030 --> 00:03:38,120
So return to window, location, origin.