1
00:00:00,210 --> 00:00:07,040
With our user context initial setup complete now we can set up our state values as well as the function.

2
00:00:07,110 --> 00:00:09,790
More specifically we're going to have user logging.

3
00:00:09,990 --> 00:00:13,920
So we're gonna set up a log and functionality as well as logo.

4
00:00:13,920 --> 00:00:19,440
So we're gonna have a link where we click on user log out function and then of course we'll just log

5
00:00:19,440 --> 00:00:20,760
out our function.

6
00:00:20,850 --> 00:00:23,760
Now we're going to start by setting up our user.

7
00:00:23,760 --> 00:00:26,990
Again we're gonna use or use state.

8
00:00:27,030 --> 00:00:32,460
So we're gonna go with cost then we're gonna go with user of course we're destruction that from the

9
00:00:32,460 --> 00:00:39,990
array set user and that is gonna be equal to react use state.

10
00:00:40,290 --> 00:00:45,900
And then as initial value for the time being I'm gonna pass in the object and that object is gonna have

11
00:00:45,900 --> 00:00:49,520
to values user name just gonna be equal to no.

12
00:00:49,980 --> 00:00:56,050
And then also a token that is also gonna be initially equal to know we're gonna say that.

13
00:00:56,060 --> 00:00:57,530
And now let's set up our functions.

14
00:00:57,780 --> 00:01:03,060
So like I said we're gonna have two functions one for logging in and the other one for logging out and

15
00:01:03,060 --> 00:01:08,760
I'm gonna name my functions user log in and user log on but again feel free to name your functions.

16
00:01:08,760 --> 00:01:10,380
However you would please.

17
00:01:10,380 --> 00:01:17,840
So I'm gonna go with const user log in and then this function is gonna get an object a user object I'm

18
00:01:17,850 --> 00:01:21,910
probably a million dollar question is Well where are we gonna get that object.

19
00:01:21,930 --> 00:01:28,410
Well if we're going to head over to a log in page notice we're getting a response and instead of just

20
00:01:28,620 --> 00:01:30,490
constant logging our response.

21
00:01:30,690 --> 00:01:33,100
Now we're gonna do a bit of destruction here.

22
00:01:33,270 --> 00:01:39,450
So we're gonna get the data that we're looking for from that giant object and we're gonna pass in our

23
00:01:39,450 --> 00:01:40,620
log in function.

24
00:01:40,620 --> 00:01:42,130
So again our user logging.

25
00:01:42,480 --> 00:01:48,050
That's where we're gonna get our user object and once we're gonna get our user object then we're gonna

26
00:01:48,060 --> 00:01:55,680
use set user and then we're gonna set new user but also we're gonna need to use a local storage because

27
00:01:55,680 --> 00:01:58,010
similarly like we did with card.

28
00:01:58,230 --> 00:02:00,130
Remember when we work with card context.

29
00:02:00,450 --> 00:02:04,470
Well I would want to process that data and we're going to use a local storage for that.

30
00:02:04,890 --> 00:02:13,170
So the moment we set user in our state we also are gonna do a local storage local storage then we have

31
00:02:13,170 --> 00:02:20,160
of course a method of set item and then we're going to set a user key and we need to pass in the value.

32
00:02:20,160 --> 00:02:25,260
So we're going to have a Jason we need to string a fi and we're going to pass in the same user object

33
00:02:25,580 --> 00:02:31,080
so the same user object that we're using in order to set the user locally for our state.

34
00:02:31,140 --> 00:02:36,990
We're also gonna persist in the local storage and then let's also write a user logout.

35
00:02:37,080 --> 00:02:43,770
So we're going to have a cost user logout and then this is going to be a function.

36
00:02:43,770 --> 00:02:49,800
It doesn't take any arguments and it's just going to clear everything that we have within a state.

37
00:02:49,830 --> 00:02:57,330
So let me write a set user and we're gonna go back to initial values where we have a object and the

38
00:02:57,330 --> 00:03:03,880
user name was not like so and then the token was not as well.

39
00:03:03,990 --> 00:03:09,540
Both of them were null and in local storage we're going to remove our item we're going to remove the

40
00:03:09,540 --> 00:03:10,570
user item.

