I am sending my refresh and access tokens as http-only cookies to the frontend of my nextjs application. When I log the response headers in the console of my frontend, I am able to get the cookies. However, they are not being added to the browser.
My middleware in the FastAPI backend looks like this:
origins = [
config.FRONTEND_ORIGIN
]
app.add_middleware(
CORSMiddleware,
allow_origins=origins,
allow_credentials=True,
allow_methods=["*"],
allow_headers=["*"]
)
The endpoint that sends the response is as follows:
@auth_router.post("/login", response_model=SuccessLoginResponse, status_code=status.HTTP_200_OK)
async def login(
response: Response,
login_data: LoginRequest,
request: Request,
session: AsyncSession = Depends(get_session)
):
IS_PRODUCTION = config.ENV == "production"
auth_service = get_auth_service(session)
device_info = request.headers.get("User-Agent", "Unknown Device")
try:
tokens = await auth_service.login(login_data, device_info)
# Set HTTP-only cookies in the response
response.set_cookie(
key="refresh_token",
value=tokens.refresh_token,
httponly=True,
max_age=7 * 24 * 60 * 60, # 7 days
secure=False, # Only set to True in production
samesite="none",
)
response.set_cookie(
key="access_token",
value=f"Bearer {tokens.access_token}",
httponly=True,
max_age=15 * 60, # 15 minutes
secure=False, # Only set to True in production
samesite="none"
)
return {
"success": True,
"message": "Login successful"
}
except UnauthorizedException as e:
raise HTTPException(
status_code=status.HTTP_401_UNAUTHORIZED, detail=str(e)) from e
except Exception as e:
print(e)
raise ValidationException(
detail={
"message": "Validation error",
"errors": str(e),
"documentation_url": ";
}
) from e
Log from my frontend:
Object [AxiosHeaders] {
date: 'Mon, 10 Feb 2025 13:47:16 GMT',
server: 'uvicorn',
'content-length': '45',
'content-type': 'application/json',
'set-cookie': [
'refresh_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOjM5LCJleHAiOjE3Mzk4MDAwMzZ9.YnELWecBRiLIDuuZS_RUtfwfdRN--GuL7B5XjvGojKY; HttpOnly; Max-Age=604800; Path=/; SameSite=none',
'access_token="Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOjM5LCJleHAiOjE3MzkxOTcwMzd9.3eNjdMx88ax9SpWgcyMkaw3sJCteVfrdUqv7jxTfZVU"; HttpOnly; Max-Age=900; Path=/; SameSite=none'
]
}
Server action for making the request:
export async function login(
formData: FormData
): Promise<{success: boolean; message: string}> {
const username = String(formData.get("username"));
const password = String(formData.get("password"));
try {
const response = await axios.post(
`${API_URL}/auth/login`,
{username, password},
{
withCredentials: true,
headers: {
"Content-Type": "application/json",
},
}
);
console.log(response.headers);
if (response.status !== 200) {
throw new Error(response.data?.message || "Login failed");
}
console.log("Login successful");
return {success: true, message: "Login successful"};
} catch (error) {
if (axios.isAxiosError(error)) {
console.error("Login error:", error.response?.data || error.message);
throw new Error(error.response?.data?.message || "Login failed");
} else {
console.error("Unexpected error:", error);
throw new Error("An unexpected error occurred");
}
}
return redirect("/dashboard");
}
I am sending my refresh and access tokens as http-only cookies to the frontend of my nextjs application. When I log the response headers in the console of my frontend, I am able to get the cookies. However, they are not being added to the browser.
My middleware in the FastAPI backend looks like this:
origins = [
config.FRONTEND_ORIGIN
]
app.add_middleware(
CORSMiddleware,
allow_origins=origins,
allow_credentials=True,
allow_methods=["*"],
allow_headers=["*"]
)
The endpoint that sends the response is as follows:
@auth_router.post("/login", response_model=SuccessLoginResponse, status_code=status.HTTP_200_OK)
async def login(
response: Response,
login_data: LoginRequest,
request: Request,
session: AsyncSession = Depends(get_session)
):
IS_PRODUCTION = config.ENV == "production"
auth_service = get_auth_service(session)
device_info = request.headers.get("User-Agent", "Unknown Device")
try:
tokens = await auth_service.login(login_data, device_info)
# Set HTTP-only cookies in the response
response.set_cookie(
key="refresh_token",
value=tokens.refresh_token,
httponly=True,
max_age=7 * 24 * 60 * 60, # 7 days
secure=False, # Only set to True in production
samesite="none",
)
response.set_cookie(
key="access_token",
value=f"Bearer {tokens.access_token}",
httponly=True,
max_age=15 * 60, # 15 minutes
secure=False, # Only set to True in production
samesite="none"
)
return {
"success": True,
"message": "Login successful"
}
except UnauthorizedException as e:
raise HTTPException(
status_code=status.HTTP_401_UNAUTHORIZED, detail=str(e)) from e
except Exception as e:
print(e)
raise ValidationException(
detail={
"message": "Validation error",
"errors": str(e),
"documentation_url": "https://api.example/docs"
}
) from e
Log from my frontend:
Object [AxiosHeaders] {
date: 'Mon, 10 Feb 2025 13:47:16 GMT',
server: 'uvicorn',
'content-length': '45',
'content-type': 'application/json',
'set-cookie': [
'refresh_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOjM5LCJleHAiOjE3Mzk4MDAwMzZ9.YnELWecBRiLIDuuZS_RUtfwfdRN--GuL7B5XjvGojKY; HttpOnly; Max-Age=604800; Path=/; SameSite=none',
'access_token="Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOjM5LCJleHAiOjE3MzkxOTcwMzd9.3eNjdMx88ax9SpWgcyMkaw3sJCteVfrdUqv7jxTfZVU"; HttpOnly; Max-Age=900; Path=/; SameSite=none'
]
}
Server action for making the request:
export async function login(
formData: FormData
): Promise<{success: boolean; message: string}> {
const username = String(formData.get("username"));
const password = String(formData.get("password"));
try {
const response = await axios.post(
`${API_URL}/auth/login`,
{username, password},
{
withCredentials: true,
headers: {
"Content-Type": "application/json",
},
}
);
console.log(response.headers);
if (response.status !== 200) {
throw new Error(response.data?.message || "Login failed");
}
console.log("Login successful");
return {success: true, message: "Login successful"};
} catch (error) {
if (axios.isAxiosError(error)) {
console.error("Login error:", error.response?.data || error.message);
throw new Error(error.response?.data?.message || "Login failed");
} else {
console.error("Unexpected error:", error);
throw new Error("An unexpected error occurred");
}
}
return redirect("/dashboard");
}
2 Answers
Reset to default -1In your current configuration, secure=False will prevent cookies from being set in browsers with strict security settings.
Set secure=True
response.set_cookie(
key="refresh_token",
value=tokens.refresh_token,
httponly=True,
max_age=7 * 24 * 60 * 60,
secure=True,# here
samesite="none",
)
When setting the SameSite flag to None, this means that the web browser will send the cookie with both cross-site and same-site requests. However, when setting this flag to None (i.e.,SameSite=None), you would also need to include the Secure flag (in other words, you would have to set the Secure flag to True, not False, as shown in your example); otherwise, the cookie would not be created.
Example
from fastapi import FastAPI, Response
#...
app = FastAPI()
@app.post('/')
async def login(response: Response):
response.set_cookie(key='token', value='token-value', samesite='none', secure=True, httponly=True)
return {'message': 'success'}
Note that, as described in the relevant MDN documentation:
A
Securecookie is only sent to the server with an encrypted request over the HTTPS protocol. Note that insecure sites (http:) can't set cookies with theSecuredirective, and therefore can't useSameSite=None.
So, when in development mode and only for testing purposes—in case you are not using the HTTPS protocol yet—you could use the Insecure origins treated as secure experimental feature at chrome://flags/ of the Chrome browser, for instance, in order to add http://localhost:8000 (and/or http://127.0.0.1:8000) to the list of insecure domains that you need them to be treated as secure instead. It is all explained in this answer, along with further information on HTTP cookies and the risks included with cross-domain cookies that you may need to consider. Related answers on HTTP cookies and FastAPI can be found here and here as well.
Furthermore, I would suggest having a look at this answer, as well as this answer and this answer, as the nature of the issue you are facing might differ.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1743701638a4492674.html
config.FRONTEND_ORIGINandAPI_URL– Phil Commented Feb 11 at 5:56