Support for Azure App Service Authentication (Easy Auth) in msas-angular

[jwevansgam]

I am working on migrating an angular app which calls an ASP.NET Core Api to Azure. I am using App Service Authentication when hosted in Azure but I also have the scenario where I am developing locally and would like to use AAD authentication. I have read some of the previous discussions on the use of Easy Auth with MSAL and the guidance has been that MASL isn't required if you are using Easy Auth. I'd just like to check if this is still the case as I think there would be a big benefit to developers if it was possible to integrate the two, specifically Easy Auth and msal-angular and have them work together.

As an example I have been working with the Microsoft.Identity.Web ASP.NET Core library which is part of the Microsoft Identity Platform and this integrates really well with Easy Auth, it detects if the user has been authenticated using Easy Auth and if so gets the tokens from the headers created by Easy Auth and constructs a Claims Identity which can be used in ASP.NET Core code, if the user is not authenticated the middleware will perform the authentication using the configuration provided and then create the Claims Identity, it works seamlessly with both.

This might not even be possibly but just putting it out there as an idea - let me know your thoughts

[derisen]

@jwevansgam there are no plans at the moment to support EasyAuth with MSAL.js. As you mention, you don't need EasyAuth if you are using MSAL.js

That being said, I have in backlog to build a sample that uses EasyAuth and could possibly look into how to switch between MSAL and EasyAuth authentication. This will be coming out in the next couple of weeks but unfortunately I don't have an ETA at the moment.

[J0F3]

@derisen Any news on that? I would also interested in the sample that uses EasyAuth. Thx!

[derisen]

@J0F3 There's actually a set of Express.js samples using EasyAuth and a wrapper of MSAL Node here. The way this works is that, essentially you have two classes sharing the same interface (say, MsalAuthProvider and AppServiceAuthProvider): one is wrapping MSAL Node, the other EasyAuth. The app detects if App Service authentication is enabled or not via the environment variables, and then instantiates one or the other. Thus the app behaves the same way whether EasyAuth is enabled or not.

But these are web apps as apposed to a single-page/browser app with Angular. Things are not as straightforward on the browser side, since you don't have access to the environment at runtime. I suppose it would be possible to serve your single-page app through an Express server, and then inject some scripts depending on the runtime environment, but honestly I didn't had a chance to look into this.

[J0F3]

Yes, I am indeed looking for an example for a single page application with Angular. But I think you did give me enough inputs so I can try somethings out.
I think one can also make calls to /.auth/me to get an access token. At least according to: https://learn.microsoft.com/en-us/azure/app-service/configure-authentication-oauth-tokens#retrieve-tokens-in-app-code

Thank you!

[derisen]

That's right, SPAs can call /.auth/me endpoint for tokens -the tutorial here has more detail. Feel free to share here if you come up with a nice example -good luck!