1
00:00:00,170 --> 00:00:02,930
All right, so now we want to make this sign in form work.

2
00:00:02,930 --> 00:00:08,060
So basically from the login screen we want to do or we want to we're going to do a few things.

3
00:00:08,060 --> 00:00:14,990
But the two main things we want to do is, first, call this login and this mutation, right?

4
00:00:14,990 --> 00:00:20,240
Because that will actually send the request to the back end and set the cookie.

5
00:00:20,270 --> 00:00:27,350
Now, once we get the user data back, we then want to call from the auth slice set credentials.

6
00:00:27,500 --> 00:00:32,720
Okay, send that in the payload and then the user gets put in local storage, not the token.

7
00:00:32,750 --> 00:00:37,250
This is this is a big difference from the first version of this application.

8
00:00:37,250 --> 00:00:42,950
And this course is in the first version we actually stored the token in local storage.

9
00:00:42,950 --> 00:00:50,750
So we're trying to avoid that, but we are storing the user info such as the username, the email,

10
00:00:51,020 --> 00:00:52,690
and that's pretty much it.

11
00:00:52,700 --> 00:01:01,380
So let's go into the login screen and we're also going to use a package called React to Testify that

12
00:01:01,380 --> 00:01:05,820
will show a message if like we get the wrong email address or something like that.

13
00:01:05,820 --> 00:01:07,410
So let's install that real quick.

14
00:01:07,410 --> 00:01:12,450
I'm just going to stop the server and you actually want to install this in your front end.

15
00:01:12,570 --> 00:01:17,430
Actually, I didn't need to stop the server because I have my front end open in this terminal.

16
00:01:17,430 --> 00:01:20,760
So you want to CD into your front end and then NPM.

17
00:01:20,790 --> 00:01:21,390
Whoops.

18
00:01:22,160 --> 00:01:26,690
NPM install and then it's called React Dash.

19
00:01:27,510 --> 00:01:28,620
Testify.

20
00:01:29,940 --> 00:01:31,920
Again, Make sure you're in your front end.

21
00:01:32,890 --> 00:01:36,430
And to use that, there's a couple steps we have to take.

22
00:01:36,460 --> 00:01:40,850
We're going to go into our main app component, so our app JS.

23
00:01:40,870 --> 00:01:43,630
And in here we're going to import.

24
00:01:44,780 --> 00:01:47,870
So from here, we want to bring in the toast container.

25
00:01:47,870 --> 00:01:49,370
So toast.

26
00:01:51,870 --> 00:01:52,270
God.

27
00:01:53,180 --> 00:01:54,450
Let me spell this right.

28
00:01:54,480 --> 00:01:56,730
Toast container.

29
00:01:57,090 --> 00:02:01,020
I don't know why it's not popping up, but we're going to bring that in from React.

30
00:02:01,050 --> 00:02:01,440
Toast to.

31
00:02:01,890 --> 00:02:09,199
And we also need to add the CSS, the styling, so we can import and it's going to be this react toast,

32
00:02:09,210 --> 00:02:14,850
ify slash dist slash and then react toast, defy CSS.

33
00:02:15,000 --> 00:02:21,270
So this toast container, we need to put this somewhere in our layout.

34
00:02:21,270 --> 00:02:22,890
So I'm just going to put it.

35
00:02:24,240 --> 00:02:25,950
Uh, we'll just put it at the bottom.

36
00:02:25,950 --> 00:02:29,640
It really doesn't matter because it's not really in the layout.

37
00:02:29,640 --> 00:02:30,000
It's.

38
00:02:30,000 --> 00:02:32,520
It's outside of it positioned absolute.

39
00:02:32,520 --> 00:02:34,890
So that should work.

40
00:02:35,760 --> 00:02:36,240
Okay.

41
00:02:36,240 --> 00:02:38,700
So we shouldn't get any errors or anything.

42
00:02:38,700 --> 00:02:39,760
Let's check it out.

