'Is the .AddOpenIdConnect Middleware from Microsoft.AspNetCore.Authentication.Open specific to server-side apps, doesn't seem to work with React

I'm trying to add OpenIdConnect authentication to a React App, using a custom Identity server built using OpenIddict and the AddOpenIdConnect middleware from Microsoft.AspNetCore.Authentication.Open package. I'm trying to follow the authorization code grant with PKCE. The initial authorization code request is successfully sent to authorize endpoint where the authorization code is generated and successfully sent back but the redirect doesn't work. If the response mode is set to form_post it just sends back the html in a fetch response and it doesn't progress any further e.g. doesn't submit the form or log user in (https://i.stack.imgur.com/HEZiY.png). However, if the response mode is set to query then I get a CORS error when attempting the redirect (https://i.stack.imgur.com/2om33.png). Is this middleware just not used for SPAs like React and limited to server side apps or have I just configured it wrong?

This is my program file for my React/.Net Core

using Microsoft.AspNetCore.Authentication.Cookies;
using Microsoft.AspNetCore.Authentication.OpenIdConnect;
using Microsoft.IdentityModel.Protocols.OpenIdConnect;

[var builder = WebApplication.CreateBuilder(args);

// Add services to the container.

builder.Services.AddControllersWithViews();

builder.Services.AddAuthentication(options => {
    options.DefaultScheme = CookieAuthenticationDefaults.AuthenticationScheme;
    options.DefaultChallengeScheme = OpenIdConnectDefaults.AuthenticationScheme;

})
    .AddCookie(option => option.Cookie.SameSite = SameSiteMode.None)
    .AddOpenIdConnect(OpenIdConnectDefaults.AuthenticationScheme, options =>
    {
        options.SignInScheme = CookieAuthenticationDefaults.AuthenticationScheme;
        options.Authority = "https://localhost:44375/";
        options.ClientId = "testing";
        options.ResponseType = OpenIdConnectResponseType.CodeIdToken;
        options.ResponseMode = OpenIdConnectResponseMode.Query;
        options.SaveTokens = true;
        options.ClientSecret = "INSERT_SECRET";
        options.GetClaimsFromUserInfoEndpoint = true;
        options.CallbackPath = new PathString("/callback");
        options.Scope.Clear();
        options.Scope.Add("openid");
        options.Scope.Add("api");
        options.Scope.Add("offline_access");
        options.UsePkce = true;
    });

var app = builder.Build();


// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();

app.UseAuthentication();
app.UseAuthorization();

app.MapControllerRoute(
    name: "default",
    pattern: "{controller}/{action=Index}/{id?}");

app.MapFallbackToFile("index.html"); ;

app.Run();


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source