1
00:00:00,150 --> 00:00:06,900
And once we have wrapped our whole application in our zero provider and of course our want to set up

2
00:00:06,900 --> 00:00:15,990
my user contacts now, I have to be honest, though, once we set up this provider, technically you

3
00:00:15,990 --> 00:00:18,660
don't have to set up the user context.

4
00:00:19,140 --> 00:00:23,880
I just set it up because we already had structure for all the contacts.

5
00:00:24,240 --> 00:00:28,050
So I thought that it's just going to make sense if we do it in this case.

6
00:00:28,410 --> 00:00:36,360
But keep in mind that when it comes to of zero, you can just use the hook because all the information

7
00:00:36,360 --> 00:00:38,450
is going to be available in the hook.

8
00:00:38,670 --> 00:00:44,100
So if you have only one place, for example, in application when you would want to use the authentication,

9
00:00:44,940 --> 00:00:48,630
you can simply import the hook and then just check the values.

10
00:00:49,020 --> 00:00:56,850
It's also doable, but in my case, of course, I will set up my user contacts and then unwrap the application

11
00:00:57,180 --> 00:00:59,730
because I think that we already have structure for that.

12
00:00:59,970 --> 00:01:03,770
So we might as well do it with a user as well.

13
00:01:04,120 --> 00:01:09,510
Just keep in mind, technically, if you have only one place and you don't want to reuse it in multiple

14
00:01:09,510 --> 00:01:11,780
places, you can just use the hook.

15
00:01:12,080 --> 00:01:19,140
It's pretty convenient since remember, we are already wrapping the application anywhere in our auth

16
00:01:19,200 --> 00:01:19,730
provider.

17
00:01:20,100 --> 00:01:27,000
So where I have the user context before I set anything up, of course in the next year, I also would

18
00:01:27,000 --> 00:01:30,320
want to add it to my render.

19
00:01:30,570 --> 00:01:36,150
So where we have our provider in between the product provider and user provider.

20
00:01:37,210 --> 00:01:44,680
We're just going to go with user and provider here, and, of course, I need to set it up in the bottom

21
00:01:44,680 --> 00:01:45,130
as well.

22
00:01:45,490 --> 00:01:50,740
So in between product and provider, we set up our user provider.

23
00:01:50,950 --> 00:01:55,210
And then again, if we take a look at the docs, keep on scrolling, keep on scrolling.

24
00:01:55,210 --> 00:01:58,440
Notice this is the hook that they provide.

25
00:01:58,720 --> 00:02:02,020
And these are some of the values that we can get.

26
00:02:02,380 --> 00:02:06,490
If you remember in a previous application we used is uploading.

27
00:02:06,880 --> 00:02:11,980
Now, in this case, I will show you the prop and I'll show you the viewers and all that.

28
00:02:12,310 --> 00:02:14,950
But the way our app works right now.

29
00:02:15,790 --> 00:02:21,880
We actually don't need so in this application, in this project, we won't use this loading, but we

30
00:02:21,880 --> 00:02:23,770
did use in the previous one.

31
00:02:23,780 --> 00:02:29,950
So if you want to see exactly how it works and why it is important, then of course it's just going

32
00:02:30,160 --> 00:02:31,960
to the previous project.

33
00:02:32,200 --> 00:02:36,770
But in this case, we were able to create our app without it.

34
00:02:37,030 --> 00:02:43,930
So we have our hook and then of course, we just need to invoke it and then grab some values out of

35
00:02:43,930 --> 00:02:46,320
the data that is getting back.

36
00:02:46,660 --> 00:02:54,400
So I'm going to navigate back to my user contacts and I'm going to hop here where I have the actual

37
00:02:54,400 --> 00:02:57,630
component and we'll just set up our destruction.

38
00:02:58,000 --> 00:03:01,150
So we're getting the object back, the data object.

39
00:03:01,450 --> 00:03:04,460
And then I already know which properties I'm looking for.

40
00:03:04,720 --> 00:03:07,540
And again, if you want to double check with docs, you can definitely do so.

41
00:03:07,780 --> 00:03:15,930
But I already know that I would want to invoke the use of Zerok and the props or the data that I would

42
00:03:15,940 --> 00:03:19,060
want to get back is is authenticated.

43
00:03:19,500 --> 00:03:23,810
That essentially is going to be a flag when we have a login with redirect.

