MSAL V1.x how to update client id and authority dynamically (i am using angular 7)

[ganeshgudaghe]

Core Library

MSAL.js (@azure/msal-browser)

Core Library Version

1.x

Wrapper Library

MSAL Angular (@azure/msal-angular)

Wrapper Library Version

1.x

Public or Confidential Client?

Public

Description

I am using the @azure/msal-angular version ^1.1.2, and I am facing an issue on how to update the MsalModule dynamically
i am refering the code base https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/msal-angular-v1/samples/msal-angular-samples/angular7-sample-app/src/app/app.module.ts

@NgModule({
    declarations: [],
   imports: [  MsalModule.forRoot({ auth: {
            clientId: '',
            authority: '',
            redirectUri: '',
            postLogoutRedirectUri: '',
            navigateToLoginRequestUrl: true
        } },
            {
                popUp: !isIE,
                consentScopes: [
                    'profile',
                    'user.read',
                    'offline_access'
                ],
                unprotectedResources: ['https://www.microsoft.com'],
                protectedResourceMap,
                extraQueryParameters: {},
            })
            ]

Because MSAL 1.x does not support the .instance method (which is available in version 2.x), I am able to update the configuration dynamically in version 2.x, but not in 1.x. Could you please guide me on how to update the configuration dynamically in version 1.x?

Error Message

No response

MSAL Logs

No response

Network Trace (Preferrably Fiddler)

• Sent
• Pending

MSAL Configuration

@NgModule({
    declarations: [],
   imports: [  MsalModule.forRoot({ auth: {
            clientId: '',
            authority: '',
            redirectUri: '',
            postLogoutRedirectUri: '',
            navigateToLoginRequestUrl: true
        } },
            {
                popUp: !isIE,
                consentScopes: [
                    'profile',
                    'user.read',
                    'offline_access'
                ],
                unprotectedResources: ['https://www.microsoft.com'],
                protectedResourceMap,
                extraQueryParameters: {},
            })
            ]

Relevant Code Snippets

@NgModule({
    declarations: [],
   imports: [  MsalModule.forRoot({ auth: {
            clientId: '',
            authority: '',
            redirectUri: '',
            postLogoutRedirectUri: '',
            navigateToLoginRequestUrl: true
        } },
            {
                popUp: !isIE,
                consentScopes: [
                    'profile',
                    'user.read',
                    'offline_access'
                ],
                unprotectedResources: ['https://www.microsoft.com'],
                protectedResourceMap,
                extraQueryParameters: {},
            })
            ]

Reproduction Steps

how to update configuration dynamically

Expected Behavior

how to update configuration dynamically

Identity Provider

Entra ID (formerly Azure AD) / MSA

Browsers Affected (Select all that apply)

Chrome, Firefox, Edge, Safari

Regression

azure/msal-angular": "1.1.2

[ganeshgudaghe]

After a lot of trial and error, I finally found the solution to update the MSAL 1.x configuration dynamically. Here is the code:

import {MsalService } from '@azure/msal-angular';
import * as Msal from 'msal';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  private msalApp: Msal.UserAgentApplication;
  private defaultConfig: Msal.Configuration = {
    auth: {
      clientId: 'initial-client-id',  // Default clientId
      authority: 'https://login.microsoftonline.com/your-tenant-id',  // Default authority
    },
    cache: {
      cacheLocation: 'localStorage',
      storeAuthStateInCookie: false,
    },
  };

  constructor(private authService: MsalService) { }
      ngOnInit() {
      }


  loginAzure() {
    this.msalApp = null;
    const updatedConfig: Msal.Configuration = {
      auth: { // update dynamic data here
        clientId: config.clientId, // dynamic clientId
        authority: config.authority, // dynamic authority
        redirectUri: config.redirectUrl, // dynamic redirectUrl
        postLogoutRedirectUri: config.redirectUrl, // dynamic redirectUrl
        navigateToLoginRequestUrl: true
      },
      cache: this.defaultConfig.cache,
    };
    this.msalApp = new Msal.UserAgentApplication(updatedConfig);
    this.msalApp.loginPopup().then(response => {
      console.log('response', response)
    }).catch(error => {
      console.error(error);
    });
  }

}