Trouble implementing PKCE with Angular and ASP.NET Core 8 using Keycloak

I am trying to implement PKCE authentication in an Angular application that communicates with an ASP.NET Core 8 API. I'm using Keycloak for testing the authentication flow.

What I’ve done so far:

1. 
   Keycloak Configuration:
   
   • I configured a Keycloak client with:
     • Client ID: confidential-client
     • Client authentication: ON
     • Authorization: OFF
     • Authentication flow: Standard flow
2. 
   ASP.NET Core 8 API Configuration: Here is the code I’m using to set up authentication with Keycloak in my API:
   
   var builder = WebApplication.CreateBuilder(args);
   builder.Services.AddAuthentication(options =>
   {
   options.DefaultScheme = CookieAuthenticationDefaults.AuthenticationScheme;
   options.DefaultChallengeScheme = OpenIdConnectDefaults.AuthenticationScheme;
   }).AddCookie()
   .AddOpenIdConnect(OpenIdConnectDefaults.AuthenticationScheme, options =>
   {
   options.Authority = "http://localhost:8080/realms/xyztiop";
   options.ClientId = "confidential-client";
   options.ClientSecret = "your-client-secret";
   options.ResponseType = "code";
   options.UsePkce = true;
   options.SaveTokens = true;
   
   options.Scope.Add("openid");
   options.Scope.Add("profile");
   options.RequireHttpsMetadata = false;
   
   options.Events = new OpenIdConnectEvents
   {
   OnAuthenticationFailed = context =>
   {
   context.Response.Redirect("/Error");
   context.HandleResponse();
   return Task.CompletedTask;
   }
   };
   });
   
   builder.Services.AddAuthorization();
   builder.Services.AddControllers();
   builder.Services.AddEndpointsApiExplorer();
   builder.Services.AddSwaggerGen();
   
   var app = builder.Build();
   
   if (app.Environment.IsDevelopment())
   {
   app.UseSwagger();
   app.UseSwaggerUI();
   IdentityModelEventSource.ShowPII = true;
   }
   
   app.UseHttpsRedirection();
   
   app.UseAuthorization();
   app.UseAuthentication();
   
   app.MapControllers();
   
   app.Run();
3. 
   Protected API Endpoint: I have a simple protected endpoint in my controller:
   
   [ApiController]
   [Route("api/[controller]")]
   public class UsersController : ControllerBase
   {
   [HttpGet]
   [Authorize]
   public IActionResult Me()
   {
   var userName = User.Identity.Name;
   return Ok(new { Message = "This is protected data", User = userName });
   }
   }

Questions:

1. How should I properly configure Keycloak for PKCE with a confidential client?
2. What is the correct way to configure my ASP.NET Core API to call the Identity Provider (Keycloak) using PKCE?
3. How can I correctly handle the PKCE flow and authentication in Angular with this setup?

Continue reading...