1
00:00:02,200 --> 00:00:04,580
So now, we learned how we can use sessions

2
00:00:04,580 --> 00:00:07,710
for really enforcing authentication.

3
00:00:07,710 --> 00:00:09,030
And that's the key thing

4
00:00:09,030 --> 00:00:11,350
of the overall authentication process.

5
00:00:11,350 --> 00:00:15,690
Now, this is how we can implement secure authentication.

6
00:00:15,690 --> 00:00:18,130
And the login functionality is really

7
00:00:18,130 --> 00:00:20,870
just one step in the overall process,

8
00:00:20,870 --> 00:00:24,090
which, in the end, has to goal of establishing a session.

9
00:00:24,090 --> 00:00:27,670
With that, you are authenticated data in it

10
00:00:27,670 --> 00:00:29,363
once the login succeeded.

11
00:00:30,540 --> 00:00:33,860
Now, before we continue with more information

12
00:00:33,860 --> 00:00:36,060
about authentication and so on,

13
00:00:36,060 --> 00:00:39,820
I wanna come back to Session and Cookies.

14
00:00:39,820 --> 00:00:42,700
And I, first of all, wanna have a closer look at Cookies,

15
00:00:42,700 --> 00:00:47,130
and make sure that we understand what a Cookie really is.

16
00:00:47,130 --> 00:00:50,290
On this slide here, I mentioned that a Cookie is,

17
00:00:50,290 --> 00:00:53,300
in the end, generated and sent back to the Client,

18
00:00:53,300 --> 00:00:57,033
so to the Browser where it is then stored by the browser.

19
00:00:58,160 --> 00:01:01,350
And we could validate that by having a look

20
00:01:01,350 --> 00:01:05,150
at this applications area in the dev tools.

21
00:01:05,150 --> 00:01:07,640
There, we indeed see that cookie.

22
00:01:07,640 --> 00:01:11,700
But how is the cookie actually sent back with a response?

23
00:01:11,700 --> 00:01:13,943
Where in the response can we see it?

24
00:01:15,080 --> 00:01:18,910
Now to understand how that cookie is actually transmitted,

25
00:01:18,910 --> 00:01:23,500
what I want to do here is I'll go to this new incognito tab

26
00:01:23,500 --> 00:01:25,740
where I don't have a cookie yet.

27
00:01:25,740 --> 00:01:28,090
And you can simply open a new browser or tab

28
00:01:28,090 --> 00:01:30,300
to have to same situation.

29
00:01:30,300 --> 00:01:32,380
So I don't have a cookie here yet.

30
00:01:32,380 --> 00:01:36,540
And I then we'll go to the network tab there,

31
00:01:36,540 --> 00:01:39,670
go to the login page, clear that.

32
00:01:39,670 --> 00:01:41,950
And now I want to log in here.

33
00:01:41,950 --> 00:01:44,910
And for this I'll use my well-known credentials

34
00:01:44,910 --> 00:01:46,430
because even though it's a new tab,

35
00:01:46,430 --> 00:01:49,510
this user, of course, still will be able to log in here

36
00:01:49,510 --> 00:01:52,350
because it's the same users stored in the same database,

37
00:01:52,350 --> 00:01:54,840
and we're talking to the same server.

38
00:01:54,840 --> 00:01:57,110
And if I click log in here,

39
00:01:57,110 --> 00:02:00,100
we see a bunch of requests being sent here.

40
00:02:00,100 --> 00:02:02,993
And now if we inspect those requests here,

41
00:02:03,920 --> 00:02:06,120
like this log in request here,

42
00:02:06,120 --> 00:02:08,680
this post requests, specifically.

43
00:02:08,680 --> 00:02:12,280
If we have a look at the Response Headers there,

44
00:02:12,280 --> 00:02:15,613
what we'll see is that there is a Set-Cookie header.

45
00:02:17,050 --> 00:02:21,610
A cookie is not data that's part of the response body

46
00:02:21,610 --> 00:02:23,400
or anything like that.

47
00:02:23,400 --> 00:02:25,880
Keep in mind, we worked with the response body

