Next.js Discord

Discord Forum

Not setting cookie on cross-site platform

Unanswered
Mangoorange posted this in #help-forum
Open in Discord
(Production Setup)
Setup:
- Next.js: hosted on cloud run #1 (URL: https://frontend-******.app)
- Backend API: hosted on cloud run #2 (URL: https://backend-******.app)

Backend configuration:
CORS Settings:
- cors_config = CORSConfig(allow_origins=["https://frontend-******.app"], allow_headers=["*"], allow_methods=["*"], allow_credentials=True)

OAuth2 Settings:
- samesite=None; secure=True; httpOnly=True

CSRF Settings:
- samesite=None; secure=True;

I am using Route handlers to fetch the backend api.
//route.js
export async function POST(request) {
  const body = await request.json();
  const url = `${backend_origin}/api/account/login/`;
  const response = await fetch(url, {
    cache: "no-store",
    method: "POST",
    credentials: "include",
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json",
    },
    body: JSON.stringify(body),
  });

  if (response.ok) {
    const result = await response.json();

    console.log(`Response: ${JSON.stringify(response)}`); //returns {}
    console.log(cookies().getAll()); //returns []
    return new NextResponse(JSON.stringify(result), {
      status: 200,
      headers: {
        "Content-Type": "application/json",
      },
    });
  } else {
    const errorResponse = {
      success: false,
      status: response.status,
      statusText: response.statusText,
      body: await response.text(),
    };
    return new NextResponse(JSON.stringify(errorResponse), {
      status: 500,
      headers: {
        "Content-Type": "application/json",
      },
    });
  }
}

3 Replies

The actual output after sending request from the login endpoint.
- it returns the correctresponse (access token)
- it does not set the cookie in the browser
For Development environment (Hosted on local machine but on separated docker containers):
- it works as expected, cookies are also set using the same settings as the production environment.
- Both services are under the NGINX configuration to have SSL config (mock only)
Based on what I read online, should I just map them to the same domain (by creating sub domains)?
- frontend: https://www.domain.com
- backend #1: https://auth.domain.com
- backend #2: https://custom-api.domain.com

would this allow me to share cookies on different subdomains?

What I imagine on this is:
- user access the frontend and tries to login
- frontend fetches the backend #1 api (/login endpoint) and returns the access token by Set-Cookie
- frontend now has the access-token on the developer tools cookie storage
- frontend sends a request to backend #2 by passing the access-token to the request header