1
00:00:00,970 --> 00:00:05,540
In the last video he came to the realization that we should probably be making use of Jason Webb tokens.

2
00:00:05,710 --> 00:00:10,180
But now we need to decide how we are going to communicate that Jason Webb token over to our back end

3
00:00:10,180 --> 00:00:11,270
services.

4
00:00:11,280 --> 00:00:15,910
So in this video I want to lay out a couple of further requirements of our application.

5
00:00:15,910 --> 00:00:16,150
All right.

6
00:00:16,240 --> 00:00:21,520
So first a quick diagram here just to give you a quick reminder on what goes on during the loading process

7
00:00:21,550 --> 00:00:26,410
of an application into the browser when we are writing a normal react application.

8
00:00:26,410 --> 00:00:32,470
This might not seem relevant to this Jason Webb token question at all but trust me it is extremely extremely

9
00:00:32,470 --> 00:00:33,330
relevant.

10
00:00:33,340 --> 00:00:37,810
So first just a quick reminder of how a normal react application works.

11
00:00:37,820 --> 00:00:38,940
OK I'm going to zoom in here.

12
00:00:38,990 --> 00:00:44,880
I start off at the very top so you're going to imagine that a user types out ticketing dot Dev into

13
00:00:44,880 --> 00:00:50,670
their address bar and hits enter as soon as that is done your browser is going to make a get request

14
00:00:50,700 --> 00:00:57,220
to ticketing dot Dev then with a typical react application we are going to then immediately send back

15
00:00:57,370 --> 00:01:02,680
in each demo file that is pretty much bare bones there's not really gonna be anything inside there except

16
00:01:02,680 --> 00:01:08,950
for a little bit of HD e-mail some script tags some C Ss tags maybe some other stuff but for the most

17
00:01:08,950 --> 00:01:14,620
part there's not going be a lot of markup inside that file that file is then going to be loaded up by

18
00:01:14,620 --> 00:01:19,510
the browser the browser is going to see all those script tags and it's going to decide oh I need to

19
00:01:19,510 --> 00:01:25,960
make a followup request to the back end client and get all the associated JavaScript files to actually

20
00:01:25,960 --> 00:01:28,580
boot up and execute this react application.

21
00:01:28,830 --> 00:01:31,780
So we're gonna make a follow up request for some JavaScript files.

22
00:01:31,810 --> 00:01:36,880
These are technically all separate requests but whatever if there are multiple files we're going to

23
00:01:36,880 --> 00:01:42,040
send back all these different JavaScript files and the browser is going to execute the code inside them.

24
00:01:42,070 --> 00:01:45,800
That is when our ReACT application is going to actually boot up inside the browser.

25
00:01:45,970 --> 00:01:50,070
And at that point in time we might need to make some requests to get some data.

26
00:01:50,260 --> 00:01:57,040
The react app at that point might make a request over to the order service asking for some data and

27
00:01:57,040 --> 00:02:02,440
the order service will respond with that orders data react application will then take that info build

28
00:02:02,440 --> 00:02:06,220
some H T mail and display on the screen to show to the users.

29
00:02:06,220 --> 00:02:10,680
So again that is the normal flow of a typical react application.

30
00:02:10,680 --> 00:02:15,470
Now quick question for you we are taking a look at more or less three requests here.

31
00:02:15,550 --> 00:02:21,940
The initial request a follow up request to get some javascript files or SS files or whatever else and

32
00:02:21,940 --> 00:02:27,130
then a third request right here to get some actual data that the application needs.

33
00:02:27,130 --> 00:02:33,100
So considering these three requests at what point in time do we need to somehow communicate authentication

34
00:02:33,130 --> 00:02:37,210
information from the browser over to the back end.

35
00:02:37,210 --> 00:02:39,460
Well we probably don't really need to do it.

36
00:02:39,460 --> 00:02:43,210
We don't really need to know if this user is logged in during the initial request.

37
00:02:43,210 --> 00:02:47,890
There might be some scenarios where we do not even want to send a user a react application if they are

38
00:02:47,890 --> 00:02:48,730
not logged in.

39
00:02:48,820 --> 00:02:53,950
But for the most part we usually say that we don't really care about sending out the source code for

40
00:02:53,950 --> 00:02:54,870
a react app.

41
00:02:55,030 --> 00:02:58,090
You might think to yourself Well Steven do we want to secure the source code.

42
00:02:58,090 --> 00:03:01,950
To be honest no that's not something it's very commonly done in the production world.

43
00:03:01,960 --> 00:03:08,080
So during that initial request with a normal react up we really don't care about authentication.

44
00:03:08,130 --> 00:03:10,800
Do we need to know about authentication with JavaScript files.

45
00:03:10,800 --> 00:03:14,190
Well no for the same reasons we don't really care if users logged in.