43
00:02:39,780 --> 00:02:40,140
Yeah.

44
00:02:40,140 --> 00:02:42,120
So that should be implemented now.

45
00:02:42,160 --> 00:02:45,500
We should be able to just use toast, defy when we want.

46
00:02:45,510 --> 00:02:49,650
So in the login screen we're going to import a bunch of stuff here.

47
00:02:49,650 --> 00:02:51,000
So we already have use state.

48
00:02:51,000 --> 00:02:56,280
Let's also bring in use effect because what I want to do is when you come to the page, it should check

49
00:02:56,280 --> 00:02:59,520
to see if there's any user info in local storage.

50
00:02:59,520 --> 00:03:02,040
And if there is, that means you're logged in.

51
00:03:02,040 --> 00:03:04,950
So we'll then want to redirect from this page.

52
00:03:04,950 --> 00:03:16,110
So from React router Dom, in addition to Link, let's also bring in use location and use Navigate.

53
00:03:16,110 --> 00:03:22,650
So we want to bring those two hooks in and then let's see in order to interact with the state, we want

54
00:03:22,650 --> 00:03:26,730
to bring in use dispatch and use selector from React Redux.

55
00:03:26,730 --> 00:03:34,440
Use dispatch is used to dispatch actions such as the login in that slice and the set credentials and

56
00:03:34,440 --> 00:03:38,830
use selector is to get stuff from the state such as the user.

57
00:03:39,380 --> 00:03:40,610
So let's see.

58
00:03:40,640 --> 00:03:43,740
We're also going to bring in the message.

59
00:03:43,760 --> 00:03:44,900
Do we need the message?

60
00:03:44,900 --> 00:03:48,910
No, I don't think we need the message component, but we do want the loader.

61
00:03:48,920 --> 00:03:50,720
So let's bring in.

62
00:03:52,100 --> 00:03:53,540
Wait, do we have.

63
00:03:53,540 --> 00:03:54,020
Yeah.

64
00:03:54,050 --> 00:03:56,510
Loader JS So we're going to bring in.

65
00:03:57,990 --> 00:04:00,180
Loader from our components.

66
00:04:00,420 --> 00:04:07,310
And then let's see, we need our login mutation, which is this right here.

67
00:04:07,320 --> 00:04:12,570
So we exported it as this use login mutation.

68
00:04:12,570 --> 00:04:14,990
I can't talk, so let's bring that in.

69
00:04:15,000 --> 00:04:22,770
We'll say import and then it's called use login mutation from our users API slice.

70
00:04:22,800 --> 00:04:26,910
We also want to bring in our set credentials.

71
00:04:29,940 --> 00:04:35,400
Set credentials from our note should be off slice.

72
00:04:36,680 --> 00:04:36,960
Right?

73
00:04:36,960 --> 00:04:37,590
Is that correct?

74
00:04:37,590 --> 00:04:39,330
So we have our auth slice.

75
00:04:40,070 --> 00:04:41,930
Set credentials.

76
00:04:42,110 --> 00:04:44,240
So we're bringing that in as well.

77
00:04:45,310 --> 00:04:50,440
And then the last thing is going to be toast, because I want to use the react toast defy.

78
00:04:50,470 --> 00:04:54,610
So we'll say import toast from.

79
00:04:55,740 --> 00:04:59,200
Uh, react dash to testify.

80
00:04:59,220 --> 00:05:01,980
So that should be all the stuff we need to bring in.

81
00:05:01,980 --> 00:05:03,030
Let's see what we got here.

82
00:05:03,060 --> 00:05:04,890
Auth is not defined.

83
00:05:06,760 --> 00:05:09,550
Auth is not defined.

84
00:05:11,420 --> 00:05:13,900
Uses the API slice.

85
00:05:15,070 --> 00:05:17,380
Let's see what we got going on here.

86
00:05:17,410 --> 00:05:20,050
Uses API slice line eight.

