1
00:00:00,570 --> 00:00:02,190
Instructor: So it took a lot of code,

2
00:00:02,190 --> 00:00:05,790
one tremendous hunk of code, a huge pile of code,

3
00:00:05,790 --> 00:00:08,370
to put together client-side authentication.

4
00:00:08,370 --> 00:00:10,320
But, man, we sure did it.

5
00:00:10,320 --> 00:00:12,450
The biggest kind of heavy lifting

6
00:00:12,450 --> 00:00:14,190
that we did inside the entire application

7
00:00:14,190 --> 00:00:15,023
was definitely inside

8
00:00:15,023 --> 00:00:17,340
of our action creators file, I would say.

9
00:00:17,340 --> 00:00:20,400
The action creators signinUser and signupUser

10
00:00:20,400 --> 00:00:23,790
were both real big hefty action creators here.

11
00:00:23,790 --> 00:00:24,720
Not only did they have

12
00:00:24,720 --> 00:00:26,430
kind of branching logic inside of them,

13
00:00:26,430 --> 00:00:29,430
but they also took several distinct actions

14
00:00:29,430 --> 00:00:33,000
after a user was signed in or authenticated in some fashion.

15
00:00:33,000 --> 00:00:35,040
One thing that I wanna point out in particular,

16
00:00:35,040 --> 00:00:38,670
is that because we were storing our token on localStorage,

17
00:00:38,670 --> 00:00:41,520
our user is always going to be considered to be logged in

18
00:00:41,520 --> 00:00:43,890
until they forcibly sign out.

19
00:00:43,890 --> 00:00:44,880
And once they sign out,

20
00:00:44,880 --> 00:00:47,883
that's when we actually take care of that token right here.

21
00:00:49,800 --> 00:00:51,210
Besides the use of these

22
00:00:51,210 --> 00:00:53,370
really kind of heavy action creators,

23
00:00:53,370 --> 00:00:55,530
the other big hefty things that we did

24
00:00:55,530 --> 00:00:56,460
inside this application

25
00:00:56,460 --> 00:01:00,180
was validation inside of the signup component.

26
00:01:00,180 --> 00:01:02,040
So remember, inside the signup component,

27
00:01:02,040 --> 00:01:04,590
we used Redux form to put together some validation

28
00:01:04,590 --> 00:01:07,020
of the different fields inside of our form.

29
00:01:07,020 --> 00:01:09,090
This very particular validate function right here,

30
00:01:09,090 --> 00:01:13,800
we wrote in a pretty imperative approach right here,

31
00:01:13,800 --> 00:01:15,210
really went kind of long form

32
00:01:15,210 --> 00:01:18,060
on all the different validation options.

33
00:01:18,060 --> 00:01:19,440
As we said earlier,

34
00:01:19,440 --> 00:01:20,430
I could definitely imagine

35
00:01:20,430 --> 00:01:22,260
refactoring this validate code in here

36
00:01:22,260 --> 00:01:24,030
just to make it a little bit more condensed and clear

37
00:01:24,030 --> 00:01:26,730
to other people who are coming along in the future.

38
00:01:26,730 --> 00:01:28,860
Just to make, you know, a little bit more reusable.

39
00:01:28,860 --> 00:01:31,530
I suspect we could probably reduce this validate function

40
00:01:31,530 --> 00:01:34,050
to far fewer lines of code

41
00:01:34,050 --> 00:01:36,723
while still validating basically the same stuff.

42
00:01:38,100 --> 00:01:39,750
The other really fun thing here

43
00:01:39,750 --> 00:01:42,000
was the higher-order component that we put together,

44
00:01:42,000 --> 00:01:43,590
RequireAuth.

45
00:01:43,590 --> 00:01:45,420
So this was a higher-order component

46
00:01:45,420 --> 00:01:47,340
that we put together in a previous section,

47
00:01:47,340 --> 00:01:48,930
and the only update that we had to do it

48
00:01:48,930 --> 00:01:51,720
was to update the piece of state that it was looking at.

49
00:01:51,720 --> 00:01:54,180
After we did that, we were able to make use of it

50
00:01:54,180 --> 00:01:56,310
directly inside of our router.

51
00:01:56,310 --> 00:01:57,210
Inside of the router,

52
00:01:57,210 --> 00:02:01,320
we said, for a very particular component,

53
00:02:01,320 --> 00:02:04,230
in this case, Feature, before showing Feature,

54
00:02:04,230 --> 00:02:06,690
make sure that the user is actually authenticated.

55
00:02:06,690 --> 00:02:10,590
And so this was a use of higher-order components

56
00:02:10,590 --> 00:02:13,380
at kind of used time or required time,

57
00:02:13,380 --> 00:02:15,750
as opposed to always exporting

58
00:02:15,750 --> 00:02:18,990
a RequireAuth version of Feature.

59
00:02:18,990 --> 00:02:20,250
What I mean by that is,

60
00:02:20,250 --> 00:02:22,110
we could have just as easily imported

61
00:02:22,110 --> 00:02:25,500
our higher-order component into this file instead,

62
00:02:25,500 --> 00:02:27,540
and then added our higher-order component

63
00:02:27,540 --> 00:02:29,610
right here on top of Feature.

64
00:02:29,610 --> 00:02:30,630
Instead, we ended up

65
00:02:30,630 --> 00:02:33,030
with this very clean version of Feature

66
00:02:33,030 --> 00:02:35,040
that really anyone could access,

67
00:02:35,040 --> 00:02:38,190
and only once we started to use it at the router,

68
00:02:38,190 --> 00:02:41,280
did we define that, "Hey, this thing needs to be secured

69
00:02:41,280 --> 00:02:42,567
by authentication."

70
00:02:43,500 --> 00:02:45,480
We took this approach because it makes it very easy

71
00:02:45,480 --> 00:02:47,280
for other developers in the future

72
00:02:47,280 --> 00:02:50,340
to come view your routes file, or your kind of router here,

73
00:02:50,340 --> 00:02:53,647
and see with very plain, very visible,

74
00:02:53,647 --> 00:02:55,860
"Oh, okay, the Feature is intended to be

75
00:02:55,860 --> 00:02:58,710
kind of hidden behind this wall of authentication."

76
00:02:58,710 --> 00:03:01,050
So it's just something that helps communicate the intent

77
00:03:01,050 --> 00:03:03,723
or architecture of your code a little bit more.

78
00:03:04,920 --> 00:03:07,710
So in closing, this is client-side authentication.

79
00:03:07,710 --> 00:03:09,210
I hope you enjoyed this section.

80
00:03:09,210 --> 00:03:12,450
It definitely was a hefty amount of work to put together.

81
00:03:12,450 --> 00:03:15,750
I know that we did a tremendous amount of coding in here.

82
00:03:15,750 --> 00:03:16,680
Definitely went a little light

83
00:03:16,680 --> 00:03:18,300
on some explanations at some places,

84
00:03:18,300 --> 00:03:21,210
but that was definitely with the purpose

85
00:03:21,210 --> 00:03:22,470
of getting through the content

86
00:03:22,470 --> 00:03:24,060
in some reasonable amount of time.

87
00:03:24,060 --> 00:03:25,380
I hope you've learned a lot.

88
00:03:25,380 --> 00:03:27,120
It was certainly a lot of fun to put together,

89
00:03:27,120 --> 00:03:28,770
and I hope to see you again soon.