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");
}

• python
• reactjs
• cookies
• fastapi
• cross-domain

• Please edit your question to include examples of config.FRONTEND_ORIGIN and API_URL – Phil Commented Feb 11 at 5:56
• The answer to the question was simple. The cookies were not being set because I was making the api call in a nextjs server function. It was not able to set the cookies on the browser because of this. The solution was to manually set the cookies. – David Essien Commented Mar 14 at 7:50

2 Answers 2

In 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 Secure cookie is only sent to the server with an encrypted request over the HTTPS protocol. Note that insecure sites (http:) can't set cookies with the Secure directive, and therefore can't use SameSite=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.