I cant use more than one configuration for MSAL

[cdiazp-sacyr]

Core Library

MSAL.js (@azure/msal-browser)

Core Library Version

3.24.0

Wrapper Library

MSAL Angular (@azure/msal-angular)

Wrapper Library Version

3.0.23

Public or Confidential Client?

Public

Description

I have two different configurations in my environment file, from diferents tenants

On a specific page, the user chooses whether to access one tenant or another

My problem is that, in my app.module, I inject the configuration for msal this way

MsalModule.forRoot(new PublicClientApplication({
            auth: {
                clientId: environment.authConfig.clientId,
                authority: environment.authConfig.authority,
                redirectUri: environment.authConfig.redirectUri,
                postLogoutRedirectUri: environment.authConfig.postLogoutRedirectUri,
            },
            cache: {
                cacheLocation: 'localStorage',
                storeAuthStateInCookie: true,
            }
        }), {
            interactionType: InteractionType.Redirect, // Tipo de interacción para el guard (redirección)
            authRequest: {
                scopes: environment.authConfig.consentScopes,
            },
        }, {
            interactionType: InteractionType.Redirect, // Tipo de interacción para la solicitud de token
            protectedResourceMap: new Map<string, Array<string>>(environment.authConfig.protectedResourceMap.map((entry: [
                string,
                string[]
            ]) => [entry[0], entry[1]])),
        })

But there, I have to choose between one configuration and another.
And same way in the function for MSAL interceptor

function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
    const protectedResourceMap = new Map<string, Array<string>>();
    if (Array.isArray(environment.authConfig.protectedResourceMap)) {
        environment.authConfig.protectedResourceMap.forEach((value: any) => {
            protectedResourceMap.set(value[0] as string, value[1] as Array<string>);
        });
    }
    return {
        interactionType: InteractionType.Redirect,
        protectedResourceMap,
    };
  }

And now, in another page, to use the other configuration, I'm trying to change the authService instance this way:

  public async onAzureAdFreeSignin(): Promise<void> {

        this.authService.instance = new PublicClientApplication({
      auth: {
          clientId: environment.authConfig.clientId,
          authority: environment.authConfig.authority,
          redirectUri: environment.authConfig.redirectUri,
          postLogoutRedirectUri: environment.authConfig.postLogoutRedirectUri,
      },
      cache: {
          cacheLocation: 'localStorage',
          storeAuthStateInCookie: true,
      }
  }), {
      interactionType: InteractionType.Redirect, // Tipo de interacción para el guard (redirección)
      authRequest: {
          scopes: environment.authConfig.consentScopes,
      },
  }, {
      interactionType: InteractionType.Redirect, // Tipo de interacción para la solicitud de token
      protectedResourceMap: new Map<string, Array<string>>(environment.authConfig.protectedResourceMap.map((entry: [
          string,
          string[]
      ]) => [entry[0], entry[1]])),
  }

But It doesnt work

Could you help me, please?
Thank you very much

Error Message

No response

MSAL Logs

No response

Network Trace (Preferrably Fiddler)

• Sent
• Pending

MSAL Configuration

authConfig: {
    clientId: "XXXX",
    tenantId: "XXXX",
    authority:"https://login.microsoftonline.com/XXXX",
    knownAuthorities: [""],
    redirectUri: "http://localhost:3000",
    postLogoutRedirectUri: "http://localhost:3000",
    scopes: ["XXXX", "user.read", "offline_access", "openid"],
    consentScopes: [
      "User.Read",
      "offline_access",
      "openid",
      "XXXX",
    ],
    protectedResourceMap: [
      [
        "XXXX",
        ["XXXX"],
      ],
    ],
  },
  authConfigAdFree:  {
    clientId: "XXXX",
    tenantId: "XXXX",
    authority:"https://login.microsoftonline.com/XXXX",
    knownAuthorities: [""],
    redirectUri: "http://localhost:3000",
    postLogoutRedirectUri: "http://localhost:3000",
    scopes: ["XXXX", "user.read", "offline_access", "openid"],
    consentScopes: [
      "User.Read",
      "offline_access",
      "openid",
      "XXXX"
    ],
    protectedResourceMap: [
      [
        "XXXX",
        ["XXXX"],
      ],
    ],
  }

Relevant Code Snippets

I cant use the authConfigAdFree, because the other one is injected in app module

Reproduction Steps

1. I open my app
2. In my app.module, i'm using the first configuration
3. In one point, in my app I need to use the other configuration
4. App doesnt work

Expected Behavior

should dynamically change settings for msal

Identity Provider

Azure B2C Custom Policy

Browsers Affected (Select all that apply)

Chrome

Regression

No response