1
00:00:00,570 --> 00:00:01,740
Instructor: Our application is currently

2
00:00:01,740 --> 00:00:03,210
in a pretty good spot.

3
00:00:03,210 --> 00:00:06,753
If we enter in a valid email and password,

4
00:00:07,680 --> 00:00:10,020
we successfully get back a JWT token,

5
00:00:10,020 --> 00:00:12,570
which means we can make authenticated requests

6
00:00:12,570 --> 00:00:13,980
in the future.

7
00:00:13,980 --> 00:00:17,490
But what happens when we try to submit our form here,

8
00:00:17,490 --> 00:00:20,100
our sign-in form, when say,

9
00:00:20,100 --> 00:00:23,310
we didn't enter an email or password at all.

10
00:00:23,310 --> 00:00:24,240
What happens then?

11
00:00:24,240 --> 00:00:26,880
Well, we kind of predictably get a 400 here

12
00:00:26,880 --> 00:00:28,050
that says bad request.

13
00:00:28,050 --> 00:00:30,390
Basically, "Hey, you didn't even provide a email

14
00:00:30,390 --> 00:00:31,560
or password."

15
00:00:31,560 --> 00:00:34,860
We need to obviously provide some amount of information here

16
00:00:34,860 --> 00:00:36,780
or some level of validation.

17
00:00:36,780 --> 00:00:40,440
Let's also try entering, say, a valid email,

18
00:00:40,440 --> 00:00:43,260
but maybe a bad password,

19
00:00:43,260 --> 00:00:45,630
in this case, which we saw previously,

20
00:00:45,630 --> 00:00:47,077
we get a 401, meaning,

21
00:00:47,077 --> 00:00:49,320
"Hey, you put in a bad password here,

22
00:00:49,320 --> 00:00:52,530
or perhaps the email you entered doesn't even exist."

23
00:00:52,530 --> 00:00:54,900
So we definitely need to be handling some kind

24
00:00:54,900 --> 00:00:56,520
type of error messaging here.

25
00:00:56,520 --> 00:00:58,807
Something, the feedback, give feedback to the user,

26
00:00:58,807 --> 00:01:00,210
"Hey, something just went wrong,

27
00:01:00,210 --> 00:01:02,520
you should really try a different password or something.

28
00:01:02,520 --> 00:01:04,620
Give it another shot and see how it goes."

29
00:01:05,850 --> 00:01:08,820
So to do that, we will add another piece of state

30
00:01:08,820 --> 00:01:11,340
to our authentication reducer.

31
00:01:11,340 --> 00:01:12,930
We'll add another case in here,

32
00:01:12,930 --> 00:01:16,020
that's going to handle any type of error that comes across,

33
00:01:16,020 --> 00:01:19,470
any type of error action that comes into this reducer.

34
00:01:19,470 --> 00:01:22,800
If it picks up an error, we can then show that error text

35
00:01:22,800 --> 00:01:24,720
inside of our component and poof,

36
00:01:24,720 --> 00:01:26,883
there's our error message all ready to go.

37
00:01:28,470 --> 00:01:30,930
So adding another case to our reducer

38
00:01:30,930 --> 00:01:34,650
means we'll need to add another type to our actions file.

39
00:01:34,650 --> 00:01:38,220
So inside of types.js, I'm going to add another type,

40
00:01:38,220 --> 00:01:41,470
and we'll call this one "export const

41
00:01:42,485 --> 00:01:43,675
AUTH_ERROR".

42
00:01:43,675 --> 00:01:48,025
(keyboard keys clattering)

43
00:01:48,025 --> 00:01:50,100
Now I'm gonna close this,

44
00:01:50,100 --> 00:01:51,480
I'm gonna close a couple other files

45
00:01:51,480 --> 00:01:53,460
'cause I got just a whole bunch open.

46
00:01:53,460 --> 00:01:56,220
I'm gonna go back into the index.js file

47
00:01:56,220 --> 00:01:58,890
and look at the kind of the catch case here.

48
00:01:58,890 --> 00:01:59,910
So this is the case in which,

49
00:01:59,910 --> 00:02:02,460
you wanna show an error message to the user.

50
00:02:02,460 --> 00:02:04,080
If you really think about it,

51
00:02:04,080 --> 00:02:06,630
this is the sign-in user route, right?

52
00:02:06,630 --> 00:02:09,120
Or the sign-in user action creator.

53
00:02:09,120 --> 00:02:10,949
But we're very soon also going to have

