Programmtically setting AppId and redirection url for AAD in Augular 8

Question

I have created a single-page using .net core web application with the Angular Template. This application requires AAD authentication. Hence I have integrated MSAL and Microsoft Graph API. The auth setting requires AppId, Redirection Url, and Scopes. When I try to set these values programmatically, it always considers the initial value, and the updated values are not taken. If anyone has suggestions, please let me know.

Code Snipet:

export const OAuthSettings = {
appId: '************-****-****-*************',
redirectUri: 'https://test-test.azurewebsites.net',
scopes: [
"user.read"
]
};

The SignIn call is not considering the update values.

To update these values, AppConfigService is created and called in the AppModule APP_INITIALIZER section.

{ provide : APP_INITIALIZER,
useFactory: (appConfigProvider: AppConfigService)=>{
return()=>appConfigProvider.loadConfig();
},
multi:true,
deps:[AppConfigService]}],

Answer 1

Thanks, Jeevan for your suggestions. I have a similar configuration setup as you suggested. But while publishing to PPE and Prod, I need to update the configuration file as per the environment. Hence I'm looking for the option to push the same artifacts to both environments without any change and based on the environment config data should be collected from app configuration or key vault.

Answer 2

Please refer to this sample here https://github.com/Azure-Samples/active-directory-javascript-singlepageapp-angular/tree/master/
In step 2 number at https://github.com/Azure-Samples/active-directory-javascript-singlepageapp-angular/tree/master/#setup
you can see that the configuration values are defined. You can edit them to your needs, for example

MsalModule.forRoot({
auth: {
clientId: 'Enter_the_Application_Id_Here',
authority: 'Enter_the_Cloud_Instance_Id_HereEnter_the_Tenant_Info_Here',
redirectUri: 'https://test-test.azurewebsites.net',
},
cache: {
cacheLocation: 'localStorage',
storeAuthStateInCookie: isIE, // set to true for IE 11
},
},
{
popUp: !isIE,
consentScopes: [
'user.read',
'openid',
'profile',
],
unprotectedResources: [],
protectedResourceMap: [
['Enter_the_Graph_Endpoint_Herev1.0/me', ['user.read']]
],
extraQueryParameters: {}
})

I don't see the need to set the values programmatically when you can easily configure it from this ts file. If this helps, please mark the answer as verified.