41
00:03:10,710 --> 00:03:16,730
So let's write local storage remove item and we would want to remove the user.

42
00:03:17,490 --> 00:03:23,400
And if we're looking at it what is happening while we are setting everything in a local storage.

43
00:03:23,400 --> 00:03:30,420
So initially just like we did with cart we can set up the function correct where once we load our user

44
00:03:30,420 --> 00:03:36,630
context we can just check whether we have any values within the local storage because that way when

45
00:03:36,630 --> 00:03:42,360
we refresh the application or let's say user comes back while we're going to remember that instead of

46
00:03:42,360 --> 00:03:45,060
again every time starting from scratch.

47
00:03:45,180 --> 00:03:47,460
So I'm gonna leave this for your reference.

48
00:03:47,490 --> 00:03:51,960
I'm going to head over up here and by the way first I'm going to copy and paste that I guess that I'm

49
00:03:51,960 --> 00:03:57,270
just gonna comment this out as this is what we initially wrote but then we're going to set up the same

50
00:03:57,270 --> 00:03:59,680
function like we did with a cart.

51
00:03:59,820 --> 00:04:02,580
However in this case it's going to be the user.

52
00:04:02,580 --> 00:04:07,140
So it can be above the user context below the user context doesn't really matter.

53
00:04:07,140 --> 00:04:16,770
I'm going to have a function then the function name is gonna be get user from a local storage and don't

54
00:04:16,770 --> 00:04:23,520
ask me why I just sometimes like these long function names because it's somehow just explained to me

55
00:04:23,520 --> 00:04:28,980
better what is happening not that is a big deal of course we could have just said get user and everything

56
00:04:28,980 --> 00:04:34,140
would work exactly the same but again don't ask me so I'm going to go with return then we're going to

57
00:04:34,140 --> 00:04:37,270
go with local storage get item.

58
00:04:37,350 --> 00:04:45,210
So the same like we did with car we're gonna check whether that user key exists if it does then return

59
00:04:45,270 --> 00:04:50,430
but we're going to use a jasmine pass for that if it doesn't exist then again we're gonna set it equal

60
00:04:50,430 --> 00:04:53,280
to user name now as well as token No.

61
00:04:53,370 --> 00:05:01,200
So since it is a ternary operator again we have our question mark then we have Jason pass and we're

62
00:05:01,200 --> 00:05:09,630
gonna pass in the local storage get item and we're gonna get our user or if the user is not there then

63
00:05:09,630 --> 00:05:17,640
we're just going to return a object with a user name of No user name equal to no and then of course

64
00:05:17,700 --> 00:05:19,560
also the same works for talking.

65
00:05:19,760 --> 00:05:27,390
We're gonna go username as well as tokens now and then instead of setting it always as a empty object

66
00:05:27,810 --> 00:05:29,990
meaning the properties set to null.

67
00:05:30,030 --> 00:05:35,520
Then of course I'm gonna run my get user from local storage.

68
00:05:35,640 --> 00:05:36,680
We're gonna save it.

69
00:05:36,870 --> 00:05:41,440
And of course currently we don't have anything because our local storage is empty.

70
00:05:41,520 --> 00:05:46,020
As far as user is concerned we do have a cart but we don't have the user.

71
00:05:46,140 --> 00:05:51,090
So we're gonna head over to a log in page and we would need to change around things.

72
00:05:51,090 --> 00:05:51,650
Right.

73
00:05:51,720 --> 00:05:56,790
Because even though currently we have the response with a simple value well that's not going to be the

74
00:05:56,790 --> 00:06:02,930
case anymore because within the user context now we can pass value as an object.

75
00:06:03,000 --> 00:06:08,580
So I'm going to delete my simple string then I'm going to set it as an object and I'm passing three

76
00:06:08,580 --> 00:06:16,910
things I'm going to pass user I'm going to pass user log in and also I'm going to pass user.

77
00:06:17,010 --> 00:06:22,500
But I just got a bit confused because I'm not going to use user logout within the logging but we still

78
00:06:22,500 --> 00:06:23,460
need to pass it.

79
00:06:23,490 --> 00:06:25,770
So sorry about my confusion.

80
00:06:25,800 --> 00:06:30,080
Yes we do need to pass an user log out because I would like to access it.