87
00:05:20,570 --> 00:05:20,770
Okay.

88
00:05:20,770 --> 00:05:23,050
I don't know why there's a space there.

89
00:05:23,080 --> 00:05:23,770
Oh yes, I do.

90
00:05:23,770 --> 00:05:25,600
Because this should be.

91
00:05:28,100 --> 00:05:29,990
This should be in Backticks.

92
00:05:31,980 --> 00:05:34,140
So we should be doing this.

93
00:05:37,650 --> 00:05:38,250
All right.

94
00:05:40,010 --> 00:05:41,150
Let's open the console.

95
00:05:41,150 --> 00:05:44,060
Just make sure no funny stuff is going on there.

96
00:05:44,210 --> 00:05:44,570
All right.

97
00:05:44,570 --> 00:05:47,030
So we brought in everything that we need.

98
00:05:47,060 --> 00:05:52,930
Now let's come down here and let's initialize what we need to.

99
00:05:52,940 --> 00:06:01,370
So I'm going to go right under the state and let's initialize dispatch to use dispatch and navigate.

100
00:06:01,640 --> 00:06:05,490
And we need the login from the login mutation.

101
00:06:05,510 --> 00:06:14,060
Let's say const, and then we're going to destructure login as well as the is loading.

102
00:06:14,180 --> 00:06:17,630
And we don't really need the error in this case.

103
00:06:17,840 --> 00:06:24,140
So I'm just going to bring in login and is loading from use login mutation and that's created automatically

104
00:06:24,140 --> 00:06:25,880
for us like the loading.

105
00:06:26,780 --> 00:06:31,040
And then we also want the user info, which is part of our state.

106
00:06:31,040 --> 00:06:33,620
So to do that we use the use selector hook.

107
00:06:33,620 --> 00:06:35,330
So let's say const.

108
00:06:36,710 --> 00:06:38,030
And we want to.

109
00:06:39,260 --> 00:06:43,430
We want to destructure user info.

110
00:06:44,270 --> 00:06:48,410
From our users our auth state.

111
00:06:48,410 --> 00:06:48,710
Right.

112
00:06:48,710 --> 00:06:54,980
So you selector takes in a function pass in the state and we want the auth part of our state because

113
00:06:54,980 --> 00:06:56,520
that's where our user info is.

114
00:06:56,540 --> 00:06:58,430
If we look in our redux.

115
00:06:59,380 --> 00:07:00,610
Dev tools.

116
00:07:01,830 --> 00:07:05,010
So in the auth state we have user info.

117
00:07:05,010 --> 00:07:05,820
So that's what we're doing.

118
00:07:05,820 --> 00:07:07,770
We're getting this right here.

119
00:07:09,190 --> 00:07:15,580
Now, we also want to make it so that if remember how we're on the shipping screen, if we go to our

120
00:07:15,580 --> 00:07:23,350
cart here and then proceed to checkout, you see how we have this login and then we have this redirect.

121
00:07:23,350 --> 00:07:27,370
So we want to check to see if that redirect is there.

122
00:07:27,370 --> 00:07:33,250
Because if it is, we then want to redirect to this page if we are logged in.

123
00:07:33,250 --> 00:07:41,590
So to do that we use the search property from the use location hook which we brought in up here.

124
00:07:41,590 --> 00:07:45,460
Let's see, we brought it in right here from React Router Dom.

125
00:07:45,460 --> 00:07:54,310
So let's go right above the submit handler and let's say const and we want to destructure search from

126
00:07:54,310 --> 00:08:03,970
use location and then we're going to create, let's say const SP for search params and then we're going

127
00:08:03,970 --> 00:08:10,460
to pass search into the URL, search params constructor and then finally we're going to just create

128
00:08:10,460 --> 00:08:12,620
a variable called redirect.

129
00:08:12,620 --> 00:08:17,810
And we want to see if there's this redirect, which is this right here.

130
00:08:18,200 --> 00:08:18,590
Okay.

