Microsoft-authentication-library-for-js: [Msal for Angular] Load MSAL_Config from appsettings

[NareshKumarM]

I'm submitting a...

[ ] Regression
[ ] Bug report 
[ ] Performance issue
[X] Feature request
[ ] Documentation issue or request
[ ] Other

Browser:

• [X] Chrome version 72.0.3626.121
• [ ] Firefox version XX
• [ ] IE version XX
• [ ] Edge version XX
• [ ] Safari version XX

Library version

Library version: 
"@azure/msal-angular": "^0.1.2",
"@angular/core": "~8.0.0",
"@angular/cli": "~8.0.0"

Current behavior

The MSAL_CONFIG needs to be set in app.module.ts in the imports as MsalModule.forRoot(environment.msal).

Expected behavior

Ability to set MSAL_CONFIG from appsettings via providers

Minimal reproduction of the problem with instructions

I'm using APP_INITIALIZER to call an API end point to get the app settings from the hosted environment. I'm able to get the settings I need, which contains the config needed for MSAL.

The APP_INITIALIZER comes into action after the modules are imported. MsalModule needs the MSAL config settings injected via forRoot() method.

I have looked at other options like using XMLHTTPRequests which defeats the purpose of getting the config/settings from the appsettings.json.

Are there any possibilities of using get methods to load MSAL_CONFIG in MsalModule.forRoot() with the API I have?
or
Get the settings from the API and keep it ready before modules are imported?
or
what is the right way to to do this?

[pnaika]

Does anybody know if we have this feature in recent release ?? We are working through the same scenario, but I am not sure if there is a way to achieve it.

[NickFranceschina]

related to #481 ?

[NareshKumarM]

@NickFranceschina Yes. but I was able to overcome it by using fetch, to get the config values from appsettings from an api. I know it's a bit crude but until a new implementation comes across to use APIs as MSAL_CONFIG provider, this can be helpful.

What we would want to implement is to setup and keep MSAL_CONFIG ready for the MsalModule as it usually expects it in the .forRoot() method.
See the below implementation:

in Main.ts

window.fetch('api/config')
    .then(res => res.json())
    .then((resp) => {
        const msal = resp['msal'];
        const protectedResourceMap: [string, string[]][] = [
            [resp.gatewayAPIBaseUrl, [resp.gatewayApiB2CScope]]
        ];
        const msalConfig = {
            authority: msal.authority,
            authoritypr: msal.authoritypr,
            clientID: msal.clientID,
            validateAuthority: false,
            cacheLocation: 'localStorage',
            postLogoutRedirectUri: resp.applicationURL,
            navigateToLoginRequestUrl: true,
            popUp: false,
            unprotectedResources: ['https://angularjs.org/', 'api/config'],
            loadFrameTimeout: 6000,
            protectedResourceMap: protectedResourceMap,
            redirectUri: resp.applicationURL
        };

        window['appSettings'] = resp;

        platformBrowserDynamic([{ provide: MSAL_CONFIG, useValue: msalConfig }]).bootstrapModule(AppModule)
            .catch(err => console.log(err));
    });

in app.module.ts

@NgModule({
declarations: [...],
exports: [...],
imports: [
...,
MsalModule,
],
providers: [
        ...
        MsalService,
       {
            provide: HTTP_INTERCEPTORS,
            useClass: MSALHttpinterceptor,
            multi: true
        }
]

[NickFranceschina]

@NareshKumarM - I implemented almost that exact same code last night after pounding my head against the desk for hours 😄

[NareshKumarM]

@NickFranceschina As much as it sounds okay to use similar workarounds, hoping to see a more cleaner implementation from MSAL team. Hope you are not having any issues with IE browsers

[jasonnutter]

At this time, using platformBrowserDynamic is our recommended approach to dynamically load MSAL configuration. If that doesn't work for your use case, please let us know why, thanks!

[jasonnutter]

See this issue for a solution: https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/1403