81
00:06:30,270 --> 00:06:31,680
Well in my application.

82
00:06:31,680 --> 00:06:32,070
Correct.

83
00:06:32,070 --> 00:06:39,510
So of course that's gonna be within the logout link and we're gonna head over back to a logging J.S..

84
00:06:39,700 --> 00:06:40,160
All right.

85
00:06:40,170 --> 00:06:45,180
So we're console logging in the response I can see that I'm getting my user which is currently no.

86
00:06:45,240 --> 00:06:48,820
As well as token and then user logging and user logout.

87
00:06:49,110 --> 00:06:53,820
And in this case we are going to get specific things not just everything.

88
00:06:53,820 --> 00:07:02,890
So I'm gonna delete my value and I'm gonna replace it with a user log in like so.

89
00:07:02,900 --> 00:07:05,070
So I'd like to get my function.

90
00:07:05,070 --> 00:07:06,360
And now what's gonna happen.

91
00:07:06,360 --> 00:07:13,080
Well when we're getting a register or where we're going to sign in and if our response is gonna be a

92
00:07:13,080 --> 00:07:14,200
success.

93
00:07:14,250 --> 00:07:16,340
So essentially we are good to go.

94
00:07:16,410 --> 00:07:22,020
Then of course we would want to set up our user because that way we're gonna set up in a local storage.

95
00:07:22,020 --> 00:07:28,020
So when we refresh we're still going to know that we have the user and the way we're gonna set that

96
00:07:28,020 --> 00:07:28,160
up.

97
00:07:28,170 --> 00:07:29,460
We have the response.

98
00:07:29,650 --> 00:07:34,830
And I guess just for the sake of clarity I'm going to console log one more time response just so we

99
00:07:34,830 --> 00:07:36,750
know where we're getting this data.

100
00:07:36,780 --> 00:07:38,170
So let me save it.

101
00:07:38,310 --> 00:07:42,910
I believe out a John so I might as well can just sign in but just please keep in mind the same is gonna

102
00:07:42,930 --> 00:07:50,180
work with registering Sir John at Jim mail dot com and I believe that was my password.

103
00:07:50,640 --> 00:07:53,550
So let's stretch submit and I do have my data.

104
00:07:54,030 --> 00:07:55,470
So what are we looking for here.

105
00:07:56,310 --> 00:08:01,890
Well first of all I would like to get my token so I'm gonna be setting up a.

106
00:08:01,920 --> 00:08:09,540
Object that is going to have two things it is going to have a token as well as the user name again.

107
00:08:09,750 --> 00:08:13,950
That's exactly what we were looking for from our user context.

108
00:08:13,960 --> 00:08:21,600
And first we're gonna start by the structuring and we're going to structure out the Jason W T.

109
00:08:21,780 --> 00:08:29,750
Or I'm sorry the Jason Webb token or JWT as well as we're gonna get a user now whereas the user.

110
00:08:29,760 --> 00:08:37,360
Well both of them are in fact in the data or the user name is in within the user property.

111
00:08:37,380 --> 00:08:41,940
So the way we're going to structure that and I guess in this case I'm going to remove the console log

112
00:08:42,390 --> 00:08:43,400
and we're going to say alright.

113
00:08:43,410 --> 00:08:49,260
So first of all I would want to get my JWT or Jason Webb token.

114
00:08:49,260 --> 00:08:53,020
So since it is sitting within the same object I can just get it.

115
00:08:53,040 --> 00:08:58,650
Now please keep in mind though when I say the same object we're gonna have to access response and data

116
00:08:59,160 --> 00:09:01,240
because a response is an object itself.

117
00:09:01,410 --> 00:09:08,810
And then within the data data of course this is the object itself but then we're looking for the JWT.

118
00:09:08,820 --> 00:09:14,340
So Jason Webb token and I'm gonna say that I would want to get a Jason Webb token.

119
00:09:14,400 --> 00:09:19,770
However I'm going to rename it I'm gonna say that it's simple it's gonna be a token and then the second

120
00:09:19,770 --> 00:09:22,450
thing I'm looking for is the user name.

121
00:09:22,470 --> 00:09:28,170
Now the user name like I said is within the user property which is a object itself.

