Not setting cookie on cross-site platform
Unanswered
Mangoorange posted this in #help-forum
(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:
-
OAuth2 Settings:
-
CSRF Settings:
-
I am using Route handlers to fetch the backend api.
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=TrueCSRF 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
- 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)
- 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
- frontend now has the
- frontend sends a request to backend #2 by passing the
- 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