Node.js Login with Express and OIDC
Node.js just celebrated its 11th birthday on May 27! With the state of things nows, it’s pretty crazy to think back to the massive JavaScript Renaissance boost of 2009. In case you’re not aware, the JavaScript Renaissance began in around 2004 with Ajax, increased exponentially with jQuery in the mid-2000s, and then really took off with Node.js and a plethora of early JavaScript web frameworks; including Backbone.js, Ember.js, and AngularJS.
Today, I’d like to show you the power of Node.js with a simple login example. Express.js is one of the oldest and most-used server-side MVC frameworks for Node.js. Okta happens to provide an OIDC Middleware package that integrates with Express to secure your app with login and logout functionality.
To show how it all works, I created a screencast: Node.js Login with Express and OIDC.
| OktaDev Schematics was used in the making of this video. See its Express documentation to reproduce the steps yourself, or follow the instructions below. |
Create an Express App and Add Login in 5 Steps
Step 1: Create a new project with express-generator and pug for the view.
mkdir express-app
cd express-app
npx express-generator --view=pugStep 2: Before you begin, you’ll need a free Okta developer account. Install the Okta CLI and run okta register to sign up for a new account. If you already have an account, run okta login.
Then, run okta apps create. Select the default app name, or change it as you see fit.
Choose Web and press Enter.
Select Other.
Then, change the Redirect URI to http://localhost:3000/callback and use http://localhost:3000 for the Logout Redirect URI.
What does the Okta CLI do?
The Okta CLI will create an OIDC Web App in your Okta Org. It will add the redirect URIs you specified and grant access to the Everyone group. You will see output like the following when it’s finished:
Okta application configuration has been written to: /path/to/app/.okta.env
Run cat .okta.env (or type .okta.env on Windows) to see the issuer and credentials for your app.
export OKTA_OAUTH2_ISSUER="https://dev-133337.okta.com/oauth2/default"
export OKTA_OAUTH2_CLIENT_ID="0oab8eb55Kb9jdMIr5d6"
export OKTA_OAUTH2_CLIENT_SECRET="NEVER-SHOW-SECRETS"
Your Okta domain is the first part of your issuer, before /oauth2/default.
NOTE: You can also use the Okta Admin Console to create your app. See Create a Web App for more information.
Step 3: Install Schematics CLI:
npm install -g @angular-devkit/schematics-cliStep 4: Install and run OktaDev Schematics with your Okta values for $issuer, $clientId, and $clientSecret:
npm i -D @oktadev/schematics
schematics @oktadev/schematics:add-auth --issuer=$issuer --clientId=$clientId --clientSecret=$clientSecret
An .env file will be generated with your client secret in it. Make sure to add *.env to .gitignore and don’t check it into source control!
|
Step 5: Start your app and authenticate with Okta! 🚀
npm startLearn More About Node.js and JavaScript
I hope you enjoyed this quick tour of how to add a login feature to a Node.js application. If you’re looking to do more with Okta and Node.js, check out our Node.js SDK. It allows you to communicate with Okta APIs to manage your users and their identity.
You can find the source code for this example on GitHub @oktadeveloper/okta-nodejs-login-example.
If you liked this screencast, you might enjoy our other tutorials too.
For more awesome tech talk, follow @oktadev on Twitter. We have a fun YouTube channel too! If you have any questions about Node.js, Okta, or anything related to this blog post, please ask in the comments below.
Matt Raible is a well-known figure in the Java community and has been building web applications for most of his adult life. For over 20 years, he has helped developers learn and adopt open source frameworks and use them effectively. He's a web developer, Java Champion, and Developer Advocate at Okta. Matt has been a speaker at many conferences worldwide, including Devoxx Belgium, Devoxx France, Jfokus, and Devnexus. He is the author of The JHipster Mini-Book, Spring Live, and contributed to Pro JSP. He is frequent contributor to open source and a member of the JHipster development team. You can find him online @mraible and raibledesigns.com.