131
00:08:18,590 --> 00:08:26,720
And then if there is so if there is, then that's obviously what will get set or then we just want it

132
00:08:26,720 --> 00:08:29,060
to be slash just the index.

133
00:08:29,630 --> 00:08:30,080
Okay.

134
00:08:30,080 --> 00:08:32,299
Now let's use the use effect.

135
00:08:33,409 --> 00:08:40,130
Because this is what we're going to use to to check to see if we're logged in.

136
00:08:40,130 --> 00:08:46,790
Because if we are logged in, then we want to get redirected to either the home page or if there's something

137
00:08:46,790 --> 00:08:48,230
in that redirect.

138
00:08:48,230 --> 00:08:52,100
So in the use effect, we're just simply going to say if.

139
00:08:53,600 --> 00:08:55,150
User info.

140
00:08:55,160 --> 00:09:02,000
So basically, if there's user info in local storage, then we're going to navigate to whatever that

141
00:09:02,000 --> 00:09:03,260
redirect is.

142
00:09:03,290 --> 00:09:08,960
And then as far as dependencies, we need to pass in user info because we're using it in the useeffect

143
00:09:08,960 --> 00:09:12,770
as well as redirect, as well as navigate.

144
00:09:12,770 --> 00:09:14,450
So we should also have that.

145
00:09:17,340 --> 00:09:17,790
All right.

146
00:09:17,790 --> 00:09:20,520
So you think that should be good?

147
00:09:20,520 --> 00:09:26,010
Now let's just save and make sure we have no weird issues and we're not going to get redirected right

148
00:09:26,010 --> 00:09:33,620
now because we're not logged in and I'm just going to get rid of that that query param.

149
00:09:34,080 --> 00:09:34,440
All right.

150
00:09:34,440 --> 00:09:42,000
So now we need to handle the actual submit handler, which is how we log in and we log in by calling

151
00:09:42,000 --> 00:09:47,520
both login from our user API slice and set credentials from our auth slice.

152
00:09:47,520 --> 00:09:49,230
So let's get rid of this.

153
00:09:51,020 --> 00:09:53,570
This line here and.

154
00:09:54,300 --> 00:09:57,390
We're going to call log in, but let's do it in a try.

155
00:09:57,420 --> 00:09:58,290
Catch.

156
00:09:59,150 --> 00:10:07,790
And in try let's do const res and we're going to set that to await login.

157
00:10:08,660 --> 00:10:09,980
Okay, now log in again.

158
00:10:10,010 --> 00:10:12,530
Is coming from our users API slice.

159
00:10:12,560 --> 00:10:16,580
We're getting it right here from the mutation that's in that file.

160
00:10:17,510 --> 00:10:24,860
So log in and then that's going to get passed in an object with the email and password, which is in

161
00:10:24,860 --> 00:10:27,740
our component state from the coming from the form.

162
00:10:27,740 --> 00:10:29,510
Now, this does return a promise.

163
00:10:29,510 --> 00:10:37,640
So we're going to add on to this dot unwrap which will basically extract or unwrap that the resolved

164
00:10:37,640 --> 00:10:39,460
value from the promise.

165
00:10:39,470 --> 00:10:45,110
Now this I'm getting an error here because I'm using a wait because I didn't mark this async.

166
00:10:45,110 --> 00:10:47,210
So we just want to make sure that we do that.

167
00:10:47,750 --> 00:10:48,170
All right.

168
00:10:48,200 --> 00:10:57,950
Now, once we get the response, we then want to dispatch the set credentials function which is in auth

169
00:10:57,950 --> 00:10:58,820
slice.

170
00:10:58,820 --> 00:11:00,860
So we want to call this.

171
00:11:00,860 --> 00:11:06,980
And in order to call this, we don't we don't just call it, we need to pass it through dispatch.

172
00:11:06,980 --> 00:11:13,550
So we already initialized dispatch up above, so let's say dispatch and then pass in.

