- 00:00:00 welcome back welcome to the next part in
- 00:00:03 this series on creating a shopping cart
- 00:00:04 with no GS and Express so I left at this
- 00:00:08 state here where we had data in our
- 00:00:10 database ceded to the database and
- 00:00:12 displayed those these data on well on
- 00:00:16 our starting page here that's nice but
- 00:00:20 sooner or later we're going to need a
- 00:00:23 user and I want to start implementing
- 00:00:25 this user design up functional he design
- 00:00:28 in functionality and so on right now so
- 00:00:31 let's start with that I'll head over to
- 00:00:33 my project and the first important thing
- 00:00:37 I'll do is I'll create a new folder in
- 00:00:38 the views folder which I'll call user
- 00:00:40 and Whitchurch of course keep all my
- 00:00:43 user related views this will be my sign
- 00:00:46 up view so sign up dot HBS my sign in
- 00:00:51 view and my editor is hanging so now I'm
- 00:00:56 allowed to continue and my profile view
- 00:01:02 so this would be my free user views and
- 00:01:05 I'll start in these sign up view where I
- 00:01:09 will create a new row bootstrap here of
- 00:01:11 course then add some styling so some
- 00:01:14 columns here just to give this a nice
- 00:01:18 positioning and look then yes this
- 00:01:21 wheedies signup page and then I will
- 00:01:24 create a form I'll take care about the
- 00:01:27 action later for now I will set the
- 00:01:29 method to post though and in this form I
- 00:01:33 want to the form group where I have a
- 00:01:35 label for my email field so I'm going to
- 00:01:38 identify users with email and password
- 00:01:40 by the way if you haven't guessed by
- 00:01:43 that so this will be what my user model
- 00:01:44 looks like right now of course later
- 00:01:46 this will be extended with address and
- 00:01:49 so on if we really go into the shopping
- 00:01:51 theme more but this basic login will
- 00:01:54 have email and password so ID email and
- 00:01:58 whoops and name email and
- 00:02:04 this oops this also needs a class here
- 00:02:09 form control I oftentimes forget that
- 00:02:13 not this time though so then here I'm
- 00:02:17 going to select all that replace it with
- 00:02:19 password type should be password of
- 00:02:22 course and the label will be password
- 00:02:25 too and then I'll add button of type
- 00:02:28 submit' which should say sign up so
- 00:02:32 that's my basic form here later I want
- 00:02:36 to add some validation errors here so
- 00:02:40 I'll create a placeholder for that right
- 00:02:43 now and also all I need to take care
- 00:02:47 about CSRF protection so the protection
- 00:02:50 that my session gets stolen so to say
- 00:02:55 and I will set up this protection a
- 00:02:58 second to the first thing I wanted you
- 00:03:01 though is to create my user model before
- 00:03:03 I come to the other topics here so I'll
- 00:03:05 go to my models file folder here and
- 00:03:08 create a new file user J s now any year
- 00:03:12 I'll of course import Mongoose so
- 00:03:15 require Mongoose and create a schema so
- 00:03:21 mongoose schema and then i will define
- 00:03:27 my my model here so it a user schema
- 00:03:30 first which will of course be a new
- 00:03:33 schema to which I passed the definition
- 00:03:35 as a JavaScript object like we did it
- 00:03:38 for the product model my user will have
- 00:03:41 an email which should be of type string
- 00:03:44 and which will be required and my user
- 00:03:48 should also have or you have a password
- 00:03:52 of type string which should also be
- 00:03:54 required so that's nice I can then
- 00:04:01 export all of that module exports
- 00:04:05 mongoose model user user schema very
- 00:04:13 nice indeed
- 00:04:14 but this is not complete yet I want to
- 00:04:19 add some methods to my user schema and
- 00:04:22 therefore to the user model which allow
- 00:04:25 me to hash my password when I'm storing
- 00:04:28 it so just a convenience method that I
- 00:04:31 can easily make sure that the password
- 00:04:33 is hashed and I want to add a method to
- 00:04:37 validate this hashed password and I will
- 00:04:40 need all of that later when I'm actually
- 00:04:43 coming to signing in the user or
- 00:04:46 generally to my user sign up and sign-in
- 00:04:50 process which will need or use these
- 00:04:54 methods because in node express here I
- 00:04:57 will use a third party package passport
- 00:05:00 like you often do in node express apps
- 00:05:03 where you use a lot of packages to
- 00:05:06 handle all my user creation users sign
- 00:05:08 in because writing that all on your own
- 00:05:11 is of course possible but really complex
- 00:05:15 and there is no need to do so since
- 00:05:18 password the package I will be using is
- 00:05:20 a great package handling all of that and
- 00:05:23 whilst being great it's still very
- 00:05:26 flexible so just wanted to say that
- 00:05:29 right away however before I come to that
- 00:05:33 I want to go back to this CSRF
- 00:05:36 protection thing which you might know
- 00:05:37 from my lateral videos if you watch them
- 00:05:39 to CSRF protection is very important to
- 00:05:43 make sure that our session can't get
- 00:05:46 stolen or that if it gets stolen our
- 00:05:49 users still aren't able to create users
- 00:05:53 with our session or use our assigned in
- 00:05:56 session and so on therefore in for
- 00:05:59 example arival i add a hidden input
- 00:06:02 field here in my form which would also
- 00:06:03 get submitted which sends the session
- 00:06:07 token which allows the server to
- 00:06:10 identify if the browser sending this
- 00:06:12 token is the same browser well which got
- 00:06:15 the session in the first place which of
- 00:06:17 course protects us against a session
- 00:06:19 getting stolen
- 00:06:21 note doesn't offer this functionality
- 00:06:23 out of the box as you are probably aware
- 00:06:26 note in general is a very core compact
- 00:06:31 key functionality and the same is true
- 00:06:34 for the Express framework and then you
- 00:06:36 add packages for all the different
- 00:06:38 things or functionalities you want to
- 00:06:40 add
- 00:06:40 so for CSRF protection we have such a
- 00:06:44 package available you can find this
- 00:06:47 package by searching for sea surf and
- 00:06:52 then this github account here this is
- 00:06:55 the get up repository for the package
- 00:06:57 we're going to use and here you also
- 00:06:59 find the installation command so I'm
- 00:07:01 going to install this in my project
- 00:07:04 create a new terminal window for that
- 00:07:07 copy that into here and I'll add the
- 00:07:09 save flag to also create an entry D
- 00:07:11 package.json file and as we'll install
- 00:07:15 this CSRF protection package however
- 00:07:19 installing it is not enough I also have
- 00:07:22 to make sure do some extra steps in my
- 00:07:25 index chairs file in the routes folder I
- 00:07:28 will import this or assign it to a
- 00:07:33 variable variable known and named CSRF
- 00:07:36 require C surf then I will create a
- 00:07:41 variable name CSRF protection which will
- 00:07:45 use this c CSRF package with that i'm
- 00:07:50 starting the CSRF protection service
- 00:07:53 error I'm able to use it as a middleware
- 00:07:55 and next here I will use it when I
- 00:07:59 create my additional routes so let's do
- 00:08:02 this I will create the route for the
- 00:08:05 signup page this will be a get route
- 00:08:08 signup and I want to use user slash
- 00:08:11 signup function request response and
- 00:08:17 next and for now here I will return user
- 00:08:24 slash signup view so this signup dot h
- 00:08:28 PS file in the user folder and I will
- 00:08:32 pass something to that view I will pass
- 00:08:35 this CSRF token this package we just
- 00:08:38 added will create for us so CSRF token
- 00:08:42 should be request and then we can access
- 00:08:45 your I've token on that request so the
- 00:08:48 CSRF package is providing us with this
- 00:08:51 functionality to pass this token to our
- 00:08:53 review so if we now have a look at this
- 00:08:56 and if I go to the sign-up tour HPS file
- 00:08:59 I will output this token so that we can
- 00:09:03 see that this works and just as a normal
- 00:09:07 text here is of course it's not how the
- 00:09:11 protection will work this just to see
- 00:09:12 that it is working however this code
- 00:09:15 won't work since I'm using the default
- 00:09:19 configuration for the Caesar F package
- 00:09:21 which requires sessions to be enabled
- 00:09:23 now sessions have to be imported by a
- 00:09:26 separate package to this project so I
- 00:09:29 will do this next I will run npm install
- 00:09:32 – – save express – session and then the
- 00:09:39 app.js file I will import this session
- 00:09:43 from reap or why I require express
- 00:09:46 session and I will need to set us up
- 00:09:51 here when I set up all members aware for
- 00:09:53 example after you setting up the cookie
- 00:09:55 parser by using app use and then session
- 00:09:59 and then this will basically enable
- 00:10:02 sessions and I will add some
- 00:10:04 configuration here for example I will
- 00:10:06 provide a secret my super secret and you
- 00:10:10 may of course pick a more a better key
- 00:10:13 to save your sessions and then I will
- 00:10:17 also specify two additional options
- 00:10:20 which you should specify when using this
- 00:10:23 package the resave option which i will
- 00:10:26 set to false the default is true but the
- 00:10:28 default is deprecated now this basically
- 00:10:31 means that if this is set drew this
- 00:10:34 session will be saved on a server on
- 00:10:36 each request no matter if something
- 00:10:39 changed or not and I'm setting this to
- 00:10:42 false that I'm not doing this all the
- 00:10:43 time and the other option you should
- 00:10:47 specify it
- 00:10:48 is also safe initialized also set to
- 00:10:51 Falls here too
- 00:10:52 the default is true and is deprecated
- 00:10:55 too this means that if this is set to
- 00:10:58 true the session will be stored or in a
- 00:11:00 server even though it might not have
- 00:11:03 been initialized that nothing has been
- 00:11:05 added there and we don't want that
- 00:11:07 behavior so if data session is set up
- 00:11:10 and now back in the index dot JS file I
- 00:11:13 also have to apply the spell aware to
- 00:11:16 this router so to protect my routes here
- 00:11:18 I do this by running or by using the use
- 00:11:21 method on this router and then using
- 00:11:24 this CSRF protection I set up here so
- 00:11:28 with that I'm now telling Express all
- 00:11:30 the routes include it in this router
- 00:11:33 package here
- 00:11:34 should be protected by CSRF protection
- 00:11:38 so now if i restart my server and i had
- 00:11:44 two application and go to user signup
- 00:11:47 you now see this key I was specifying
- 00:11:51 your justice token this CSRF token you
- 00:11:55 also see an ugly button so I'm going to
- 00:11:57 fix both get rid of this token here and
- 00:12:00 also give this button some classes to
- 00:12:03 give it a nicer styling and with that I
- 00:12:08 can then add a hidden input field here
- 00:12:11 which should have a name of underscore
- 00:12:15 CSRF by this name de package will try to
- 00:12:19 identify it and find this token and then
- 00:12:23 the value using handlebars here should
- 00:12:28 be this CSRF token i just print it to
- 00:12:31 the screen so with that this token is
- 00:12:35 also submitted whenever we submit this
- 00:12:37 form and then this package is able to
- 00:12:40 check well if this token is there so if
- 00:12:44 this is submitted
- 00:12:47 right so I'm going to add an action here
- 00:12:51 which lead to user signup
- 00:12:55 and I want to create this route here
- 00:12:58 router post user signup function request
- 00:13:08 response and next and I'll take care
- 00:13:13 about the actual user creation a second
- 00:13:15 for now I want to see if this protection
- 00:13:16 works so all we'll do here is I will for
- 00:13:19 now redirect the user to the starting
- 00:13:25 page here so I'll restart my server
- 00:13:31 reload this page here and draw something
- 00:13:35 here doesn't really matter
- 00:13:36 and I'm redirected now if I go to my
- 00:13:39 signup page and I comment out this
- 00:13:42 hidden input field and if I now go to
- 00:13:45 the user signup page again I get an
- 00:13:51 error that I got an invalid CSRF token
- 00:13:53 so this protection is in place and is
- 00:13:56 working just what I wanted
- 00:13:58 so with that this very important piece
- 00:14:00 is set up and in the next lecture I will
- 00:14:03 go into how we actually create a new
- 00:14:06 user
- 00:14:07 see you there bye
