CODEWITHSUNDEEP
angularazureasp.net-corejwtazure-ad-msal
Sandeep Thomas
Sandeep Thomas

Reputation: 4759

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

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

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.

Upvotes: 0

Views: 1910

Answers (1)

Jiri Kralovec
Jiri Kralovec

Reputation: 1627

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://learn.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)

Upvotes: 0

Related Questions