1
00:00:00,810 --> 00:00:01,830
Instructor: We now have the ability

2
00:00:01,830 --> 00:00:04,350
to programmatically navigate our user

3
00:00:04,350 --> 00:00:06,150
around our application.

4
00:00:06,150 --> 00:00:08,250
We're now gonna work on the other two things

5
00:00:08,250 --> 00:00:10,650
that we need to do inside of our success case here.

6
00:00:10,650 --> 00:00:12,330
We need to update our state

7
00:00:12,330 --> 00:00:14,700
to indicate that a user is authenticated.

8
00:00:14,700 --> 00:00:17,580
So keep in mind, we haven't really added any reducers

9
00:00:17,580 --> 00:00:18,690
just yet of our own.

10
00:00:18,690 --> 00:00:20,790
And so we'll need to make a reducer for that.

11
00:00:20,790 --> 00:00:23,850
And we'll also need to somehow save our JWT token.

12
00:00:23,850 --> 00:00:26,393
So that's what we're gonna work on inside this section.

13
00:00:27,420 --> 00:00:29,100
The purpose of adding this state here

14
00:00:29,100 --> 00:00:30,987
to indicate that our user is authenticated

15
00:00:30,987 --> 00:00:35,310
is simply to have a very simple true or false flag

16
00:00:35,310 --> 00:00:36,510
that we can make reference to

17
00:00:36,510 --> 00:00:37,980
throughout our application to say,

18
00:00:37,980 --> 00:00:41,160
hey, is this user, are they authenticated or not?

19
00:00:41,160 --> 00:00:42,900
And so it's gonna be a very simple Boolean

20
00:00:42,900 --> 00:00:45,330
to figure that out.

21
00:00:45,330 --> 00:00:47,400
One place that we'll probably immediately use that in

22
00:00:47,400 --> 00:00:48,540
is on our header.

23
00:00:48,540 --> 00:00:50,820
By default, our header is currently always showing

24
00:00:50,820 --> 00:00:53,596
the text sign in but if you think back to our mock-ups,

25
00:00:53,596 --> 00:00:55,590
whenever a user is authenticated,

26
00:00:55,590 --> 00:00:58,080
we don't wanna show the text sign in and sign up

27
00:00:58,080 --> 00:00:58,950
at the top anymore.

28
00:00:58,950 --> 00:01:02,160
We wanna show something like sign out

29
00:01:02,160 --> 00:01:03,750
would be more appropriate.

30
00:01:03,750 --> 00:01:06,090
And so having this piece of state in our application

31
00:01:06,090 --> 00:01:08,490
just to indicate whether or not the user is authenticated

32
00:01:08,490 --> 00:01:11,130
will make it really easy to make those decisions

33
00:01:11,130 --> 00:01:13,800
on exactly what text or components we want to render

34
00:01:13,800 --> 00:01:14,633
on the screen.

35
00:01:16,140 --> 00:01:17,490
So whenever we have any state,

36
00:01:17,490 --> 00:01:20,220
that implies that we need to have a reducer of sorts

37
00:01:20,220 --> 00:01:22,800
to produce that piece of state.

38
00:01:22,800 --> 00:01:25,110
So we're gonna make a new reducer

39
00:01:25,110 --> 00:01:30,110
and we're gonna call it auth_reducer.js.

40
00:01:31,830 --> 00:01:35,190
And inside of here, we want to handle just very simply

41
00:01:35,190 --> 00:01:38,280
whether or not the user is currently authenticated.

42
00:01:38,280 --> 00:01:39,330
Okay?

43
00:01:39,330 --> 00:01:40,800
So let's first write the reducer

44
00:01:40,800 --> 00:01:43,020
and then we'll figure out the exact types

45
00:01:43,020 --> 00:01:46,020
and actions we want to handle inside of it.

46
00:01:46,020 --> 00:01:48,270
So we'll put in our kind of default code

47
00:01:48,270 --> 00:01:50,643
for our reducer.

48
00:01:51,900 --> 00:01:54,180
I'm gonna default our state to be an object

49
00:01:54,180 --> 00:01:57,840
because this auth_reducer right here

50
00:01:57,840 --> 00:01:59,520
is probably gonna have several different properties

51
00:01:59,520 --> 00:02:01,053
that we wanna keep track of.

52
00:02:02,340 --> 00:02:06,363
Then we will switch over our action.type.