44
00:03:24,100 --> 00:03:28,150
So this is a function that performs login functionality.

45
00:03:28,450 --> 00:03:33,280
And of course we also have a longer function and we have a user.

46
00:03:33,670 --> 00:03:41,650
So this is going to let us know whether we have a user and what are the credentials for user as well

47
00:03:41,650 --> 00:03:42,910
as E is loading.

48
00:03:43,070 --> 00:03:49,360
Like I said, in this case, we won't use it, but I still would want to show you what values you see.

49
00:03:49,780 --> 00:03:52,670
And then, of course, I'm passing the value.

50
00:03:52,690 --> 00:03:53,740
So that's awesome.

51
00:03:53,980 --> 00:03:58,390
But I would want to set up the user just so we can see the values.

52
00:03:58,750 --> 00:04:03,760
So eventually there's going to be a tiny, tiny state value over here for user.

53
00:04:04,000 --> 00:04:10,810
And since I would want us to be on the same page, I will set up the user fact and I will invoke it

54
00:04:11,080 --> 00:04:14,590
every time the is authenticated changes.

55
00:04:14,860 --> 00:04:23,980
And I simply would want to log some data, some say log user and maybe let's add here a string as well

56
00:04:24,110 --> 00:04:27,040
as a user and let's copy and paste.

57
00:04:28,380 --> 00:04:36,540
By the way, I should have probably set up your templates and say user, and as you can see, I'm just

58
00:04:36,540 --> 00:04:42,460
logging the user that is coming from Arth zero and I'll do the same thing here.

59
00:04:42,480 --> 00:04:45,910
So let me delete this line here and I'll copy and paste.

60
00:04:46,290 --> 00:04:47,420
It is going to be three logs.

61
00:04:47,430 --> 00:04:53,700
One is going to be for the user, then will say is authenticated.

62
00:04:54,870 --> 00:04:59,270
Carried over here, and of course, this is going to be the value, again, that is coming from my hook.

63
00:04:59,520 --> 00:05:04,500
And lastly, I just want to show you the ease loading in this case.

64
00:05:04,500 --> 00:05:11,730
I'll select both of them is is loading and of course, time being.

65
00:05:11,760 --> 00:05:17,820
Remember that these should all be false, meaning, of course, the loading might be different, but

66
00:05:18,060 --> 00:05:23,580
for the user and is authenticated, this should return false because we haven't logged in.

67
00:05:23,940 --> 00:05:29,800
But when it comes to value now, I would want to nicely parse down some of the functions.

68
00:05:30,240 --> 00:05:37,130
So again, I'll set up my JavaScript object and I would want to parse down logged in function, log

69
00:05:37,140 --> 00:05:42,780
all function and eventually that is going to be a user in a state which I'm going to create in a second.

70
00:05:43,110 --> 00:05:45,000
So let's go with login.

71
00:05:45,000 --> 00:05:45,690
With redirect.

72
00:05:45,690 --> 00:05:47,520
So we're passing this down to the context.

73
00:05:47,790 --> 00:05:50,760
We're also passing a log functionality.

74
00:05:51,000 --> 00:05:54,070
And then, like I said, let's set up a state value.

75
00:05:54,300 --> 00:06:00,660
So in this case, I'm not going to set up a reducer because essentially there's only one value and I'm

76
00:06:00,660 --> 00:06:06,480
going to call this my user just so it's different than the user that we're getting back from zero.

77
00:06:06,810 --> 00:06:08,150
So we're not confused.

78
00:06:08,400 --> 00:06:12,000
And of course, I'm going to go with set my user.

79
00:06:12,000 --> 00:06:16,130
That is my function because I will invoke it here in the use of fact.

80
00:06:16,410 --> 00:06:21,480
And by default, I'll use my use state and I'll just set it equal to now.

81
00:06:21,810 --> 00:06:23,480
I'm down in the value.

82
00:06:23,670 --> 00:06:30,390
I'll also pass in my user and once we have a setup for user context.

83
00:06:31,480 --> 00:06:38,950
And of course, we will go to one of the components that will need the function for log out and log

84
00:06:38,950 --> 00:06:46,060
in and we'll test it out, and then the next video will set up our user and functionality where at least

85
00:06:46,060 --> 00:06:55,330
we can show or hide some elements or components based on whether we have logged in or we're still logged

86
00:06:55,330 --> 00:06:55,510
out.