Microsoft-authentication-library-for-js: How to delay loading configuration MsalModule

[chrislangston]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] Feature request
[x ] Documentation issue or request
[ ] Other... Please describe:

Browser:

• [x ] Chrome version XX
• [ ] Firefox version XX
• [ ] IE version XX
• [ ] Edge version XX
• [ ] Safari version XX

Library version

Library version: 0.1.2

Current behavior

MsalModule.forRoot({}) takes in a config. I would like to be able to load my configuration from a remote server (or load through a JSON file).

We build our application 1 time and that same package is distributed through all the environments (dev, qa, uat, prod) using Azure DevOps Release Pipelines.

MsalModule.forRoot({
  clientID: Constants.clientId,
  authority: Constants.authority,
  consentScopes: Constants.consentScopes,
  protectedResourceMap: Constants.protectedResourceMap,
  unprotectedResources: [`${window.location.origin}/api/clientsettings`],
  level: LogLevel.Verbose,
  logger: loggerCallback,
  popUp: false
}),

Expected behavior

What is the correct way to delay setting up the MsalModule configuration until say after APP_INITIALIZER has loaded configuration data from remote server?

Minimal reproduction of the problem with instructions

[chrislangston]

I found a way to accomplish this using some of the techniques listed in this current issues list.

Can we get the documentation updated to reflect typically real-working scenarios?

I would presume most users of this library are building enterprise applications where the primary use case it to dynamically pull settings from a back-end server.

[sameerag]

Is this specific to Angular setup?

[chrislangston]

Yes I’m using this for Angular 8+

Thanks,

Chris

---

From: Sameera Gajjarapu [e-mail]
Sent: Tuesday, September 3, 2019 12:27 AM
To: AzureAD/microsoft-authentication-library-for-js
Cc: Chris Langston; Author
Subject: Re: [AzureAD/microsoft-authentication-library-for-js] How to delay loading configuration MsalModule (#963)

Is this specific to Angular setup?

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHubhttps://github.com/AzureAD/microsoft-authentication-library-for-js/issues/963?email_source=notifications&email_token=AD3ON4KQXTJZ76BD6UFL3ITQHXRUBA5CNFSM4ISVTEAKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD5W7EPA#issuecomment-527299132, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AD3ON4J6USL7IZPDAQZYJN3QHXRUBANCNFSM4ISVTEAA.

[jasonnutter]

@chrislangston We're always looking to make our documentation better, and this definitely seems like a scenario we can provide guidance on. Can you link to the issues you mention helped you? Thanks!

[pieterdv]

@chrislangston care to share you solution, I'm running into the exact same issue. I want to load my settings first and then initialize MSAL.

[chrislangston]

@chrislangston care to share you solution, I'm running into the exact same issue. I want to load my settings first and then initialize MSAL.

Hi @pieterdv. Yes l can share, however, we had to abandon this library as the Angular Wrapper around it is extremely old and way behind the latest version of the msal.js javascript library. Our client requirements are to work with IE 11 and I was never able to get the the Angular application to work with IE 11. We spent a tremendous amount of effort attempting to resolve all the issues. We had to revert back to MsAngularAdal library.

@pieterdv Let me know if you'd still like to see how I solved this.

[pieterdv]

Hi @chrislangston if I look at MsAngularAdal, it also uses the forRoot to initialize ADAL so if you could create a gist of your solution it would be helpful!

[chrislangston]

Hi @chrislangston if I look at MsAngularAdal, it also uses the forRoot to initialize ADAL so if you could create a gist of your solution it would be of helpful!

Hi @pieterdv See the sample Angular Application that has the ability to dynamically pulls configuration from a back-end website below.
https://github.com/chrislangston/microsoft-adal-angular6-with-dynamic-configuration

• Note that I use a .net Core website to serve the Front-end Application, so we don't have any CORS issues to deal with when pulling the configuration.
• We use a separate .NET WebAPI that handles all CRUD actions from the Angular application once it has booted and is configured.

Hopefully you find this helpful.

[jasonnutter]

This can be accomplished using the approach described here: https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/1403