'How to add HttpOnly cookie to axios request

I am implementing refreshToken in my ASP.NET CORE WEB API + React application and I can't figure out how to send this token back to my API with another request.

My API adds refreshToken as HttpOnly cookie to requests.

  1. Api endpoint
        [HttpPost]
        [AllowAnonymous]
        public async Task<IActionResult> GenerateToken([FromForm]LoginModel model)
        {
            var result = await _userService.GetTokenAsync(model);
            SetRefreshTokenInCookie(result.RefreshToken);
            return Ok(result);
        }
  1. Adding refresh token to response
        private void SetRefreshTokenInCookie(string refreshToken)
        {
            var cookieOptions = new CookieOptions
            {
                HttpOnly = true,
                Expires = DateTime.UtcNow.AddDays(10)
            };
            Response.Cookies.Append("refreshToken", refreshToken, cookieOptions);
        }

I can see cookie with refreshToken while browsing 'Network' in my chrome dev tools. enter image description here

But there is no cookie in 'Application'

enter image description here

And there is no cookie in next request as well.

enter image description here

I am using Axios to send requests. How can I get that refreshToken in my backend?

asp.net-coreasp.net-web-apicookiesaxios


Solution 1:[1]

You need to add withCredentials. With this flag, it will send to the server all HttpOnly cookies.

axios("http://example.com/api/things/", {
  method: "post",
  data: someJsonData,
  withCredentials: true
})

Solution 2:[2]

In my case, the API and UI had different URLs and I had to add two additional settings to CookieOptions:

private void SetRefreshTokenCookie(string token)
{
    var cookieOptions = new CookieOptions
    {
        HttpOnly = true,
        Expires = DateTime.UtcNow.AddDays(1),
        SameSite=SameSiteMode.None,
        Secure=true
    };
    Response.Cookies.Append("refreshToken", token, cookieOptions);
}

SameSiteMode.None inform that cookie is set by respons from different origin. This option indicates that you need Secure=true. This opions means that

A cookie with the Secure attribute is only sent to the server with an encrypted request over the HTTPS protocol.

like was described here: developer.mozilla.org

After that changes, you will have set a cookie in the browser in the Application tab

Sources

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

Source: Stack Overflow

Solution Source
Solution 1 Alan
Solution 2 Krzysztof Juszcze

Related Questions