Integration MSAL (Microsoft Authentication Library) into VueJS

Introduction

Probably everyone can relate that they do not want to invest the time in something “as commodity” as authentication when developing. Though on the other hand, the “identity” part is a key part to keeping your application (and thus your organization’s data) secure. So how to find the perfect fit in terms of this balance? Leveraging identity providers is the typical path to take here. Where there are quite a few in a SaaS service model even. From the Microsoft stables, you can find both Azure Active Directory & Azure Active Directory B2C to play an important role in this space.

When looking in this space, the defacto protocol standards here are Oauth2 & OpenID Connect. Where OIDC (OpenID Connect) is actually a layer built on top of Oauth2. Anyhow, where they provide a very good / robust security layer, the flip side of the coin is that (like with any security product) there is a given entry barrier in terms of understanding the complexity it brings (in terms of authentication flows).

Now when looking at JavaScript, it’s safe to say that this language has a significant place in the front-end side of development. There are several JavaScript frameworks that hope to make the life of the developer using it a bit more easy… Where VueJS is one of those. Why pick one over another? It all depends on when you start, and it’s kinda like with religions I guess. There are a big of nuance differences, though in essence they all have the same goal (give or take). 😉 As my personal experience situates itself on the VueJS side of things, this post will cover the VueJS integration.

 

Challenges

At first I was trying out Nuxt‘s basic authentication oauth2 scheme. Where it did the basics, I found it to be limiting when wanting to tweak it towards “Enterprise Grade Expectations”. So I reverted to “plain” VueJS and came across the following sample repository by Sunil Bandla. This one served my expectations, and I went on integrating it into the boilerplate admin template. Here I noticed that sharing the data/objects between components was “a challenge” (to be quite friendly). As every developer out there, I eventually landed at a Stack Overflow thread that shared the same frustrations I was having. So I went on a journey to merge the best of both worlds into a reusable component for everyone out there.

 

Example / Proof-of-Concept

If you’re looking for an example on how to get the integration working? Check out the following github repository ; https://github.com/kvaes/TasmanianTraders-MSAL-AdvancedVueJsExample

Here I used a free admin template for VueJS, and changed/added “some” files ;

• src/main.js
• msal/*
• config/*
• router/*
• containers/DefaultHeaderDropdownAccnt.vue
• views/auth/*

Do take a look on how things were changed. The trick here is as “Teddy” describes in the Stack Overflow thread to use VueJS’s instance property.

 

Demo

So what will the above code repository do?

• Provide a login experience
  
  
  …
• Put your user’s name into the header. Indicating that (s)he is authenticated
  
• And provide the logout experience
  

Next to that, there is also an isolated view where you can test a bit… Where this is the tweaked version of Sunil.

 

Closing Thoughts

The code comes “as-is”. Enjoy it for your “inspirational journey”! I hope it helps you by reducing the time spent on getting the integration working… 😉