1
00:00:00,750 --> 00:00:02,025
Instructor: I'm at my terminal

2
00:00:02,025 --> 00:00:04,140
inside my project directory here.

3
00:00:04,140 --> 00:00:06,903
I'm going to first open my code editor.

4
00:00:08,340 --> 00:00:10,740
And I'm also gonna start up our development environment

5
00:00:10,740 --> 00:00:14,193
by running the command npm run start.

6
00:00:15,900 --> 00:00:18,900
And that will start off webpack doing our build for us.

7
00:00:18,900 --> 00:00:22,803
I'm also gonna pull up my code editor onto the screen here.

8
00:00:24,780 --> 00:00:25,613
Great.

9
00:00:28,410 --> 00:00:29,243
Okay.

10
00:00:29,243 --> 00:00:31,710
So at this point, we've got our boilerplate package.

11
00:00:31,710 --> 00:00:33,600
It's definitely running in the browser.

12
00:00:33,600 --> 00:00:36,240
We tested it and we also saw some wireframes,

13
00:00:36,240 --> 00:00:38,340
which means we're totally ready to get started

14
00:00:38,340 --> 00:00:39,810
on our project, right?

15
00:00:39,810 --> 00:00:41,460
Got this big authentication app.

16
00:00:41,460 --> 00:00:42,851
We're totally ready to get going.

17
00:00:42,851 --> 00:00:44,580
We've done all our startup.

18
00:00:44,580 --> 00:00:46,399
We've got a good idea of the design.

19
00:00:46,399 --> 00:00:48,810
That means surely we're ready

20
00:00:48,810 --> 00:00:50,850
to start writing some code, right?

21
00:00:50,850 --> 00:00:53,370
Well, like most things, not quite.

22
00:00:53,370 --> 00:00:55,500
This is a really big application that we're making here.

23
00:00:55,500 --> 00:00:57,540
It has several different screens.

24
00:00:57,540 --> 00:01:00,060
We kind of have this internal kind of gut feeling

25
00:01:00,060 --> 00:01:02,610
on how authentication should work but trust me,

26
00:01:02,610 --> 00:01:04,860
when you really have to start writing the logic,

27
00:01:04,860 --> 00:01:08,400
it really starts to get pretty darn challenging.

28
00:01:08,400 --> 00:01:10,560
So again, just to get a better idea

29
00:01:10,560 --> 00:01:12,000
of how we're gonna tackle this,

30
00:01:12,000 --> 00:01:14,400
let's look at just a little bit more diagrams

31
00:01:14,400 --> 00:01:16,140
and then we're gonna start writing some code

32
00:01:16,140 --> 00:01:17,253
inside this section.

33
00:01:18,390 --> 00:01:21,540
So I took the same wireframe that we were just looking at,

34
00:01:21,540 --> 00:01:23,400
and I added on some component labels

35
00:01:23,400 --> 00:01:25,470
for some of the stuff that we need to make.

36
00:01:25,470 --> 00:01:27,300
So at the top of every single screen,

37
00:01:27,300 --> 00:01:28,860
we'll have our header component.

38
00:01:28,860 --> 00:01:32,040
And then in the body of each page, it's gonna swap out.

39
00:01:32,040 --> 00:01:34,260
So for the first page that a user will see

40
00:01:34,260 --> 00:01:35,850
when they are not authenticated,

41
00:01:35,850 --> 00:01:37,980
I'm just gonna call landing.

42
00:01:37,980 --> 00:01:40,860
The sign in page will be called signin.

43
00:01:40,860 --> 00:01:42,960
We'll have signup.

44
00:01:42,960 --> 00:01:45,210
And finally, we'll call the feature,

45
00:01:45,210 --> 00:01:46,740
just simply feature but again,

46
00:01:46,740 --> 00:01:48,690
if you were loading up a list of posts

47
00:01:48,690 --> 00:01:51,600
or maybe emails or whatever it might be,

48
00:01:51,600 --> 00:01:54,660
you might call this instead post emails,

49
00:01:54,660 --> 00:01:56,970
whatever you might want to call the component.

50
00:01:56,970 --> 00:01:59,160
So this gives us at least a little bit better idea

51
00:01:59,160 --> 00:02:00,870
of the components that we'll need.

52
00:02:00,870 --> 00:02:02,940
But what about the actual state

53
00:02:02,940 --> 00:02:04,830
to power this application?

54
00:02:04,830 --> 00:02:06,990
What is this application state gonna look like?

55
00:02:06,990 --> 00:02:09,789
That's what's really key here for an authentication app.

56
00:02:11,190 --> 00:02:13,770
I'm gonna pull another diagram up on the screen.

57
00:02:13,770 --> 00:02:16,080
And so this is the diagram of the application state

58
00:02:16,080 --> 00:02:17,250
that we're gonna end up with

59
00:02:17,250 --> 00:02:20,313
for just handling the authentication side of things.

60
00:02:21,370 --> 00:02:24,510
We're gonna have a piece of application state

61
00:02:24,510 --> 00:02:27,090
called either auth or authentication.

