CORS Error: LinkedIn Authentication; .NET Core 5 REST Api - reactjs

Question

Technology Stack
Using .NET CORE React Template
1 IIS Website
Application Pool (v4 Integrated)
Port 80
Clicking on a Register Button, calls the Register Component.
Component within a useEffect(), calls "/login URL using Axios
C# Map("/login") is called a Challenge to Authenticate using LinkedIn
The CORS Error is then returned
Error Snapshot 1 of 5
Snapshot 2 of 5; Snapshot 3 of 5; Snapshot 4 of 5; Snapshot 5 of 5
React Code
const url = `/login`;
const headers = {
'Content-Type': 'text/html'
}
axios({
method: 'get',
url: url,
headers: headers
})
.then((response) => {...})
.catch((error: Error | AxiosError) => {...});
C# Code - Linked Authentication, Cookies, CORS Middleware
Start.cs - ConfigureServices()
public void ConfigureServices(IServiceCollection services)
{
#region AddAuthentication, AddLinkedIn, AddCookie
services.AddAuthentication()
.AddLinkedIn(o =>
{
IConfigurationSection linkedinAuthNSection =
Configuration.GetSection("Authentication:Linkedin");
o.ClientId = linkedinAuthNSection["ClientId"];
o.ClientSecret = linkedinAuthNSection["ClientSecret"];
})
.AddCookie(o =>
{
o.LoginPath = "/login";
o.LogoutPath = "/logout";
});
#endregion
#region Global CORS Policy Declaration
services.AddCors(o =>
{
o.AddDefaultPolicy(builder =>
builder.AllowAnyMethod()
.AllowAnyHeader()
.AllowAnyOrigin()
);
});
#endregion
services.AddControllersWithViews();
// In production, the React files will be served from this directory
services.AddSpaStaticFiles(configuration =>
{
configuration.RootPath = "client-app/build";
});
}
Start.cs - Configure()
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
app.UseExceptionHandler("/Error");
}
#region Map/login
app.Map("/login", builder =>
{
builder.Run(async context =>
{
var properties = new AuthenticationProperties() { RedirectUri = "/" };
await context.ChallengeAsync("LinkedIn", properties);
});
});
#endregion
#region Map/logout
app.Map("/logout", builder =>
{
builder.Run(async context =>
{
await context.SignOutAsync(CookieAuthenticationDefaults.AuthenticationScheme);
context.Response.Redirect("/");
});
});
#endregion
app.UseStaticFiles();
app.UseSpaStaticFiles();
app.UseRouting();
app.UseCors();
app.UseAuthentication();
app.UseAuthorization();
app.UseEndpoints(endpoints =>
{
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller}/{action=Index}/{id?}");
});
app.UseSpa(spa =>
{
spa.Options.SourcePath = Path.Join(env.ContentRootPath, "client-app");
if (env.IsDevelopment())
{
spa.Options.StartupTimeout = TimeSpan.FromSeconds(240);
spa.UseReactDevelopmentServer(npmScript: "start");
}
});
}

Answer 1

Finally, I got it working!
I have made 2 major changes, after trying to fathom, understand internalizing. Thanks to the yellow warning symbols ⚠ of Chrome Dev Tools, that let me to this article and change 1 of the solution.
Change 1
Applied the major snippets of the above example code to my React SPA .NET Core project
Dropped the Map Middleware (app.Map("/login") that allows branching of the pipeline path.
In favor for a .NET Controller/Action.
However more specifically, just Action since the "/login" is added to the path, of the URL, which makes it difficult to accept the successful sign-in.
Change 2
Dropped Axios call only for the Authentication UI Interaction, since LinkedIn, does not support it. LinkedIn OAuth redirect login returning "No 'Access-Control-Allow-Origin' header is present on the requested resource" error
In favour of using HTML href.
Authentication.cs
//[Route("[controller]/[action]")]
[Route("[action]")]
public class AuthenticationController : Controller
{
[HttpGet]
public IActionResult Register(string authType = "LinkedIn")
{
return Challenge(new AuthenticationProperties() { RedirectUri = "/" });
}
[HttpGet]
public IActionResult Login(string authType = "LinkedIn")
{
return Challenge(new AuthenticationProperties() { RedirectUri = "/" });
}
[HttpGet]
public IActionResult Logout()
{
return SignOut();
}
Start.cs ConfigureServices()
// This method gets called by the runtime. Use this method to add services to the container.
public void ConfigureServices(IServiceCollection services)
{
services.AddRazorPages();
services.AddAuthentication(o =>
{
o.DefaultAuthenticateScheme = CookieAuthenticationDefaults.AuthenticationScheme;
o.DefaultSignInScheme = CookieAuthenticationDefaults.AuthenticationScheme;
o.DefaultChallengeScheme = "LinkedIn";
})
.AddCookie()
.AddOAuth("LinkedIn", o =>
{
o.CorrelationCookie.HttpOnly = true;
o.CorrelationCookie.SameSite = SameSiteMode.Lax;
var linkedInSection = Configuration.GetSection("Authentication:LinkedIn");
o.ClientId = linkedInSection.GetSection("ClientId").Get<string>();
o.ClientSecret = linkedInSection.GetSection("ClientSecret").Get<string>();
o.CallbackPath = new PathString(linkedInSection.GetSection("CallbackPath").Get<string>());
o.AuthorizationEndpoint = linkedInSection.GetSection("AuthorizationEndpoint").Get<string>();
o.TokenEndpoint = linkedInSection.GetSection("TokenEndpoint").Get<string>();
o.UserInformationEndpoint = linkedInSection.GetSection("UserInformationEndpoint").Get<string>();
o.Scope.Add("r_liteprofile");
o.Scope.Add("r_liteprofile");
o.Events = new OAuthEvents
{
OnCreatingTicket = async context =>
{
var request = new HttpRequestMessage(HttpMethod.Get, context.Options.UserInformationEndpoint);
request.Headers.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
request.Headers.Authorization = new AuthenticationHeaderValue("Bearer", context.AccessToken);
var response = await context.Backchannel.SendAsync(request, HttpCompletionOption.ResponseHeadersRead, context.HttpContext.RequestAborted);
response.EnsureSuccessStatusCode();
var json = JsonDocument.Parse(await response.Content.ReadAsStringAsync());
context.RunClaimActions(json.RootElement);
}
};
});
}
Start.cs Configure()
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
app.UseExceptionHandler("/Error");
}
app.UseStaticFiles();
app.UseRouting();
app.UseAuthentication();
app.UseEndpoints(endpoints =>
{
endpoints.MapControllers();
endpoints.MapRazorPages();
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller}/{action=Index}/{id?}");
});
}

Answer 2

In your Chrome browser, try installing an extension called Access control Allow Origin from the Chrome web store . And Open the Options or settings page of that extension and type your localhost address in the textbox like this : https://localhost:80 in ur case
I had faced this issue once and this extension worked for me..