 Hello developers, my name is Matt Ravel and today I'd like to show you how to add a login feature to a node.js application. Let's get started. So to begin I'm going to use an OIDC middleware SDK that Octa provides and if you scroll down and look at how to use it, it shows you that you'll be using Express and you'll create an OIDC constant that has an issuer, client ID, a client secret. And then you'll use the session to set up for saving access tokens that come back from Octa and then you'll use the OIDC router and that creates a couple endpoints for you, a slash login and a slash logout. And then down here it shows you how you can add access to those endpoints. So there's that logout and there's a login button as well. So I created an Octadev Schematics to simplify a lot of this. There's support for many different frameworks and the reason I did this is because I got tired of copying, pasting and messing things up. So this does everything for you, automates the process in an Angular, a React or a View app, as well as Ionic and React Native and now Express. So I'm going to go ahead and start with my instructions here. I put everything in a GitHub repo. You can see octa-node.js-login-example and in here I have a demo.adoc file. So this is an ASCII doc file. If I view it in raw mode then my ASCII doctor plugin kicks in and it looks pretty good. So you will need node 12 to start and if I were to pull this up my terminal and check which version of node I have, sure enough, I'm using 12. I'll put this on the left here and we'll basically be creating an Express app, create an OIDC app on Octa and then we'll add login functionality and we'll run the app. So I can start with a command called take. This does CD and or make dirt and CDs into it. So node.js-login and then I can run mpx-express-generator- with pug for the view. By default it uses jade and that's next version of jade is pug. So that's why I'm using that and so once I do that I can create a git-ignore file because you don't want to save your MPM modules and git. So we'll exclude those and then we'll do an MPM install and then I'm going to check everything in the source control. So git init and then git status. You can see those are all the files it's going to add. So we'll say project created. All right, so now the next step is to create an OIDC app on Octa. So if we go ahead and maximize that screen, you can go to developer.octa.com slash sign up, email first name, last name, no credit card required. This gives you free developer account for life. So a thousand monthly active users for free. If you get more than that, obviously you can pay for more. So hopefully a thousand gets you to your MVP. I already have an account at dev133320. I'll go to applications and add application and I'll choose web and then I'll name it node.js-login and you'll need to change all the base URIs to 3,000 since that's what Express runs on by default and then I just like to use callback. That's what schematics expect. So I recommend you use that for this all to work and we'll go ahead and add a refresh token as well. So that'll give us a client ID and a client secret which we can copy into VS Code here. We'll need it in a second. And if you do put any sort of client secrets like I'm doing right here into source controller into a screencast, make sure and delete the app as soon as you publish it. So API authorization servers will give you the issuer. That's the last value we're going to need. Now if we go back to our demo steps, you can see that we need to install Schematics CLI globally. So I'll go ahead and do that and then you'll need to install Octadev Schematics. So MPMI, you can add it as developer dependency. You can see that took about 40 seconds to run. In my experience, it actually takes much less time than that. Something about recording with that Camtasia slows my machine down a bit though. So what we can do now is use this Schematics command here. But you'll notice before I do that, it does say we have one low severity vulnerability. So if we do MPM audit, it'll show us what that vulnerability is. And it looks like it's pug. We're not using the latest version of pug. If we looked at package.json and grep4pug, we're using 200 beta 11. That's what the Express Generator uses by default. So I did notice there's an open issue for that, but it hasn't been fixed yet obviously. So MPM audit fix should fix that. OK, so it fixed one of one vulnerability there. That's good. Don't want to have any vulnerabilities and then we can grab this command here and we'll go ahead and populate the issuer and we can go ahead and run that. You'll see it adds Express Session, OIDC middleware and .env or .mv. And that's for just loading everything from a .env file. And I like to do that and exclude the .env from source control. So no one's leaking secrets into source control. So it also creates a login.pug here. And if we open up everything in code, we can see what it looks like. So we have get status. Those are the modified files. And so first of all, I want to ignore .env before I forget. So get ignore and go ahead and add star.env in there. Now we don't see it. And so if we open up Visual Studio Code. Should be able to see all the files that change. So if you look at app.js, right, it added those imports for Express Session. It added .env. It added the Express OIDC as well as those custom callbacks and open ID profile for the scope and uses a session and uses that OIDC router. If we look at package.json, well, it's just those new packages that added. And then if we were to look at index.js, instead of just rendering Express, it renders a login. And so in the index, you can see, it'll show the user's name and the log out. And then it just has a login screen. So now we can do MPM start. And if we go to localhost 3000 and it says welcome to Express, I click login. And since I'm already logged into Octa, you didn't even really see anything happen. It just came back. That's the beauty of single sign on. So welcome to Express. Matt Rabel, if I were to log out. And this time when I click login, it would prompt me to log in. So I can use a different user. And you'll see now gives me a different name, right? Octa demo there. So back to my instructions, make sure I didn't miss anything. Oh, we also, in addition to the OIDC middleware SDK, there's a Node.js SDK. And what this will allow you to do is if you actually need to talk to Octa to manage users for any reasons, you can use this SDK to do it. And you could hook it up in your Express app as well. The code is on GitHub at octa node login example. And we have a whole bunch of Node.js blog posts on our Octa developer blog. So if you search for those, you'll find them there. So thanks for watching. My whole team is on Twitter at octa dev. I am on Twitter at mRabel and my direct messages are wide open. So if you have any questions, feel free to shoot me a message. I'm a big fan of Volkswagen. So if you like classic BWs as well, love to chat. And we have a YouTube channel. So subscribe please and have a great day.