Add Node.js User Authentication in 10 Minutes!

if you're taking longer than 10 minutes to set up authentication in your node express application you might want to rethink your strategy in this video i'll show you how to do it in under 10 minutes flat hey everyone my name is james q quick and i am a developer advocate at auth0 and i'm really excited today in this video to share with you uh one of our newer libraries this is the express open id connect library and this could be used to add authentication add your login your logout routes for example to a node express application when you're using austere but you could also use this with any other provider as long as they are open id connect compliant now we don't need to get into all those details what you really care about is how do i actually set this thing up and get going as promised in 10 minutes so let's go ahead and dive in so i've got open here the express open id connect page the repository on github i'll have that link in the description below there's also a quick start that we have that will kind of walk you through the same stuff so i'll have a link to both the repository and the quick starts and the link below but let's go ahead and get started i'll scroll down in the documentation here and the first thing as you would probably expect is to go ahead and install this library all right so i'm starting here in an empty directory and i'm going to start with an npm init dash y because we're going to set all this stuff up from scratch so that we'll go ahead and initialize this as a javascript repository then we'll install express install express and then express open id connect that's the library that we've been talking about as well as the dot env package now that env package will allow us to read environment variables from a dot env file so let's go ahead and create this dot env so that's good for now let's come back over and scroll down and this will actually walk you through if we look at the quick start especially how to do all this stuff and we'll kind of deviate from this but you have this as a resource that you can go and look at as well now the one thing we will need to do is create an application inside of all zero all zero is going to be our authentication or authorization server it's going to take care of all the backend stuff behind there so you'll need to sign up for a free account a link below to sign up once you have that you can create a new application here and we'll call this express open id connect and then make sure that you choose the regular web application tab there now a fun fact from here if you click on the node express that will take you to that quick start that we were just looking at but we don't really need to worry about that just yet so if we look at the quick start what it's saying is we need to add a callback url inside of all0 settings so we'll add the callback url here this is localhost 3000 which is where we'll run node and then our callback route and then in our allowed logout urls we'll just have this be the route of localhost 3000 so after you have both of those entered go ahead and save and i just want to touch on what this what these are used for the way authentication works in this case is it's going to redirect the user over to off0 handle all of that authentication process and then redirect which is why you have these allowed urls which is where all zero will redirect the user back to so we've got those settings inside of our all zero application we have installed the necessary packages now we need to configure this uh this package itself so let's go ahead and create our base application let's do uh app js and i will say we'll go ahead and grab express then we will use that to create our application and then lastly we'll grab a port if there is one so process.env.port or 3000 as a default and then we'll do an app.listen at the port and then just have a log to say listening on port and then whatever the value of that port variable is so just want to test this out really quickly we should be able to run node app now we should be running on port 3000 won't be able to see anything yet but just want to make sure that this thing is working okay the other thing that we'll do is go ahead and require our env package and call its config function this will allow us in this local testing to reference those environment variables all right that's great so let's come back over i'm looking back now at the repository for the documentation and they reference a dot env file so i'm going to copy this and then go into my.env and paste this stuff in now the issuer url here is going to be http https colon slash and then the domain in all 0. so if we look inside of our application details this is the domain so i'm going to copy that paste that in there then we need the client id another property in here we'll grab that client id there and we'll paste this in right here then the base url in this case we're going to be running this at uh localhost so we'll do http colon colon or colon slash a localhost 3000 and then for our secret this is anything so just a random string that at least is 32 characters long so those are all of the credentials we need now we can actually start to use these things and if you look inside of the documentation here you can see it actually grabs all these things so we can just copy this and go ahead and paste it into our application so we're going to grab the auth property off of this package the express open id connect and then we're going to use that and basically it's middleware that gets configured with these different properties and these different properties become in our case environment variables so i'm going to set multiple cursors here a little trick in vs code and then type in process.env and the top one will be the base url the issuer base url the second one will be the base your url then the client id then our secret and notice these should match up exactly spelling wise at least with what we have inside of our env file so we have our issuer base url we have our base url we have our client id and our secret and so this is really all it takes in this case to set up our our app our authentication in here so what we can do is i'm going to start this with nodemon this will do a live reloading server instead of just running at once this will auto reload and we'll see this thing should run at port 3000 and if we go to a local host 3000 slash log in our login route should be taken care of for us it will redirect us over to the off xero login process and then now it's sending us to this home page which we don't have set up yet inside of our application so let's go ahead and create that root route so we'll do app.use or app.get excuse me and this will be our route and this will take in request response and what we'll do is we'll just send back from our rec.oidc or rec.openidconnect we'll grab the is authenticated or we'll use the is authenticated function and if the user is we will respond back with logged in otherwise we'll respond back with logged out so this is just a quick way for us on this page to see whether or not the user is logged in so now that we know that the user is logged in there's two other properties that i'm going to use inside of this config and the first one is auth required i'm going to set this to false because otherwise this will require that every single route require authentication we'll show you why you might not want that in a second and then we'll set the auth 0 logout to be true to make sure that we have that functionality as well so let's come back over we see we are still logged in we can go to the logout route and this should now log us out and you see that we're logged out and one of the things that you might have noticed is it kind of skipped the login process originally so now that i'm fully logged out you'll see you will see something like this where you get prompted to log in either with google or email and password and in this case i have twitter configured but that's just me so don't worry about that if you don't but once i log in it'll take me back and now you see that i am logged in and i can zoom this in for you to see that a little bit better there i don't want to save that to lastpass so the last thing we want to do is let's create a profile route that is requiring a user to be logged in and then we'll show information about that user so we'll do an app.get and this route will be the profile route and we'll pass it some middleware which is requires off so that function there that we're going to import from our package so we'll import that thing above that's the middleware that we want to pass and then our callback rec response and then we'll do a res.send and we're going to grab the rec.oidc so these these things are added to our request object from this middleware again we didn't have to do any of it and then lastly just want to take that stuff and stringify it with a json.stringify so let's save this let's come back to our application we should be logged in if we go to the profile route you'll be able to see my information here um and if we then log out so we log out of this and now you see we're logged out and try to go back to their profile route now you see it's going to force us to go back through that login process because we wrapped or we added that middleware that requires the user to be logged in so looking back at this as a quick recap we just added authentication into a node express application in about 10 minutes and all we did was write 25 lines of code ourselves most most of that code is boilerplate configuring the actual package and then defining these additional routes to do things for us so you have full control over determining which routes require authentication what information to get from the user if you need it and all of that sort of stuff i do want to show you one last piece here in the repository is there is an examples page in this examples you can see the basic setup which we basically did requiring authentication for specific routes which we did here and route customization if you don't like the built-in login or if you need to override that in some way you can create your own login function you can get access tokens to call other apis refresh tokens and then there is yeah specific or routes based on specific claims so you can check claims inside of an access token to make sure not only is the user logged in but they also have the role or the permission to do a certain thing based on a given endpoint this is to me mind-blowingly easy to set up authentication in node.js express something that was much more complicated in the past so i'm curious what are you using to do authentication in your node applications and if you give this a shot and try it out let us know what you think in the comments below thank you as always for checking out the video make sure to like it if you enjoyed it subscribe to the channel so you can check out the content that we come out with next thanks again and i'll see you in the next video you

Channel: Auth0

Views: 67,097

Keywords: node.js authentication, node js authentication, user authentication, nodejs tutorial, express authentication, express protected routes, protected API routes, id tokens, json web tokens, jwt, jwt authentication, how to setup authentication in node, auth0 setup, auth0 tutorial, express authentication tutorial, node js login, web development, node js authentication jwt, node js authentication and authorization, node js authentication rest api, openid connect

Id: QQwo4E_B0y8

Length: 11min 44sec (704 seconds)

Published: Wed Oct 28 2020