Trouble with CORS when adding Azure AD authentication (with MSAL) in a angular app

Question

I'm currently developing an Angular 8 Frontend & asp.net core 3.1 backend application where I use Azure AD to authenticate users.

The flow of the application goes as followed.

The user tries to login or access a route that is protected/guarded in my Angular app so the user gets redirected to the Azure login page. So now the Angular app has the required token to send along to my asp backend. My backend receives the token along with an API request. backend checks token & responds to the API call.

PROBLEM

When making the API call, I get redirected to the login page, but after logging in. I get this error.

After I log in, I receive a valid token from azure via the URL: http://localhost:4200/#id_token=<< TOKEN >>

These are the headers from the request found in the network tab in my browser.

Not sure about this, but I don't see any tokens passed in those headers. Although I'm using HTTP INTERCEPTORS to add the token to my headers of each request. Can this be the problem?

MY CODE

Backend

Startup.cs

    // This method gets called by the runtime. Use this method to add services to the container.
    public void ConfigureServices(IServiceCollection services)
    {
        //other config services


        services.AddAuthentication(AzureADDefaults.BearerAuthenticationScheme)
            .AddAzureADBearer(options => Configuration.Bind("AzureActiveDirectory", options));

        services.AddCors((opt =>
        {
            opt.AddPolicy("FrontEnd", builder => builder
                            .WithOrigins("http://localhost:4200")
                            .AllowAnyMethod()
                            .AllowAnyHeader()
                            .AllowCredentials()
                        );
        }));
    }

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        //other configurations

        app.UseAuthentication();
        app.UseAuthorization();

        app.UseCors("FrontEnd");

        app.UseEndpoints(endpoints =>
        {
            endpoints.MapControllers();
        });


    }
}

Simple API

[Route("api/[controller]")]
[ApiController]
[EnableCors("FrontEnd")]
[Authorize]
public class GezinnenController : ControllerBase
{
    //Constructor & properties

    // GET: api/Gezinnen
    [HttpGet]
    public async Task<ActionResult<IEnumerable<GezinForLijstDto>>> GetGezinnen()
    {
        var gezinnen = await _unitOfWork.GezinRepo.GetAllAsync(null, "Personen,Gemeente");

        var gezinnenForLijstDto = _mapper.Map<IEnumerable<GezinForLijstDto>>(gezinnen);

        return Ok(gezinnenForLijstDto);
    }

Angular

App.module.ts

  import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
  import { MsalModule, MsalInterceptor } from '@azure/msal-angular';
  //other imports

  export const protectedResourceMap:
     [string, string[]][] = [['https://localhost:5001/api/gezinnen', ['api://<<API Client ID>>/api-access']] ];

  @NgModule({
     declarations: [
        ...
     ],
     imports: [
        ...
        MsalModule.forRoot({
           clientID: '<<Frontend Client ID>>',
           authority: 'https://login.microsoftonline.com/<<API tenant ID>>',
           consentScopes: [ 'user.read', 'api://<<API Client ID>>/api-access' ],
           protectedResourceMap: protectedResourceMap }),
     ],
     providers: [
        {
        provide: HTTP_INTERCEPTORS,
        useClass: MsalInterceptor,
        multi: true
     }],
     bootstrap: [
        AppComponent
     ]
  })
  export class AppModule { }

Can someone help me fix this? I'm starting to get desperate :-)

You might need to add UseCors in the middleware pipeline between routing and endpoints. — juunas
I did, it's right after add authorization/authentication and add endpoints — CSam

Bob Ash Bob Ash · Accepted Answer · 2020-01-29T10:40:25

To resolve CORS error, In your startup.cs, Can you move app.UseCors("FrontEnd") above app.UseAuthentication()

Trouble with CORS when adding Azure AD authentication (with MSAL) in a angular app

2 Answers