Coding

Node.js + Express – Tutorial – Express-Validator and Express-Session (Validation & Sessions)

  • 00:00:01 everyone welcome back to a new no chairs
  • 00:00:03 video and the last video way to look at
  • 00:00:06 get and post requests and now in this
  • 00:00:09 video I want to take this a step further
  • 00:00:11 and also add validation or show you how
  • 00:00:15 you can add validation if well for
  • 00:00:18 example user submits a form to see if
  • 00:00:20 the values entered are valid also I will
  • 00:00:25 show you how to enable sessions in your
  • 00:00:27 node.js application let's get started so
  • 00:00:32 so for this video what I will do is I'll
  • 00:00:34 create a new folder and I'll call this
  • 00:00:38 validation sessions whatever and then I
  • 00:00:42 will just copy all the files from my
  • 00:00:44 last video because I will use handlebars
  • 00:00:46 and setup is fine yes so now I got this
  • 00:00:52 and a near one that is all good now
  • 00:00:56 where I will start is I want of course
  • 00:00:59 to add this functionality I want to add
  • 00:01:03 a validation and a session functionality
  • 00:01:06 to this application and I'm going to
  • 00:01:08 import packages which will handle this
  • 00:01:11 so that I don't have to write as myself
  • 00:01:13 and this generally you probably already
  • 00:01:16 got this is the way we use Express and
  • 00:01:20 note it's a framework which is very
  • 00:01:26 straightforward and then you add all
  • 00:01:28 kind of packages to extend it in the way
  • 00:01:32 you need it and you don't have
  • 00:01:34 unnecessary things you don't need but
  • 00:01:36 you only add things you do need so for
  • 00:01:39 this example for this section here for
  • 00:01:42 this video I will need some session
  • 00:01:45 management package and a validation
  • 00:01:48 package for this I will first go to the
  • 00:01:54 terminal and here I will then enter my
  • 00:01:58 newly created folder and I will run npm
  • 00:02:01 install – – save – also save it to my
  • 00:02:04 pack
  • 00:02:05 shall chase the file and then I need
  • 00:02:08 Express validator and if we have a look
  • 00:02:15 at my package to chasten file now we see
  • 00:02:17 we got this Express validator here so
  • 00:02:20 that's great and for the session I will
  • 00:02:23 use npm install' – – save Express oops –
  • 00:02:29 session now after two packages I need
  • 00:02:33 for this to work now I first start in my
  • 00:02:37 app dot JS file where I will setup both
  • 00:02:40 packages or both functionalities I will
  • 00:02:43 add – imports here at the top first my
  • 00:02:46 Express validator which is required from
  • 00:02:52 Express validator that's one of the
  • 00:02:55 packages I just added and then I will
  • 00:02:59 add Express session and let me zoom in a
  • 00:03:03 bit and those from Express session so
  • 00:03:07 now both packages are there and now I
  • 00:03:10 need to also set them up regarding the
  • 00:03:13 Express validator all I have to do is I
  • 00:03:16 have to add one entry after this body
  • 00:03:19 parts are you that's very important that
  • 00:03:22 you have it in this position that not
  • 00:03:25 before the body gets parsed but after
  • 00:03:27 the body was parsed because my our
  • 00:03:29 validator needs access to these parsed
  • 00:03:32 values and then I will just write app
  • 00:03:34 use Express validator and just call it
  • 00:03:40 like a function with parentheses this
  • 00:03:43 will start and setup this Express
  • 00:03:46 validator the next thing I need is the
  • 00:03:49 Express session which I will do here at
  • 00:03:51 the end and for this work I will call my
  • 00:03:56 Express session also like a method but
  • 00:04:00 here I will add a configuration
  • 00:04:02 JavaScript object where I will have a
  • 00:04:06 secret you will just pick max you pick
  • 00:04:09 whatever probably more secrets than your
  • 00:04:12 string you want then I will add save
  • 00:04:15 initialized will set this to false and
  • 00:04:18 if all the Centers to Falls what these
  • 00:04:21 two values do is safe initialized with
  • 00:04:24 if we sell to to make sure that our
  • 00:04:26 accession is stored your session storage
  • 00:04:28 even though it may be uninitialized but
  • 00:04:31 won't do this in our case here because
  • 00:04:32 of the set of fold which should be the
  • 00:04:34 default by the way for this package and
  • 00:04:38 really save will if it is set to true
  • 00:04:42 save our accession eat after each
  • 00:04:44 request even if it is initialized or
  • 00:04:48 wasn't modified and modified so by
  • 00:04:50 setting forth we will only save or a
  • 00:04:52 session if we change something and this
  • 00:04:55 should also be the default for this
  • 00:04:57 package now talking of memory storage or
  • 00:05:00 above about session storage this Express
  • 00:05:04 session does but it will use memory
  • 00:05:06 storage which is not good for production
  • 00:05:10 for production you might use another
  • 00:05:12 storage and you can find a lot of
  • 00:05:14 storage is available or compatible with
  • 00:05:17 Express session by well just search for
  • 00:05:19 Express session you will find again a
  • 00:05:21 proposal for e I can show it to you it
  • 00:05:24 so this is the repository off this
  • 00:05:27 Express session packet we are using and
  • 00:05:29 at the bottom of this readme here you'll
  • 00:05:32 find a list of compatible session stores
  • 00:05:35 which you can set up on your production
  • 00:05:36 server to store your session on the
  • 00:05:38 server because if as you probably are
  • 00:05:42 aware sessions are stored in a server
  • 00:05:44 not on the collide not on a cookie on
  • 00:05:46 the server the client the cookie will
  • 00:05:48 only store the session ID so that well
  • 00:05:52 we can identify which client belongs to
  • 00:05:54 which session but the session itself is
  • 00:05:57 stored on a server like here for example
  • 00:05:59 in a database or wherever the default
  • 00:06:03 here again we don't have to setup
  • 00:06:04 anything is to use memory storage which
  • 00:06:08 is in the memory and which is not
  • 00:06:09 recommended for production just to make
  • 00:06:11 that sure with that out of the way
  • 00:06:14 everything is set up in our app torch as
  • 00:06:16 file and we can move on to our index dot
  • 00:06:20 JS file in the routes folder in here
  • 00:06:22 what I will first do is I will get rid
  • 00:06:24 of these two routes
  • 00:06:26 I will keep my index route but I will
  • 00:06:28 change the values I passed
  • 00:06:32 it all well title and we'll keep that
  • 00:06:35 just call it for invalidation but then
  • 00:06:39 here I will pass a success property
  • 00:06:43 which is set to false by default and an
  • 00:06:46 errors property which is set to request
  • 00:06:50 session errors and this will also be
  • 00:06:54 empty at the beginning because this
  • 00:06:57 refers to the session which is handled
  • 00:07:01 by express session which is just setup
  • 00:07:02 and there I will later add an error
  • 00:07:05 proper in errors property to it which
  • 00:07:08 will hold all the validation errors you
  • 00:07:10 might have that we can output them in
  • 00:07:12 our view view which is rendered after
  • 00:07:16 entering the view I will reset my errors
  • 00:07:20 property in my session to null so that
  • 00:07:23 while all the errors are cleared after
  • 00:07:25 we've shown them to the user now to
  • 00:07:29 actually have some errors I first need
  • 00:07:33 some way to separate some data so we'll
  • 00:07:35 add a post route here which will lead to
  • 00:07:38 let's say slash submit also of course
  • 00:07:41 you call a function with default
  • 00:07:44 parameters here and then in the body of
  • 00:07:48 this post route here I will check the
  • 00:07:55 valid validity of my values so here
  • 00:07:58 check check validity before I do this I
  • 00:08:03 will first set up a form which can be
  • 00:08:06 submitted so that we know what we
  • 00:08:08 actually want to check there for my
  • 00:08:10 views I go to my index dot HBS file I'll
  • 00:08:13 leave Tyler but I will get rid of the
  • 00:08:16 level to rest and I will add a form
  • 00:08:20 action should be slash submit method
  • 00:08:22 will be whoops will be post and in this
  • 00:08:26 form I'll have in input div just for
  • 00:08:30 some styling which I will import in a
  • 00:08:32 second and then here I'll have label
  • 00:08:35 let's say for an email which says email
  • 00:08:38 and on an input of type
  • 00:08:44 tax you could also make it off type
  • 00:08:46 email of course which has an email idea
  • 00:08:49 of email and the name email and now I'm
  • 00:08:52 just going to copy this two times two
  • 00:08:57 also half your password should be of
  • 00:09:01 type password and then let's say we want
  • 00:09:07 to have another password here which
  • 00:09:12 should be called confirm password so
  • 00:09:15 that we have like a normal sign up forms
  • 00:09:18 that we have to confirm the password
  • 00:09:20 we're using or we're entering so confirm
  • 00:09:24 password so that's the tiny little form
  • 00:09:28 we're going to use at the bottom I'll
  • 00:09:30 add a button of type submit' and well it
  • 00:09:35 was just say signup so this will be the
  • 00:09:37 form now let me import some styling
  • 00:09:40 which i already prepared
  • 00:09:42 okay styling is there chorus you will
  • 00:09:45 find it in the github repository and now
  • 00:09:50 let me reload this and then let me run
  • 00:09:53 this server and reload this page now we
  • 00:09:58 can see this form great now back to my
  • 00:10:03 index dot JS file where my routes are I
  • 00:10:05 want to check the validity of whatever
  • 00:10:08 I'm passing here to do this I will call
  • 00:10:11 requests dot check a new method which
  • 00:10:15 sent reduced by Express validator the
  • 00:10:17 package we added and this allows me to
  • 00:10:20 say which parameter do I want or which
  • 00:10:23 which for fields such as I do I want to
  • 00:10:26 check so for example email and of course
  • 00:10:29 this string we enter here has to match
  • 00:10:32 the name of the input field we want to
  • 00:10:36 validate see how I want you check the
  • 00:10:40 email field I want to output the error
  • 00:10:43 message invalid email address if we have
  • 00:10:46 an error and then I change the check I
  • 00:10:50 want to use now we can write our own
  • 00:10:53 validators but there are a lot of
  • 00:10:55 built-in ones
  • 00:10:57 show you a list of built-in validators
  • 00:10:59 one second and you will find this link
  • 00:11:02 as well as this session storage link in
  • 00:11:05 the description here is a list of all
  • 00:11:08 valid edges built in validators we can
  • 00:11:11 use so in my case here I will use the is
  • 00:11:16 email validator which will we'll just do
  • 00:11:22 what the name implies check if this is a
  • 00:11:24 valid email address I'll add another
  • 00:11:26 check which is for my password field and
  • 00:11:31 I will output password is invalid and of
  • 00:11:38 course you can find you need your
  • 00:11:40 messages to be more precise I will check
  • 00:11:43 if the length is at least four
  • 00:11:49 characters long I do this by using is
  • 00:11:51 length and then I pass a JavaScript
  • 00:11:52 object as the argument where it has the
  • 00:11:54 meant property and then the value of the
  • 00:11:57 minimum length and then I will chain
  • 00:12:00 another method which is called equals
  • 00:12:03 and equals allows which compare two
  • 00:12:07 fields or two values so here I will
  • 00:12:10 check if this password field here equals
  • 00:12:16 the value of my confirm password field
  • 00:12:20 because that of course should be the
  • 00:12:22 case now these are the two well things I
  • 00:12:25 want to check with my validator here and
  • 00:12:27 then I will set up the well appropriate
  • 00:12:31 action after doing this validation so
  • 00:12:34 here I have a very low errors and I will
  • 00:12:37 store all the validation errors I might
  • 00:12:39 have validation errors of course is a
  • 00:12:43 method introduced by the validation
  • 00:12:45 package we added if we do have errors
  • 00:12:48 then I want to set them to my session
  • 00:12:54 and do this by adding of property errors
  • 00:12:58 and after this I will redirect to well
  • 00:13:08 the index rod here
  • 00:13:11 good so let's try this Oh
  • 00:13:15 so restart my server we load here and
  • 00:13:19 then let me enter anything here task
  • 00:13:22 which is not a valid email and then two
  • 00:13:26 valid passwords and this should be
  • 00:13:34 errors here we load so this is invalid
  • 00:13:39 this is valid sign up as you can see
  • 00:13:42 we're redirected but of course we're not
  • 00:13:44 seeing the messages but what we don't
  • 00:13:46 know if it worked or not
  • 00:13:48 so let's output some error messages here
  • 00:13:54 I want to add a handlebars block
  • 00:13:59 statement where a check if success is
  • 00:14:03 true or false and if success is true
  • 00:14:08 then I will just say at the section
  • 00:14:12 where I say successful validation
  • 00:14:18 otherwise if we're not successful here I
  • 00:14:26 will output this form and I want to
  • 00:14:33 output all the errors I might have so
  • 00:14:36 here again another block where I say if
  • 00:14:38 we have errors if this is not null or
  • 00:14:41 undefined then I want you output my
  • 00:14:45 error section all the styling of course
  • 00:14:48 isn't a style sheet I imported a few
  • 00:14:50 seconds ago and I have mine or last year
  • 00:14:53 and there I want to loop through all the
  • 00:14:55 errors I have so each errors and then
  • 00:15:00 list item where I will just output this
  • 00:15:05 message and this message thing here this
  • 00:15:09 property is by default included in the
  • 00:15:13 validation errors we're extracting
  • 00:15:15 through our validator for express
  • 00:15:18 validator so what I'm doing here is I'm
  • 00:15:21 whipping through all the errors if we've
  • 00:15:22 got any
  • 00:15:23 and these errors I'm talking about are
  • 00:15:27 course these errors here now in order
  • 00:15:30 for this to work that way I need to
  • 00:15:34 change this a bit and I do this a way by
  • 00:15:37 setting another session variable success
  • 00:15:40 here which is false in case of failure
  • 00:15:44 but otherwise this will be session
  • 00:15:50 success will be true and then up here
  • 00:15:53 where I set it to false by default now I
  • 00:15:55 will set it to session success restart
  • 00:16:03 reload submit an empty forum we get two
  • 00:16:07 errors submitted with a valid email
  • 00:16:10 address only the password is invalid
  • 00:16:13 submitted with both being well at
  • 00:16:15 successful validation so this is how you
  • 00:16:19 enable validation in your Noche Express
  • 00:16:23 app how you add sessions and of course
  • 00:16:27 you can have a lot deeper there can use
  • 00:16:29 all these validators you can build
  • 00:16:31 custom validators but this is how you
  • 00:16:33 generally use it and good starting place
  • 00:16:37 to to go from see you next videos bye