122
00:09:28,200 --> 00:09:33,510
So we have user and then we have the user name so let's write user.

123
00:09:33,510 --> 00:09:40,350
And when we're structuring we write user since user is already an object itself then we look for user

124
00:09:40,350 --> 00:09:40,970
name.

125
00:09:40,980 --> 00:09:42,790
Now we have access to two things.

126
00:09:43,000 --> 00:09:45,710
Two token as well as the user name.

127
00:09:45,870 --> 00:09:49,060
And now we're going to create a new object.

128
00:09:49,320 --> 00:09:56,970
So let's create a new object by saying const new user and that is gonna be equal to a token.

129
00:09:57,110 --> 00:10:03,490
And of course I need to set it up properly so the property name of token which has a value of the token

130
00:10:03,490 --> 00:10:10,470
that I'm getting back as well as the property of user name that has the value of the property that I'm

131
00:10:10,470 --> 00:10:16,080
getting back from the response data we're going to add a column let's say here and then we're gonna

132
00:10:16,340 --> 00:10:21,800
two things we're going to log in our user and then we're also going to navigate away from the log in

133
00:10:21,800 --> 00:10:24,110
page to let's say product page.

134
00:10:24,140 --> 00:10:26,550
So we have user logging that is our function.

135
00:10:26,600 --> 00:10:33,270
We do need to pass in our new user object and then also like I said we would want to navigate away.

136
00:10:33,320 --> 00:10:38,330
So we have history already Bush remembered that was coming from reactor order dumb and in my case I'm

137
00:10:38,330 --> 00:10:42,990
going to navigate and I'm going to say that we're gonna go to a product page.

138
00:10:43,130 --> 00:10:48,920
Now I'm going to save it and we're gonna head over to a bigger screen size just so we can see better

139
00:10:49,250 --> 00:10:54,880
and we're going to test out both cases if we want to sign in and if we'd want to register.

140
00:10:54,950 --> 00:10:57,180
So let's start by trying to register.

141
00:10:57,230 --> 00:11:01,850
Let me just double check whether I have Peter there because I would want to register and I don't want

142
00:11:01,850 --> 00:11:05,250
to get a dumber so I don't have to Peter I have the John.

143
00:11:05,440 --> 00:11:06,080
Awesome.

144
00:11:06,080 --> 00:11:07,000
So let's do this.

145
00:11:07,040 --> 00:11:12,250
Let's say that there's going to be an email by Peter at gmail dot com.

146
00:11:12,410 --> 00:11:17,640
Then we're gonna have the password and then we're gonna have a user name again off Peter.

147
00:11:17,690 --> 00:11:24,970
And the moment we submit we should see within a local storage our token as well as the user.

148
00:11:25,010 --> 00:11:25,550
Awesome.

149
00:11:25,550 --> 00:11:26,070
We do.

150
00:11:26,090 --> 00:11:29,340
So we have a user name of Peter as well as a token.

151
00:11:29,490 --> 00:11:34,580
Again we're not setting up any kind of changes yet in our front end.

152
00:11:34,630 --> 00:11:40,010
So eventually again multiple things are going to change the moment we're gonna get that user but our

153
00:11:40,010 --> 00:11:43,630
initial setup is correct because we are getting our user.

154
00:11:43,660 --> 00:11:44,390
All right.

155
00:11:44,390 --> 00:11:46,740
And we also navigated away from the page.

156
00:11:46,760 --> 00:11:47,510
Awesome.

157
00:11:47,510 --> 00:11:49,310
Now let's try to log in one more time.

158
00:11:49,310 --> 00:11:55,580
In this case we're going to use already existing user by the name of John just so we can see how we

159
00:11:55,580 --> 00:11:56,450
can override that.

160
00:11:56,870 --> 00:12:03,010
So let's say John and John is going to log in when I say Gmail and then we're going to go again with

161
00:12:03,010 --> 00:12:07,100
a simple password and Yep again we navigate away.

162
00:12:07,160 --> 00:12:09,190
So our request was successful.

163
00:12:09,290 --> 00:12:13,130
And then of course we get our token as well as the user name.

164
00:12:13,460 --> 00:12:16,450
So that's how we can set up our user context.