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).
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 ;
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.
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.
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… 😉