Build a Login System in NodeJS with Passport.js Authentication | A NodeJS Tutorial

what is up fellow developers my name is tyler potts and in today's video we're going to be learning how to create our own node.js login system so as you can see on the screen now we've got this really nice looking login page and we can try let's say we want to go to the home page we just do forward slash home you can see it automatically takes us straight back to the login page because we can't get there just yet so if we enter in here for example admin as our username and our password let's put in the wrong password i'm going to type dave and we're going to hit login you can say it says username or password it's incorrect um but if we put in the true admin password the password is my password i know super secure and we log in as you can see it logs us straight in now we are at our home page but now let's say if we want to go back to the uh login page we can't already logged in so that's what we're gonna be doing so we're going to be on a simple login system using passport and node.js um also we've added a log out there as you saw so without further ado let's get started okay so to get started we're going to run mpm so make sure you're in a directory the directory you want your application to be in and we're just going to run mpm init hyphen y to fill it all out uh the hyphen y part all it does was fill it all out so we don't have to enter it all so if we hit enter you can see it's created as a package.json file if we just ls here package.json so what we need to do now is install a few dependencies so first we're going to install a def dependency using the hyphen d uh flag and we're just going to type nodemon now the reason we need no mon is that it will keep our node application refreshing so you don't have to re-run it every time we make a change let's hit enter and let that install okay now that's installed we need to install the rest of our dependencies now the first one we're going to install so we'll get to npmi and that is going to be express we also need express hyphen handlebars now handlebars is going to be our templating engine so it's just html but it allows us to also pass through variables from node.js so we can actually get some information through we're then going to get express hyphen session which is going to allow us to have sessions inside of our application so when we log in it will store and save your session we're then going to have mongoose because we're going to need some sort of way to connect with the mongodb for our username and password we're then going to do passports now passport is how we actually um connect or how we actually authenticate we're going to be authenticating through passport and we also need pass port hyphen local which the strategy we're going to use local just means username and password or email and password or whatever you want to use first your username and password to log in so now we're going to hit enter and i'll see what all these dependencies have installed okay now they're all installed let's just run ls and as you can see we had a node modules package in here as well as a package.json and package lock so we're going to now just open this up with visual studio code so if i run code dot it's going to open it up here so let's just full screen this uh close that and place this in its own window here we go so in our package.json you can see we've got everything we need our main file is actually going to be app.js was going to delete the script and we're going to give something we're going to say start and here we're just going to say nodemon app.js and that just means when we run npm start it's going to run our app.js file and if we make any changes within this ecosystem it will automatically update um so yeah there we go so let's just close package.json and let's create our app.js js file now there's a few things we need to do to get started we're going to need to obviously start our express application so let's just say express tab tab tab is equal to require express if you're wondering why i'm tapping out it just makes it look cleaner once we've done session tab tab equal record require express hyphen session we then need handlebar so i'm gonna say handle or a ex express handlebars exp hbs um just so we'd have to write our express handlebars express handlebars um we also need mongoose which can obviously allow us to connect to mongodb now if you don't know how to connect to mongodb or you haven't got mongodb installed i suggest you go and look into um how to install mongodb with home brew or something similar so in here we'll just go type mongoose we then want to get passport and we're gonna set this equal to require passport by the way typing them out as far as i've tabbed them out is probably a bit overkill um we're going to get this local strat strat ted g i forgot to spell strategy then and say require and this is just going to be passport hyphen local dot strategy um and sorry what i'm saying about these being tabbed out so far you probably don't need to have them up this fights just i wanted them to all be in line because i think it makes it look cleaner it's easier to read we're also going to need something called bcrypt um and i'm not actually sure we installed it we did not install it my bad um let me install that now quickly so to install that let's head back over here let's run npm i be crypt like that now i think that's the last one we need um so let's just hit enter and that should now install okay that's now installed which is good um it's installed over here so let's just clear this go back and back in our app and then we can go sequel to require b crypt now what b crypt does is it allows us to hash our passwords and what hashing our password allows us to do um basically means in the day if someone hacks our database they're going to see a bunch of random letters and numbers and i'll never actually be able to decrypt those passwords um well it's never saying enough for it's not impossible but it's it's hard anyway there we go so we've got our app set up too so we're gonna set app equal to our express and there we go so that's everything we need to now we need to connect to mongo's database so we're going to say mongoose.connect and you need to have your mongodb database running i have my database running all the time so i can just say localhost zero 2701 seven forward slash and we can name this whatever we want i'm gonna name this node off youtube oh and then we need to pass some parameters so we need something called use new url password parser to true and also use unified topology to true now please don't ask me what these do i have no idea it's just every time you run it without um if you run mongoose.connect without these it will throw in it'll throw some warnings about you need to have these in um so yeah i don't know why they don't just set those to true automatically if they needed but you know who knows anyway so let's say const well sorry what am i doing so yeah we've got all these setup the next part we need to do is actually enable handlebus so we need to say app.engine or i'm gonna just call this bit middleware now when you say app.engine it's equal to handlebars hbs and then we're gonna say i'm also gonna rename handlebars to hbs as well i think that just works better there you go hbs and then in here we can just say oh so we're going to call hbs a function and we'll say the extension name is equal to dot hbs now the reason we're doing this is because by default it's normally it's dot handlebars literally dot handlebars but i think that's too long-winded i hate long-winded extension name so we're just doing the shorthand version of setting it to dot hbs we're going to say app.set and we're going to set the view engine to hbs now that's actually this actually what sets our engine but this is what initializes our engine so what we need to do now is say app dot use express dot static forward slash and then whatever you want i'm gonna say public so what this is doing is it means um we can actually add like css or images or whatever we want to the public file and be able to call them inside of our dot uh handlebars or our html um and whatnot so it's this a public folder this means it's accessible to anyone we're then going to also say app.use session now obviously we imported session up here and this express session and what we need to do here is basically set up a few variables we need a secret key now the secret key you should really have an environment variable so you could say m dot um secret um but because this is just a tutorial we're gonna set up um we're just literally gonna pass through very good secret no one's gonna guess that it's fine um but yeah i would put these in an nth package and export them and then import them in here so you can actually use them um but for now we don't need to do that we're also gonna set resave to false and save uninitialized to true um we're then going to say app.use i'm going to use express dot url encoded i'm going to say extended false now this just allows us to express to pass data you used to have to import body parser to do this but now you can do this directly in express which is really useful um and what's going to say app.use express.json it's made for testing um but we'll also do it anyway so this is all the middleweight we need that's all we need for this well all the um default middleware so all this is just here to help out and assist um what we need to do next is actually set up our passport.json stuff so we're gonna say it's app.use passports.initialize now you always need to initialize it uh it's the first thing you need to do a passport obviously you need to set it up we don't need to see app.use passport.session now obviously we want sessions in this so when you're moving around page in that and you're refreshing the page you're not going to log yourself out we want to keep our session running and obviously when you come back you'll still be logged in let's go passport dot serialize user now what this does is when we log in we serialize and deserialize our user um and what we need to do basically what we need to do here is just say done which is the callback or passing through which will be returned by um passport itself and then the user.id so what would what serialize this is it will save serialize to our request so we go request dot user and get the user information from there which we can deserialize as well so we actually need to set up deserialization which is possible c siri d serialized oh my god can't talk um which will go past another function which have passed an id done and then in here we need to actually get our user model so we need to set up user model which we're going to do now in mongoose you said models and schemas to handle your user now we could create normally you'd create a new folder called models and then create a forward slash user.js in there but um i think for this tutorial we're actually going to just do it in here um when i normally make this i normally put in a separate folder but for now i feel like we can do this in a one app just to save the extra folder so let's create a new const um user schema and we're gonna set this equal to a new mongoose.schema and all we need to do in here say username is equal to an object and we're going to give it the type of string and we say required is equal to true this means we require it and we need it so if you don't pass it it will throw and a hitting field like no what are you doing and then we need our password which also needs to be a type of string there's no such thing as a type of password so we need the type of string which we're going to hash and then we're going to say require true because you also need to require a password then what we need to say say const user is equal to mongoose dot model user from the user schema so we're going to model a user from this schema so now we have user here so if we go down we can actually now in here say user dot find by id because we need to look for this user we need to pass through that id and then on success or on error say user oh we're just going to pass through done and error or user so what i've done something wrong here there's a double there we go there was a double there you go it was it was a rogue there was a rogue parenthesis and so what we're saying here is we're just finding a wrap so we're getting when we deserialize we need to find the user which is our serialized we serialize the user into our request right and then what we do is we if we need to use this details we deserialize it by finding the user's id and then passing back the user that's the deserialization now we need to set up our strategy so we're gonna say passport dot use and we're gonna say new local strategy at which we imported above i am failing to put a um semicolon down um then we just need to pass through a function this actually can be on one line we need to pass through a function that will take in a username a password and a callback again and then we need to say again user.find one but this time we're going to find him by his username or her username and then once again we're going to have another function um that will take in an error and the user and now we're just going to say if error we're just going to return we're going to return done with error um but if there is no user so when we when we try so what happens here so this what's going to happen when we try to log in when we try to log in it's going to look to use the local strategy we're going to pass through the username and password and we're going to try and find that username to see if it already exists if there's no user then it means the user doesn't exist and we need to say the user does not exist so what we're going to do here say return done we will say null we're going to say false so we're not going to we're just going to say the error is null user is false but we can also pass through a message and the message we're going to pass through is in correct username because it means we'll have an incorrect username we could also put this onto one line as well we then want to say be crypt so we actually want to get b crypt now um because we need to compare our passwords with our hash we're going to say password with the user.password and then we need to pass a function which we're taking an error and a a response i'm going to say if there's an error return done error let me just put um brackets around that well we don't need brackets i'm being picky we could literally remove all the brackets just to make it look cleaner there you go so we'll say if there's an error then we're going to return the error again but if there's result oh it's equal to false we're also going to say return done null false and we're just going to say message um incorrect password so all we're doing here again we can put this on one line all we're doing here is basically saying if there's no result if the result is equal to false meaning the password does not match then um the password is incorrect and we need to return an error then but if it is true and it works we can say return done null and user so what we're doing here is we're saying if it's false then we're going to throw an error but if that doesn't get called then we're just going to say done and we're going to pass the user meaning the password was correct and we can now actually sign in so this is going to be our strategy we use so this all this does this once we call login and we say is it authenticated this is what's going to happen here we're going to try and find the user we're going to log in that's great but now let's set up our routes let's set up our application to see what's happening so let's say forward slash forward slash and then we're gonna say request response and we're just gonna say rest.render index it is gonna be our um home and we're gonna pass through a title called home so what this rest.render does is it renders it from a template uh in a few folder so we need to create a new folder call it fuse and inside this folder we need to create two another folder called layouts and inside that you need to pass through new and you just call we've got to call a main.handlebus and there you go we've got a new layout so if we do exclamation mark tab we can pass through the title by doing x-men like we do in few js if you've followed along with a few gs tutorials we can do handlebars and then we can pass through whatever we gave in here so this here title which would pass through here which will then display the title on screen we can then go into our body and say dot app and we can pass through with free handlebars now and say body because it's going to return the body template to get the body template we need to go into fuse and create a new file and call this index dot handlebars and the reason we call it index is because we call render index so whatever we put here index or whatever else we'll call this file here now this layout is called automatically but if you don't want layouts i believe you can call layout false or use layout i'm not 100 sure you'd have to do a quick bit of research but you can disable layouts if you just want to have everything in one file but now what we do in this handlebars this home page is we can literally say like dot home we can pass for a h1 say home and we can have an anchor tag that says slash log out and we can say log out so now that's what's going to get so let's start let's say app dot listen 3000 and then we can say uh we can do an arrow function and inside of here we're just going to run log um and we'll just say listening on port 3000 save oh that's that should no longer be running let's just refresh that good let's remove it and now what we need to do is remember the function we set up npm start which is going to called node mod which can allow it to work and now that listen on port has been called that means it's one so let's refresh and there you go you can see we've got our template imported in now we can add css to this template so we need to create our public folder so we we need to create public forward slash main.css now in here we can just pass inside you normal so margin padding zero uh box sizing uh border box and font family vira sans and sans serif now this isn't gonna work straight away we have to go into our layout and we have to obviously link this so we need to say link now with how it works so if we go to our app we called in our theme we said express.ustatic folder with our directory name which is it will give us the root directory plus public right and what that means is this public folder is going to be whatever we put forwards like if we put forward slash dot dot in here that is going to try if there's no root for it it's going to try and look in our public folder and if there's no public folder for it it's then going to just throw a 404 if there's like in our public folder sorry so now what we need to do is go into our main and we can just say main dot css and we don't need to put forward slash public because it's actually calling straight in there so wherefore we call is going to go straight in there for our public folder so if we refresh you can see it's now called if we go flash main.css you can see we can actually see the file through that and we don't if we did forward slash public forward slash main.css that would not work because it cannot get public so there you go that's how you do that and as you can see we've got our first home page set up let's actually style it then let's start off by saying body background color is equal to 2f4960 well then they're going to say background image is equal to linear gradient to bottom right hashtag 2f4960 at 10 and i'm going to say 10 20 40 120 we can actually leave that and see what that looks like oh we also need to go dot app and say display flex align item center um justify content center um when you say width 100 and then we just say the min height is equal to 100 feet h that width is unnecessary there you go now that's centered i think now we can just say dot home and in our dot home we can easily just display it as a block well it's already a block we don't need to we just need to say max width 400 pixels padding 50 pixels 30 pixels background color white and then rate border radius of 16 pixels hit save refresh and there you go we've got a little thing we actually need to set that as a width 100 as well there you go and now we can just go in here and say dot home h or you know we can do it in here we'll just say text cell text align center there you go now it's all centered and it's looking good so the next step is to actually create our logout log out we can't well we need to create our actual we need to redirect it and we need to authenticate our home because we can't actually be on home but first let's create our logout page so to do that we need to set up a new route so underneath this one let's actually add a comment up here and call it route now under here we say app.get forward slash login request response and then in here we do the exact same thing by just going rest.render and we can say login we then need to pass through our title off login and now if we go into fuse create a new file and call it login dot handlebars we create a form which has the action of slash login with the method of type post we can have a diff with a h1 which says login another form group which is going to have a label in it which says don't know f4 you'll just say user name and in our input of type text we're just going to say user name and we're gonna give it a placeholder off enter your username oh and we also need to set this to required because we're gonna require it i'm just gonna break these down because i think it looks a bit neater and then we need to create another form group and inside here we need another label this one is going to be password we then need an input of type password with the name of password and an id of password with also required and placeholder equal to enter your password let's move required to the end and keep it consistent because i haven't done that and once again i'm just going to quickly break these all down and required okay bring those across and that is almost i think we just need one more diff with an input of type submit and they foul you off login there you go so if we go well we actually need to go well no we've done that so let's go here and let's actually type forward slash login and as you can see we have this very ugly login page let's start this up a little okay so for our css we're going to write form display block there we go with 100 uh max width of 400 pixels padding off 50 pixels 30 pixels um we're gonna give it a background image of linear gradient to bottom i'm going to say hashtag 0bc 7e we're then going to give a enough color off 108.75 now feel free to use your own colors or whatever you want here this is just a guideline 12 pixels rgba zero zero zero zero point two um and border radius of 16 pixels hit save refresh and there you go that's looking a bit better let's say a form h1 will give a color off white a font size of 36 pixels that's fond style size please um a text transform of uppercase and a margin bottom of 30 pixels there you go looking much better let's do our error message so we're going to pass through an error message we're not going to do it yet but it will be called we'll have it at 10 pixels for 15 pixels background color white it will have a border radius of 8 pixels a margin bottom of 15 pixels a color of red and a box shadow off again 0.6 pixels 12 pixels rgba 0.2 we're then going to do a form with a form group and inside the phone group which is going to have margin bottom uh 30 pixels which is fine we're then going to say form label and we're going to display that as a block oh we're going to give that a color off ee we're then going to give it a font size of about 14 pixels to make it smaller a margin bottom of 5 pixels um we're then going to say form input not from input excuse me you are wrong we're just going to start the input with appearance none uh background none uh outline none and lastly border none now we're gonna so if we go back and let's just refresh there you go so that's what it's looking like so far not very pretty but it's getting there let's now add in a form input or not input input and then we'll check if it's not equal to type of submit so all we're doing here is saying checking if this input is not equal to type of submix we don't want it to match the type of submit and if it doesn't match we'll give it a display of blocks a width of a hundred percent a padding of 15 pixels a border radius of 16 pixels or 8 pixels sorry we're going to set the background color to about rgba 0.2 um and the box shadow once again it's going to be 0 pixels uh 6 pixels 12 pixel oh no sorry this could be 0 pixels because we actually wanna we wanna transition this um and then we're gonna say transition 0.4 we actually need to set a color as well we'll set this to about two to two um a font size off around 18 pixels a font weight of 300 to make it thin let's have a look what this looks like there you go it's looking alright but it just looks a bit weird so we need to copy this go to the bottom of our page and check the placeholder and what we're going to do with the placeholder is make it a color of cc there you go that looks a lot better already but it's not perfect so let's do the same thing again but this one replace the placeholder with a focus we also want to say form input not type equal oh we're missing the thing the square brackets um type equal to submit and we're checking if it's valid so if it has a foul u we're just going to say background color white box shadow is going to be equal to 0 pixels 6 pixels 12 pixels rgba 0.2 so if we go back and we refresh when you click on it you can see it becomes nice and it looks like it pops off the screen slightly which is nice same with the password you can see it does the exact same thing but if we put text in here you can see it now stays and that's because the valid pseudo selector we just used now finally we just need to do the buttons so let's just go for input and this time we're going to say type submit and we're just going to say d block we're pretty much going to actually still this but we're going to replace the color with um white we're going to replace the font size with 20 pixels the font weight with 700 box shadows good the background color should actually be a this one and i think there you go that is our button all set up and ready to go except we need to do cursor pointer and there you go we can now click login and that will attempt to log in now that's all the style i'm going to be doing so we're going to remove this and we'll then go into what's going to close our uh handlebars we'll finish with all of these files now for the time being and we just need to be back in our app.js file so what we've done so far is we've set up login but the issue is we can still go back to home page and we can also well the logout isn't set up yet but we can also go to um forward slash login as well so what we need to do is we need to make sure login redirects us back to um home sorry redirect us back to login if we're not logged in so to do that we need to go back to our app we need to create a function underneath passport routes we're just going to say function is logged in we're going to say request response and next and all they say we're going to say if request dot is authenticated so if we're authenticated we're going to return next else we're just going to say rest.redirect forward slash login so what's happening here is we're calling a function we're going to pass it as a second parameter on the get request which means it before it actually renders the home page it's going to actually check if we're logged in and if or not it's going to take us to the logout page so let's go here let's refresh if we try to go back to the forward slash you can see it now redirects us away so now we need to log in um problem is we can't actually log in we because we don't have any users set up so we're actually going to use a piece of code i've already written here it is it's right here this is just going to say set up our admin user now i'm going to explain this i just want to paste it in because it's quite a big hefty piece of machinery so we're going to set up a route called setup which go use async and we're going to get a request and response we're going to check if a user called admin already exists and if the user does exist then we're just going to return to the login page and return um but if he doesn't exist we're gonna we're gonna use bcrypt to call generate a new salt then we're gonna pass the salt here we're then going to make hash our password and our password is my password i'm actually going to just put this as pass because my password is really too long to keep typing out we're then passing our salt which we generate so our soul is what we're going to use to hash our password we're then going to do a function called hash or no we'll call the function which is actually going to pass the hashed password back as hash um and then if there's an error we're going to throw the error or call next but then we're going to create a new admin user so using our model we created up here we're going to create a new one which is going to be called admin and set its password to hash and then we can say new admin dot save and then redirect us to the login page so what's actually happening here is this normally you would obviously set up your own um register page and you'd probably do something like this to set up your first admin um user login and this is kind of what we're doing right now we're setting up our first ever login but obviously for the rest for your users if you're having multiple users you're going to want them to do the exact same thing but probably without the exit well you're going to need to check it you're going to need all of this essentially you just need to do a register and this needs to be a post and then you need to pass through your actual password username and whatever else you want um but for this one we're just gonna um do the cheaty way and just set up an admin like this so now we need to go forward slash setup we need to hit enter and it's gonna redirect us to login now if we try to do that again we should get redirected to login perfect so let's just console dot log in here and just say exists so if we now um go to sev one last time and we now go back to our home page you can see it says exist which means um it does exist and that worked so now we're set up so now we have a user in our mongodb database so what we need to do is actually try and log in and to do that we need to actually create a login route which isn't a get request we need to actually do a post request so after our login request we're doing we're going to do a enough for login request but this one's going to be a type of post we're going to say passport dot authenticate and we're going to choose our strategy now we're going to choose local because we are using a local strategy up here as you can see local strategy um and then we need to pass through a few um uh well an object and in the object we're going to have success redirect now what success redirect does is it allows us to choose when once we've logged in if we successfully log in where do we want to go we want to go to home so we're just going to put forward slash we then want a failure redirect and if we fail we want to go to slash login because we don't want obviously logout but we also want to pass through error equal to true now the reason we're passing through error is equal to true it's because we want to be able to check if we've caught if there's been an error or where for the error is so we're passing that down here now you can use so called flash which will allow you to flash error messages and pass them around but for now we're just going to use the simpler method of passing through a query string so if we go back to our login handlebars we've got to make sure our action is set to post a left is set to post and our action is set to login which is which is good we also need to make sure our login strategy here is getting username and password correctly because when we when we pass through our login form we're passing through our username and our password which is correct cool so now all we need to do is attempt to log in so if we just type in our password admin and our username which is pass there you go let's log this in now if we try to go back to login you can see we can but we're actually already logged in because we can actually go to home so let me just if i now saving here should log me out there you go it's logged me out um so what we need to do is we need to actually set up a another one so we need to actually copy the is logged in function and create an ish logged out and all we need to do is say it's not equal to authenticated then we're gonna return next else we're gonna go so all we're doing is flipping it around and in our login we're just gonna pass is log now like this um and that should allow us when we're logged in we need to actually log in our password is pass login now if we try to go back to login we got an error why did we get an error no one knows um it's because our lot is logged out is erroring somehow request response next request dot is authenticated oh we're trying to go back to login obviously if we logged in if we log out then we need to go back to login page there you go so now we can go to let's try that again admin pass we're logged in and if we try to go to the login page you can see it's just going to redirect us back to home it's already logged in now we need to set up our log out because we can't actually log out now unless i save in here and reset the session so what we're going to do is we're going to set up a log out route so under here we're going to say app oh not a board controller app dot get slash log out now we're going to pass through a function and our function is going to be equal to request response and all we're going to say is request dot log oh key how did that even how did i even write that um request dot log out and call it as a function and then we're just going to say rest.redirect to forward slash so that is all we need to do for our log out route we also need a forward slash at the front of that so let's refresh let's log back in let's say admin pass and now let's hit log out and as you can see it logs us out successfully so now we have a full loop we can log in we can log out we can um we can't get to home unless we're logged in and we can't get to log in unless we're logged out that's the tongue twister but now we if we throw in an error in here let's just say admin and put our password as dave you can see it doesn't say anything we've got our error is true up there but it doesn't actually do anything so now what we need to do is actually go to our login root and we need to pass an extra parameter so we need to say here um we're going to create a let response equal an object and in this object we're going to still pass through our title of login but we're also going to pass through our error and we're going to set the error it's equal to request dot query dot error and what that's going to do it's going to check if we have error in our query and it's going to pass through the value we have set to which is going to be true so what we need to do is replace this and say response and that way if we we can also set this to a constant um that way when we go to login if we refresh oh you can't actually see anything happening we need to go to our login and we need to set a in here we're gonna say p dot um what was the class we created for this what's it error message there is it's this so we need to add this class to our paragraph here so we just need to say oh we need to say hashtag if error so we're checking if there's an error and to end this if we do backslash if we're then going to say so if there's no we're going to say p dot error message and then we can pass through our error message which is going to be username or password is incorrect um that's it so we'll just go check that now if we go back we refresh you can see we get the username or password that's incorrect so if we remove this error you can see we get nothing and let's just say admin or dave we're going to log in as dave you can see it says username or password it's incorrect perfect so let's just try some else let's say uh admin and pass or not pass unless you put dave in there you can see we still get the error last try let's say admin and pass and there you go we're now logged in so we managed to build successfully build a secured um authenticated admin area now you can expand this you can also create other routes so you can create let's say an about route uh it's going to use the exact same but we're just going to change the title to about as well so in here if we need to go forward slash about you can see oh it's logged us out because we made a change to the system so let's just say pass now if we go to forward slash about hit enter you can see nothing's changed here but up here we've actually changed what we've put in and if we go to our index here we can actually change this to be title we refresh you can see it now changes so if we go back to home we're at home forward slash about but if we log out and then we try to go to four slash about we get the same um error now you can actually set routes that are allowed to go to by literally just removing the forward slash so if we now go back to about you can see we can get there but we still can't get to home it just brings us to the login page you can set up specific routes you want to be authenticated and what you don't want to be authenticated by just using the is logged in command now i suggest you take this into practice you split off into individual files you use the mvc approach you have your fuse you have models and you have controllers all in different folders uh fight in different files so you clean up this we've done in one one page it's quite messy i'm challenging you guys to successfully split this off into different parts and get it working that way guys okay guys this marks the end of our tutorial i hope you have enjoyed the tutorial if you have don't forget to leave a thumbs up leave a comment if you have any questions and smash that subscribe button if you want to see more for now guys thank you for watching this video and peace out you

Channel: Tyler Potts

Views: 20,154

Rating: 4.9554729 out of 5

Keywords: webdev, javascript, css, sass, scss, js, vuejs, vue, website development, website design, app, app design, app development, web developer, app developer, developer, programmer, node, nodejs, node.js, mongo, login, auth, authentication, login system, passport, express

Id: W5Tb1MIeg-I

Length: 48min 19sec (2899 seconds)

Published: Wed Jan 06 2021