173
00:11:14,710 --> 00:11:21,310
Set credentials and I'm going to do it like this, pass in an object and then just spread across res.

174
00:11:21,340 --> 00:11:22,150
Not email.

175
00:11:22,150 --> 00:11:22,750
Just.

176
00:11:24,590 --> 00:11:25,130
Yeah.

177
00:11:25,880 --> 00:11:26,690
Is that right?

178
00:11:28,100 --> 00:11:28,950
I think that's right.

179
00:11:29,250 --> 00:11:30,300
One, two, one, two.

180
00:11:30,330 --> 00:11:30,780
Yeah.

181
00:11:30,780 --> 00:11:33,690
So we just want to again call login.

182
00:11:33,700 --> 00:11:37,920
We're going to get the response back and then we're going to send that response, which is the user

183
00:11:37,920 --> 00:11:38,370
info.

184
00:11:38,400 --> 00:11:45,480
We're going to pass that into set credentials, which will then set the local storage to whatever the

185
00:11:45,480 --> 00:11:46,560
user is.

186
00:11:46,560 --> 00:11:49,380
And then once we do that, we then want to navigate.

187
00:11:49,380 --> 00:11:51,390
So we'll say navigate.

188
00:11:51,990 --> 00:11:58,260
And we want to navigate to the redirect, whether it's whether it's the index page or if there's something

189
00:11:58,260 --> 00:11:59,790
in it, such as shipping.

190
00:12:00,060 --> 00:12:02,790
Now in the catch, I'm just going to do an error.

191
00:12:02,790 --> 00:12:05,970
So we're going to do a toast dot error.

192
00:12:07,490 --> 00:12:10,670
And we want to pass in error.

193
00:12:11,300 --> 00:12:17,630
Dot data dot message so if that exists or just.

194
00:12:18,630 --> 00:12:18,910
Um.

195
00:12:18,990 --> 00:12:19,490
Error.

196
00:12:19,500 --> 00:12:21,420
Dot error.

197
00:12:21,970 --> 00:12:26,390
Now I want to just make sure that this will work, even if these are undefined.

198
00:12:26,410 --> 00:12:28,030
So we don't get any weird data.

199
00:12:28,390 --> 00:12:29,500
Any weird errors.

200
00:12:29,500 --> 00:12:32,320
So I'm just going to put question marks here and here.

201
00:12:35,400 --> 00:12:35,880
All right.

202
00:12:35,880 --> 00:12:39,660
And then there's just a couple things I want to do down here.

203
00:12:39,750 --> 00:12:43,500
So the first is to check for the loading so we can show the loader.

204
00:12:43,500 --> 00:12:46,790
And I'm going to do that right, right below the button.

205
00:12:46,800 --> 00:12:50,790
So we'll say is loading.

206
00:12:50,820 --> 00:12:55,110
And this isn't if the page is loading, this is once we once we try to log in.

207
00:12:55,110 --> 00:12:59,760
So if that's true, then we'll show our loader component.

208
00:13:00,460 --> 00:13:04,600
And then we're also going to set the submit button.

209
00:13:06,150 --> 00:13:07,410
Let's see the button here.

210
00:13:07,410 --> 00:13:10,470
I want this to be disabled if it's loading.

211
00:13:10,470 --> 00:13:17,610
So we'll we'll add on to this the disabled attribute and just set that to whatever is loading is.

212
00:13:18,970 --> 00:13:20,080
True or false.

213
00:13:20,080 --> 00:13:26,590
And then finally down here where we have our link, if there's a redirect, I want to add that onto

214
00:13:26,590 --> 00:13:27,220
this.

215
00:13:27,220 --> 00:13:33,760
So instead of just saying to slash register, let's say two, and then we're going to open up some backticks.

216
00:13:33,760 --> 00:13:38,980
And in our actually, I don't want backticks yet because we want to check for redirect.

217
00:13:38,980 --> 00:13:45,340
So if there's something in redirect, then we want our backticks and we're going to say slash register