53
00:02:07,230 --> 00:02:08,850
We don't really have any cases that we want

54
00:02:08,850 --> 00:02:11,130
to handle just yet, so we'll leave it blank for right now.

55
00:02:11,130 --> 00:02:13,080
Again, we're just putting a little bit

56
00:02:13,080 --> 00:02:15,000
of scaffolding here.

57
00:02:15,000 --> 00:02:17,250
By default, we return our state

58
00:02:17,250 --> 00:02:18,780
and then let's just go ahead and hook this up

59
00:02:18,780 --> 00:02:20,790
to our combinedReducers call

60
00:02:20,790 --> 00:02:23,193
inside of our reducers, index file.

61
00:02:24,510 --> 00:02:29,510
We can import authReducer from auth_reducer.

62
00:02:34,320 --> 00:02:37,050
And now I'm gonna add it as the auth property state.

63
00:02:37,050 --> 00:02:41,280
So just auth is authReducer, like so.

64
00:02:41,280 --> 00:02:44,460
If you want to, you could always name authReducer

65
00:02:44,460 --> 00:02:46,050
just auth by itself

66
00:02:46,050 --> 00:02:49,050
and then since you had the same key and value names,

67
00:02:49,050 --> 00:02:51,150
you could omit the colon there.

68
00:02:51,150 --> 00:02:52,410
So totally up to you.

69
00:02:52,410 --> 00:02:54,180
I kinda like to just leave it separate

70
00:02:54,180 --> 00:02:55,230
just to make it really clear

71
00:02:55,230 --> 00:02:57,540
that hey, I've got an authReducer

72
00:02:57,540 --> 00:02:59,700
and it's producing the auth piece of state

73
00:02:59,700 --> 00:03:01,150
but again, totally your call.

74
00:03:02,910 --> 00:03:04,620
So we've got our reducer in place.

75
00:03:04,620 --> 00:03:07,350
Thinking back to what we're trying to achieve here.

76
00:03:07,350 --> 00:03:09,210
We wanna have just a very simple Boolean,

77
00:03:09,210 --> 00:03:10,920
just something that very simply says

78
00:03:10,920 --> 00:03:14,280
whether or not the user is currently authenticated.

79
00:03:14,280 --> 00:03:15,600
So to handle that,

80
00:03:15,600 --> 00:03:17,280
I'm gonna add a return statement here

81
00:03:17,280 --> 00:03:19,530
and we'll say that oh, excuse me.

82
00:03:19,530 --> 00:03:20,460
We don't want the return statement.

83
00:03:20,460 --> 00:03:22,590
Here I wanna add a case statement.

84
00:03:22,590 --> 00:03:23,790
Let's say that in the cases

85
00:03:23,790 --> 00:03:27,870
that we get an action coming through with type AUTH_USER.

86
00:03:27,870 --> 00:03:28,950
So AUTH_USER.

87
00:03:28,950 --> 00:03:31,200
Whenever we get this action coming through,

88
00:03:31,200 --> 00:03:32,340
that means that the user

89
00:03:32,340 --> 00:03:34,380
was just successfully authenticated,

90
00:03:34,380 --> 00:03:36,330
which means we want to set some sort

91
00:03:36,330 --> 00:03:40,380
of like authenticated Boolean flag to being true.

92
00:03:40,380 --> 00:03:44,044
So in that case, we'll return all of our existing state

93
00:03:44,044 --> 00:03:46,623
and authenticated is true.

94
00:03:48,450 --> 00:03:49,290
Now it kind of follows

95
00:03:49,290 --> 00:03:51,390
that we wanna have the reverse case as well.

96
00:03:51,390 --> 00:03:53,250
We wanna have a case where a user

97
00:03:53,250 --> 00:03:56,280
is logging out or unauthenticating.

98
00:03:56,280 --> 00:03:58,260
So I'm gonna add in another case statement here

99
00:03:58,260 --> 00:03:59,793
for UNAUTH_USER.

100
00:04:02,310 --> 00:04:07,140
You can also use DEAUTH but I chose to go with UNAUTH

101
00:04:07,140 --> 00:04:09,210
because DEAUTH kind of looks like DEATH_USER,

102
00:04:09,210 --> 00:04:12,450
which is a little unsettling.

103
00:04:12,450 --> 00:04:14,190
If you could think of a better term here for UNAUTH,

