C#•3y ago

Cookies not being set on localhost

Hi! I am setting my cookie on my ASP.NET Core backend:

CookieOptions cookieOptions = new CookieOptions
{
    HttpOnly = true,
    Expires = DateTime.UtcNow.AddMinutes(60000)
};

this.Response.Cookies.Append("PT", "authtokenhere", cookieOptions);

CookieOptions cookieOptions = new CookieOptions
{
    HttpOnly = true,
    Expires = DateTime.UtcNow.AddMinutes(60000)
};

this.Response.Cookies.Append("PT", "authtokenhere", cookieOptions);

I am running create-react-app on my frontend and I am receiving this cookie in response in the headers. The problem is that the cookie is not being set into cookies when inspecting it in browser and is also not being sent in next API requests. Frontend: http://localhost:3001/login - where request is being sent from Backend: http://localhost:39500/account/login - API I tried several settings for the cookie, playing with SameSite and Secure but nothing seems to be working? How can I make cookies work when working on localhost?

42 Replies

NatroOP•3y ago

Firefox Network tab:

NatroOP•3y ago

undisputed world champions•3y ago

are you using javascript to fetch the api? i don't think fetch will receive or send cookies by default setting credentials: 'include' on the request might help though 😉

NatroOP•3y ago

I was so far focusing on the backend side as I thought that may be the problem. I am using the redux on the frontend side, I might need to set the credentials then?

undisputed world champions•3y ago

the first screenshot looks like your backend sends the cookie out to the frontend already your problem seems to be related to the frontend, right? if you use javascript to call your backend you will have to set credentials: 'include' to receive/send cookies when you fetch from your api especially since you seem hit a api on a different origin ("localhost:3001" vs "localhost:39500") this also means you have to setup cors or similar to allow the different origin, but since you already get a response this doesnt seem to be the problem, i think 🤷‍♂️

NatroOP•3y ago

After adding the credentials: 'include' to headers there is no change :/

NatroOP•3y ago

Yawnder•3y ago

@Natro AFAIK, if you're calling an API it wouldn't set cookies automatically. You need to do it from the front-end. This answer seems to be what you're looking for: https://stackoverflow.com/a/44620057/68693

Stack Overflow

ReactJS How To Set Cookie From Fetch Request to Back End

I have a react front end that is talking to a Node Back End. I am able to make requests and such . However, I noticed that I cannot set the cookie that I am getting back. My back end will respond u...

NatroOP•3y ago

I have httponly cookie though so I will not be able to handle it right? Also it should be saved automatically afaik?

Yawnder•3y ago

Just to be clear: You navigate to an url, http://localhost:3001/login, this loads your app and from the app you call an API endpoint, http://localhost:39500/account/login, right?

NatroOP•3y ago

Yes exactly this so the 39500 is my ASP.NET Core backend

Unknown User•3y ago

Message Not Public

NatroOP•3y ago

NatroOP•3y ago

gerard•3y ago

In my experience, credentials and Access-Control-Allow-Origin set to wildcard (*) don't play well. Try setting it to http://localhost:39500/

Unknown User•3y ago

Message Not Public

NatroOP•3y ago

My frontend is on http://localhost:3000/ though, so I did the following:

NatroOP•3y ago

NatroOP•3y ago

Raw headers: Response headers

HTTP/1.1 200 OK
Transfer-Encoding: chunked
Content-Type: application/json; charset=utf-8
Vary: Origin
Server: Microsoft-IIS/10.0
Set-Cookie: PT=longstringhere; expires=Tue, 27 Sep 2022 04:56:03 GMT; path=/; httponly
Access-Control-Allow-Origin: http://localhost:3000
Access-Control-Allow-Credentials: true
X-Powered-By: ASP.NET
Date: Tue, 27 Sep 2022 03:56:03 GMT

HTTP/1.1 200 OK
Transfer-Encoding: chunked
Content-Type: application/json; charset=utf-8
Vary: Origin
Server: Microsoft-IIS/10.0
Set-Cookie: PT=longstringhere; expires=Tue, 27 Sep 2022 04:56:03 GMT; path=/; httponly
Access-Control-Allow-Origin: http://localhost:3000
Access-Control-Allow-Credentials: true
X-Powered-By: ASP.NET
Date: Tue, 27 Sep 2022 03:56:03 GMT

