 Hey folks, in this video we're going to be taking the Express app that we built in the last episode and Adding authentication to it so that we can tell whether or not a user is logged in or logged out and get some profile information from them Stick around to the end of the video as well And I'll give you a tip on improving your development processes with a very simple extra npm model. Let's get started So for this video, we're going to be installing a couple of modules. One of them is the Express OpenID Connect module and this is going to give our Express app openID capabilities to be able to talk to any openID connect compliant identity Provider such as Auth0. We need to install that one We're also going to install .env which is helper to pull Environment variables out of a .env file so that we can have those configured in our local development environments Unlike in production where you would actually set environment variables with your hosting provider So this will allow us to create a .env file pull those bits of information out and use them in our application So let's go ahead and install those And we're going to need to make changes to our app So at some point in here We need to add some kind of middleware to be able to handle the authentication side of things Checking to see whether a user is not logged in configuring some extra endpoints for the login log out URLs So that our users have some way to actually go to for those those purposes Before we get into this, so let's jump over to our Auth0 dashboard Now I've created a new tenant from scratch called Express Demo Bendekrai And if we jump to applications applications, we'll see that I only have the Default generic app that comes out of the box with a new tenant I'm going to create a new one from scratch though, and I'm going to call this one Express app And because we've got a front end and a back end. We've got a server behind the scenes. It's a regular web application So we'll go in and create that So then we get taken to the quick start page and you'll see down here We've got the Node.js express quick start now at this point You get a choice of whether you want to explore the sample app or to integrate it with your existing app Because we have an existing app I'm going to choose to integrate now and the first thing that happens is it gives us an opportunity to do some settings By default our application is running on port 3000. So I'm happy to accept these default settings This then takes us to the step-by-step process of integration. We've installed the open id connect module already So let's jump down and have a look at the code This is basically all the code we need to implement to get Auth0 integrated with our Express app. So I'm going to copy these piece by piece in So we can put them in the right place in our file in our existing file So we need to import the open id connect module. So up here I'll paste that in at the top there keep all the imports together all the requires and then we've got a config That tells us more about how we're going to connect to the open id provider. We'll come back to this in a second Then we've got the middleware application as in the application of the middleware code We're going to apply Through app.use the auth that's got pulled in from open id connect. We're passing in this config up here I mentioned that I wanted to put some things into environment variables. So let's create a new file here called .env Anything that gets defined in here can get pulled into our application through the .env module. So we'll require .env and if we just call config config On here now all of the variables that we're about to define in the .env file will become available to us under the process.env object So let's copy these parts here out which are the ones that I would like to extract Into a separate file this now means that when we deploy into production or a staging environment They can be defined environment variables separately rather than being embedded in the code Makes it easier for us to manage multiple environments in the future So I'm going to make these all capitals Which is a standard for environment variable names And this one I'll just call issuer Now this secret at the top here can be any randomly generated long string I've got a plugin called vs code random which allows me to generate random strings like letters and digits And I'm going to create a hundred digit and character long string So I'm happy with that one There are various different ways that you can generate these and in fact if we look back at the old zero documentation here There's even a suggestion down at the bottom of another way that you can generate this string Okay, now that we've defined these environment variables, we need to pull them into our app So in here rather than having the actual values, we're going to call process.env And then we just add in the name of the environment variable on the end I'm going to copy this just to help me finish the rest of these off Great, so that's all the configuration is required to be done If we look back at the sample code in the quick start You'll see this one last bit of code down here Which is basically defining a handler for the root URL So a request to the root URL would return the string logged in or logged out based on the value of is authenticated Which is available in this new object called oidc open id connect on the request parameter that gets passed into the the handler now we've got Ejs configured already and we've got a an index router So let's jump into this routes file here and have a look at what we can do with this request oidc So if we look at request.oidc, we'll see a couple of properties that we can get access to We've got the id token, the identity token of the person who's logged in Some claims that could be added in whether or not they are authenticated We've got also a user object here, which tells us more about the user Let's have a look at this authenticated first of all though rather than outputting it anywhere. I'm just going to console log this So we can see what's going on If I hit save and we come down here and we restart our npm app Okay, now if we repress the application over here, we can see that it comes through with false Which is this response here. So is authenticated as false The oidc connect module will give us access to two new routes log in and log out Now I could just call this directly by typing it in But let's work work through this process and we'll update the view to add a navigation menu at the top Okay, so we've got a login and a log out call now if I repress the application over here We can see the login button if I click on login that's going to take us to the login page Because I create a new tenant I'm going to need to create a new account if you're working off a tenant that already has users you can log in as one of those So I'm going to go to sign up and I'm going to create a new account over here And now we can see down here. We're getting a truth through so I'm now logged in But we've still got login and log out. Let's put some logic around here So we only show the relevant one in our route. We're going to take the value of this is authenticated And we're going to pass that through into the template So we'll add is authenticated And the value of is authenticated it save and we format it slightly So we're still passing the title through and now also the value is authenticated Now in here we can put in a conditional But if we're not authenticated Then we want to output The login button Otherwise we want to output the log out button And then let's close that block off It save refresh over here Now we're getting an error because is authenticated is not defined The reason for this is that we have updated our javascript over here But node needs to be restarted for this change to take effect Now I did mention at the beginning of this video that there's a tip towards the end If you stick around to the end of the video I'll give you a tip on how to make this part of development a little easier But for now, I'm just going to come in and just restart npm And there's a little message coming up here to warn you about issues around form post Basically what this boils down to is that in environments where you're connecting an htdp An unsecured website to the authentication provider There could be some issues based on various cookie settings in some of the newer browsers This will not be an issue for you when you're running it in production Because in production you should be running your application on htds If you're having issues getting this working in development And for the purposes of following along with this demo you shouldn't But if you do I'll leave a link in the description below Which will take you to a page that explains how to get your local development environment running over htds as well And that'll then solve this issue for you So with node restarted I should be able to repress the page over here And now we get just the logout button and confirmation down here that login is true If I click the logout button then we get a message saying that I'm no longer logged in And the login button appears instead Let's log in again And now what I want to do is pass the user object in We noticed before that on request.oidc there was a user object Let's pass that into our view so that we can generate some information about our profile So we'll pass in user as being request.oidc.user Save that We'll come in over here and let's for now just Output the values that are in that object so that we can see what's going on So we'll do a json stringify of the user Put in some formatting to get a look a bit easier to read And if we hit refresh over here again we get that error we need to restart node Refreshing again we now get the information through This is basically the payload of the identity token that's come back from Auth0 when we logged in So we get the nickname and my name a photo associated with me When my profile was last updated email whether or not the email was verified So when I created an account I would have had an email asking me to confirm that I Was actually the owner of that email account If I click on that link the value of this will change to true And the subject so when it comes to creating your own database for the data that your application needs Rather than having a username and password in the user field You'll have a subject field and this value that comes through Is forever associated with the account that I just created in this tenant Let's do something slightly prettier on this and I've got some code over here To make this a little easier rather than outputting the JSON Let's put some HTML in here and basically what this is doing is if the user is defined Then we're going to output this div and inside that we have an image Which is loading the image from user.picture that's this URL over here And then we're also putting the name we're going to take the nickname And basically what this code here is doing is it's taking the first character of the nickname And converting it to uppergase and then outputting the rest of the username Basically I'm just capitalizing the first letter of the name to make it look a little bit prettier So if I hit save on this and we hit refresh over here we now get my photo and my name Now it's not very pretty so because we like to make things a little pretty Let's update the star sheet. I've actually got an entirely new star sheet here We'll just run through this I wanted to pull in slightly nicer font than the standard sensory for on my system So I'm using Montserrat I quite like that as a font pick whichever one you like And then we've got some formatting here for the profile info that we just added So I'm basically going to constrain it to a 200 pixel width center it At a border around it a bit of a shadow I'm going to make sure the image is no wider than its container And then the name I'm going to make it a little larger and center it So if I hit save on this now and refresh We get a nice little polaroid looking photo here of me with my name underneath Now bonus tip I did mention down here a couple of times we had to restart node Let's just make sure that in future development we don't need to do that anymore Anytime we change any of our source JavaScript files We want node to automatically restart So I'm going to install a dev dependency Because we only need this when we're in development mode It doesn't need to be installed in production It's called nodemon And basically what this will do is monitor the files and restart node when we needed to And it's quite simple to update this in the first episode We already set up the start script here Rather than calling node we're going to call nodemon And now when we restart npm You will see here a bit of extra information coming through about nodemon We're starting we're watching files Now if I make a change to any of these files here We'll see that node gets restarted automatically Really simple change but it makes my life a little easier So I don't have to remember to keep restarting nodejs So that's all I have for this episode In the next one we're going to be looking more at authorizing users for particular endpoints So at the moment we're just pulling out information if the user's logged in on the home page We're going to create some endpoints Some new routes that will only be accessible if you're logged in Come back for that one Make sure you subscribe to the channel You've got hit that bell notification So you find out when that one is released And don't forget to like this video as well It does help the youtube algorithms Make sure that other people can find it too I hope you've enjoyed yourself I look forward to seeing you in the next one And until then happy coding