Angular – Windows Authentication and Angular 7 application

angularangular7asp.netasp.net-web-apiwindows-authentication

I have developed intranet application

Backend: ASP.NET WEB API-2 (All controllers have Authorize attribute),
Frontend: Angular 7 (after prod build I moved generated scripts to my backend project):

....
  <app-root> 
      <div id="preloader"></div>
  </app-root>


  <script type="text/javascript" src="~/Scripts/SPA/runtime.26209474bfa8dc87a77c.js"></script>
  <script type="text/javascript" src="~/Scripts/SPA/es2015-polyfills.bda95d5896422d031328.js" nomodule></script>
  <script type="text/javascript" src="~/Scripts/SPA/polyfills.8bbb231b43165d65d357.js"></script>
  <script type="text/javascript" src="~/Scripts/SPA/main.122a2bd84f391ab8df1d.js"></script>
</body>

The problem is am getting prompted to enter my username/password after deployment to server.If user enters credentials it works perfectly, but I want the application to grab logged user automaticaly.

this is my web.config

<authentication mode="Windows" />
   <authorization>
     <deny users="?" />
   </authorization>

this is my interceptor in angular

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class CredentialsInterceptor implements HttpInterceptor {
    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        request = request.clone({
            withCredentials: true
        });

        return next.handle(request);
    }
}

in Visual Studio 2019 project settings

Anonymous Authentication:Enabled

Windows Authentication:Enabled

Managed Pipeline Mode: Integrated

Global.asax

protected void Application_BeginRequest(Object sender, EventArgs e)
       {
           //Preflight request comes with HttpMethod OPTIONS
           //The following line solves the error message
           //HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "http://localhost:4202");
           HttpContext.Current.Response.AddHeader("Access-Control-Allow-Credentials", "true");
           if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
           {
               HttpContext.Current.Response.AddHeader("Cache-Control", "no-cache");
               HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST");
               HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept, Pragma, Cache-Control, Authorization");
               HttpContext.Current.Response.End();
           }
       }

Best Answer

You also need to allow SupportsCredentials in cross-origin requests.

Server Side (Web API):

Set the SupportsCredentials property to true on the [EnableCors] attribute:

[EnableCors(origins: "http://exampleclient.com", headers: "*", 
methods: "*", SupportsCredentials = true)]