Request headers

POST /account/login HTTP/1.1
Host: localhost:39500
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:105.0) Gecko/20100101 Firefox/105.0
Accept: */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Referer: http://localhost:3000/
content-type: application/json
credentials: include
Content-Length: 46
Origin: http://localhost:3000
Connection: keep-alive
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site

POST /account/login HTTP/1.1
Host: localhost:39500
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:105.0) Gecko/20100101 Firefox/105.0
Accept: */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Referer: http://localhost:3000/
content-type: application/json
credentials: include
Content-Length: 46
Origin: http://localhost:3000
Connection: keep-alive
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site

NatroOP•3y ago

Weirdly I am always getting the following warnings even after deleting cookies and cache for the website:

Unknown User•3y ago

Message Not Public

NatroOP•3y ago

Yes

gerard•3y ago

The answer is already on screen.

gerard•3y ago

https://learn.microsoft.com/en-us/aspnet/core/security/samesite

Work with SameSite cookies in ASP.NET Core

Learn how to use to SameSite cookies in ASP.NET Core

NatroOP•3y ago

Updated to following but I still receive the same warning after getting cookie response from backend and it's still not being stored :/

CookieOptions cookieOptions = new CookieOptions
{
    HttpOnly = true,
    SameSite = SameSiteMode.None,
    Secure = true,
    Expires = DateTime.UtcNow.AddMinutes(60 * _accountRepo.TokenExpTime)
};

this.Response.Cookies.Append("PT", "value", cookieOptions);

CookieOptions cookieOptions = new CookieOptions
{
    HttpOnly = true,
    SameSite = SameSiteMode.None,
    Secure = true,
    Expires = DateTime.UtcNow.AddMinutes(60 * _accountRepo.TokenExpTime)
};

this.Response.Cookies.Append("PT", "value", cookieOptions);

gerard•3y ago

Did you look up every property you changed what it does? :p Secure = True means that you can only access the cookie in HTTPS

My frontend is on http://localhost:3000/ though

So I'm not sure if this works

SUPER MEGA T REX•3y ago

Including credentials needs to be set as part of the fetch options, it's not a request header.

NatroOP•3y ago

What do you mean by that? When I am fetching I set credentials: include on request headers, is this that?

SUPER MEGA T REX•3y ago

No.

NatroOP•3y ago

I tried SameSite.Lax wit Secure = False and it didnt work as well But fair point

SUPER MEGA T REX•3y ago

https://developer.mozilla.org/en-US/docs/Web/API/fetch

fetch() - Web APIs | MDN

The global fetch() method starts the process of fetching a resource from the network, returning a promise which is fulfilled once the response is available.

SUPER MEGA T REX•3y ago

See: credentials

gerard•3y ago

Lax is the default one https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie/SameSite#lax

Cookies are not sent on normal cross-site subrequests

NatroOP•3y ago

The Strict doesn't work as well though?

NatroOP•3y ago

NatroOP•3y ago

I believe it's the credentials header

SUPER MEGA T REX•3y ago

It's not. Where are you making the POST request?

NatroOP•3y ago

I am making the POST Request in my React App using Redux (RTK-Q) if that's what u are asking me It's using fetch underneath

SUPER MEGA T REX•3y ago

The option needs to be provided to fetch. It's not a request header. I have no clue what RTK-Q is but looking at the documentation it would appear you're able to provide the option in your query (as per https://redux-toolkit.js.org/rtk-query/api/fetchBaseQuery)

SUPER MEGA T REX•3y ago

Note that those examples contain a more common example of authentication: https://redux-toolkit.js.org/rtk-query/api/fetchBaseQuery#setting-default-headers-on-requests

fetchBaseQuery | Redux Toolkit

RTK Query > API: fetchBaseQuery reference

NatroOP•3y ago

Oh my god Thank you so much this just solved my headache I've been having for weeks I thought setting it as header is the same Because someone pointed me in that direction

SUPER MEGA T REX•3y ago

Request headers are just bits of text that get sent in the HTTP request, they can't control what other headers are sent. But you're welcome anyhow.

Gaming

Programming

Cookies not being set on localhost