Hello! I’m having trouble getting the custom UI elements working for Ory network when the UI elements are hosted locally. I’m following this doc with the Nextjs example. I’m running the Nextjs app on port 3001 and I’ve set the ‘Login UI’ field in the ‘Custom UI’ section to

<http://localhost:3001/login>

. When attempting to login, I’m redirected to my Ory Network project, then redirected to

<http://localhost:3001/login>

however, I get an error when the Nextjs app calls

getLoginFlow

which hits

<http://localhost:4000>

ory tunnel. I’m running the tunnel with

ory tunnel <http://localhost:3001> --dev

(having set the

ORY_SDK_URL

environment variable). The error I’m getting calling

<http://localhost:4000/self-service/login/flows?id=>…

is

{
  "error": {
    "id": "security_csrf_violation",
    "code": 403,
    "status": "Forbidden",
    "request": "c044fb7d-7656-9e86-8cb5-a65e0c8c4747",
    "reason": "Please retry the flow and optionally clear your cookies. The request was rejected to protect you from Cross-Site-Request-Forgery (CSRF) which could cause account takeover, leaking personal information, and other serious security issues.",
    "details": {
      "docs": "<https://www.ory.sh/kratos/docs/debug/csrf>",
      "hint": "The anti-CSRF cookie was found but the CSRF token was not included in the HTTP request body (csrf_token) nor in the HTTP Header (X-CSRF-Token).",
      "reject_reason": "The HTTP Cookie Header was set and a CSRF token was sent but they do not match. We recommend deleting all cookies for this domain and retrying the flow."
    },
    "message": "the request was rejected to protect you from Cross-Site-Request-Forgery"
  }
}

Any idea what could be going wrong?

You can see why cookies are not set in the Google Chrome Console, see screenshots: https://www.ory.sh/docs/troubleshooting/csrf#ory-oauth2

Figured out the issue. I needed to pass the cookie from the server side. Added the following to the

login.tsx

page:

export async function getServerSideProps({ req, query }: NextPageContext) {
  const cookie = req?.headers.cookie;
  const id = query.flow as string;

  const flowData = cookie && id
    ? await ory
      .getLoginFlow({ id, cookie })
      .then(({ data: flow }) => {
        return flow;
      })
      .catch((err) => {
        console.log("err", err);
        return null;
      })
    : null;

  return {
    props: {
      flowData,
    },
  };
}

How should we document this better?

Ah sorry, just saw this. You could update the

nextjs-spa

in the

ory/elements

repo to send the request from the backend as shown above