Coding

NodeJS / Express / MongoDB – Build a Shopping Cart – #18 Forcing User Login

  • 00:00:00 I do want to fix this by and forcing the
  • 00:00:04 user to login when actually checking out
  • 00:00:06 so right now we're I'm not logged in
  • 00:00:09 if I click check out I want to be
  • 00:00:11 redirected to the sign-in page instead
  • 00:00:13 of the check out page but I also want to
  • 00:00:16 remember that the user wants to go to
  • 00:00:18 the checkout page to redirect him to the
  • 00:00:21 checkout page after successfully logging
  • 00:00:24 in to provide a better user experience
  • 00:00:26 if the user wanted to log in Fruity drop
  • 00:00:30 down here though I don't want to
  • 00:00:32 redirect to the checkout page afterwards
  • 00:00:34 because the user never wanted to go
  • 00:00:35 there right I only want to do it if we
  • 00:00:38 were on our way to the checkout like so
  • 00:00:40 so that requires a couple of things
  • 00:00:44 which need to be changed and let's start
  • 00:00:47 right now the first thing is that I want
  • 00:00:50 to protect my get check out and my post
  • 00:00:53 check I draw checkout routes if we have
  • 00:00:56 a look at the user chairs file so at the
  • 00:00:57 user routes we get this is locked in
  • 00:01:00 function here which we can use as kind
  • 00:01:03 of a middleware attached to our routes
  • 00:01:06 to check if the user is logged in and to
  • 00:01:08 prevent access if the user is not so I'm
  • 00:01:11 copying this function to my well index
  • 00:01:14 dot J's file and of course you could
  • 00:01:16 also refactor this into a separate file
  • 00:01:18 or something like that and then I'm
  • 00:01:21 using this is locked in here on the post
  • 00:01:23 route so that we're preventing any well
  • 00:01:26 fishy things going on and most
  • 00:01:29 importantly to the get route which would
  • 00:01:32 be triggered if we click the checkout
  • 00:01:33 button so here I then want to redirect
  • 00:01:36 to let's say user
  • 00:01:40 sign in in this case here and if I then
  • 00:01:44 reload this page well nothing happens if
  • 00:01:47 I restart the server and then reload
  • 00:01:51 this page you see we're redirected to
  • 00:01:53 use recite in so now if I click this
  • 00:01:55 checkout button I'm going to sign it
  • 00:01:57 we're almost there but remember I also
  • 00:02:00 want you keep the original route in mind
  • 00:02:03 so back to my is locked in function here
  • 00:02:07 I want to add something for the case
  • 00:02:10 that we are not logged in so that we are
  • 00:02:12 redirected to the users sign in page in
  • 00:02:15 this case I want to store something in
  • 00:02:18 my session I want to add let's say a new
  • 00:02:21 field named old URL which I want to set
  • 00:02:24 equal to the URL the user try to access
  • 00:02:28 like this I can access the URL on my
  • 00:02:30 request object with the URL field or the
  • 00:02:33 URL property here but that I'm storing
  • 00:02:38 the old URL and I will use this later on
  • 00:02:41 when we actually do sign-in so that's
  • 00:02:43 the next step in the sign-in route here
  • 00:02:47 in the user J's file here when I sign in
  • 00:02:52 in this post sign in the route I will
  • 00:02:54 change the code a little bit currently I
  • 00:02:57 do have my redirects here success
  • 00:02:59 redirect and failure redirect well
  • 00:03:01 failure redirect and failure flash are
  • 00:03:04 fine as they are but I will delete a
  • 00:03:06 success redirect and instead add a firt
  • 00:03:10 parameter to this function to this post
  • 00:03:12 function here this will be a normal
  • 00:03:17 middleware function as you know it from
  • 00:03:19 all a Burroughs which will be executed
  • 00:03:22 whenever this middleware does passport
  • 00:03:25 middleware here is passed successfully
  • 00:03:27 so if we fail to authenticate we will
  • 00:03:31 not reach this third function then
  • 00:03:33 instead we will go well wherever this
  • 00:03:35 failure redirect leads us however if we
  • 00:03:39 are successful then we will continue to
  • 00:03:43 disperse parameter here to this function
  • 00:03:45 here and in this function I can then do
  • 00:03:47 whatever I want to do in the case of a
  • 00:03:50 successful login attempt well what do I
  • 00:03:53 want
  • 00:03:54 well I want to check if I stored an old
  • 00:03:57 URL in my session so I will check if all
  • 00:04:00 URL is present if this is the case then
  • 00:04:04 I want to redirect to this old URL and I
  • 00:04:10 can do this like this using the redirect
  • 00:04:14 method and since I'm not returning here
  • 00:04:16 I can also execute code after that and
  • 00:04:19 here I simply want to set old URL in my
  • 00:04:23 session to now to clear it because I
  • 00:04:25 don't want to store the old URL here
  • 00:04:27 because I don't want to redirect the
  • 00:04:30 user to the checkout page forever I only
  • 00:04:32 want to do that if you wanted to go
  • 00:04:34 there in the first place but not if he
  • 00:04:36 was just logging in through the
  • 00:04:37 drop-down for example I'll also set up
  • 00:04:40 an Al's case where we don't have a
  • 00:04:42 you'll old URL set again that would be
  • 00:04:44 the case if we're not coming from the
  • 00:04:46 checkout process in this case I simply
  • 00:04:50 want to redirect the user to the user
  • 00:04:55 profile page I'm copying all that code
  • 00:04:59 here this whole function indeed to the
  • 00:05:03 post signup method where I want the
  • 00:05:05 exact same behavior so if we are signed
  • 00:05:08 up successfully I don't want to redirect
  • 00:05:10 here in the passport milla where instead
  • 00:05:14 I want to execute this third function
  • 00:05:16 here or this for parameter where I do
  • 00:05:18 the same thing as in the login case now
  • 00:05:22 why do I add it here – well for the
  • 00:05:25 simple reason that maybe our user hasn't
  • 00:05:29 signed up yet so we're presenting these
  • 00:05:31 sign-in view but we also want to
  • 00:05:34 redirect him once he is signing up now
  • 00:05:37 to make signing up a bit more convenient
  • 00:05:39 since we only showed his sign-in page it
  • 00:05:42 would be nice to have a link at the
  • 00:05:44 bottom which says something like don't
  • 00:05:46 have an account sign up instead to make
  • 00:05:48 this process as smooth as possible so
  • 00:05:52 I'll go to the user views to the sign-in
  • 00:05:54 view and below my form I'll then add a
  • 00:05:59 new text new paragraph where I say don't
  • 00:06:02 have an
  • 00:06:03 count loops like this and then just the
  • 00:06:08 language says sign up instead now in
  • 00:06:13 this link here of course I want to link
  • 00:06:16 to slash user slash sign up like that
  • 00:06:20 now here in my user routes there is one
  • 00:06:23 problem though if we have a look at this
  • 00:06:26 setup we're setting all your L to null
  • 00:06:29 after redirecting and once this code
  • 00:06:32 will get executed we will have a problem
  • 00:06:34 because our request will not be as
  • 00:06:37 accessible as it was before redirecting
  • 00:06:40 so I need to execute this code before
  • 00:06:43 well issue my redirect though here of
  • 00:06:46 course I'm then setting this to now
  • 00:06:47 before using it so that would give me an
  • 00:06:50 error to or would not lead to the
  • 00:06:52 desired result so actually I will first
  • 00:06:55 simply extract my old URL store it in a
  • 00:06:59 new variable and then use this variable
  • 00:07:01 here like this now I can copy this code
  • 00:07:04 also use it here in this sign-in route
  • 00:07:06 and with that I'll make sure that I'm
  • 00:07:08 always able to retrieve the old URL then
  • 00:07:11 clear it and then redirect so with that
  • 00:07:15 if I go back to the application let's
  • 00:07:17 say I add another element here and then
  • 00:07:21 I click on check out I'm going to be
  • 00:07:23 signup page let's create a new user here
  • 00:07:26 like this
  • 00:07:27 I hope this email address isn't taken
  • 00:07:29 yet click on sign up and we're going to
  • 00:07:32 the checkout page which is what I want
  • 00:07:34 however if I log out and then log in
  • 00:07:37 again with that email address again
  • 00:07:39 let's see then I'm going to the user
  • 00:07:41 profile so I'm not going to check out
  • 00:07:43 page 10 which is exactly the behavior I
  • 00:07:45 want I only want to go there if I was on
  • 00:07:48 the way to it anyways now that I'm
  • 00:07:50 already signed in I can go it you check
  • 00:07:53 out enter my data here and make my
  • 00:07:55 purchase as you saw before
  • 00:07:57 so let's finally do this to enter all
  • 00:08:01 that Tammy data here enter some dummy
  • 00:08:04 data down here web status an invalid CVC
  • 00:08:08 code so with data should work make the
  • 00:08:11 charge does clear to shopping cart and
  • 00:08:13 if we again have a look at all our order
  • 00:08:16 you see we got a new order added this is
  • 00:08:18 certainly more as before and well with
  • 00:08:22 that we're forcing the user to login
  • 00:08:24 we're providing a clean process for all
  • 00:08:27 of that and we're storing the order in
  • 00:08:29 the database the missing piece of course
  • 00:08:32 is that it would be nice to well show
  • 00:08:35 the user his orders if he goes to his
  • 00:08:37 profile page here so that's something
  • 00:08:40 I'll work on next