If yes, please add the link to readme,
If no, it will be good to add some links how to do the same in other (non angular) technologies

I am using MSAL on angular for authentication with Azure B2C and sign-in flow to login.

I was able to add a couple of custom user attributes and embed them in the token. Now I want to implement UI permissions on the app. (say I want to give read permissions to a view but hide edit/delete buttons on that view based on permissions).

Is this possible to implement such claims (e.g. my_view_read: boolean, my_view_edit: boolean) on B2C? Do I have to embed them as user attributes to include in the token?

How can this be done, in the case of this sample application?

Please follow the issue template below. Failure to do so will result in a delay in answering your question.

Library

• @azure/[email protected]
• [x ] @azure/[email protected]

Important: Please fill in your exact version number above, e.g. [email protected].

Framework

Angular 9.1

Description

Just cloned the sample repo on my system and followed the README instructions to install and start the app.

Error Message

The following warning appears in the compile window:

WARNING in D:\...\active-directory-b2c-javascript-angular-spa\node_modules\@azure\msal-angular\__ivy_ngcc__\fesm2015\azure-msal-angular.js depends on 'minimatch'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
** Angular Live Development Server is listening on localhost:6420, open your browser on http://localhost:6420/ **
: Compiled successfully.

Security

• Is this issue security related?

Regression

• Did this behavior work before?

I migrated to MsalModule setup shown in this sample from forRoot configuration that was previously available.

However, after successful login, every time I make an api call using httpclient, the first two items on the network tab are as follows. These two initiate some sort of silent sign-in flow every time which creates so many delays and errors.

https://fakeb2c.b2clogin.com/fakeb2c.onmicrosoft.com/b2c_1_signin/v2.0/.well-known/openid-configuration
https://fakeb2c.b2clogin.com/fakeb2c.onmicrosoft.com/b2c_1_signin/oauth2

However, if I use the same configuration parameters and stick to my previous configuration shown below, everything runs smoothly. Any particular reason for this behavior? I would like to use the new setup in this sample so that I can load the configuration file dynamically.

MsalModule.forRoot(msalConfig,
{
popUp: false,
consentScopes: ['openid', ...apiConfig.b2cScopes],
unprotectedResources: [],
protectedResourceMap: [
[apiConfig.webApi, apiConfig.b2cScopes],
],
extraQueryParameters: {},
})

This sample app is really good for getting up and running with Angular and AD B2C. However when moving the "Call API" logic to a component other than the home component, the following error is returned:

"Error when acquiring token for scopes: https://myazurefunction.onmicrosoft.com/api/demo.read ServerError: AADB2C90006: The redirect URI 'http://localhost:4200/dashboard' provided in the request is not registered for the client id 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'."

The dashboard component is a bit different because it is calling an Azure Function instead of the default API. The Azure function is protected by Azure AD B2C, and only allows requests that have been authenticated. When adding the dashboard route to the Redirect URIs configuration for testing, the API call works. But it is unreasonable to add every single application route to this configuration.

How can the Angular application call the API from any component/route, without having to add every route to the Redirect URIs configuration?

import { Component, OnInit } from '@angular/core';
import { BroadcastService, MsalService} from '@azure/msal-angular';
import { HttpClient } from '@angular/common/http';
import { tokenRequest, isIE } from '../../../config';
import { apiConfig } from '../../../config';