62
00:02:27,090 --> 00:02:28,590
We can kind of decide when we get there.

63
00:02:28,590 --> 00:02:30,240
It'll be one or the other.

64
00:02:30,240 --> 00:02:31,350
And that piece of state

65
00:02:31,350 --> 00:02:34,170
is going to have two separate flags to it.

66
00:02:34,170 --> 00:02:37,800
First, it'll have a plain, simple Boolean,

67
00:02:37,800 --> 00:02:41,070
which will map out to the key authenticated.

68
00:02:41,070 --> 00:02:44,190
This Boolean right here for authenticated relates

69
00:02:44,190 --> 00:02:46,560
to whether or not the user is currently signed in

70
00:02:46,560 --> 00:02:47,970
to the application.

71
00:02:47,970 --> 00:02:50,820
So you'll notice that there's not really a good reason

72
00:02:50,820 --> 00:02:52,710
to store the JW key

73
00:02:52,710 --> 00:02:54,094
that we're going to be using inside

74
00:02:54,094 --> 00:02:56,280
of our application state.

75
00:02:56,280 --> 00:02:59,490
That key, we don't really need the key

76
00:02:59,490 --> 00:03:00,660
in our application state.

77
00:03:00,660 --> 00:03:02,910
We definitely wanna store it somewhere, right?

78
00:03:02,910 --> 00:03:03,900
We wanna store it somewhere

79
00:03:03,900 --> 00:03:07,080
but we don't really need it inside the application state.

80
00:03:07,080 --> 00:03:08,910
So to indicate whether or not a user

81
00:03:08,910 --> 00:03:11,400
is currently signed in or not,

82
00:03:11,400 --> 00:03:14,223
we'll be using a simple Boolean true or false.

83
00:03:15,240 --> 00:03:17,310
The other part of state that's gonna be really important

84
00:03:17,310 --> 00:03:19,383
is gonna be this error flag right here.

85
00:03:20,220 --> 00:03:21,900
And well, I shouldn't really say flag,

86
00:03:21,900 --> 00:03:23,880
I should say error: string.

87
00:03:23,880 --> 00:03:24,783
This error: string right here

88
00:03:24,783 --> 00:03:27,120
will be a simple text message

89
00:03:27,120 --> 00:03:30,112
to display on any given form that's on the screen

90
00:03:30,112 --> 00:03:34,170
that will display whether or not an error related

91
00:03:34,170 --> 00:03:36,060
to authentication just occurred.

92
00:03:36,060 --> 00:03:39,030
So if a user say enters a bad password

93
00:03:39,030 --> 00:03:42,240
or makes a request that they're not authenticated to make,

94
00:03:42,240 --> 00:03:43,980
or if they try to create an account

95
00:03:43,980 --> 00:03:46,140
with an email that's already been taken,

96
00:03:46,140 --> 00:03:47,910
we'll dump that error message

97
00:03:47,910 --> 00:03:49,530
on this error property right here

98
00:03:49,530 --> 00:03:51,270
and then we'll make sure to use it inside

99
00:03:51,270 --> 00:03:54,213
of any form that we wanna show an error message inside of.

100
00:03:55,860 --> 00:03:57,090
One last thing.

101
00:03:57,090 --> 00:03:58,380
We're looking at state here

102
00:03:58,380 --> 00:03:59,520
but it's really important to think

103
00:03:59,520 --> 00:04:02,583
about exactly how we're gonna be modifying state as well.

104
00:04:03,480 --> 00:04:05,220
We modify state with action creators

105
00:04:05,220 --> 00:04:06,390
but I guess what I'm trying to say

106
00:04:06,390 --> 00:04:09,240
is what different action creators do we want

107
00:04:09,240 --> 00:04:10,800
for our application?

108
00:04:10,800 --> 00:04:13,170
Chances are we're going to want an authentication

109
00:04:13,170 --> 00:04:15,030
or excuse me, an application creator

110
00:04:15,030 --> 00:04:17,550
that's going to change this authenticated flag

111
00:04:17,550 --> 00:04:21,690
whenever a user signs in, signs out or signs up.

112
00:04:21,690 --> 00:04:23,580
So with these three probably

113
00:04:23,580 --> 00:04:26,100
separate different action creators right here,

114
00:04:26,100 --> 00:04:28,140
we'll be changing this flag

115
00:04:28,140 --> 00:04:30,540
of authenticated from true to false.

116
00:04:30,540 --> 00:04:32,340
Just a very simple toggle

117
00:04:32,340 --> 00:04:34,790
to indicate whether or not the user is signed up.

118
00:04:35,700 --> 00:04:37,380
So this is where we're heading.

119
00:04:37,380 --> 00:04:38,550
We've now got a better idea

120
00:04:38,550 --> 00:04:40,770
of what our application state's gonna look like

121
00:04:40,770 --> 00:04:42,000
and we've also got a better idea

122
00:04:42,000 --> 00:04:43,230
of some of the different components

123
00:04:43,230 --> 00:04:46,260
that we're gonna show in our application as well.

124
00:04:46,260 --> 00:04:48,660
So I think probably a good place to start

