Hi @magnificent-energy-493, @proud-plumber-24205 So, I've made some previous posts where with your help I managed to make the ORY SDK work in a JavaScript client front-end, but due to some infra stuff on our side, I've now needed to move this to a server-side rendered NextJS back-end. Please take note of the example:

import {Configuration, FrontendApiFp} from "@ory/client";

const SignIn = ({ ory_login_flow }) => {
  return(
    <form method={ory_login_flow.ui.method} action={ory_login_flow.ui.action}>
      { ory_login_flow.ui.nodes.map((ui_node, index) => {
        let key = ui_node.attributes.name + index;

        if(ui_node.attributes.type !== "hidden") {
          delete ui_node.attributes.value; // BugFix: Setting value on input makes it read-only in React
        }

        <http://console.info|console.info>("UI_NODE --->", ui_node);

        return(
          <div key={key}>
            <label>{ ui_node?.meta?.label?.text ?? ""}</label>
            <input { ...ui_node.attributes } />
          </div>
        );
      })}
    </form>
  )
}

export const getServerSideProps = async () => {
  const oryAPIConfig = new Configuration({
    basePath: '<http://localhost:4000>',
    baseOptions: {
      withCredentials: true,
    }
  });

  const oryAPIClient = new FrontendApiFp(oryAPIConfig);
  const ory_login_flow_func = await oryAPIClient.createBrowserLoginFlow();
  const ory_login_flow_response = await ory_login_flow_func();

  return {
    props: {
      ory_login_flow: ory_login_flow_response.data
    }
  }
}

export default SignIn;

It generates the following form successfully (screenshot attached):

<form method="POST" action="<http://localhost:4000/self-service/login?flow=a7e3be83-70ff-47ce-abe6-248ff48d0680>"><div><label></label><input name="csrf_token" type="hidden" required="" node_type="input" value="s/9rWyoGvu3khn6Xf8g/vfNPVchsgKvkxPpGtt3S/fSByiMdctvN0QNSkBX9tlSbyu9Qjo+mx2JgT8ujzqsdFQ=="></div><div><label>ID</label><input name="identifier" type="text" required="" node_type="input"></div><div><label>Password</label><input name="password" type="password" required="" autocomplete="current-password" node_type="input"></div><div><label>Sign in</label><input name="method" type="submit" node_type="input"></div></form>

When I submit that form, it reaches the destination at http://localhost:4000/self-service/login?flow=a7e3be83-70ff-47ce-abe6-248ff48d0680 where my ORY Kratos instance is running via the tunnel, but I get a

404

error response:

{
  "error": {
    "code": 404,
    "status": "Not Found",
    "request": "8d6a0349-fb1f-9b45-a1ab-426cedcda310",
    "message": "Requested url does not match any rules"
  }
}

So, my questions are: • What does

Requested url does not match any rules

mean? • What can I do to solve this response? I'm expecting either a 200 response (if I provide correct ID and password), or a 401 response (If I provide incorrect ID and password) • I'm not sure if this an error on the implementation above, or if there's some setting on the ORY console I need to change