54
00:02:10,949 --> 00:02:13,590
a sign-up user action creator as well.

55
00:02:13,590 --> 00:02:15,510
And chances are, it's going to need,

56
00:02:15,510 --> 00:02:18,690
need to have probably nearly exactly the same level

57
00:02:18,690 --> 00:02:21,420
of error handling, something to kind of take some error

58
00:02:21,420 --> 00:02:22,860
and show it to the user.

59
00:02:22,860 --> 00:02:26,400
So I'm going to, I'm thinking that it might be advantageous

60
00:02:26,400 --> 00:02:29,910
that rather than dispatching an action directly in here

61
00:02:29,910 --> 00:02:33,720
and writing the action directly in line as we did above,

62
00:02:33,720 --> 00:02:36,420
maybe we should make a separate action creator

63
00:02:36,420 --> 00:02:37,800
to handle the case in which

64
00:02:37,800 --> 00:02:40,020
there is an error with authentication.

65
00:02:40,020 --> 00:02:42,720
So let's give that a shot, see how it looks.

66
00:02:42,720 --> 00:02:45,630
I'm gonna make a separate action creator

67
00:02:45,630 --> 00:02:47,910
and I'm gonna call it "authError",

68
00:02:47,910 --> 00:02:50,100
and I'm gonna assume, you need to pass it a string

69
00:02:50,100 --> 00:02:53,000
that contains the error that you want to show to the user.

70
00:02:54,510 --> 00:02:57,160
Then we will return from here, type

71
00:02:58,009 --> 00:02:59,009
"AUTH_ERROR"

72
00:03:00,540 --> 00:03:03,840
and a payload of the error string itself.

73
00:03:03,840 --> 00:03:05,043
So error is error.

74
00:03:05,940 --> 00:03:09,270
Let's make sure that we import this type into this file.

75
00:03:09,270 --> 00:03:10,533
So up the top,

76
00:03:11,910 --> 00:03:14,100
we will add in our additional type here

77
00:03:14,100 --> 00:03:17,310
of "AUTH_ERROR"

78
00:03:17,310 --> 00:03:18,143
like so.

79
00:03:19,380 --> 00:03:21,480
Now, what we do have to do is make sure

80
00:03:21,480 --> 00:03:24,780
that we call this action creator at the right time.

81
00:03:24,780 --> 00:03:27,630
So the only time that we want to call AuthError right now

82
00:03:27,630 --> 00:03:31,110
is really inside of this catch statement right here.

83
00:03:31,110 --> 00:03:33,090
So this again is where

84
00:03:33,090 --> 00:03:35,520
Redux Thunk starts to become very handy.

85
00:03:35,520 --> 00:03:37,890
Up to this point and all the applications we've done,

86
00:03:37,890 --> 00:03:39,960
we've only called action creators

87
00:03:39,960 --> 00:03:42,900
from individual components, but this is a point in time

88
00:03:42,900 --> 00:03:45,120
where we want to kind of call an action creator,

89
00:03:45,120 --> 00:03:47,520
only in this kind of very specific case

90
00:03:47,520 --> 00:03:49,890
that's nested inside another one.

91
00:03:49,890 --> 00:03:52,350
So to do so, we can just add

92
00:03:52,350 --> 00:03:54,267
dispatch authError,

93
00:03:55,410 --> 00:03:57,990
and then pass in whatever error message we want right here.

94
00:03:57,990 --> 00:03:59,880
And so I think I'll do just a

95
00:03:59,880 --> 00:04:01,650
very straightforward error message.

96
00:04:01,650 --> 00:04:06,627
We'll just hard code it to say "Bad login info."

97
00:04:08,310 --> 00:04:12,000
So now, if the user makes a login attempt that fails,

98
00:04:12,000 --> 00:04:15,030
or excuse me, a sign-in attempt that fails,

99
00:04:15,030 --> 00:04:16,769
we will dispatch an action

100
00:04:16,769 --> 00:04:20,343
that contains a payload of bad login info.

101
00:04:21,779 --> 00:04:23,580
So this looks pretty good.

102
00:04:23,580 --> 00:04:26,190
All we should have to do now is update our reducer

103
00:04:26,190 --> 00:04:27,780
to handle this action

104
00:04:27,780 --> 00:04:29,400
and then we can go back to our component

105
00:04:29,400 --> 00:04:31,830
and make sure that the error message gets shown.

106
00:04:31,830 --> 00:04:34,800
Let's take care of that part two in the next section.

107
00:04:34,800 --> 00:04:35,750
I'll see you there.