New ASP.Net Core/Angular project templates incompatible with Authentication Middleware

[awdorrin]

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

In the original ASP.Net Core/Angular templates, proxying was done in the back-end, while in the newer templates, the proxying moved to the client side.
This new approach breaks the back-end Authentication middleware, since redirect requests for the authentication layer don't get redirected to the ASP.Net Core backend, but to the Angular client server, which results in CORS errors due to the client proxy not introducing CORS headers, like was possible with the previous template.

Expected Behavior

There should be a straight-forward, documented means to use Authentication middleware in ASP.Net Core with the new client-side proxy mechanism.

Steps To Reproduce

Create a new project using the ASP.Net Core Angular template.
Update the Program.cs to include:

            builder.Services
            .AddAuthentication(sharedOptions =>
            {
                sharedOptions.DefaultScheme = CookieAuthenticationDefaults.AuthenticationScheme;
                sharedOptions.DefaultChallengeScheme = OpenIdConnectDefaults.AuthenticationScheme;
            })
            .AddCookie(options =>
            {
                options.ExpireTimeSpan = TimeSpan.FromHours(10); //default is 14days
                options.SlidingExpiration = true;
                options.AccessDeniedPath = "/UserAccessDenied";
            })
            .AddOpenIdConnect(options =>
            {
                options.Authority = builder.Configuration["Auth:Authority"];
                options.ClientId = builder.Configuration["Auth:ClientId"];
                options.ResponseType = OpenIdConnectResponseType.Code;
                options.UsePkce = true;
                options.GetClaimsFromUserInfoEndpoint = true;
                options.Scope.Add("profile");
                options.TokenValidationParameters = new TokenValidationParameters() { NameClaimType = ClaimTypes.NameIdentifier };
                options.Events = new OpenIdConnectEvents()
                {
                    OnRedirectToIdentityProvider = context =>
                    {
                        return Task.CompletedTask;
                    },
                    OnRemoteFailure = context =>
                    {
                        context.Response.Redirect("/Error/401");
                        context.HandleResponse();
                        return Task.CompletedTask;
                    }
                };
            });

and

            app.Use(async (context, next) =>
            {
                if (!context.User.Identity!.IsAuthenticated)
                {
                    await context.ChallengeAsync();
                }
                else
                {
                    await next();
                }
            });
OR
            app.MapControllers().RequireAuthorization();

Configure the OAUTH server parameters in appsettings.json, then run the program

The first request to the /weatherforecast controller will trigger the Challenge redirect to the authentication endpoint with an as/authorization.oath2 call with the client configuration parameters, with a redirect_uri pointing to the ASP.Net Core backend: https://localhost:44300 (or whichever port gets set by default)
which will be received by the webpack/angular proxy server running at https://localhost:4200
at which point the browser will block by CORS policy stating:
(redirected from 'https://localhost:4200/weatherforecast') from origin 'https://localhost:4200' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource

Exceptions (if any)

My expectation is that the new template should support the existing Authorization mechanisms.
There should be a documented example of how to configure something in proxy.conf.js or proxy.conf.json, or whatever, so that existing code can be tested within the new template environment.

Or, the original templates should be returned, even if flagged as deprecated.

.NET Version

8.0.400 (assume same with templates in 6.0)

Anything else?

C:>dotnet --info
.NET SDK:
Version: 8.0.400
Commit: 36fe6dda56
Workload version: 8.0.400-manifests.56cd0383
MSBuild version: 17.11.3+0c8610977

Runtime Environment:
OS Name: Windows
OS Version: 10.0.22631
OS Platform: Windows
RID: win-x64
Base Path: C:\Program Files\dotnet\sdk\8.0.400\

.NET workloads installed:
Configured to use loose manifests when installing new manifests.
[aspire]
Installation Source: VS 17.11.35208.52
Manifest Version: 8.1.0/8.0.100
Manifest Path: C:\Program Files\dotnet\sdk-manifests\8.0.100\microsoft.net.sdk.aspire\8.1.0\WorkloadManifest.json
Install Type: FileBased

Host:
Version: 8.0.8
Architecture: x64
Commit: 08338fcaa5

.NET SDKs installed:
6.0.425 [C:\Program Files\dotnet\sdk]
8.0.400 [C:\Program Files\dotnet\sdk]

.NET runtimes installed:
Microsoft.AspNetCore.App 6.0.33 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 7.0.20 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 8.0.8 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.NETCore.App 6.0.33 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 7.0.20 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 8.0.5 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 8.0.8 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.WindowsDesktop.App 6.0.33 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
Microsoft.WindowsDesktop.App 7.0.20 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
Microsoft.WindowsDesktop.App 8.0.5 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
Microsoft.WindowsDesktop.App 8.0.8 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]

Other architectures found:
x86 [C:\Program Files (x86)\dotnet]
registered at [HKLM\SOFTWARE\dotnet\Setup\InstalledVersions\x86\InstallLocation]

Environment variables:
Not set

global.json file:
Not found

[awdorrin]

I think the issue here is the template move to SpaProxy and launching the Angular App with a proxy has a hole in regards to the Authentication middleware, within the localhost environment during development.

The Authentication middleware for is going to generate its redirect URI using the Asp.Net Core port (ie. 44300) but the browser will reject, because it sent it out as 4200.

I keep thinking, if only there were a way to override the port number during development. Something simple like:

  build.Services
  .AddAuthentication(...)
  ...
  .AddOpenIdConnect( options => 
  {
     if (app.Environment.IsDevelopment()) {
       options.UseSpaPort = 4200; // replace ASP.Net Port with SpaProxy Port
     }
  }

It seems that the only other approach for this would be to add an OIDC client to the Angular app and trigger an authentication call from that, during development, before calling any back-end API.
Presumably the front-end proxy would forward the redirects (when configured properly) and pass them to the back-end...
But adding all that code, just for being able to debug in Visual Studio, seems like an overly complicated approach...