search

AzureAD / microsoft-authentication-library-for-js

Microsoft Authentication Library (MSAL) for JS
http://aka.ms/aadv2
MIT License
3.68k stars 2.65k forks source link

Multiple calls to openid-configuration when calling server APIs in HTML #3010

Closed akshaybabloo closed 3 years ago

akshaybabloo commented 3 years ago

Library

Framework

Description

Let's say I have a service API something like this:

@Injectable({
  providedIn: 'root'
})
export class DashboardApiService {

  constructor(private http: HttpClient) { }

  getAllClients(): Observable<unknown> {
    return this.http.get<unknown>(environment.api + '/dashboard')
      .pipe(retry(3), catchError((error: HttpErrorResponse) => throwError(error)));
  }
}

Now I have injected the above service in Dashboard module/component, something like this:

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

  constructor(public dashboardApiService: DashboardApiService) { }

  ngOnInit(): void {
    this.dashboardApiService.getAllClients().subscribe(value => {
      console.log(value);
    }, error => {
      console.error(error);
    });
  }

}

The above code works fine. But when I remove the code from ngOnInit() and call the injected service in the HTML page as - <p>{{dashboardApiService.getAllClients() | async | json}}</p>

The page goes to loading state, and there are 1000s of requests to https://gollahalliauth.b2clogin.com/gollahalliauth.onmicrosoft.com/b2c_1_signupsigninflow/v2.0/.well-known/openid-configuration

Error Message

And I get 1000s of log output as:

[Wed, 10 Feb 2021 09:59:35 GMT] :  : @azure/msal-browser@2.11.1 : Info - Emitting event: msal:acquireTokenStart
(all same)
[Wed, 10 Feb 2021 09:59:35 GMT] :  : @azure/msal-angular@2.0.0-alpha.5 : Info - Interceptor - 2 scopes found for endpoint
(all same)

MSAL Configuration

The configuration is similar to B2C example at https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-angular-v2-samples/angular11-b2c-sample

Reproduction steps

  1. In the example - https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-angular-v2-samples/angular11-b2c-sample - create a new module as Dashboard
  2. Lazy load the new module in the app-routing.module.ts
  3. Create a service from the code provided above.
  4. Inject the service to the dashboard as mentioned above
  5. Call it in the HTML page as - <p>{{dashboardApiService.getAllClients() | async | json}}</p>

Expected behavior

You should see a JSON output in the HTML page

Identity Provider

Browsers/Environment

Regression

Security

Source

jo-arroyo commented 3 years ago

@akshaybabloo Can you confirm whether you are using the MsalRedirectComponent in your app? I haven't been able to reproduce your error.

akshaybabloo commented 3 years ago

Yes and it's in the bootstrap property.

jo-arroyo commented 3 years ago

@akshaybabloo I was able to reproduce the behavior you stated, and it appears to be an issue with using HTML templating and impure pipes, instead of with MSAL. It seems that the recommended approach according to the Angular docs with using http requests with pipes is to cache the server response, to prevent performance problems. Please take a look at the docs for an approach that may mitigate your problem. Alternatively, we would recommend continuing to use the code above in the OnInit() instead of in the HTML template.

akshaybabloo commented 3 years ago

Got it @jo-arroyo

Thanks for your help.