DEV Community

loading...
Cover image for Integrate Okta to Node, Express, and Vue

Integrate Okta to Node, Express, and Vue

Kevin Odongo
I am here to learn. Technology evolves every day and my passion is to learn and create applications that can change and make human day to day activity simple and organized.
・4 min read

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

Alt Text

  • Add an application

Alt Text

  • Create a new app

Alt Text

  • Select Single Page App
    Alt Text

  • Configure OpenID
    Alt Text

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

Alt Text

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

Alt Text

  • Here is the application structure.
    Alt Text

  • Run the following commands.

cd okta-sample-js-vue
// install all dependencies
yarn install
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode
  • One last thing before you test the application. Add http://localhost:8080 to Trusted Origins.
    Alt Text

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

  • Here is the homepage for the application.
    Alt Text

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

Alt Text

// provide developer login details
username: 
password:
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Alt Text

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

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.

Alt Text

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

Alt Text

  • Here is the application structure.

Alt Text

  • Install all dependencies
yarn install
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Alt Text

okta hosted login

// custom login
yarn okta-hosted-login-server
Enter fullscreen mode Exit fullscreen mode

Alt Text

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 Alt Text
  • Cognito Alt Text
  • Auth0 Alt Text
  • Okta Alt Text

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

Discussion (0)

Forem Open with the Forem app