218
00:13:46,810 --> 00:13:53,710
and then pass in the redirect and set that equal to whatever is in.

219
00:13:54,470 --> 00:13:55,910
The redirect.

220
00:13:56,480 --> 00:13:56,790
All right.

221
00:13:56,870 --> 00:14:01,730
And then else then it will just be slash register.

222
00:14:03,720 --> 00:14:05,730
Okay, so it looks like we have an issue.

223
00:14:05,760 --> 00:14:07,860
Error is not defined.

224
00:14:08,730 --> 00:14:09,240
Let's see.

225
00:14:09,240 --> 00:14:11,190
That's because.

226
00:14:14,770 --> 00:14:15,640
Let's see.

227
00:14:16,630 --> 00:14:19,270
That's because this right here I have is error.

228
00:14:19,300 --> 00:14:21,190
That should actually be error.

229
00:14:21,220 --> 00:14:23,080
Or if you want to use error, that's fine.

230
00:14:23,080 --> 00:14:25,810
Just make sure you use it here and here as well.

231
00:14:26,780 --> 00:14:32,230
All right, so now let's try to sign in with nothing and we see invalid email or password.

232
00:14:32,240 --> 00:14:34,340
You can see the little spinner as well.

233
00:14:34,550 --> 00:14:38,630
So it's just going to show these toasts which go away after a certain amount of time.

234
00:14:38,630 --> 00:14:45,020
And you can look at the React Toast API documentation if you want because you can set it to a shorter

235
00:14:45,020 --> 00:14:48,710
or longer time and some other options as well.

236
00:14:48,740 --> 00:14:53,780
But let's try to log in as let's say, John at Email.com.

237
00:14:53,780 --> 00:15:00,320
We know that's the correct email, but let's do the wrong password and we should get just the same message

238
00:15:00,320 --> 00:15:06,050
should always be invalid email or password, whether you have the email wrong or the password wrong

239
00:15:06,050 --> 00:15:07,040
or both.

240
00:15:07,190 --> 00:15:12,170
So let's do one, two, three, four, five, six, which is the correct click submit.

241
00:15:12,170 --> 00:15:14,300
And now you'll see I got redirected.

242
00:15:15,120 --> 00:15:20,880
So I'm essentially logged in now and you can actually check for the Http only cookie.

243
00:15:20,880 --> 00:15:29,730
If you go to application and you go down to cookies right here, you can see JWT and this is not on

244
00:15:29,730 --> 00:15:33,060
the client as if like if you stored it in local storage.

245
00:15:33,060 --> 00:15:36,490
So you can see here Http only is checked.

246
00:15:36,510 --> 00:15:40,350
Now I'd like to show up here instead of sign in.

247
00:15:40,350 --> 00:15:42,600
I want a link to the profile.

248
00:15:42,600 --> 00:15:48,930
So the last thing we're going to do in this video is go to our header and just change some things around.

249
00:15:48,930 --> 00:15:49,920
So.

250
00:15:51,210 --> 00:15:51,990
Let's see.

251
00:15:51,990 --> 00:15:55,200
We already have our cart state.

252
00:15:55,570 --> 00:15:55,760
Okay.

253
00:15:55,850 --> 00:16:00,420
We already have use use selector and we're using that to get the cart state.

254
00:16:00,450 --> 00:16:02,400
Now let's get the user state.

255
00:16:02,400 --> 00:16:09,000
So we'll copy this down and instead of cart items, we want the user info.

256
00:16:09,880 --> 00:16:15,910
And instead of the state, we want to get that from the auth state.

257
00:16:17,890 --> 00:16:21,970
So now let's come down here and let's see where we want to put this.

258
00:16:22,790 --> 00:16:25,430
So where we have this.

259
00:16:26,850 --> 00:16:28,530
Link container.

260
00:16:29,400 --> 00:16:31,410
I'm going to go right above that.