125
00:04:48,660 --> 00:04:50,940
and again, when we're talking about authentication,

126
00:04:50,940 --> 00:04:52,680
finding a reasonable place to start

127
00:04:52,680 --> 00:04:55,800
is almost definitely one of the hardest parts.

128
00:04:55,800 --> 00:04:57,930
I'm not gonna lie.

129
00:04:57,930 --> 00:04:59,520
A really reasonable place to start here

130
00:04:59,520 --> 00:05:01,470
would be probably starting to put together some

131
00:05:01,470 --> 00:05:03,480
of the different components that we're going to need.

132
00:05:03,480 --> 00:05:06,720
So putting together say React Router

133
00:05:06,720 --> 00:05:07,830
and just having the ability

134
00:05:07,830 --> 00:05:10,680
to navigate between these different components

135
00:05:10,680 --> 00:05:12,280
would be a great place to start.

136
00:05:13,530 --> 00:05:15,720
Now, React Router has already been installed

137
00:05:15,720 --> 00:05:16,800
inside of this project.

138
00:05:16,800 --> 00:05:18,990
So we can just immediately start making use of it

139
00:05:18,990 --> 00:05:23,193
inside of our index.js file, the top-level index.js.

140
00:05:24,210 --> 00:05:26,220
Inside of this top-level index.js,

141
00:05:26,220 --> 00:05:29,160
we will start setting up our React Router

142
00:05:29,160 --> 00:05:32,250
by importing at the top and hopefully by now,

143
00:05:32,250 --> 00:05:35,730
some of this is gonna become pretty well-memorized code.

144
00:05:35,730 --> 00:05:39,270
We will import our Router, our Route,

145
00:05:39,270 --> 00:05:41,850
we'll probably need an IndexRoute

146
00:05:41,850 --> 00:05:45,360
and the browserHistory object as well.

147
00:05:45,360 --> 00:05:47,433
This is all gonna come from react-router.

148
00:05:49,590 --> 00:05:50,940
We'll set up our router

149
00:05:50,940 --> 00:05:54,000
by placing a router tag inside of the provider.

150
00:05:54,000 --> 00:05:55,530
Remember, the provider right here

151
00:05:55,530 --> 00:05:58,923
is what communicates with our connected components.

152
00:06:00,300 --> 00:06:01,830
I'll place my router

153
00:06:01,830 --> 00:06:06,830
and we'll assign it a history of browserHistory.

154
00:06:09,630 --> 00:06:12,450
Make sure we close the tag appropriately.

155
00:06:12,450 --> 00:06:15,250
And then we're just gonna put our app inside of a route.

156
00:06:16,200 --> 00:06:19,440
So whenever someone goes to the root route,

157
00:06:19,440 --> 00:06:22,713
show them the component App, like so.

158
00:06:25,290 --> 00:06:27,750
And then I'm gonna remove this App tag standing

159
00:06:27,750 --> 00:06:29,163
by itself right here.

160
00:06:31,650 --> 00:06:33,300
All right, humble beginnings, right?

161
00:06:33,300 --> 00:06:35,130
It's gotta start somewhere.

162
00:06:35,130 --> 00:06:37,053
I'm gonna save this document.

163
00:06:38,430 --> 00:06:39,960
Pop open my browser.

164
00:06:39,960 --> 00:06:42,180
Go to localhost:8080.

165
00:06:42,180 --> 00:06:44,850
Looks like we don't immediately have anything on the screen.

166
00:06:44,850 --> 00:06:47,220
I probably just made a quick typo.

167
00:06:47,220 --> 00:06:49,980
Remember, if you ever have a typo,

168
00:06:49,980 --> 00:06:53,010
I highly encourage you to pop open to your terminal,

169
00:06:53,010 --> 00:06:55,140
see if you have an error message,.

170
00:06:55,140 --> 00:06:56,820
And sure enough, it looks like I never closed

171
00:06:56,820 --> 00:06:58,470
the router tag.

172
00:06:58,470 --> 00:07:01,140
Something which I seem to do all the time.

173
00:07:01,140 --> 00:07:02,550
And so on line 14 right here,

174
00:07:02,550 --> 00:07:04,050
sure enough, I left it open.

175
00:07:04,050 --> 00:07:05,700
Let's close it.

176
00:07:05,700 --> 00:07:07,770
I can verify in my terminal

177
00:07:07,770 --> 00:07:09,513
that my bundle is now valid.

178
00:07:10,650 --> 00:07:12,540
Refresh the page.

179
00:07:12,540 --> 00:07:15,240
And I still get React simple starter on the page.

180
00:07:15,240 --> 00:07:16,650
Exactly what I wanted.

181
00:07:16,650 --> 00:07:21,123
So again, nice, simple, humble belongings so to speak.

182
00:07:22,020 --> 00:07:24,210
Let's go ahead and continue in the next section

183
00:07:24,210 --> 00:07:26,640
where we're going to continue by scaffolding out some more

184
00:07:26,640 --> 00:07:29,010
of the different components inside of our application.

185
00:07:29,010 --> 00:07:29,960
I'll see you there.