Hi, I'm trying to do a integration with my React app. I'm running the containers locally using:

docker-compose -f quickstart.yml up --build --force-recreate

I'm setting up my own ui using: https://www.ory.sh/docs/kratos/bring-your-own-ui/custom-ui-ory-elements#login To get around cors/xsrf problems I'm using a simple proxy in express:

app.use(
    '/ory',
    createProxyMiddleware({
      target: '<http://localhost:4433|http://localhost:4433>',
      changeOrigin: true,
      pathRewrite: {
        '^/ory': '',
      },
      logLevel: process.env.NODE_ENV === 'production' ? 'silent' : 'debug',
      cookieDomainRewrite: {
        '*': '',
      },
      withCredentials: true,
    }),
  );

I'm able to get a flow started and a login screen up, but all my login requests are failing with:

curl '<http://localhost:3201/ory/self-service/login?flow=87a3ea26-a433-4424-bd53-4d1b1aace07c|http://localhost:3201/ory/self-service/login?flow=87a3ea26-a433-4424-bd53-4d1b1aace07c>' \
  -H 'Accept: application/json, text/plain, */*' \
  -H 'Accept-Language: en-US,en;q=0.9' \
  -H 'Cache-Control: no-cache' \
  -H 'Connection: keep-alive' \
  -H 'Content-Type: application/json' \
  -b 'csrf_token_806060ca5bf70dff3caa0e5c860002aade9d470a5a4dce73bcfa7ba10778f481=z9b2g98jxq6as40c+SDpNW8GC7fYfcadtbD7OrwqUO4=' \
  -H 'Origin: <http://localhost:3200|http://localhost:3200>' \
  -H 'Pragma: no-cache' \
  -H 'Referer: <http://localhost:3200/|http://localhost:3200/>' \
  -H 'Sec-Fetch-Dest: empty' \
  -H 'Sec-Fetch-Mode: cors' \
  -H 'Sec-Fetch-Site: same-site' \
  -H 'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36' \
  -H 'sec-ch-ua: "Not(A:Brand";v="99", "Google Chrome";v="133", "Chromium";v="133"' \
  -H 'sec-ch-ua-mobile: ?0' \
  -H 'sec-ch-ua-platform: "macOS"' \
  --data-raw '{"csrf_token":"30/zMwlT5VI8mwqbVq4acdnkr4BLsaUh+BWRDPpckg8QmQWw1nAj/KYoh4evjvNEtuKkN5PMY7xNpWo2RnbC4Q==","identifier":"email@email.com","password":"password_redacted","method":"password"}'

kratos-1                      | time=2025-03-04T04:39:04Z level=info msg=An error occurred while handling a request func=github.com/ory/x/logrusx.(*Logger).ReportError file=/go/pkg/mod/github.com/ory/x@v0.0.660/logrusx/logrus.go:230 audience=application error=map[message:unable to read body: read tcp 172.20.0.5:4433->172.20.0.1:59590: i/o timeout stack_trace:
kratos-1                      | github.com/ory/kratos/selfservice/flow.MethodEnabledAndAllowedFromRequest
kratos-1                      | 	/project/selfservice/flow/request.go:100
kratos-1                      | github.com/ory/kratos/selfservice/strategy/password.(*Strategy).Login
kratos-1                      | 	/project/selfservice/strategy/password/login.go:63
kratos-1                      | github.com/ory/kratos/selfservice/flow/login.(*Handler).updateLoginFlow
kratos-1                      | 	/project/selfservice/flow/login/handler.go:863
kratos-1                      | github.com/ory/kratos/x.(*RouterPublic).POST.NoCacheHandle.func1
kratos-1                      | 	/project/x/nocache.go:21

FWIW: The self-service UI from the example works fine. Any ideas?

Hi! This looks like an issue at the network level maybe. Definitely difficult to judge what's going wrong where. I'd recommend looking at https://github.com/ory/elements/tree/main/packages/nextjs/src/middleware our new Next.JS middleware, that translates calls to the APIs to localhost.