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