MSAL Angular with Angular Elemenets

[eyevan]

Core Library

MSAL.js (@azure/msal-browser)

Core Library Version

3.14.0

Wrapper Library

MSAL Angular (@azure/msal-angular)

Wrapper Library Version

3.0.17

Public or Confidential Client?

Public

Description

When using MSAL Angular with Angular Elements and Native Federation. Our implementation worked as expected before Angular Elements, but now our solution isn't working.

We found a few things with a few different scenarios:

1. When implementing HttpClientModule and MsalModule in both shell and micro frontend application, the call is not being made.
2. When these are removed from the global providers in both apps and replaced with just "provideHttpClient(withInterceptors([]), withFetch())", the call is still not being made.
3. When these are skipped in the mfe and just the provided in the shell, with provideHttpClient(withInterceptors([]), withFetch()), the call is being made, but without the access token, so we end up with a 401 error.

Last thing worth mentioning is, that his is only a problem from the shell app, when the micro frontend app is opened independently from the shell, everything works without any issues

Error Message

No response

MSAL Logs

No response

Network Trace (Preferrably Fiddler)

• Sent
• Pending

MSAL Configuration

{
 auth: {
    clientId: environment.msalConfig.auth.clientId,
    authority: environment.b2cPolicies.authorities.signUpSignIn.authority,
    knownAuthorities: [b2cPolicies.authorityDomain],
    redirectUri: '/auth/callback',
    postLogoutRedirectUri: '/'
  },
  cache: {
    cacheLocation: BrowserCacheLocation.SessionStorage,
    storeAuthStateInCookie: false
  },
  system: {
    allowRedirectInIframe: false,
    allowNativeBroker: false
  }
}

Relevant Code Snippets

export const MSALInstanceFactory = (): IPublicClientApplication =>
  new PublicClientApplication(msalConfig);

export const MSALGuardConfigFactory = (): MsalGuardConfiguration => ({
  interactionType: InteractionType.Redirect,
  authRequest: {
    scopes: [...environment.apiConfig.scopes]
  }
});

export const MSALInterceptorConfigFactory = (): MsalInterceptorConfiguration => {
  const protectedResourceMap: Map<string, Array<string>> = new Map();
  const resources: Record<string, any> = environment.apiConfig.resources;

  Object.keys(resources).forEach((key: string) =>
    protectedResourceMap.set(resources[key].api, resources[key].scope)
  );

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

export const b2cPolicies = {
  names: {
    signUpSignIn: environment.b2cPolicies.names.signUpSignIn
  },
  authorities: {
    signUpSignIn: {
      authority: environment.b2cPolicies.authorities.signUpSignIn
    }
  },
  validateAuthority: false,
  authorityDomain: environment.b2cPolicies.authorityDomain
};

export const msalConfig: Configuration = {
  auth: {
    clientId: environment.msalConfig.auth.clientId,
    authority: environment.b2cPolicies.authorities.signUpSignIn.authority,
    knownAuthorities: [b2cPolicies.authorityDomain],
    redirectUri: '/auth/callback',
    postLogoutRedirectUri: '/'
  },
  cache: {
    cacheLocation: BrowserCacheLocation.SessionStorage,
    storeAuthStateInCookie: false
  },
  system: {
    allowRedirectInIframe: false,
    allowNativeBroker: false
  }
};

Reproduction Steps

From what I can tell, you just need a micro frontends architecture using Angular Elements and msal on both apps, that should do it

Expected Behavior

For the requests to go through as they had before.

Identity Provider

Azure B2C Basic Policy

Browsers Affected (Select all that apply)

Chrome, Firefox, Edge, Safari

Regression

No response

Source

External (Customer)