46
00:03:14,190 --> 00:03:16,220
Sure they could have some javascript code go for it.

47
00:03:16,260 --> 00:03:16,610
Take it.

48
00:03:16,620 --> 00:03:18,370
I don't care.

49
00:03:18,380 --> 00:03:22,850
The only time that we really care about whether or not a user is logged in is when they start asking

50
00:03:22,880 --> 00:03:31,350
for data so we would really say that for a normal react application right here is really the soonest

51
00:03:31,350 --> 00:03:37,060
point in time we ever need to start to worry about sending authentication data over to the server.

52
00:03:37,140 --> 00:03:39,110
We need to include authentication data.

53
00:03:39,120 --> 00:03:45,240
So specifically the states on a Web token inside of this request right here to our back end order service

54
00:03:45,270 --> 00:03:50,010
because the order service probably needs to know about whether or not this user user is logged in and

55
00:03:50,010 --> 00:03:54,850
whether they have permission to view this data or whatever else OK.

56
00:03:54,880 --> 00:04:00,250
So again that request right there would probably be the soonest that we would want to think about including

57
00:04:00,250 --> 00:04:05,710
that Jason web token and we would probably include that in the headers or some authorization header

58
00:04:05,710 --> 00:04:12,020
of the request in the body of the request or alternatively maybe by using that cookie mechanism as well.

59
00:04:12,070 --> 00:04:16,940
All three these would work with a normal react application.

60
00:04:17,020 --> 00:04:19,650
You'll notice that I'm stressing the term normal here.

61
00:04:19,750 --> 00:04:24,960
So as a reminder we are not really building a very normal react application.

62
00:04:24,970 --> 00:04:29,830
Instead we are building a server side rendered react application.

63
00:04:29,830 --> 00:04:35,590
The idea behind a server side rendered react up is that we are going to make some initial request to

64
00:04:35,590 --> 00:04:37,270
some back end server.

65
00:04:37,270 --> 00:04:43,950
This back in server is then going to render out or build the h t mail for our entire app and then send

66
00:04:43,960 --> 00:04:50,020
that A.T.M. file with all the content inside of it all the relevant orders or tickets or whatever else

67
00:04:50,350 --> 00:04:51,230
already rendered.

68
00:04:51,250 --> 00:04:52,380
As each team.

69
00:04:52,900 --> 00:04:56,890
We're going to send that response backwards the browser the browser is going to get that e-mail file

70
00:04:57,070 --> 00:05:01,700
and instantly have some content to show to the user on the screen without having to make all those follow

71
00:05:01,700 --> 00:05:03,910
up requests to get some javascript files.

72
00:05:04,030 --> 00:05:09,580
And another request to get some data the whole reason we are using the server side rendering approach

73
00:05:09,880 --> 00:05:12,250
is for SEO purposes.

74
00:05:12,250 --> 00:05:15,210
Search engine optimization and also page load speed.

75
00:05:15,220 --> 00:05:21,510
If our user has the older device or a mobile device for that matter let's think about what this really

76
00:05:21,510 --> 00:05:26,270
means to be able to send back an HMO file with all the relevant content inside of it.

77
00:05:26,340 --> 00:05:33,600
From the very first request that means that our client whatever we built here this next JSA application.

78
00:05:33,600 --> 00:05:35,760
That's how we're going to do this server side rendering stuff.

79
00:05:35,760 --> 00:05:38,390
We're going to use a framework called Next J.S..

80
00:05:38,490 --> 00:05:43,420
That means that this next J.S. process right here is going to have to fetch some data.

81
00:05:43,490 --> 00:05:48,420
So that means that that thing is going to have to reach out directly in one way or another to our order

82
00:05:48,420 --> 00:05:54,260
service or the ticketing service or whatever else it needs to get that information.

83
00:05:54,320 --> 00:06:00,680
So an immediate response with some relevant content so with our approach you're using the server side

84
00:06:00,680 --> 00:06:02,560
rendering without a doubt.

85
00:06:02,690 --> 00:06:08,390
We need to know authentication information with the very first request.

86
00:06:08,450 --> 00:06:12,800
This very first request right here we need to communicate that JS on web token.

87
00:06:12,800 --> 00:06:18,620
So that very first request needs to have that authorization header or a token in the body or the token

88
00:06:18,620 --> 00:06:21,800
inside of some cookie or something like that.

89
00:06:21,820 --> 00:06:24,340
Now this really presents a big issue.

90
00:06:24,340 --> 00:06:32,770
Let me tell you why when you type in say Google dot com into your address bar and hit Enter Google has

91
00:06:32,770 --> 00:06:40,650
no ability to run any javascript code on your computer before sending you an HMO file when you hit enter.

92
00:06:40,660 --> 00:06:45,430
The first thing is going to happen you are going to get back an e-mail file and inside that HMO file