@Component({
  selector: 'dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {

  loggedIn = false;
  tokenAcquired = false;
  apiResponse: any;

  constructor(private broadcastService: BroadcastService, private authService: MsalService, private http: HttpClient) { }

  ngOnInit() {
    this.checkAccount();

    this.broadcastService.subscribe('msal:loginSuccess', (payload) => {
      this.checkAccount();
    });

    this.broadcastService.subscribe('msal:acquireTokenSuccess', (payload) => {
      console.log('access token acquired: ' + new Date().toString());
      this.tokenAcquired = true;
    });
 
    this.broadcastService.subscribe('msal:acquireTokenFailure', (payload) => {
      console.log('access token acquisition fails');
      this.tokenAcquired = false;
    });

    // redirect callback for redirect flow (IE)
    this.authService.handleRedirectCallback((authError, response) => {
      if (authError) {
        console.error('Redirect Error: ', authError.errorMessage);
        return;
      }

      console.log('Redirect Success: ', response.accessToken);
      this.tokenAcquired = true;
    });
  }

  // other methods
  checkAccount() {
    this.loggedIn = !!this.authService.getAccount();
  }

  getProfile() {
    if (isIE) {
      this.authService.loginRedirect(tokenRequest);
    } else {
      this.callAPI();
    }
  }

  callAPI() {
    console.log('API call made at: ' + new Date().toString());

    this.http.get("https://myazurefunction.azurewebsites.net/api/Function1").toPromise()
      .then(res => {
        this.apiResponse = res;
        console.log('API responded at: ' + new Date().toString());
        console.log(this.apiResponse.toString());
      }).catch(err => console.log(err));
  }

}

Library

• @azure/[email protected]
• @azure/[email protected]
• @azure/[email protected]

Framework

@angular v11.0.0

Description

When trying to make a request to a protected API client app keeps looping without actually making the request.

Error Message

No error message (see attached screenshot).

First token response (grant_type: authorization_code):
client_id: e28c4d7c-0b43-4670-b709-f5657ec3d4af
redirect_uri: https://localhost:44342/
scope: offline_access https://frontsystemsincubation.onmicrosoft.com/api/authentication/permissions.read openid profile
code: (code)
code_verifier: XdfptaQD_cR5nJAfMQj2ztbkc2d4nAMwViAPVtuEta0
grant_type: authorization_code
client_info: 1
client-request-id: 1808479b-d7f4-4b48-89ef-890f423dc95c

Second token response (grant_type: refresh_token):
client_id: e28c4d7c-0b43-4670-b709-f5657ec3d4af
scope: offline_access https://frontsystemsincubation.onmicrosoft.com/api/authentication/permissions.read openid profile
grant_type: refresh_token
client_info: 1
client-request-id: 7dad68ab-9a6e-4bd3-8b9d-11216e84ea95
refresh_token: (refresh_token)

MSAL Configuration

app.module.ts

export function MSALInstanceFactory(): IPublicClientApplication {
  return new PublicClientApplication({
    auth: {
      clientId: 'e28c4d7c-0b43-4670-b709-f5657ec3d4af',
      authority: b2cPolicies.authorities.signIn.authority,
      redirectUri: 'https://localhost:44342/',
      postLogoutRedirectUri: 'https://localhost:44342/',
      navigateToLoginRequestUrl: true,
      knownAuthorities: [b2cPolicies.authorityDomain]
    },
    cache: {
      cacheLocation: BrowserCacheLocation.LocalStorage,
      storeAuthStateInCookie: isIE, // set to true for IE 11
    },
    system: {
      loggerOptions: {
        loggerCallback,
        logLevel: LogLevel.Info,
        piiLoggingEnabled: false
      }
    }
  });
}

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

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

export function MSALGuardConfigFactory(): MsalGuardConfiguration {
  return {
    interactionType: InteractionType.Redirect,
    authRequest: {
      scopes: [...apiConfig.scopes],
    },
  };
}

b2c-config.ts

const baseAuthorityUrl = 'https://frontsystemsincubation.b2clogin.com/frontsystemsincubation.onmicrosoft.com';

/**
 * Enter here the user flows and custom policies for your B2C application,
 * To learn more about user flows, visit https://docs.microsoft.com/en-us/azure/active-directory-b2c/user-flow-overview
 * To learn more about custom policies, visit https://docs.microsoft.com/en-us/azure/active-directory-b2c/custom-policy-overview
 */
export const b2cPolicies = {
  names: {
    signIn: 'b2c_1_si',
    signUp: 'b2c_1_su',
    signUpSignIn: "b2c_1_susi",
    forgotPassword: "b2c_1_reset",
    editProfile: "b2c_1_profile"
  },
  authorities: {
    signIn: {
      authority: `${baseAuthorityUrl}/b2c_1_si`
    },
    signUp: {
      authority: `${baseAuthorityUrl}/b2c_1_su`
    },
    signUpSignIn: {
      authority: `${baseAuthorityUrl}/b2c_1_susi`,
    },
    forgotPassword: {
      authority: `${baseAuthorityUrl}/b2c_1_reset`,
    },
    editProfile: {
      authority: `${baseAuthorityUrl}/b2c_1_profile`
    }
  },
  authorityDomain: "frontsystemsincubation.b2clogin.com"
};

/**
 * Enter here the coordinates of your Web API and scopes for access token request
 * The current application coordinates were pre-registered in a B2C tenant.
 */
export const apiConfig: { scopes: string[]; uri: string } = {
  scopes: ['offline_access', 'https://frontsystemsincubation.onmicrosoft.com/api/authentication/permissions.read'],
  uri: 'http://localhost:5000'
};

Reproduction steps

Using both samples with my own AAD B2C.

Expected behavior

The client should be able to retrieve the token using the authorization code flow to make the request to the API with the required scope.

Browsers/Environment

• Chrome
• Firefox
• Edge
• Safari
• IE
• Other (Please add browser name here)

Please follow the issue template below. Failure to do so will result in a delay in answering your question.

Library

• @azure/[email protected]
• @azure/[email protected]

Description

The msal-angular README points out that when subscribing to broadcastService events that the user should be careful to always unsubscribe (likely in a corresponding ngOnDestroy() lifecycle event). While the subscriptions in this sample are all made in the top most app.component.ts and unlikely for ngOnDestroy() to be called in an application lifetime, it still seems like it would be a good idea to implement the unsubscribes if for no other reason than "hygiene"/reflecting best practices especially when the best practice is already particularly pointed out in the library's README.

Library

• @azure/[email protected]
• @azure/[email protected]

Description

I tried active-directory-b2c-javascript-angular-spa and active-directory-b2c-javascript-nodejs-webapi, which are great examples. I'm wondering is there any way to get a user profile image(thumbnail). Something like it was for "normal" AAD https://graph.microsoft.com/v1.0/me/photo/$value, where you provide scope user.read. Is it possible to add anything like this in this example?

Hi
We have followed the code sample and its working fine. But in our case, we have 2 policies one for signup and one for sign in.
When user signup we are redirecting to the onboarding page.
when users sign-in we are redirecting to the home page.
How to support this scenario?
In code sample msalConfig file we can pass only one policy and redirect URL.
how can we support this?

I was not able to initiate password reset flow on my angular client.
The user clicks on a button that executes the following code. changePasswordUrl is the url from the Azure B2C portal with B2C_1_reset policy.

changePassword() {
localStorage.clear();
window.location.href = this.changePasswordUrl;
}

Upon redirection user is redirected to the proper page, however, if the user cancels the reset password page, the redirection ends up with

Unexpected error in authentication.: Hash does not contain state. at new AuthError (http://localhost:7100/vendor.js:211125:28) at Function.push../node_modules/msal/lib-es6/error/AuthError.js.AuthError.createUnexpectedError (http://localhost:7100/vendor.js:211133:16) at MsalService.push../node_modules/msal/lib-es6/UserAgentApplication.js.UserAgentApplication.getResponseState (http://localhost:7100/vendor.js:209268:79) at MsalService.push../node_modules/msal/lib-es6/UserAgentApplication.js.UserAgentApplication.handleAuthenticationResponse (http://localhost:7100/vendor.js:209206:30)

How to properly and securely initiate password reset flow?

Hi,
just few thoughs.
First of all, please consider that ADB2C on Azure Portal has been successfully configured by me and is able to interact with my Angular application. Infact I'm happily able to sign-up a new user without problem.
But, once I signin, it always returns the following message:

Password has been reset successfully. Please sign-in with your new password

I tryied to reset the password, but I always receive the same. I inspected the Microsoft Code and I discovered this line:

if (success.idToken.claims['acr'] !== b2cPolicies.names.signUpSignIn) { window.alert("Password has been reset successfully. \nPlease sign-in with your new password"); return this.authService.logout() }

I investigated a little bit further and I realized that the generated ADB2C JWTToken is missing the "acr" claim. And here, on Microsoft Official Documentation, they wrote:

Used only with older policies.

So I'm wondering:

1. Is "acr" claim mandatory?
2. Can I comment out the line without affecting the stability? The application seems work and the returned JWT is well formed

Thanks and regards,
Ennio

I am using angular CLI version - 8.3.24 and msal-angular package version 1.0.0

Msal Configuration:

MsalModule.forRoot({
     auth: {
       clientId: 'xxxx-xxxx-xxxx-xxxx-xxxxxx',
       authority: 'https://mytenent.b2clogin.com/mytenent.onmicrosoft.com/signup_policy',
       validateAuthority: false
     },
     cache: {
       cacheLocation: 'localStorage',
       storeAuthStateInCookie: isIE, // set to true for IE 11
     },

sample code:

login() {
    const isIE = window.navigator.userAgent.indexOf('MSIE ') > -1 || window.navigator.userAgent.indexOf('Trident/') > -1;
    if (isIE) {
      this.authService.loginRedirect();
    } else {
      this.authService.loginPopup().then(

      ).catch(function (error) {
        if (error.errorMessage) {
          if (error.errorMessage.indexOf("AADB2C90118") > -1) {
            this.authService.loginPopup({authority: 'https://mytenent.b2clogin.com/mytenent.onmicrosoft.com/forgot_policy'})
              .then(loginResponse => {
                console.log(loginResponse);
                window.alert("Password has been reset successfully. \nPlease sign-in with your new password.");
              })
          }
        }
      });
    }
  }

i could able to signup and login properly.
when i click forgot password i am getting an error
ServerError: AADB2C90118: The user has forgotten their password.
Correlation ID: aadd3d1re-c3d8a-45sf5b-8fefdd5-1c3e189dddfs

How to load the config from the server without hard coding in the .ts file.

I tried implementing the config loader and loading MSAL_CONFIG and MSAL_CONFIG_ANGULAR from the server. But this approach ends up causing RENEW_TOKEN calls for each and every api call and module load. Is there a proper way to implement this?

 {
      provide: IDENTITY_CONFIG,
      useClass: ConfigLoaderService, // loader
    },
    {
      provide: APP_INITIALIZER,
      useFactory: IdentityConfigFactory,
      deps: [IDENTITY_CONFIG],
      multi: true,
    },
    {
      provide: MSAL_CONFIG,
      useFactory: msalConfigFactory,
      deps: [IDENTITY_CONFIG],
    },
    {
      provide: MSAL_CONFIG_ANGULAR,
      useFactory: msalAngularConfigFactory,
      deps: [IDENTITY_CONFIG],
    },

Logs for a simple API call
[DEBUG] [MsalAuthService]: MSAL Logging: Tue, 01 Sep 2020 00:29:19 GMT:1c3a20ec-fb50-4269-94df-14a8fe56e84c-1.4.0-Info RenewIdToken has been called
development-logger.ts:10 [DEBUG] [MsalAuthService]: MSAL Logging: Tue, 01 Sep 2020 00:29:20 GMT:1c3a20ec-fb50-4269-94df-14a8fe56e84c-1.4.0-Info ProcessCallBack has been called. Processing callback from redirect response
development-logger.ts:10 [DEBUG] [MsalAuthService]: MSAL Logging: Tue, 01 Sep 2020 00:29:20 GMT:1c3a20ec-fb50-4269-94df-14a8fe56e84c-1.4.0-Info State status: true; Request type: LOGIN
development-logger.ts:10 [DEBUG] [MsalAuthService]: MSAL Logging: Tue, 01 Sep 2020 00:29:20 GMT:1c3a20ec-fb50-4269-94df-14a8fe56e84c-1.4.0-Info State is right
development-logger.ts:10 [DEBUG] [MsalAuthService]: MSAL Logging: Tue, 01 Sep 2020 00:29:20 GMT:1c3a20ec-fb50-4269-94df-14a8fe56e84c-1.4.0-Info Fragment has idToken
:7100/#state=eyJpZCI6ImZhMGY0Mjc0LTRiZmYtNDQwMy04
Slow network is detected. See https://www.chromestatus.com/feature/5636954674692096 for more details. Fallback font will be used while loading: http://localhost:7100/Roboto-Regular.woff2
development-logger.ts:10 [DEBUG] [MsalAuthService]: MSAL Logging: Tue, 01 Sep 2020 00:29:21 GMT:1c3a20ec-fb50-4269-94df-14a8fe56e84c-1.4.0-Info ProcessCallBack has been called. Processing callback from redirect response
development-logger.ts:10 [DEBUG] [MsalAuthService]: MSAL Logging: Tue, 01 Sep 2020 00:29:21 GMT:1c3a20ec-fb50-4269-94df-14a8fe56e84c-1.4.0-Info State status: true; Request type: RENEW_TOKEN
development-logger.ts:10 [DEBUG] [MsalAuthService]: MSAL Logging: Tue, 01 Sep 2020 00:29:21 GMT:1c3a20ec-fb50-4269-94df-14a8fe56e84c-1.4.0-Info State is right
development-logger.ts:10 [DEBUG] [MsalAuthService]: MSAL Logging: Tue, 01 Sep 2020 00:29:21 GMT:1c3a20ec-fb50-4269-94df-14a8fe56e84c-1.4.0-Info Fragment has access token
development-logger.ts:10 [DEBUG] [MsalAuthService]: MSAL Logging: Tue, 01 Sep 2020 00:29:21 GMT:1c3a20ec-fb50-4269-94df-14a8fe56e84c-1.4.0-Info The user object received in the response is the same as the one passed in the acquireToken request

I am using Msal in Angular 9.1.1 version to load msal configuration for each environment dynamically.

What i am doing?

1. I have a appsettings.php file, which reads Azure Webapp appsettings as suggested in stackoverflow

$appSettings = [];
foreach ($_SERVER as $key => $value) {
    if(preg_match('/^APPSETTING_/', $key)) {
        $appSettings[str_replace('APPSETTING_', '', $key)] = $value;
    }
}
header('Content-Type: application/json');
echo json_encode($appSettings);
?>

2. I have a service which calls this php file on PLATFORM_INITIALIZER and makes sure the configuration is available before app initializes.

import { Injectable, isDevMode } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { AppSetting } from 'src/models/AppSetting';
import { environment } from 'src/environments/environment';
@Injectable({
  providedIn: 'root'
})
export class AppSettingsServiceService {
  private appConfig: any;
  public appSetting: AppSetting;
  constructor(private httpClient: HttpClient) {
  }
  loadAppConfig() {
    if (isDevMode()) {
      this.appSetting = new AppSetting();
      this.appSetting.ApiUrl = environment.ApiUrl;
      this.appSetting.B2C = environment.B2C;
    }
    else {
      return this.httpClient.get('appSettings.php', { headers: { skip: "true" } })
        .toPromise()
        .then(data => {
          this.appConfig = data;
          this.appSetting = new AppSetting();
          this.appSetting.ApiUrl = this.appConfig.ApiUrl;
          this.appSetting.B2C.UiClientId = this.appConfig.UiClientId;
          this.appSetting.B2C.Tenant = this.appConfig.Tenant;
          this.appSetting.B2C.SignInPolicy = this.appConfig.SignInPolicy;
          this.appSetting.B2C.PasswordRestPolicy = this.appConfig.PasswordRestPolicy;
          this.appSetting.B2C.ApiScopes = this.appConfig.ApiScopes.split(',');
          this.appSetting.B2C.UiScopes = this.appConfig.UiScopes.split(',');
        });
    }
  }
}

3. Injected all the above in my app module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, APP_INITIALIZER, PLATFORM_INITIALIZER } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { FormsModule } from '@angular/forms';
import { NgbModule, NgbDateParserFormatter } from '@ng-bootstrap/ng-bootstrap';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { BaseUrlInterceptor } from './common/baseUrlInterceptor';
import { environment } from 'src/environments/environment';
import { Configuration } from 'msal';
import {
  MsalModule,
  MsalInterceptor,
  MSAL_CONFIG,
  MSAL_CONFIG_ANGULAR,
  MsalService,
  MsalAngularConfiguration
} from '@azure/msal-angular';
import { msalConfig, msalAngularConfig } from './app-config';
import { AppSettingsServiceService } from './services/app-settings-service.service';
import { NgHttpLoaderModule } from 'ng-http-loader';
function MSALConfigFactory(appConfigService: AppSettingsServiceService): Configuration {
  //return msalConfig;
  return {
    auth: {
      clientId: appConfigService.appSetting.B2C.UiClientId,
      authority: appConfigService.appSetting.SignInAuthority,
      redirectUri: window.location.origin,//'http://localhost:4200/',
      postLogoutRedirectUri: window.location.origin + '/logout',
      navigateToLoginRequestUrl: true,
      validateAuthority: false,
    },
    cache: {
      cacheLocation: 'localStorage',
      storeAuthStateInCookie: false, // Set this to 'true' to save cache in cookies to address trusted zones limitations in IE
    },
  }
}
function MSALAngularConfigFactory(appConfigService: AppSettingsServiceService): MsalAngularConfiguration {
  //return msalAngularConfig;
  let protectedResourceMap = appConfigService.appSetting.protectedResourceMap;
  return {
    popUp: false,
    consentScopes: [
      ...appConfigService.appSetting.B2C.UiScopes,
      ...appConfigService.appSetting.B2C.ApiScopes,
    ],
    unprotectedResources: [], // API calls to these coordinates will NOT activate MSALGuard
    protectedResourceMap,     // API calls to these coordinates will activate MSALGuard
    extraQueryParameters: {}
  }
}
@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule,
    NgbModule,
    MsalModule,
    NgHttpLoaderModule.forRoot()
  ],
  providers: [
    {
      provide: APP_INITIALIZER,
      multi: true,
      deps: [AppSettingsServiceService],
      useFactory: (appConfigService: AppSettingsServiceService) => {
        return () => {
          //Make sure to return a promise!
          return appConfigService.loadAppConfig();
        };
      }
    },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: BaseUrlInterceptor,
      multi: true,
    },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: MsalInterceptor,
      multi: true
    },
    {
      provide: MSAL_CONFIG,
      deps: [AppSettingsServiceService],
      useFactory: MSALConfigFactory
    },
    {
      provide: MSAL_CONFIG_ANGULAR,
      deps: [AppSettingsServiceService],
      useFactory: MSALAngularConfigFactory
    },
    MsalService
  ],
  bootstrap: [AppComponent]
})
export class AppModule {  }

