CORS Error, .NET 7 and ReactJS

[bynik]

CORS Error occur when client app trying to make server request to endpoint, which require [Authorize].
The thing is that authorization redirect request to twtich API for token validation. I think troubles somewhere there.
When client app process fetch request all is going fine but client do not receive response data.
My server enable any cors origin:e a

app.UseCors(builder =>
{
    builder
    .AllowAnyOrigin()
    .AllowAnyMethod()
    .AllowAnyHeader();
});

Error occur when process server request call:

[BarryCarlyon]

Looks like that instead of redirecting the user to Twitch to do oAuth

You are fetching the authorize URL.

For oAuth the first step is a <a href="" or a redirect to Twitch.

[bynik]

The thing is that error occur when server process auth validation, I might be wrong

[BarryCarlyon]

Well it looks like you did a fetch for https://id.twitch.tv/oauth2/authorize which of course doesn’t have a Twitch Session to use, so Twitch redirects to the Twitch login page to get the user to login.

So you need to redirect the web browser to https://id.twitch.tv/oauth2/authorize not fetch it.

If you are sending the user to the page then you won’t get a cors error.

Since to do user oAuth you literally need to redirect the user to the service you are wanting to get tokens for.

IE they leave your website for another, then come back to your website with the code (or token depending on flow)

So for example, using implicit auth: Twitch Implicit Auth Example a <a href=" eixsts to redirect the user to Twitch and after granting access they are returned to this example

[bynik]

I have already done with OAuth by redirect user to twtich site and after that I redirect by user to my own site. But now I have implemented endpoint which require twtich Auth. In my opinion CORS error occurs when ASP.NET Identity process auth validation using twtich endpoints.

[BarryCarlyon]

@bynik

I have already done with OAuth by redirect user to twtich site and after that I redirect by user to my own site.

So you have a token

@bynik

But now I have implemented endpoint which require twtich Auth

Why are you going to get a token again when you already have a token in session?

Here you are not calling a Twitch endpoint you seem to be fetching the oAuth entry point, either not reususing the token from session or the user isn’t logged in with Twitch to your site at this point

[bynik]

I store my token in cookie.
Enpoints which requires authorize work prefect in browser, postman.
But when I try to make a request from react app it goes wrong.
The last redirected url by my auth is:

login - Twitch

Here CORS error occures!

[BarryCarlyon]

Then this suggests a fault in your code in react is fetching the relevant URLs instead of redirecting the user to the URL’s

[bynik]

Well. But why my application works fine in browser?

[BarryCarlyon]

Not sure. You’d have to debug can trace and figure out why you are doing a fetch isntead of having the user leave your application for Twitch.

[bynik]

I add { withCredential : true } to my request.
You was correct my application works wrong and do not send Cookie to server.
Now auth goes wrong with CORS error on my endpopint.

[BarryCarlyon]

@bynik

I add { withCredential : true } to my request.

yeah that’ll fix your frontend talking to your backend.

But there will be times where a user will call your backend and won’t be logged in, so you’d want to tell your front end, rather than start going off to auth.

[bynik]

I fixed this issue by adding this CORS configuration in my ASP.NET app:
And also I have added { withCredential : true } header to client request.
To allow credentials you app need to regiser specific origin, do not use .AllowAnyOrigin() with .AllowCredentials() it goes wrong. If you work with credentials (cookie and etc.) you must use specific origin url!

app.UseCors(builder =>
{
    builder
    .WithOrigins("http://localhost:5173") // my client app url
    .AllowAnyMethod()
    .AllowAnyHeader()
    .AllowCredentials();
});