93
00:06:45,460 --> 00:06:50,920
we can have some javascript code or a reference to a script tag to load up some code and then at that

94
00:06:50,920 --> 00:06:56,080
point in time Google can start to reach around and try to find a token stored on your device or something

95
00:06:56,080 --> 00:06:56,840
like that.

96
00:06:56,920 --> 00:07:03,130
But the point is that during that initial page load request when we press enter into our address bar

97
00:07:03,130 --> 00:07:07,980
to go to some domain we can not customize that initial request in any way.

98
00:07:08,170 --> 00:07:14,470
We can not somehow execute some javascript code ahead of time or anything like that so that has a really

99
00:07:14,470 --> 00:07:15,970
big impact.

100
00:07:15,970 --> 00:07:21,640
That means that we cannot run some custom code to intercept that initial page load and try to append

101
00:07:21,700 --> 00:07:24,120
an authorization header in that request.

102
00:07:24,280 --> 00:07:29,530
We cannot tried to add in a token to the body of the request so that means that both of these methods

103
00:07:29,590 --> 00:07:35,740
of sharing the Jason web token with our back and server go out the window when we are doing server side

104
00:07:35,740 --> 00:07:41,770
rendering if we want to tell that server who we are or communicate any information during that initial

105
00:07:41,770 --> 00:07:49,540
page load request that information absolutely positively has to be stored inside of a cookie.

106
00:07:49,540 --> 00:07:55,030
Because only this cookie is Cookie right here that is the only way for us to somehow communicate information

107
00:07:55,450 --> 00:07:57,500
from our browser to that back end.

108
00:07:57,580 --> 00:08:01,190
During the initial page load.

109
00:08:01,250 --> 00:08:06,330
Now having said that there is technically a very small corner case we can get around this by using service

110
00:08:06,330 --> 00:08:10,680
workers but that's really way outside the scope of what we're doing here with our ReACT application

111
00:08:11,070 --> 00:08:13,150
and a general service workers.

112
00:08:13,150 --> 00:08:18,960
It is a pretty big architectural change to our ReACT application and it would require a lot more integration

113
00:08:18,960 --> 00:08:19,930
with next gen us.

114
00:08:19,980 --> 00:08:23,490
So that's really something we're not really going to consider here even though I just want it out there

115
00:08:23,520 --> 00:08:26,020
technically as a workaround for this.

116
00:08:26,100 --> 00:08:31,110
So long story short because we are doing server side rendering and because this first request needs

117
00:08:31,110 --> 00:08:36,750
to have authentication information and because we cannot customize that request in any way to try to

118
00:08:36,750 --> 00:08:43,960
attach on an additional header or some information side the body we have to communicate our Jason web

119
00:08:43,960 --> 00:08:45,930
token inside of a cookie.

120
00:08:46,000 --> 00:08:48,870
It's a hard requirement.

121
00:08:49,230 --> 00:08:55,260
So at this point we've essentially established that we're going to use a Jason web token and it's gonna

122
00:08:55,260 --> 00:08:59,820
be stored inside of a cookie and that's why a little bit ago I made kind of a big deal about reviewing

123
00:09:00,090 --> 00:09:04,920
the differences differences between cookies and Jason web tokens because again a lot of time when we

124
00:09:04,920 --> 00:09:08,950
hear about Cookie based authentication we just think oh this is something totally different than Jason

125
00:09:08,980 --> 00:09:09,800
a token.

126
00:09:09,810 --> 00:09:11,310
No it's not.

127
00:09:11,310 --> 00:09:15,570
Cookies are a transport mechanism there's something we use to move information around.

128
00:09:15,720 --> 00:09:20,960
We can store a Jason web token or move a Jason web token around inside of a cookie but whenever you

129
00:09:20,950 --> 00:09:26,100
hear about cookie based authentication the assumption a lot of engineers make is that we are somehow

130
00:09:26,100 --> 00:09:30,750
creating a customized token or something like that and storing inside of a cookie.

131
00:09:30,780 --> 00:09:31,890
Yeah that's totally valid.

132
00:09:31,890 --> 00:09:36,870
We could totally do that but it's not mutually exclusive with using Jason web tokens we can use.

133
00:09:36,870 --> 00:09:38,970
Cookies and Jason web tokens together.

134
00:09:38,970 --> 00:09:43,950
And that's exactly what we were going to do to solve this server side rendering issue.

135
00:09:44,020 --> 00:09:44,590
All right.

136
00:09:44,710 --> 00:09:46,830
We've gone through a couple of very lucky videos now.

137
00:09:46,840 --> 00:09:51,850
I apologize for the duration but we are essentially all done with the background on this authentication

138
00:09:51,850 --> 00:09:52,540
stuff.

139
00:09:52,610 --> 00:09:57,460
Going to take a pause right here and start to build out our authentication system for real in the next

140
00:09:57,460 --> 00:09:57,880
video.