API request triggering CORS error when using MSAL in Angular and JWT Auth in WebAPI

Question

I have an Angular 9 app in which I enabled MSAL and I configured it with my Azure Details. Base on this https://www.npmjs.com/package/@azure/msal-angular

Also in .NET Core Web API (Under the same AD in Azure) I have setup JWT Authentication

        services.AddAuthentication(AzureADDefaults.AuthenticationScheme)
      .AddAzureAD(options => Configuration.Bind("AzureAd", options))
      .AddJwtBearer("AzureAd", options =>
      {
          options.Audience = Configuration.GetValue<string>("AzureAd:Audience");
          options.Authority = Configuration.GetValue<string>("AzureAd:Instance")
          + Configuration.GetValue<string>("AzureAd:TenantId");
          options.TokenValidationParameters = new Microsoft.IdentityModel.Tokens.TokenValidationParameters()
          {
              ValidIssuer = Configuration.GetValue<string>("AzureAd:Issuer"),
              ValidAudience = Configuration.GetValue<string>("AzureAd:Audience")
          };

      });

So in my App root component nginit I called this

this.authService.loginPopup();

Which popup the login and I logged in successfully according to this log

client:52 [WDS] Live Reloading enabled.
app.component.ts:44 MSAL Logging: Wed, 01 Jul 2020 11:49:44 GMT:e60fcd4e-5e4a-469d-a023-7bafc05a799a-1.3.2-Info Processing the callback from redirect response app.component.ts:44
MSAL Logging: Wed, 01 Jul 2020 11:49:44 GMT:e60fcd4e-5e4a-469d-a023-7bafc05a799a-1.3.2-Info State status:true; Request type:LOGIN app.component.ts:44
MSAL Logging: Wed, 01 Jul 2020 11:49:44 GMT:e60fcd4e-5e4a-469d-a023-7bafc05a799a-1.3.2-Info State is right app.component.ts:44
MSAL Logging: Wed, 01 Jul 2020 11:49:44 GMT:e60fcd4e-5e4a-469d-a023-7bafc05a799a-1.3.2-Info Fragment has id token app.component.ts:44
MSAL Logging: Wed, 01 Jul 2020 11:49:44 GMT:e60fcd4e-5e4a-469d-a023-7bafc05a799a-1.3.2-Info Closing popup window

Also since HTTP_INTERCEPTOR in app module my belief was in every request Authentication will get attached.

  {
    provide: HTTP_INTERCEPTORS,
    useClass: MsalInterceptor,
    multi: true
  }

My expectation was since authentication happens in client side and so it takes the token to API and since JWT enabled in server, server never will try to authenticate. But according to the CORS error I got, I think API also tried to login (Am I wrong?).

So what I did wrong or did I miss anything

Here is the CORS error

Access to XMLHttpRequest at 'https://login.microsoftonline.com/2f57b6c4-17e4-4965-ac1a-85ccccbe6c4a/oauth2/v2.0/authorize?client_id=fc01c08e-a25b-4108-bddc-e5edab6b3436&redirect_uri=https%3A%2F%2Flocalhost%3A44331%2Fsignin-oidc&response_type=id_token&scope=openid%20profile&response_mode=form_post&nonce=637292009854310829.MGUyMjc1NzMtMDhjNi00O&x-client-SKU=ID_NETSTANDARD2_0&x-client-ver=5.5.0.0' (redirected from 'https://localhost:44331/api/kip') from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I am kind of confused about your post - do you have CORS issue or authentication issue? Can you provide us with the error you are getting? — Jiri Kralovec
Honestly I missed to specify that.. I just updated the question with CORS error at the end. Sorry for that.. — Sandeep Thomas

Jiri Kralovec Jiri Kralovec · Accepted Answer · 2020-07-01T12:23:17

Setting up MSAL can be quite tricky. Please check you are meeting all requirements according to official documentation (there is even an Angular project for you to check) - https://docs.microsoft.com/en-us/samples/azure-samples/active-directory-javascript-singlepageapp-angular/active-directory-javascript-singlepageapp-angular/ .

It is also important that you set up the service correctly in Azure - make sure to setup redirectURIs in configuration for localhost (check this issue for more info - https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/1199#issuecomment-579882996)

API request triggering CORS error when using MSAL in Angular and JWT Auth in WebAPI

1 Answers