1

I am using MSAL which is a microsoft authentication library for my angular project. In my app.module.ts, I added the msalModule in the import section as follows:

This is fine while coding and figuring how to get it work during development, but I need to dynamically set variables like redirectUri, postLogoutRediectUri, and the clientID to different values for the production environment. I tried using an object like:

Object.getClientID(), Object.getRedirectUri(), but I get an error that functions are not allowed in decorator.

Is there a way to set the static variable before the app.module.ts is called? Or is there another way to dynamically load the correct environment variables for MSAL?

Thanks

salModule.forRoot({

  clientID: "<my-client-id>",

  authority: "https://tenant.b2clogin.com/tfp/tenant.onmicrosoft.com/B2C_1_Signin",

  redirectUri: "http://localhost:4200/dashboard",

  /* default is true */
  validateAuthority: false, 


  cacheLocation : "localStorage", 

  postLogoutRedirectUri: "http://localhost:4200/", 


  popUp: false,            
})
Kuya
  • 7,280
  • 4
  • 19
  • 31
c0micrage
  • 1,118
  • 2
  • 21
  • 56

1 Answers1

0

I think the problem you're facing is related to asynchronous providers https://github.com/angular/angular/issues/23279

I was having the same problem with MSAL and my workaround is to disable aot and use global scope, it's not an elegant solution but it works (I hope I remember all the steps):

  1. inside the head section of you HTML page load a custom js with <script src="assets/conf/config.js"></script>, the content of that file should be something like this: window.MY_CONF = { MY_VAR:'my var value here' };

  2. set aot to false in your configurations in the angular.json file

  3. in your angular module import MSAL with MsalModule.forRoot(window['MY_CONF'].MY_VAR)

Now you can replace config.js before launching the build task and get an environment-dependant MSAL configuration.

Note: this post Angular load external configuration before AppModule loads uses the useFactory feature to achieve the same result in the angular-way, but AFAIK Msal lib does not support that. There's a specific github issue here, you might want to chek it out: https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/481

Marco C.
  • 1,282
  • 2
  • 15
  • 19