how do i change the msal configuration during runtime in angular 13?

Issue

I'm building a web app that require the authentication through Aad. at the moment i have the msal configured in the app.module.ts in this way:

    MsalModule.forRoot(new PublicClientApplication
  (
    {
      auth:{
        clientId: environment.clientId,
        redirectUri: environment.apiUrl,
        authority:'https://login.microsoftonline.com/' + environment.tenantId
      },
      cache:
      {
        cacheLocation:'localStorage',
        storeAuthStateInCookie:isIE
      }
    }
  ),
  {
    interactionType:InteractionType.Redirect,
    authRequest:{
      scopes:['user.read']
    }
  },
  {
    interactionType:InteractionType.Redirect,
    protectedResourceMap:new Map(
      [
        ['https://graph.microsoft.com/v1.0/me',['user.Read']],
        [environment.apiUrl, ['api://' + environment.clientId + '/access_as_user']]
      ]
    )
  }
  )

but instead of getting the parameters from the environment file i want to take them from a get call to a server, so i have to do that during runtime, there is a way to do that?

I'm using angular 13

Solution

I solved it, If anyone want do to it follow this guide: https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/docs/v2-docs/configuration.md , but instead of gettin the configuration from a json file, fetch your data from your api and get what you need from that.

Answered By - Lorenzo Cacciola