I change the logic to get hosted environment php file in my development environment i found that below highlighted line i am getting exception.

Thanks in advance

I downloading and ran this sample without making any changes and logged-in with google social login. When I hit call API I am getting the below error.

core.js:6241 ERROR Error: Uncaught (in promise): ClientAuthError: Token renewal operation failed due to timeout.
ClientAuthError: Token renewal operation failed due to timeout.
at ClientAuthError.AuthError [as constructor] (AuthError.ts:26)
at new ClientAuthError (ClientAuthError.ts:108)
at Function.ClientAuthError.createTokenRenewalTimeoutError (ClientAuthError.ts:141)
at WindowUtils.ts:65
at ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:41645)
at ZoneDelegate.invokeTask (zone.js:420)
at Zone.runTask (zone.js:188)
at ZoneTask.invokeTask (zone.js:503)
at ZoneTask.invoke (zone.js:492)
at resolvePromise (zone.js:832)
at resolvePromise (zone.js:784)
at zone.js:894
at ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:41645)
at ZoneDelegate.invokeTask (zone.js:420)
at Zone.runTask (zone.js:188)
at drainMicroTaskQueue (zone.js:601)
at ZoneTask.invokeTask (zone.js:507)
at ZoneTask.invoke (zone.js:492)

I am getting the same error with my application as well

Library

active-directory-b2c-javascript-angular-spa

Description

When I tested this sample, I found that when clicking "Call API", it opens the browser pop up in Chrome browser. This is happened when routing to Profile components and not when calling an API. Same behavior is encountered with your test B2C environment as well as our environment. Pop up is not opened in Edge browser, but it seems it is happening in background.

Could someone please let me know the reason for this and how to avoid it?

Thanks,
Thushara