1 00:00:02,090 --> 00:00:03,990 So we added error handling, 2 00:00:03,990 --> 00:00:05,180 now I want to make sure that 3 00:00:05,180 --> 00:00:08,490 we don't even get that csrf error anymore. 4 00:00:08,490 --> 00:00:10,800 And for this we'll need to add sessions. 5 00:00:10,800 --> 00:00:13,460 And that is something we'll need to add anyways, 6 00:00:13,460 --> 00:00:16,300 because before I add any validation 7 00:00:16,300 --> 00:00:17,990 for the sign up process, 8 00:00:17,990 --> 00:00:21,330 indeed, I want to make sure that we can generally 9 00:00:21,330 --> 00:00:23,250 log users in. 10 00:00:23,250 --> 00:00:24,170 And we'll do that, 11 00:00:24,170 --> 00:00:26,660 as you'll learn in the authentication section 12 00:00:26,660 --> 00:00:28,720 with help of sessions. 13 00:00:28,720 --> 00:00:31,930 Sessions are pieces of data stored on the server, 14 00:00:31,930 --> 00:00:35,320 which are connected to users with help of cookies. 15 00:00:35,320 --> 00:00:38,940 And if a user has a valid cookie with a valid session ID, 16 00:00:38,940 --> 00:00:42,170 that points to one of the sessions stored on the server 17 00:00:42,170 --> 00:00:46,210 and that session then says that this user is authenticated, 18 00:00:46,210 --> 00:00:49,450 then this user can be granted extra access 19 00:00:49,450 --> 00:00:51,230 to extra resources. 20 00:00:51,230 --> 00:00:55,283 That's how authentication with sessions works in a nutshell. 21 00:00:56,620 --> 00:01:00,410 So therefore, we'll need to install new third-party packages 22 00:01:00,410 --> 00:01:03,300 that help us with session management. 23 00:01:03,300 --> 00:01:05,030 Because as so many things, 24 00:01:05,030 --> 00:01:06,750 we don't want to do that ourselves. 25 00:01:06,750 --> 00:01:09,493 It would be cumbersome and also error prone. 26 00:01:10,650 --> 00:01:13,970 So there are more third-party packages we can install, 27 00:01:13,970 --> 00:01:16,520 for example express-session, 28 00:01:16,520 --> 00:01:19,600 but also connect-mongodb-session, 29 00:01:19,600 --> 00:01:21,870 which will be the session storage package 30 00:01:21,870 --> 00:01:23,923 we use for storing the session. 31 00:01:24,780 --> 00:01:27,110 Sessions can be stored anywhere 32 00:01:27,110 --> 00:01:29,620 in memory, which is not ideal though, 33 00:01:29,620 --> 00:01:32,180 in files or in databases. 34 00:01:32,180 --> 00:01:33,780 And I want to store my sessions 35 00:01:33,780 --> 00:01:37,010 in the existing mongodb database I already have, 36 00:01:37,010 --> 00:01:39,163 and this package will help us with that. 37 00:01:40,550 --> 00:01:43,690 So these are two packages that should be installed, 38 00:01:43,690 --> 00:01:46,093 and once they are, we can restart the server. 39 00:01:47,060 --> 00:01:49,580 And now we need to initialize those packages 40 00:01:49,580 --> 00:01:52,023 in order to utilize sessions correctly. 41 00:01:52,960 --> 00:01:54,770 For this Back-End app.js, 42 00:01:54,770 --> 00:01:59,270 we can start by adding those packages here, 43 00:01:59,270 --> 00:02:02,303 the session and the connect mongodb package. 44 00:02:03,400 --> 00:02:06,070 Or we do it a little bit differently, 45 00:02:06,070 --> 00:02:09,639 since we'll have a couple of things to set up there, 46 00:02:09,639 --> 00:02:13,320 I will actually go to a different folder here, 47 00:02:13,320 --> 00:02:16,330 a folder which I will create, 48 00:02:16,330 --> 00:02:18,570 the config folder 49 00:02:19,560 --> 00:02:22,460 in which I'll add a session.js file. 50 00:02:22,460 --> 00:02:25,540 And I want to do all of the sessions set up work in here. 51 00:02:25,540 --> 00:02:27,920 It's not a must do, but something I'll do here 52 00:02:27,920 --> 00:02:31,100 to again keep the app.js file lean. 53 00:02:31,100 --> 00:02:33,630 Here, I want to create my session store 54 00:02:33,630 --> 00:02:35,890 and they offer all require 55 00:02:35,890 --> 00:02:39,450 my mongodb store 56 00:02:39,450 --> 00:02:42,680 by requiring connect-mongodb-session, 57 00:02:42,680 --> 00:02:43,900 and I'll then add a function 58 00:02:43,900 --> 00:02:46,127 which I named createSessionStore, 59 00:02:50,668 --> 00:02:53,751 in which I want to call mongoDbStore, 60 00:02:55,476 --> 00:02:59,476 which is a function to create a new mongoDbStore 61 00:03:01,330 --> 00:03:04,190 that can be used on our session. 62 00:03:04,190 --> 00:03:05,943 And that should be const. 63 00:03:08,130 --> 00:03:11,040 Now mongDbStore wants the session 64 00:03:11,040 --> 00:03:12,520 for which it will be created, 65 00:03:12,520 --> 00:03:16,870 so I will accept a session as a parameter value here, 66 00:03:16,870 --> 00:03:19,310 and we'll have to make sure to provide that value 67 00:03:19,310 --> 00:03:21,600 once we call createSessionStore, 68 00:03:21,600 --> 00:03:23,963 and forward that to mongoDbStore. 69 00:03:25,940 --> 00:03:27,240 Then as a next step, 70 00:03:27,240 --> 00:03:31,230 we can call new mongoDbStore to create a new store object 71 00:03:31,230 --> 00:03:33,190 based on that constructor function, 72 00:03:33,190 --> 00:03:36,870 which is provided by that third party package again, 73 00:03:36,870 --> 00:03:40,090 and we pass out on the fly created object, 74 00:03:40,090 --> 00:03:41,890 to this constructor function 75 00:03:41,890 --> 00:03:45,820 to group various configuration settings together. 76 00:03:45,820 --> 00:03:46,870 For example, the uri. 77 00:03:47,730 --> 00:03:50,510 The uri to our database. 78 00:03:50,510 --> 00:03:55,493 And here that is mongodb://localhost:27017. 79 00:03:58,160 --> 00:04:00,337 Then also the databaseName. 80 00:04:01,226 --> 00:04:04,620 And that here of course, is online-shop. 81 00:04:04,620 --> 00:04:08,670 The same values I use in my database.js file. 82 00:04:08,670 --> 00:04:11,260 And therefore of course we could also store those values 83 00:04:11,260 --> 00:04:14,770 in a global config file and export them there, 84 00:04:14,770 --> 00:04:16,019 but I'll do it like this. 85 00:04:17,430 --> 00:04:20,389 Last but not least, we have to define a collection 86 00:04:20,389 --> 00:04:21,230 in which our sessions will be stored 87 00:04:21,230 --> 00:04:23,013 and I'll name it sessions. 88 00:04:24,650 --> 00:04:27,150 This will then give us the final store 89 00:04:27,150 --> 00:04:30,020 which we can use and attached to our session, 90 00:04:30,020 --> 00:04:32,700 and that is the store I will return here 91 00:04:32,700 --> 00:04:35,003 in my createSessionStore function. 92 00:04:36,780 --> 00:04:39,320 Now I'll add another function in here, 93 00:04:39,320 --> 00:04:44,320 and that is the createSessionConfig function, 94 00:04:46,410 --> 00:04:50,990 in which I wanna create a configuration for my session. 95 00:04:50,990 --> 00:04:53,963 And the configuration is more than just a store. 96 00:04:55,070 --> 00:04:57,010 So here I want to return an object 97 00:04:57,010 --> 00:05:00,320 because the express session package which we will use, 98 00:05:00,320 --> 00:05:03,880 wants an object with all the configuration settings 99 00:05:03,880 --> 00:05:06,630 that we can set for creating such a session. 100 00:05:06,630 --> 00:05:10,630 So here I'll return such a configuration object. 101 00:05:10,630 --> 00:05:13,950 And in there you can set up all kinds of things. 102 00:05:13,950 --> 00:05:15,970 I covered this in depth, 103 00:05:15,970 --> 00:05:18,500 in the authentication course section, 104 00:05:18,500 --> 00:05:20,730 where I introduced you to sessions 105 00:05:20,730 --> 00:05:22,923 and the express session package. 106 00:05:24,300 --> 00:05:26,380 You should set a secret key, 107 00:05:26,380 --> 00:05:28,650 which is used for securing the session 108 00:05:28,650 --> 00:05:31,020 and I'll set it to super-secret. 109 00:05:31,020 --> 00:05:35,483 You might want to pick a longer, more random string there. 110 00:05:37,010 --> 00:05:40,920 I'll set resave to false and saveUninitialized 111 00:05:43,290 --> 00:05:44,573 to false here. 112 00:05:46,820 --> 00:05:48,763 Uninitialized like this. 113 00:05:49,610 --> 00:05:53,170 This ensures that we only saved a session data 114 00:05:53,170 --> 00:05:55,220 to the database if it really changed, 115 00:05:55,220 --> 00:05:57,523 and if some values were set. 116 00:05:58,380 --> 00:06:01,130 And I'll set the store too, 117 00:06:01,130 --> 00:06:03,163 the result of calling this function. 118 00:06:04,310 --> 00:06:07,847 So here I'll then simply call createSessionStore, 119 00:06:09,210 --> 00:06:12,000 and the return value of that will be my store here. 120 00:06:12,000 --> 00:06:13,800 And that's the story I set for the session 121 00:06:13,800 --> 00:06:15,273 that will be created. 122 00:06:16,720 --> 00:06:18,470 And we can also configure the cookie 123 00:06:18,470 --> 00:06:20,000 that belongs to the session. 124 00:06:20,000 --> 00:06:22,150 And if we don't configure it, for example, 125 00:06:22,150 --> 00:06:26,330 it will be cleared or the session will be invalidated 126 00:06:26,330 --> 00:06:28,690 whenever the user closes the browser, 127 00:06:28,690 --> 00:06:30,730 which might be what we want. 128 00:06:30,730 --> 00:06:34,080 Alternatively, we can give this cookie a max age 129 00:06:34,080 --> 00:06:37,860 with the max age property on this cookie object, 130 00:06:37,860 --> 00:06:40,610 which we can set to a value in milliseconds 131 00:06:40,610 --> 00:06:43,330 for which the cookie will be valid. 132 00:06:43,330 --> 00:06:46,233 Even if the browser was closed in between. 133 00:06:47,650 --> 00:06:50,950 And here I'll set this to a value of 2 times 24, 134 00:06:50,950 --> 00:06:52,300 times 60, 135 00:06:52,300 --> 00:06:54,370 times 60, 136 00:06:54,370 --> 00:06:55,690 times 1000, 137 00:06:55,690 --> 00:06:58,243 to set this to two days in the end. 138 00:07:00,740 --> 00:07:03,200 But you can of course use different values. 139 00:07:03,200 --> 00:07:05,660 It has to be a value in milliseconds though, 140 00:07:05,660 --> 00:07:10,030 or no value at all if you are fine with the session dying 141 00:07:10,030 --> 00:07:12,180 whenever the browser is closed, 142 00:07:12,180 --> 00:07:13,963 which could absolutely be fine. 143 00:07:15,780 --> 00:07:18,170 And now I will just export 144 00:07:18,170 --> 00:07:23,113 this createSessionConfig function like this, 145 00:07:24,210 --> 00:07:26,283 and we can then use it in app.js. 146 00:07:27,260 --> 00:07:29,133 So in app.js here, 147 00:07:30,230 --> 00:07:32,040 maybe here 148 00:07:32,040 --> 00:07:35,730 I'll import createSessionConfig 149 00:07:35,730 --> 00:07:40,730 by requiring ./config/session. 150 00:07:42,550 --> 00:07:44,600 And in this app.js file, 151 00:07:44,600 --> 00:07:47,853 we now also have to import expressSession, 152 00:07:48,710 --> 00:07:51,523 this session package we installed as well. 153 00:07:52,790 --> 00:07:57,790 And then down there before we use the csrfMiddleware, 154 00:07:57,800 --> 00:08:00,000 because that needs a session, 155 00:08:00,000 --> 00:08:02,200 we can call expressSession 156 00:08:04,450 --> 00:08:07,980 as a function to get such a sessionMiddleware, 157 00:08:07,980 --> 00:08:11,180 which will do all the session management for us. 158 00:08:11,180 --> 00:08:14,520 And to this expressSession function execution, 159 00:08:14,520 --> 00:08:18,040 I pass my session configuration. 160 00:08:18,040 --> 00:08:22,000 Now for that, I'll get my sessionConfig here 161 00:08:23,050 --> 00:08:25,790 by calling createSessionConfig. 162 00:08:25,790 --> 00:08:28,593 This function we just worked on a couple of minutes ago, 163 00:08:29,970 --> 00:08:34,003 and I'll pass that to expressSession like this. 164 00:08:35,559 --> 00:08:37,530 Now back in session.js, by the way, 165 00:08:37,530 --> 00:08:40,500 we must not forget that createSessionStore 166 00:08:40,500 --> 00:08:45,000 wants a session, a parameter value in the end, 167 00:08:45,000 --> 00:08:47,530 and at the moment I'm not passing this here 168 00:08:47,530 --> 00:08:49,080 when I call createSessionStore. 169 00:08:50,520 --> 00:08:53,430 Now, actually what we can of course do here, 170 00:08:53,430 --> 00:08:58,230 is we can just import expressSession here, 171 00:08:59,890 --> 00:09:02,633 in this session.js file as well, 172 00:09:03,820 --> 00:09:06,450 and not accept session as a parameter value, 173 00:09:06,450 --> 00:09:09,740 but instead use this imported expressSession package here. 174 00:09:09,740 --> 00:09:11,870 Because that is the session provider, 175 00:09:11,870 --> 00:09:15,940 which we will use for creating a session later anyways. 176 00:09:15,940 --> 00:09:17,950 So we can also do it like this. 177 00:09:17,950 --> 00:09:21,060 And then the SessionStore and Config can be created, 178 00:09:21,060 --> 00:09:23,080 and we can then use this config here 179 00:09:23,080 --> 00:09:24,560 to initialize the session. 180 00:09:24,560 --> 00:09:27,600 And then thereafter the csrf package 181 00:09:27,600 --> 00:09:29,253 should also work correctly. 182 00:09:31,170 --> 00:09:33,530 So if we save all these files and reload, 183 00:09:33,530 --> 00:09:36,110 we should be able to see this sign up form again. 184 00:09:36,110 --> 00:09:38,700 But now in this form, if we inspect it, 185 00:09:38,700 --> 00:09:42,690 we see this hidden input with that csrf token. 186 00:09:42,690 --> 00:09:45,330 And now only forms submissions with that token 187 00:09:45,330 --> 00:09:46,453 will be accepted. 188 00:09:47,590 --> 00:09:50,830 So now we're getting closer to adding authentication 189 00:09:50,830 --> 00:09:54,360 because now we did also add a session provider. 190 00:09:54,360 --> 00:09:57,030 Now of course, we still need to add validation 191 00:09:57,030 --> 00:09:59,000 to this sign up form as well. 192 00:09:59,000 --> 00:10:00,610 But before we do that, 193 00:10:00,610 --> 00:10:02,850 let's actually work on the log in form 194 00:10:02,850 --> 00:10:06,320 and let's make sure that users can actually authenticate 195 00:10:06,320 --> 00:10:09,040 and that we do use sessions for tracking 196 00:10:09,040 --> 00:10:10,730 the authentication status, 197 00:10:10,730 --> 00:10:13,713 before we then find Q and D validation here.