Single Sign On (SSO) with Vue JS and Azure Active Directory

Summary

I had the opportunity to create a proof of concept (PoC) to demonstrate how to integrate a Vue.js Single Page Architecture (SPA) application with Microsoft Azure Active Directory (Entra ID).

Objectives

The PoC had to achieve the following -

  1. Login
  2. Logout
  3. Persistence of login state
  4. Protection of secure routes
  5. Authorization Code flow with PKCE

Challenges

I faced two challenges - 

  1. It was my first time with Vue.js although I had worked with React previously.
  2. I had never implemented SSO in any manner
  3. I could not find code examples that did all of the above with Vue.js and Azure AD and the latest version of the official MSAL library.

I took a short course on Vue and Vuex by Stephen Grider on Udemy. I highly recommend this course which you can find here https://www.udemy.com/course/vue-js-course

Solution

I started with developing the store using vuex. I encapsulated the authentication logic in an auth module within the store. Next was creating the API helper which contains the logic to use the @azure/msal-browser library post which I added the router logic and the navigation guards.

The solution has satisfied all the objectives and I was able to hand it over to the development team to use it as a template for building SSO in the actual web application.

You can find the PoC solution code here https://github.com/shrinik/sso-with-vuejs-azure-ad


Comments

Post a Comment