Node Auth Tutorial (JWT) #2 - Auth Routes & Controllers

Key Takeaways

all right then gang so before we actually code any routes or controller functions for our authentication process i want to go over all of the different routes and handler functions that we're going to be making and also how we're going to structure those a little bit too just so we've got the big picture of what we're aiming for in the back of our minds now we're also going to be adopting an mvc approach to creating this application now that stands for model view controller and it basically just means that we're going to be extracting all of our auth route handler functions into a separate auth controller file it just helps with the organization of our code now if you want to learn more about mvc in node and express definitely check out my node.js crash course tutorial right here on youtube first of all the link is going to be down below so what are the different auth routes that we're going to be creating going to look like well basically it's going to be these five routes here and we're gonna have first of all one to get a sign up page so that is to forward slash sign up this is the route itself it's gonna be a get request because we're getting a resource and that resource is the sign up page and it's gonna return that to the browser so that will contain the form to sign up with we're also going to have one for forward slash login which is also a get request to get the login page again with a form to log in this time now after that we'll have a forward slash sign up route again the same as this but this time this is a post request so it's okay that these are the same route because they can be handled differently because of the type of request this one is a get one this one is a post one and this is gonna post data that a user tries to sign up with their email and the password to the server to create a new user in the database we're gonna have a post request to forward slash login as well to authenticate a current user so after they fill in their details on the login page press submit that sends a post request to the server to take those login details check them against those stored in the database and then log them in and finally we're going to have a logout get route and that is basically just going to take the user and log them out of the application now to begin with in this lesson we're just going to focus on these four right here for signing up and logging in and we'll handle this one in a later tutorial so let's start to flesh out these routes in the code so then the first thing i want to do is create a route file for our authentication routes so instead of dumping everything inside app.js where it then becomes messy we're going to extract those routes into its own separate file and we're going to place that into a folder called routes so the idea being the larger your application becomes for every separate section of your website then you'd have a separate routes file so we're going to create a route file for our authentication routes so let's create that by saying auth routes dot js and then the first thing we need to do inside here is require the router from the express package so when we create a separate file for routes like this we don't just say app.get and then place our routes what we need to do is actually require the router from the express package then export that route at the end once we've attached routes to it and then we can plug in that router into our application so i'll show you how all of that works now we're going to say first of all const and we're going to destructure the router from the express package like so so now we have that we can create a new instance of that router by saying const and you can call this what you want i've called it lowercase router and set it equal to the thing we imported and then invoke that so this is creating a new instance of the router for us and all we then do is attach different requests to this router so for example i can say router dot get and then we're gonna get forward slash sign up and then we'd have some kind of function which fires in response to that so this is much like the routes we already have over here except instead of using app we're using the router this time that we've created right here now at the end what we're going to do is say module dot exports is equal to the router that we create so this thing right here with any of the handlers attached to it and we export that so then we take this and we import it inside app.js and we can use those routes but we'll do that later on for now let's create these different handlers so we have this one right here router.get so it's a get request handler to forward slash sign up so remember this is going to send back the sign up view now we've not created that we'll do that in a minute but first of all let's copy this and i'm going to paste it in a few times so we can change these so we want also a post request handler for forward slash sign up and in here remember we're gonna then communicate with the database eventually and add a new user and then we want a get request for forward slash login and also a post request for forward slash login as well now i did say earlier we will have a logout request handler as well but we're not going to do that in this video we'll do that later on so that's basically it that's all of our author outs for now and what we typically do is handle those inside these functions right here but we're not going to do that inside this file and this is where this whole mvc approach comes into play we're going to create a separate auth controller file and that controller file is going to have in all the different functions which we use right here just to keep our logic separate from the actual routes so again what i'm going to do is create a new folder this time call it controllers and inside that i'm going to create a new file called auth controller.js so all of those functions those handler functions are going to live inside this file now we want to export each one of these functions as well so what i'll do is attach each one of these to module dot exports and then i'll say what each function is going to be called so first of all let's create a function for this one right here so it's a sign up route and it's a get request so let's call this sign up underscore get and set that equal to a function remember in these handler functions we have the request and the response object available to us and inside all i'm going to do is render a view so response dot render and eventually this view will be a sign up view now we'll create that momentarily but first of all let's create the rest of these functions so i'm going to copy that and again i'm going to paste this down here a few times because we've got four in total and this next one is going to be for login underscore get like so and this time we want to render the login view which we'll create in a minute and then down here this is going to be sign up post to handle this one the post request to forward slash sign up and instead of rendering a view here we're eventually going to create a new user in the database for now let's just say response dot send so we're just sending some text to the screen and that text is going to be new sign up okay and then down here we want one final one and this is going to be for login underscore post and we'll do the same thing here response.send and user login all right so we have all of these different controller functions right here and they're all being exported from this file now we need to import them into this file and register them right here instead of these empty functions so let's first of all import that up at the top i'm going to say under this one const auth controller is equal to require and then we want to come out of this folder first of all so dot dot forward slash then into the controllers folder and then we want the auth controller like that now down here what we can do instead of these empty functions is just reference this auth controller which is the module.export object right here and remember on that we have all of these different functions so i could say now we want the auth controller and then dot whatever function that i want to handle this request so this is a get request to forward slash sign up so that is sign up get so now when we get a get request for this route it's gonna fire this function right here to handle that so let's do the same thing for these dudes so auth controller dots and this is sign up post and then down here we want off controller dot login get and then finally auth controller dot login post this time so that's all there is to it so now we've done that we need these views right here that we're rendering the sign up view and also the login view now automatically express an egs is going to look inside the views folder so we need to create those inside here so let me create a new file and i'm going to call this signup.ejs and all i'm going to do inside this is register the header partial that we have the footer one and then just do an h1 in between those so let me grab this thing from the home view and paste that at the top and also at the bottom and change this to footer and then right here let's do an h1 that says sign up so dead simple and then let's copy all of this and create a new file called login.ejs and inside there paste it and this time say log in okay so now we have our views which we're trying to render right here we have all of these different controller functions which we're registering for each route the only thing left that we have to do is register these routes in our application because at the minute they're just kind of floating around in space and not doing anything because we've not registered them for our application right here so let's import them first of all and to do that i'm going to say const auth routes is equal to require and we want to go into the routes folder and we want the auth routes all right so now we have those all we need to do is grab them right here and at the bottom i'm going to say app.use to use this router and i'm just going to paste it in so that is basically the same as placing all of these routes right here here but this way we're keeping all of our authentication routes separate from the main application code all right so let me save that and this is the moment of truth let me try out these two routes the get ones right here from the browser all right so if we go to forward slash sign up then we get the sign up page and if we go to forward slash login then we get the login page so all of that works now we also want to be able to test out the other routes too the post ones which are this one right here and also this one now eventually the post requests are going to be sent from the browser after a user submits either the sign up or the login form but we don't have those yet so for now we need a quick way to test them and i'll be using a tool called postman to do that in the next lesson