@azure/msal-angular v4 with Angular 19

I am building an Angular 19 application that I wish to use with MSAL. I tried to port my implementation of MSAL v2 from an older project into my new Angular 19 app and it wasn't behaving so I am trying to integrate version 4. I am trying to redirect to my SignUpSignIn workflow/policy so I can get a token from my Azure B2C app registration. I followed the documentation here but was not able to get the redirect working. Here is my previous v2 config (in an earlier version of Angular):

get(): Msal.Configuration {
return {
auth: {
clientId: environment.clientID,
authority: environment.authority,
knownAuthorities: environment.knownAuthorities,

redirectUri: environment.redirectUri,
navigateToLoginRequestUrl: false,
},
cache: {
cacheLocation: environment.cacheLocation,
storeAuthStateInCookie: false, // Set this to "true" to save cache in cookies to address trusted zones limitations in IE (see: https://github.com/AzureAD/microsoft-authentication-library-for-js/wiki/Known-issues-on-IE-and-Edge-Browser)
},

windowHashTimeout: 60000,
iframeHashTimeout: 6000,
loadFrameTimeout: 0,
asyncPopups: false,
},
};
}


The values in my environment file look something like:

clientID: '123456vc-44ba-4f60-9740-abcdabcd1999',
authority: 'https://mytenant.b2clogin.com/mytenant.onmicrosoft.com/B2C_1_DefaultSignInSignUp2',
redirectUri: 'https://localhost:4200/login-redirect',
cacheLocation: 'sessionStorage',


Here is what I tried for a configuration in @azure/msal-angular v4 with Angular 19.

return new PublicClientApplication({
auth: {
clientId: environment.msalConfig.auth.clientId,
authority: environment.msalConfig.auth.authority,
redirectUri: 'https://localhost:4200/main',
postLogoutRedirectUri: '/',
},
cache: {
cacheLocation: BrowserCacheLocation.SessionStorage,
},
system: {
allowPlatformBroker: false, // Disables WAM Broker
loggerOptions: {
loggerCallback,
logLevel: LogLevel.Info,
piiLoggingEnabled: false,
},
},
});


Where the values in the enviornment file look something like:

msalConfig: {
auth: {
clientId: '123456vc-44ba-4f60-9740-abcdabcd1999',
authority: 'https://mytenant.b2clogin.com/mytenant.onmicrosoft.com/B2C_1_DefaultSignInSignUp2',
},
},
apiConfig: {
scopes: ['user.read'], //['openid', 'offline_access'],
// uri: 'https://mytenant.b2clogin.com/mytenant.onmicrosoft.com/B2C_1_DefaultSignInSignUp2',
uri: 'https://graph.microsoft.com/v1.0/me',
},


I also had

export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
const protectedResourceMap = new Map<string, Array<string>>();
protectedResourceMap.set(
environment.apiConfig.uri,
environment.apiConfig.scopes
);

return {
interactionType: InteractionType.Redirect,
protectedResourceMap,
};
}

export function MSALGuardConfigFactory(): MsalGuardConfiguration {
return {
interactionType: InteractionType.Redirect,
authRequest: {
scopes: [...environment.apiConfig.scopes],
},
loginFailedRoute: '/login-failed',
};
}


I tried using the 'https://graph.microsoft.com/v1.0/me' uri like the same uses but it doesn't redirect. I recognize that I was using this endpoint in my old app's backend api to retrieve the groups claim.

Also I'm using loginRedirect when a user clicks a button in the UI:

loginRedirect() {
if (this.msalGuardConfig.authRequest) {
this.authService.loginRedirect({
...this.msalGuardConfig.authRequest,
} as RedirectRequest);
} else {
this.authService.loginRedirect();
}
}


My question is are these values that I'm using appropriate for login redirect? In my old code it doesn't look like I ever use the 'https://graph.microsoft.com/v1.0/me' endpoint from the ui, do I need something different. What is the new config that I should use and how do I do the redirect?

Continue reading...