Integrate Okta to Node, Express, and Vue

Hey Dev's

In today's tutorial let us implement Okta authentication to a Node and Vue application. Our applications require user management, authentication, and API authorization at some stage. There are three main options for implementing authentication in a Node application.

• Configure your own authentication
• Use Passport.js
• Third-party service.

Depending on which strategy your application requires we will handle all and ensure we can configure both to our application. In a previous article, I discussed passport.js https://dev.to/kevin_odongo35/integrate-passport-js-to-node-express-and-vue-19ao.

OpenID Connect (often referred to as OIDC) is the recommended way to handle user authentication and authorization in modern web applications. In the third-party provider example below, Okta will act as the OIDC authorization server that stores your user credentials. Okta recently acquired Auth0.

In the next tutorial, we will handle how to integrate AWS Cognito to Node and Vue applications and implementing server-side authentication.

As you all know the practical approach is always the best.

Okta is an API service that allows you to create users, handle user authentication and authorization, etc. By using Okta, you avoid writing most of the authentication/authorization/user management logic. To continue below and implement Okta, you’ll need to create a developer account.

Okta has several samples that can get you up and running very quickly. We are going to handle two samples and with those two samples, you will be able to decide which approach you would want to use.

Vue sample

• Go to the applications section

• Add an application

• Create a new app

• Select Single Page App
  

• Configure OpenID
  

• Once down in the application's dashboard download the sample app.

• Select Vue or whichever framework you would want to test with.

• Here is the application structure.
  

• Run the following commands.
  

cd okta-sample-js-vue
// install all dependencies
yarn install

• There are two login options
• Custom login
• Okta hosted login

We will test both to understand what each does

// custom login
yarn custom-login-server

• One last thing before you test the application. Add http://localhost:8080 to Trusted Origins.
  

• Go API section, select Trusted Origins and add http://localhost:8080

• Here is the homepage for the application.
  

• To test use the login details you used in creating your developer account.

// provide developer login details
username: 
password:

To Test Okta hosted login run the following command. With this, you will be redirected to okta login and redirected back to your application.

yarn run okta-hosted-login-server

When you click login you will be redirected to okta login.

That is all you have to do to test the Vue sample application. Go through the Github code and customize your own. Remember with this approach your authentication logic will be in the front-end.

Node

For node application, we will do some changes we will use the web and single-page app.

• Once you have done that download the node sample application.

• Here is the application structure.

• Install all dependencies

yarn install

The logic is the same with node the only difference is the authentication logic is happening in the backend. This is quite ideal.

custom login

// custom login
yarn custom-login-server

okta hosted login

// custom login
yarn okta-hosted-login-server

Test the application using the username and password that you used to signup with. Go through the application structure and replicate the logic you want in your application between the custom-login and okta-hosted.

That is all you have to do to get started with Okta and familiarize yourself with it.

CONCLUSION

I am assembling the following authentication methods into a single application where you can test a working application and choose which one you would want to use in your application. All the documentation of how to configure each with be available.

• Passport.js
• Cognito
• Auth0
• Okta

My focus will be integration to node, express, and Mongo DB. For email service, we will use AWS SES as well as SendGrid.

I hope this tutorial will assist someone who wanted to start with Okta integration

Thank you