261
00:16:32,510 --> 00:16:36,640
And then, yeah, let's check for user info.

262
00:16:36,650 --> 00:16:41,750
So if there is user info, then we'll show something else.

263
00:16:41,750 --> 00:16:43,580
We'll show something else.

264
00:16:43,610 --> 00:16:47,630
So something else is going to be this link container here.

265
00:16:47,810 --> 00:16:52,400
So we're going to cut that and then put that in the second.

266
00:16:53,370 --> 00:16:58,740
Parentheses and in the first parentheses we're going to have a drop down.

267
00:17:00,110 --> 00:17:01,430
Let's close that.

268
00:17:02,370 --> 00:17:08,400
Okay, so we have our NAV drop down and it has a title of user info, name ID username.

269
00:17:08,400 --> 00:17:12,450
And then in here we're going to have our link container to the profile.

270
00:17:14,130 --> 00:17:19,680
Okay, so that'll go to profile, which we obviously we don't have yet, but we will and let's see,

271
00:17:19,680 --> 00:17:28,170
we'll have our item and that'll just say profile then let's go outside of the link container still within

272
00:17:28,170 --> 00:17:33,780
the NAV dropdown and we're going to have a nav dropdown item with an on click.

273
00:17:34,330 --> 00:17:35,620
Close that.

274
00:17:36,790 --> 00:17:39,160
And inside that.

275
00:17:40,100 --> 00:17:41,480
It'll just say log out.

276
00:17:41,480 --> 00:17:43,130
So that'll be our log out.

277
00:17:43,130 --> 00:17:45,980
So let's save that and see what we get.

278
00:17:46,730 --> 00:17:49,130
So use info is not defined.

279
00:17:49,130 --> 00:17:50,960
Again, that should be user info.

280
00:17:51,290 --> 00:17:59,390
I keep doing that and nav dropdown is not defined, so we also have to bring that in from react bootstrap.

281
00:17:59,870 --> 00:18:03,290
So nav dropdown.

282
00:18:04,360 --> 00:18:05,500
And then log out.

283
00:18:05,530 --> 00:18:07,510
Handler is not defined.

284
00:18:07,540 --> 00:18:11,650
We're not going to do that just yet, but we can at least create it.

285
00:18:11,650 --> 00:18:20,650
So we'll say const log out handler and for now we'll just do a console log and say log out.

286
00:18:24,170 --> 00:18:26,660
And have dropdown is not defined.

287
00:18:26,660 --> 00:18:30,230
Let's see, did I mess up the casing on that?

288
00:18:35,850 --> 00:18:36,090
Hmm.

289
00:18:41,990 --> 00:18:42,910
Oh, okay.

290
00:18:42,920 --> 00:18:44,290
I just had to reload.

291
00:18:44,300 --> 00:18:48,470
So now, as you can see, we're getting the the user name.

292
00:18:48,770 --> 00:18:55,910
So John Doe, which is because I put the title here and the nav dropdown and this is all available to

293
00:18:55,910 --> 00:18:57,740
us with React Bootstrap.

294
00:18:57,860 --> 00:19:03,020
And then we have our profile link and logout link, which obviously these aren't going to work right

295
00:19:03,020 --> 00:19:03,710
now.

296
00:19:04,220 --> 00:19:08,210
Well, the profile is a link logout actually just calls a handler.

297
00:19:08,210 --> 00:19:16,160
So if I open up my console, we should see if I click log out, it'll just console, log, log out because

298
00:19:16,160 --> 00:19:18,140
we haven't implemented that yet.

299
00:19:18,140 --> 00:19:23,210
But now we can at least see, you know, when we're logged in.

300
00:19:24,260 --> 00:19:30,890
So the log out I think is what we should do next just so we have the ability to to log in and log out.

301
00:19:30,890 --> 00:19:36,200
And then after we do that, we can implement our front end registration and we're just about done with

302
00:19:36,200 --> 00:19:38,000
with authentication.