48
00:02:25,880 --> 00:02:28,600
when we sent Ajax requests, for example.

49
00:02:28,600 --> 00:02:31,490
There, we parsed the body off the response

50
00:02:31,490 --> 00:02:34,140
we received after sending a request.

51
00:02:34,140 --> 00:02:36,790
The cookie is not part of this body.

52
00:02:36,790 --> 00:02:40,750
It's not encoded in JSON or any other format.

53
00:02:40,750 --> 00:02:43,940
Instead, a cookie is sent back by the server

54
00:02:43,940 --> 00:02:48,940
by setting this Set-Cookie metadata on the response.

55
00:02:49,010 --> 00:02:51,690
This is a special metadata key,

56
00:02:51,690 --> 00:02:53,960
which is identified by the browser,

57
00:02:53,960 --> 00:02:57,420
which is the thing that we'll look at all these headers.

58
00:02:57,420 --> 00:03:00,620
And then the value of the Set-Cookie key,

59
00:03:00,620 --> 00:03:04,240
that is the actual cookie data and configuration

60
00:03:04,240 --> 00:03:06,000
that will be set.

61
00:03:06,000 --> 00:03:07,870
And here, the first thing we see

62
00:03:07,870 --> 00:03:11,580
is the identifier of the cookie in the browser,

63
00:03:11,580 --> 00:03:14,980
and then the value that should be stored for the cookie.

64
00:03:14,980 --> 00:03:17,360
And that's what we see in the application tab as well.

65
00:03:17,360 --> 00:03:19,990
Here, we got the cookie name, the identifier,

66
00:03:19,990 --> 00:03:21,500
and then the value.

67
00:03:21,500 --> 00:03:24,700
This is this long cryptic string here, also down there.

68
00:03:24,700 --> 00:03:28,090
And that is what we have after the equal sign here

69
00:03:28,090 --> 00:03:29,373
when this cookie is set.

70
00:03:30,460 --> 00:03:32,410
And then after the semicolon,

71
00:03:32,410 --> 00:03:35,340
various options are set for the cookie.

72
00:03:35,340 --> 00:03:39,510
Like HttpOnly, and there are other options as well,

73
00:03:39,510 --> 00:03:42,860
which in the end configure how long this cookie lives.

74
00:03:42,860 --> 00:03:46,630
And if it must be sent through a secure connection,

75
00:03:46,630 --> 00:03:50,030
if it can be edited through JavaScript.

76
00:03:50,030 --> 00:03:52,180
An HttpOnly cookie, for example,

77
00:03:52,180 --> 00:03:55,793
can't be edited through JavaScript, and so on.

78
00:03:57,070 --> 00:03:58,750
This is how a cookie is set.

79
00:03:58,750 --> 00:04:01,790
And you don't have to write this header,

80
00:04:01,790 --> 00:04:04,120
this response metadata on your own.

81
00:04:04,120 --> 00:04:07,290
Instead, you typically use packages for this.

82
00:04:07,290 --> 00:04:10,940
Like express-session when you change that session

83
00:04:10,940 --> 00:04:13,320
and there for a session was created,

84
00:04:13,320 --> 00:04:15,710
and that cookie must be set.

85
00:04:15,710 --> 00:04:17,670
If you want to manage other cookies

86
00:04:17,670 --> 00:04:20,410
that are not related to sessions,

87
00:04:20,410 --> 00:04:23,680
then when working with node and express,

88
00:04:23,680 --> 00:04:26,500
you can use packages like cookie-parser,

89
00:04:26,500 --> 00:04:30,180
which also allow you to work with cookies on a higher level,

90
00:04:30,180 --> 00:04:31,820
so that you don't have to set

91
00:04:31,820 --> 00:04:33,980
the cookie metadata on your own,

92
00:04:33,980 --> 00:04:37,330
but that instead you can still just interact with the cookie

93
00:04:37,330 --> 00:04:39,340
and metadata will then be set

94
00:04:39,340 --> 00:04:42,890
automatically for you by that package.