104
00:04:14,190 --> 00:04:15,120
that would be fantastic.

105
00:04:15,120 --> 00:04:16,442
Just let me know.

106
00:04:17,370 --> 00:04:18,600
So in this case,

107
00:04:18,600 --> 00:04:23,193
I wanna flip the authenticated flag to false.

108
00:04:25,560 --> 00:04:26,400
All right?

109
00:04:26,400 --> 00:04:28,230
Now, we haven't defined these types yet.

110
00:04:28,230 --> 00:04:29,820
We're just kind of scaffolding this out,

111
00:04:29,820 --> 00:04:32,040
kind of giving it a spike right now.

112
00:04:32,040 --> 00:04:33,300
Kind of our best shot.

113
00:04:33,300 --> 00:04:35,580
So let's go create our types file,

114
00:04:35,580 --> 00:04:39,120
add the types and then import them into this reducer.

115
00:04:39,120 --> 00:04:42,993
In my actions directory, I'll create types.js.

116
00:04:44,670 --> 00:04:45,540
And then inside of here,

117
00:04:45,540 --> 00:04:50,540
we'll export AUTH_USER as auth_user.

118
00:04:51,690 --> 00:04:56,080
And we'll also export UNAUTH_USER as

119
00:04:58,620 --> 00:05:00,000
unauth_user.

120
00:05:00,000 --> 00:05:00,833
Okay.

121
00:05:02,520 --> 00:05:03,450
So like I was saying,

122
00:05:03,450 --> 00:05:06,300
back inside of our action creator signinUser,

123
00:05:06,300 --> 00:05:09,000
I'm back in the action creators file now,

124
00:05:09,000 --> 00:05:11,250
the goal here was to update our state

125
00:05:11,250 --> 00:05:13,950
to indicate whether or not a user is authenticated.

126
00:05:13,950 --> 00:05:16,200
So we've now got this very precise,

127
00:05:16,200 --> 00:05:20,370
very small action that we can dispatch

128
00:05:20,370 --> 00:05:22,830
that just says hey, is the user authenticated or not?

129
00:05:22,830 --> 00:05:24,000
Yes or no.

130
00:05:24,000 --> 00:05:27,840
So as long as we send off or dispatch an action

131
00:05:27,840 --> 00:05:31,740
of type AUTH_USER, it will flip that authenticated flag

132
00:05:31,740 --> 00:05:33,390
from false to true.

133
00:05:33,390 --> 00:05:36,060
So we can now take care of this update state case right here

134
00:05:36,060 --> 00:05:37,563
or this update state.

135
00:05:39,690 --> 00:05:41,490
If we are inside of the then case,

136
00:05:41,490 --> 00:05:43,500
that means that we just successfully authenticated,

137
00:05:43,500 --> 00:05:48,100
so I want to dispatch an action here of type

138
00:05:50,703 --> 00:05:51,933
AUTH_USER.

139
00:05:53,130 --> 00:05:54,960
And we'll talk about the dispatch here in a second.

140
00:05:54,960 --> 00:05:57,900
Let's first make sure that we import our type at the top.

141
00:05:57,900 --> 00:05:59,733
I'm gonna import AUTH_USER

142
00:06:00,780 --> 00:06:03,183
from types like so.

143
00:06:04,680 --> 00:06:06,653
Okay, so tons of code in this section, tons of code.

144
00:06:06,653 --> 00:06:08,850
Let's take a break in the next section

145
00:06:08,850 --> 00:06:11,283
and do a little bit of review of everything we just did.

146
00:06:11,283 --> 00:06:13,680
Unfortunately, authentication is something

147
00:06:13,680 --> 00:06:16,110
that's really hard to go through in a very linear fashion

148
00:06:16,110 --> 00:06:17,700
and so we are doing kind of a little bit

149
00:06:17,700 --> 00:06:19,110
of a jumping around here

150
00:06:19,110 --> 00:06:21,360
as we go through and adding all this functionality,

151
00:06:21,360 --> 00:06:22,885
which is kind of unfortunate but again,

152
00:06:22,885 --> 00:06:24,510
it's kind of a necessity.

153
00:06:24,510 --> 00:06:26,520
So let's take a little bit of a break in the next section

154
00:06:26,520 --> 00:06:28,620
and review on all the code we just wrote.

155
00:06:28,620 --> 00:06:29,570
I'll see you there.