How to add HttpOnly cookie to axios request

Question

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.

Api endpoint

        [HttpPost]
        [AllowAnonymous]
        public async Task<IActionResult> GenerateToken([FromForm]LoginModel model)
        {
            var result = await _userService.GetTokenAsync(model);
            SetRefreshTokenInCookie(result.RefreshToken);
            return Ok(result);
        }

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.

But there is no cookie in 'Application'

And there is no cookie in next request as well.

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

you want to check if there is a cookie for every req you send? — Vibhav
– Vibhav, Commented Oct 27, 2020 at 19:39
I want to check only when token will expire and server return 401. I already have this in my code, but I cant send httponly cookie with axios. — lemon
– lemon, Commented Oct 28, 2020 at 7:49
axios.get('some api url', {withCredentials: true}); try using withcredentials — Vibhav
– Vibhav, Commented Oct 28, 2020 at 8:25
Already tried this. Doesn't work. Cookie should automatically be visible in 'Application' tab in dev tools, right? With httponly flag checked — lemon
– lemon, Commented Oct 28, 2020 at 8:31
Very annoying problem. I fixed it. It is about CookieOptions. Here is the solution — Alexander Kolarov
– Alexander Kolarov, Commented Jul 4, 2021 at 4:03

Alan · Accepted Answer · 2021-05-05 15:52:02Z

11

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
})

answered May 5, 2021 at 15:52

Alan

10.3k4 gold badges59 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

lemon · Accepted Answer · 2020-10-28 09:52:11Z

2

It turns out that was CORS issue. Setting this in my Startup.cs file worked like a charm.

            services.AddCors(options =>
            {
                options.AddPolicy("CORSAllowLocalHost3000",
                  builder =>
                  builder.WithOrigins("http://localhost:3000")
                    .AllowAnyHeader()
                    .AllowAnyMethod()
                    .AllowCredentials() // <<< this is required for cookies to be set on the client - sets the 'Access-Control-Allow-Credentials' to true
                 );
            });

answered Oct 28, 2020 at 9:52

lemon

1971 gold badge4 silver badges16 bronze badges

2 Comments

mjwrazor Over a year ago

What if you get a console error stating that you cannot specify .AllowAnyOrigin() and .AllowCredentials() at the same time. It states to use credentials you need to provide the origins which we do not have since some origins are not web clients

Tim Gerhard Over a year ago

@mjwrazor I know this answer is probably 2 years late but if anyone else stubmles accross it: You cannot use AnyOrigin and AllowCredentials at the same time. This is due to security implications. Just specify the origin Address like the post you commented, "WithOrigins(".....")"

Krzysztof Juszcze · Accepted Answer · 2022-03-04 09:26:26Z

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

Collectives™ on Stack Overflow

How to add HttpOnly cookie to axios request

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related