UPDATE:
Wes was kind enough to respond via Twitter about this issue. It seems Heroku and Now, have their domains as a "public suffix". This means you can't set a cookie for their TLD. The fix was for me to alias my frontend and backend URLS like this:
sick-fits-backend.calendee.com points to my Now Yoga instance and
sick-fits-frontend.calendee.com points to my Now front-end instance. I had to do this via my DNS and Now's domain aliasing feature.
Now, even if a browser is set to block 3rd part cookies, it doesn't block my own domain's cookies!
I've been learning GraphQL with React via Wes Bos' Advanced React & GraphQL course but have run into some problems with cookie based authentication.
Scenario:
Front End: Hosted at frontend.xzy.com. All GraphQL queries are sent to a Yoga backend.
Yoga backend hosted at backend.xyz.com. When the signup mutation is called, the mutation sets a cookie on the response. Then, all subsequent queries/mutations should include the cookie in the request headers.
When developing locally, this works great. The front-end is hosted on localhost:7777 and the Yoga backend is hosted on localhost:4444.
When I deploy the app to Heroku or Zeit's Now, things start to go wrong.
In any browser that is NOT blocking 3rd party cookies, everything works fine. After signup, the GraphQL backend responds with a set-cookie header. All subsequent queries are sent with that cookie in the request headers.
On any browser that is set to block 3rd party cookies, nothing works properly. As usual on the signup mutation call, the GraphQL mutation sets a cookie. However, subsequent queries do NOT pass the cookie in the request header. So, effectively my authentication mechanism is broken.
I've tried several ways of trying to make the browser accept these "third party" cookies.
For example, when setting the cookie, I've done BOTH ways of setting the domain for the cookie.
domain: ".xzy.com"
and
domain: "xzy.com"
Any time I specifically set the domain (either way), the browser (Chrome in this case) does NOT send the cookie in query request headers regardless of whether or not 3rd party cookies are blocked. So, using the domain in the cookie actually makes things worse.
I'm beginning to think that proxying the GraphQL requests via the front end might be the only solution to this problem.
Does anyone else have any ideas? Please let me know on Twitter.
