Conditionally use MsalInterceptor if we have other authentication methods

[ChrisForgie]

Core Library

MSAL.js v2 (@azure/msal-browser)

Core Library Version

2.32.2

Wrapper Library

MSAL Angular (@azure/msal-angular)

Wrapper Library Version

2.5.2

Public or Confidential Client?

Public

Description

I currently have an Angular application and a dotnet web api, the web api supports two methods of authentication; MSAL and another custom authentication server that we have. Previously in the Angular app, I was using ADAL but wanting to get away from the implicit auth flow, I have decided to upgrade to MSAL.

My problem is that if I authenticate from a username/password not using MSAL on my login page, I cannot access any protected resources as they are blocked by the MsalInterceptor which tries to get you to login with your MS account. I have a custom interceptor which checks if you are logged in via the AuthAPI (our other authentication method) and if so, adds the correct bearer token.

Previously using adal-angular4, they had a custom header check in their interceptor that if skip-adal existed then the interceptor wouldn't try and add the Azure headers. Which is what we did in our custom interceptor.

I had a look through the documentation here and wasn't able to find something similar or any way to use MSAL along with other authentication methods. I tried to write a wrapper interceptor for MsalInterceptor that would conditionally call it based on a header like the image above but I was caught in a circular dependency loop and it didn't work.

I'm not using the MsalGuard on my protected routes but a custom guard that checks if you are either logged in via the AuthAPI or if this._msalService.instance.getActiveAccount() !== null.

However if I login with our AuthAPI and then try and access a route that is in the protected resource map, it will redirect me to try and login via MS.

What I'd like to do is, if I'm logged in via the AuthAPI, either ignore the protected resource map for MSALInterceptorConfigFactory or ignore the Interceptor.

MSAL Configuration

No response

Relevant Code Snippets

export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
  const protectedResourceMap = new Map<string, Array<string>>();
  protectedResourceMap.set('http://localhost:58257/', ['api://{clientId}/api-access']);

  return {
    interactionType: InteractionType.Redirect,
    protectedResourceMap
  };
}

Identity Provider

Azure AD / MSA

Source

External (Customer)

[jo-arroyo]

@ChrisForgie You are right in that the current MsalInterceptor does not have a custom header check, and may not fit your particular use case. However, this is an interesting enhancement that our team may consider and prioritize for future versions of msal-angular, although I cannot say when this might be picked up. In the meantime, you may wish to write a custom interceptor instead of using the MsalInterceptor, or you are welcome to update the existing interceptor and open a PR with the changes.

[palexaki]

I managed to do this using this workaround, but it would be much appreciated if this would be a core feature of the library.