I'm building a full-stack application which has a backend (PayloadCMS) and a frontend (in NextJS 13) hosted on different domains (e.g. backend: 1.1.1.1, frontend: 2.2.2.2)
I'm using cookies to handle authentication, and when a user login in frontend (2.2.2.2), my backend sets a cookie (with domain origin 1.1.1.1), I setup the Access-Control-Allow-Origin in NextJS properly to accept cookies from backend, so the cookie is set, with 1.1.1.1 as Domain
When I try to retrieve my cookie from server-side component using
import { cookies } from "next/headers";
const cookieStore = cookies();
the cookie is not retrieved, I imagine because the Domain of the cookie is not the same as the NextJS server.
I also tried to put the Domain of the cookie the same as the frontend (1.1.1.1), but my browser blocks it and doesn't set it, I also tried to put as Access-Control-Allow-Origin the frontend domain, but still browser doesn't set the cookie.
What I was thinking as a solution is to use a common domain for both frontend and backend, but I can't believe this is the only solution to this problem. I was also planning on setting another cookie when I receive the cookie from backend, putting as domain the frontend domain, but I don't think this is the best solution.
Is there a way to solve this issue without using the same domain? I'm not so proficient with cookies and CSRF, so also some guides or documentation on it would be welcome!