Msaluirequiredexception errorcode: user_null angular 10

See more:

API

ASP.NET-Core

Angular10

I'm building a SPA application with angular 10. The App should connect to an Azure secured web api to get the data.

When I connect to the web api, I get this error

"Microsoft.Identity.Web.MicrosoftIdentityWebChallengeUserException: IDW10502: An MsalUiRequiredException was thrown due to a challenge for the user. See https://aka.ms/ms-id-web/ca_incremental-consent. ---> MSAL.NetCore.4.29.0.0.MsalUiRequiredException: ErrorCode: user_null

I can connect to my web api from another ASP.net web app but not from my Angular App. I think the problem is that azure configurations are different in both Angular and the web api and my angular app generates a different token than the one the api is excepting.

Any suggestions to solve that?

What I have tried:

This is my angular azure configuration

export const environment = {
  apiURL:'https://localhost:44382',
  clientId: 'my-client-id',
  authority: 'https://login.microsoftonline.com/tenant-id',
  redirectUri: 'authorize/signin',
  scopes: ['User.Read']
};

AppComponent

import { Component } from '@angular/core';
import { MsalProvider, Providers } from '@microsoft/mgt';
import { environment } from 'src/environments/environment';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
  ngOnInit(){
     Providers.globalProvider = new MsalProvider({
        clientId: environment.clientId,
        authority: environment.authority,
        redirectUri: environment.redirectUri,
        scopes: environment.scopes,      
           });       
    Providers.globalProvider.getAccessToken().then(accessToken=>{console.log(accessToken);});

  }
}

This is my Azure configuration in the web api

"AzureAd": {
   "ClientId": "my-client-id",
   "Scopes": [ "User.Read" ],
   "ClientSecret": "client-secret",
   "Instance": "https://login.microsoftonline.com/",
   "TenantId": "tenant-id"
 }