Search code examples
reactjsasp.netauthenticationasp.net-web-apicookies

ASP.NET dont see cookies, though it is set on frontend React side


`I am writing fullstack app (ASP.NET and React) and now trying to implement Steam auth using AspNet.Security.OpenId.Steam I already figured out how to set cookies, but when i try to check, if user is authenticated, i always get that it is false. Then i tried to look in HttpContext cookies, and found that there are none.

There is my auth code in backend


 //AUTH
 builder.Services.AddAuthentication(options =>
     {
         options.DefaultScheme = CookieAuthenticationDefaults.AuthenticationScheme;
     })

 .AddCookie(options =>
 {
     options.Cookie.SecurePolicy = CookieSecurePolicy.Always;
     options.Cookie.SameSite = SameSiteMode.None;
     options.LoginPath = "/login";
     options.LogoutPath = "/signout";
 })
 .AddSteam();

//later ...
var app = builder.Build();

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
     app.UseSwagger();
     app.UseSwaggerUI();
}

app.UseCors(builder => builder.AllowAnyOrigin()
                 .AllowAnyHeader()
                 .AllowAnyMethod());
app.UseAuthentication();
app.UseAuthorization();
app.MapControllers();
 

app.Run();

There is AuthController : All code except UserInfo endpoint was used from this sample

using Microsoft.AspNetCore.Authentication.Cookies;
using Microsoft.AspNetCore.Authentication;
using Microsoft.AspNetCore.Mvc;
using Server.Models.ResponseModels;

namespace Server.Controllers
{
    [ApiController]
    public class AuthenticationController : ControllerBase
    {

        [HttpGet("~/signin")]
        public async Task<IActionResult> SignIn()
        {
            string provider = "Steam";
            // Note: the "provider" parameter corresponds to the external
            // authentication provider choosen by the user agent.
            if (string.IsNullOrWhiteSpace(provider))
            {
                return BadRequest();
            }

            // Instruct the middleware corresponding to the requested external identity
            // provider to redirect the user agent to its own authorization endpoint.
            // Note: the authenticationScheme parameter must match the value configured in Startup.cs
            return Challenge(new AuthenticationProperties { RedirectUri = "http://localhost:3000/" }, provider);
        }

        [HttpGet("~/signout"), HttpPost("~/signout")]
        public IActionResult SignOutCurrentUser()
        {
            // Instruct the cookies middleware to delete the local cookie created
            // when the user agent is redirected from the external identity provider
            // after a successful authentication flow (e.g Google or Facebook).
            return SignOut(new AuthenticationProperties { RedirectUri = "http://localhost:3000/" },
                CookieAuthenticationDefaults.AuthenticationScheme);
        }
        [HttpPost("~/userInfo")]
        public IActionResult GetUserInfo()
        {
            var Claims = HttpContext.User.Claims;
            if (!User.Identity.IsAuthenticated)
            {
                return Ok(new UserInfoModel()
                {
                    IsAuthenticated = false,
                });
            }
            return Ok(new UserInfoModel()
            {
                IsAuthenticated = true,
            });

        }
    }
}

And finally, this is code of my request on react side

 const url=new URL('userInfo',process.env.REACT_APP_AUTH_URL);
        fetch(url,{
            method:'POST',
            headers:{'Content-Type':'application/json'},
          })
            .then(response=>{
                return response.json()
            }).then(
              //some code
             )

As i said earlier, after signin endpoint my front application has cookie: enter image description here

But when i try to get info there is none :

enter image description here

so, maybe my request from react side is bad? or is it about asp.net?


Solution

  • You probably should use credentials: 'include' in the fetch request to send cookies along with the react-side request. For example:

    fetch(url, {
        method:'POST',
        headers:{'Content-Type':'application/json'},
        credentials: 'include'
    })
    

    You can find more details in the docs here.