95
00:04:42,890 --> 00:04:44,970
But this is how a cookie is, in the end,

96
00:04:44,970 --> 00:04:47,860
sent to the client, to the browser.

97
00:04:47,860 --> 00:04:51,200
And the browser then automatically stores it for you.

98
00:04:51,200 --> 00:04:53,963
So there's nothing you have to do about that.

99
00:04:54,990 --> 00:04:57,960
And then for subsequent requests,

100
00:04:57,960 --> 00:05:00,920
like us visiting the admin page here,

101
00:05:00,920 --> 00:05:03,490
the cookie is not part of the response.

102
00:05:03,490 --> 00:05:05,430
If you have a look at the Response Headers,

103
00:05:05,430 --> 00:05:08,680
because we already do have that cookie here.

104
00:05:08,680 --> 00:05:11,120
The cookie doesn't need to be set again,

105
00:05:11,120 --> 00:05:12,740
because nothing about the cookie

106
00:05:12,740 --> 00:05:14,323
or the session changed here.

107
00:05:15,820 --> 00:05:18,230
Then in the Request Headers though,

108
00:05:18,230 --> 00:05:20,790
we see that this cookie is sent along

109
00:05:20,790 --> 00:05:23,014
with the request here.

110
00:05:23,014 --> 00:05:26,110
Here, we got a Cookie header.

111
00:05:26,110 --> 00:05:28,930
So not Set-Cookie as before

112
00:05:28,930 --> 00:05:31,900
when we got the response where the cookies should be set,

113
00:05:31,900 --> 00:05:34,200
but now it's part of the Request Headers.

114
00:05:34,200 --> 00:05:37,350
And in the Request Headers, the browser by default

115
00:05:37,350 --> 00:05:41,500
sends along all cookies that belong to the URL,

116
00:05:41,500 --> 00:05:44,190
to which the request is sent.

117
00:05:44,190 --> 00:05:46,400
And that's exactly what we need here

118
00:05:46,400 --> 00:05:48,800
because the browser needs to send along

119
00:05:48,800 --> 00:05:53,060
this session cookie with that request to the admin page,

120
00:05:53,060 --> 00:05:57,140
because on the server, that cookie will be evaluated.

121
00:05:57,140 --> 00:05:59,970
The session ID will be extracted

122
00:05:59,970 --> 00:06:04,970
automatically by the package, the express-session package.

123
00:06:05,060 --> 00:06:08,270
And then this session can be retrieved

124
00:06:08,270 --> 00:06:09,650
from the database there.

125
00:06:09,650 --> 00:06:13,420
And the server is able to find out wherever the visitor

126
00:06:13,420 --> 00:06:16,720
who's sending this cookie should be granted access

127
00:06:16,720 --> 00:06:18,303
to a certain page or not.

128
00:06:19,150 --> 00:06:21,240
So this cookie, which has sent along

129
00:06:21,240 --> 00:06:23,390
with this session ID inside of it,

130
00:06:23,390 --> 00:06:27,970
is our real entry ticket, or at least it's our ticket

131
00:06:27,970 --> 00:06:31,550
to a session that's stored in a database on the server.

132
00:06:31,550 --> 00:06:34,140
And then it depends on the data being stored

133
00:06:34,140 --> 00:06:35,200
in that session.

134
00:06:35,200 --> 00:06:37,050
Whether a user with that cookie

135
00:06:37,050 --> 00:06:39,610
will be granted access or not.

136
00:06:39,610 --> 00:06:41,093
This is how that works.

137
00:06:42,000 --> 00:06:44,520
So that was a lot of talking about cookies.

138
00:06:44,520 --> 00:06:46,750
And the good thing is that you don't have to

139
00:06:46,750 --> 00:06:49,560
actively do anything related to them,

140
00:06:49,560 --> 00:06:52,440
but as a web developer, you should always understand

141
00:06:52,440 --> 00:06:54,630
how things are working behind the scenes.

142
00:06:54,630 --> 00:06:58,003
And there for, I did want to explain this to you as well.