part 23

Moving forward we want to start to think about the UX of our, and how you would want it to behave if you were the user. Simple things, like redirecting to the page after something has been changed, in this case, when new product has been added we are redirected to a page that says submitted… Not terrible, at least we know it worked, but now we have to manually navigate back to the products index page to see if it was added properly. So in this blog we are going to tackle the simple redirect, and dive into more complex things like requiring authentication.

To start head over to the products.js file and where we are sending res.send(‘submitted’) in the post request, change that to res.redirect(‘/admin/products’)…

save that and try to create a new product, with an image file chosen, I called mine ‘redirect test’, a random number, and a random .png file for now, and after hitting submit, I was redirected to the products index page with an updated list of products…

Pretty simple…. Powerful, but simple. There are going to be several pages that will need a proper redirect to ensure a good UX, for now, lets add similar updates to the login page and sign up page as well.

In the post request route handler in routes/admin/auth for the signup, lets add a redirect to the products, and then the same for the signin route handler…

Always a good idea to test things out at this point, go a head and create a new user, you should be redirected to the products page. Sign out and sign back in, you should be redirected to the sign in page.

That takes care of a few redirects, just keep in mind when you’re building apps to account for navigation! Now it’s time to work a little bit more on Authentication. We need to be able to ensure that an Authenticated user has access to their account, right now we are storing the authenticated user on the session cookie, so we need to make sure that if they dont have that session cookie, that they are redirected to a login or sign up page…

To do this, in the products.js file in the get route, directly after the function bracket, we want to say, if(!req.session.userId){ return res.send(‘/signin’)}…

We want this authentication to happen before the the database is called. And we want pretty much the exact same thing to happen, in our other routes, so we can just copy and past the if statement into the get new products and the post new products route as well. And like before, if we have repeat code, a repeatable middleware at this point, we can extract it and create a middleware function that can be used when and wherever we want.

Inside of the auth/middlewares.js file inside of the module.exports under the handle errors function we can create a new function requireAuth…

So now, inside of the products.js file where we a re requiring the handle errors function we can also add requireAuth, then inside of the route handlers after the path as a second argument we will pass in requireAuth, at this point the product.js file should look like…

And to test it, in the browser navigate to localhost:3000/signout, then navigate to localhost:3000/admin/products and you should instead be redirected to the sigin page! and it should work the same products/new url as well. Now login and make sure that you can access the products and new products page… its ugly… and to make it a little nicer we are going to update the products template style just a little bit…. This one is all preference here is a simple view…

for this Here is the newly updated products template…

In the next blog, we will start to connect all of the new template, and work on displaying the edit form as well as deleting the item.