Login doesn't set sessionid at Cookies on Safari browser with onrender.com [Django]

I deployed Django as backend at render.com, I set up csrf and session rules at settings.py like this.

SECURE_HSTS_SECONDS = 31536000
SECURE_HSTS_INCLUDE_SUBDOMAINS = True
SECURE_HSTS_PRELOAD = True

SESSION_ENGINE = "django.contrib.sessions.backends.db"
SESSION_COOKIE_AGE = 1209600  # 2 weeks
SESSION_COOKIE_SECURE = True
SESSION_COOKIE_SAMESITE = "None"
SESSION_COOKIE_HTTPONLY = True

CSRF_COOKIE_SECURE = True
CSRF_COOKIE_SAMESITE = "None"
CSRF_TRUSTED_ORIGINS = [
    "http://localhost:5173",
    config("LOCAL_SERVER"),
    config("FRONTEND_URL"),
    config("BACKEND_URL"),
]

The server even replied with 200 status, but the user is not stored at cookies so the user is not actually logged in. I tried to log in at Brave browser and it worked. But the problem exists at Safari and mobile browsers. What could be the problem?

This is the login method at Django.

@csrf_protect
@api_view(["POST"])
@permission_classes([AllowAny])
def login_view(request):
    username = request.data.get("username")
    password = request.data.get("password")
    user = authenticate(username=username, password=password)

    if user is not None:
        login(request, user)
        csrf_token = get_token(request)

        if request.data.get("favorites") or request.data.get("cart"):
            request.user = user
            # Call sync function with the cookie data
            sync_user_data(request)
        response = JsonResponse({"message": "Login success"}, status=status.HTTP_200_OK)
        response.set_cookie(
            "sessionid",
            request.session.session_key,
            httponly=True,
            secure=True,
            samesite="None",
            domain=config("ALLOWED_HOST_BACKEND"),
            max_age=1209600,
        )
        response.set_cookie("csrftoken", csrf_token, httponly=True)
        return response
    else:
        return JsonResponse(
            {"message": "Invalid credentials"}, status=status.HTTP_400_BAD_REQUEST
        )

This is the login function calling the Backend API,

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    try {
      const response = await axiosInstance.post(
        "/auth/login/",
        {
          username,
          password,
        },
        {
          headers: {
            "X-CSRFToken": csrfToken,
          },
        }
      );

      if (response.status === 200) {
        alert("Login successful!");
        // reload the page after login
        window.location.reload();
      }
    } catch (err) {
      console.error("Login error:", err);
      setError("Invalid username or password.");
    }
  };

Back to Top