{"id":19255,"date":"2017-11-27T09:00:16","date_gmt":"2017-11-27T07:00:16","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=19255"},"modified":"2017-12-09T11:58:23","modified_gmt":"2017-12-09T09:58:23","slug":"secure-node-js-website-openid-connect","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/node-js\/secure-node-js-website-openid-connect\/","title":{"rendered":"Secure Your Node.js Website with OpenID Connect"},"content":{"rendered":"

\u201cI love writing authentication and authorization code.\u201d ~ No Web Developer Ever.<\/b> Tired of building the same login screens over and over? Try the Okta API for hosted authentication, authorization, and multi-factor auth.<\/a> <\/span><\/p>\n

User authentication in Node can be confusing. It\u2019s confusing for lots of people, including really talented Node developers, so you\u2019re not alone. Authentication practices change frequently and can be hard to keep up with. In this tutorial, I\u2019m going to show you how to use OpenID Connect to build an extremely simple Node.js website (using Express.js) that allows you to manage your users, log them in, and log them out.<\/p>\n

Back in the day, all websites would require users to register with a username\/password and log in with those same credentials. This was simple, but caused a lot of security problems because developers would need to write the code to authenticate the user directly, store their credentials, manage their data, etc. It also required developers to build custom authorization schemes so that they could track what permissions their users had to perform certain operations.<\/p>\n

A while later, OAuth came into fashion with a new idea: let a user have one account with a large OAuth provider (Google, Facebook, etc.), and let users log into your service via their OAuth account with that provider. This had some nice benefits: developers no longer had to worry about storing passwords and managing credentials. The downside was that OAuth is a flexible protocol, and doesn\u2019t lay out rules around authorization, data management, etc. This means that developers using pure OAuth are required to write a lot of custom security code themselves, which causes problems.<\/p>\n

Just recently, however,\u00a0OpenID Connect<\/a>\u00a0(OIDC) has come onto the scene. It\u2019s a protocol built on top of OAuth that provides everything you could ever want: simplified user authentication, simplified authorization, and lots of nice management to tie them all together. OIDC has been gaining popularity in the development community.<\/p>\n

The only problem with OIDC is that there still aren\u2019t a ton of great tools and integrations to make using it easy.<\/p>\n

One of my amazing\u00a0Okta<\/a>\u00a0colleagues,\u00a0Robert<\/a>, has been working on a new Node.js library,\u00a0oidc-middleware<\/a>, that attempts to make adding user authentication and authorization to your Node apps simple.<\/p>\n

So, without further ado, let\u2019s build something together! I\u2019ll show you how to use the new oidc-middleware package to build a simple website.<\/p>\n

Create an Okta Account<\/h2>\n

The first thing you\u2019ll need to do before we build our simple Node.js website is to create a free\u00a0Okta developer account<\/a>.<\/p>\n

If you haven\u2019t heard of Okta before, we\u2019re an API service that allows you to easily store your user accounts, manage them from a simple web UI, handle user login and registration, password reset functionality, social login, single sign-on, and lots more.<\/p>\n

NOTE<\/strong>: If you\u2019d like to skip the following sections and get straight into the code, you can visit the\u00a0Github repo<\/a>\u00a0for this application directly.<\/p>\n

Create an Application<\/h2>\n

Now that you\u2019ve got an Okta account, you need to create an Application. Using Okta, you can create as many Applications as you\u2019d like. Each Application represents an actual application you might be building.<\/p>\n

Since you\u2019re going to be building a simple Node website right now, you only need to create a single Application.<\/p>\n

To get started, go log into your new Okta dashboard. Once you\u2019re in, click the \u201cApplications\u201d tab. You\u2019ll see something like this:<\/p>\n

\"\"<\/a><\/p>\n

This is where you can view all of your Okta applications, and manage them.<\/p>\n

Since we don\u2019t have an Application created yet, let\u2019s do that now. Click the big green \u201cAdd Application\u201d button and then click the \u201cWeb\u201d box (because you\u2019re going to build a web app):<\/p>\n

\"\"<\/a><\/p>\n

Once you move to the next screen, you\u2019ll be able to configure your app settings. There\u2019s a lot of things you can do here (feel free to play around with it sometime!), but for now: leave all the defaults as-is.<\/p>\n

\"\"<\/a><\/p>\n

Next, you\u2019ll want to copy down a few settings that we\u2019ll need later on.<\/p>\n

To start, you\u2019ll need the Client ID and Client Secret of your newly created Application. You\u2019ll find this on the page you land one once you\u2019ve created your new Application:<\/p>\n

\"\"<\/a><\/p>\n

Next, you\u2019ll need your Okta Organization URL. If you go to the \u201cDashboard\u201d page, you should see it at the top-right hand corner of the page. It\u2019s the setting called \u201cOrg URL\u201d. Here\u2019s what mine looks like, for example:\u00a0dev-310095.oktapreview.com<\/a><\/p>\n

\"\"<\/a><\/p>\n

Now that you have those settings, keep them someplace safe and we\u2019ll use them soon.<\/p>\n

Build the Express.js App<\/h2>\n

The next thing you\u2019ll do is build a simple Express.js app without any sort of login capabilities. It will be very simple (but that\u2019s the point!).<\/p>\n

Create the Application Skeleton<\/h3>\n

To get started, create a new folder somewhere on your computer, and enter it. Then create a\u00a0server.js<\/code>\u00a0file and insert the following code:<\/p>\n

\"use strict\";\r\n\r\nconst express = require(\"express\");\r\n\r\nlet app = express();\r\n\r\n\/\/ App settings\r\napp.set(\"view engine\", \"pug\");\r\n\r\n\/\/ App middleware\r\napp.use(\"\/static\", express.static(\"static\"));\r\n\r\n\/\/ App routes\r\napp.get(\"\/\", (req, res) => {\r\n  res.render(\"index\");\r\n});\r\n\r\napp.get(\"\/dashboard\", (req, res) => {\r\n  res.render(\"dashboard\");\r\n});\r\n\r\napp.get(\"\/logout\", (req, res) => {\r\n  res.redirect(\"\/\");\r\n});\r\n\r\napp.listen(3000);<\/pre>\n
This is a basic Express.js application:<\/p>\n