I've been researching the best pattern that should fit my needs. Here's what I am currently running. https://docs.microsoft.com/en-us/azure/active-directory/develop/sample-v2-code
- I'm using
- VueJS CLI 2 ( but should be able to move up to VueJS 3 soon. )
- Vuex
- Azure B2C
So far I have tried to implement VueJS using passport-azure-ad and have mixed results. I have received my token from the express server and created the MongoDB session, however, I have not been able to convert the JWT token or provide it into Vue. There's really not much documentation on how that implementation works after the authenticate and moving over into another server, however, I have not really delved into this as I don't know if this is still the proper approach, using a middleware server.
Passport-Azure-AD Method - https://github.com/AzureAD/passport-azure-ad
PROS
- I like that I have an NPM package that uses Strategies for Authentication and Authorization. I do like this pattern when I read it, but I see that MS tells me another best practice is to use MSAL 2 with PKE as the best practice. What gives?
CONS
- By default this implements into MongoDB for session management that now I need to pass to Vuex. Do I really need 2 different session management strategies here?
- Running a VueJS for the client and an express server instance for the middleware only to control the security seems excessive when there are JS libraries I can utilize. MSAL.
MSAL 2.0 Sample Code - https://github.com/Azure-Samples/ms-identity-javascript-v2
After reading up on PKE, it's a little different I believe MSAL 2.0 - https://docs.microsoft.com/en-us/azure/active-directory/develop/scenario-spa-overview
MSAL 2.0 authenticates the user and gets a token, that token is then sent to API and refreshed from time to time. This seems like a different strategy from passport and It seems a little cleaner, plus It seems I might be able to implement this without a middleware server ( express ) and just use VueJS and vuex.
PROS
- might be easier to implement using VueJS, vuex, and axios
- might not need to implement an express server ( middleware server )
CONS
- more coding and configuration required to be implemented
I have reviewed some packages that use Nuxt with passport-azure-ad and VueJS, however, we are not using Nuxt at the moment, and would like to avoid it if possible.
I really need some ideas on how to approach this effectively as there are plenty of choices here and they contradict each other on best practice.
