1

Context

I am writing a SPA in which the frontend and the backend are served from different domains:

  • mywebsite.com
  • myapi.com

To keep things simple I am trying to use cookies for authentication. When signing in, the server responds with a set-cookie header, as shown below:

Sign in response

When making subsequent requests to the API, the cookie should be included to make sure the user is authenticated. For instance:

Request

Problem

This all works well when serving the API on localhost:5000 and the frontend on localhost:4200, but it doesn't work when deployed. As you can see in the screenshots below, the sign-in response has the proper set-cookie header, but the cookie doesn't seem to be set by the browser, and therefore is not sent in future requests.

Response after signing in:

Response (Google)

Subsequent request:

Request (Google)

Question

Is there a way to make this work with two different domains? Or is it forbidden for security reasons? Would it work if I used subdomains, as in mywebsite.com and api.mywebsite.com? Would it work with two subdomains, as in frontend.mywebsite.com and api.mywebsite.com?

aochagavia
  • 5,887
  • 5
  • 34
  • 53
  • 1
    It seems that you're making cross-domain requests. Your BE should allow the specified origins in it's config or you can use a reverse-proxy. – eko Apr 29 '21 at 15:34
  • I'd like to investigate the option of allowing the specified origins. How does that work? Is there a specific http header I can use? – aochagavia Apr 29 '21 at 15:37
  • 1
    that depends on the BE you're using. For nodejs it's something like this: https://stackoverflow.com/a/43915776/5706293 for spring-boot it might be like this: https://stackoverflow.com/a/42165186/5706293 .net: https://stackoverflow.com/a/31942128/5706293 – eko Apr 29 '21 at 15:40
  • I'm using ASP Core as backend with a correct CORS configuration. The `Access-Control-Allow-Origin` is automatically set to the origin on which the frontend is running (http://localhost:4200 locally, and https://mywebsite.com when deployed). Are you suggesting this needs to be changed? – aochagavia Apr 29 '21 at 15:47
  • 1
    Nope, if the FE is running on mywebsite.com it seems correct – eko Apr 29 '21 at 15:49
  • 1
    are you setting `withCredentials` to `true` when making the requests? – eko Apr 29 '21 at 15:50
  • Yes. I think the basic configuration must be right, because it all works when I run things locally (which it didn't at the beginning, because I was missing stuff like `withCredentials`) – aochagavia Apr 29 '21 at 15:51
  • 1
    The problem section still shows the origin as localhost:4200 tho, is that intended? I thought it only didn't work when deployed – eko Apr 29 '21 at 16:00
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/231753/discussion-between-aochagavia-and-eko). – aochagavia Apr 29 '21 at 16:01

1 Answers1

1

After some more research, I discovered I was using the wrong SameSite configuration for the cookie (samesite=lax). According to MDN, samesite=lax means that cookies are not sent on normal cross-site subrequests (for example to load images or frames into a third party site), but are sent when a user is navigating to the origin site (i.e. when following a link).

Using samesite=none solved the issue, since it means cookies will be sent in all contexts, i.e in responses to both first-party and cross-origin requests.

aochagavia
  • 5,887
  • 5
  • 34
  • 53