Coding

NodeJS / Express / MongoDB – Build a Shopping Cart – #6 Sign Up View, CSRF Protection & User Model

  • 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