"Unable to locate the resource" error in kratos

Question

I am new to Kratos and I want to create a simple authentication system using Kratos, where registration/ login will work with only username and password nothing else.

but when I try to POST the data for register, I get this error.

{
    "error": {
        "code": 404,
        "status": "Not Found",
        "message": "Unable to locate the resource"
    }
}

my next.js page

"use client";
import { useEffect, useRef, useState } from "react";
import { useSearchParams } from "next/navigation";
import { Configuration, FrontendApi } from "@ory/client";
import { edgeConfig } from "@ory/integrations/next";

const ory = new FrontendApi(new Configuration(edgeConfig));

function getCsrfTokenFromApiResponse(response) {
  try {
    const csrfToken = response?.data?.ui?.nodes?.find(
      (node) => node.attributes?.name === "csrf_token"
    )?.attributes?.value;
    return csrfToken || null;
  } catch (error) {
    console.error("Error while parsing the API response:", error);
    return null;
  }
}

function getFlowIdFromApiResponse(response) {
  try {
    const flowId = response?.data?.id;
    return flowId || null;
  } catch (error) {
    console.error("Error while parsing the API response:", error);
    return null;
  }
}


export default function Register() {
  const searchParams = useSearchParams();
  console.log(" searchParams", searchParams?.getAll);
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const flow = useRef("");
  const csrfToken =  useRef("");

  useEffect(() => {
    const fetchFlow = async () => {
      const data = await ory.createBrowserRegistrationFlow();
      csrfToken.current = getCsrfTokenFromApiResponse(data);
      flow.current = getFlowIdFromApiResponse(data);
      console.log(data);
    };
    fetchFlow();
  }, []);

  const handleSubmit = async (event) => {
    event.preventDefault();

    var myHeaders = new Headers();
    myHeaders.append("Content-Type", "application/json");
    myHeaders.append("X-CSRF-Token", csrfToken.current);

    var raw = JSON.stringify({
      method: "password",
      traits: {
        username,
      },
      password,
      csrf_token: csrfToken.current,
    });

    var requestOptions = {
      method: "POST",
      headers: myHeaders,
      body: raw,
      redirect: "follow",
    };

    fetch(
      `http://127.0.0.1:4433/self-service/registration?flow=${flow.current}`,
      requestOptions
    )
      .then((response) => response.text())
      .then((result) => console.log(result))
      .catch((error) => console.log("error", error));
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Username:
        <input
          type="text"
          value={username}
          onChange={(event) => setUsername(event.target.value)}
        />
      </label>
      <br />
      <label>
        Password:
        <input
          type="password"
          value={password}
          onChange={(event) => setPassword(event.target.value)}
        />
      </label>
      <br />
      <button type="submit">Register</button>
    </form>
  );
}

my identity schema

{
  "$id": "https://schemas.ory.sh/presets/kratos/quickstart/username-password/identity.schema.json",
  "$schema": "http://json-schema.org/draft-07/schema#",
  "title": "UsernamePassword",
  "type": "object",
  "properties": {
    "traits": {
      "type": "object",
      "properties": {
        "username": {
          "type": "string",
          "format": "string",
          "title": "username",
          "minLength": 8,
          "maxLength": 30,
          "ory.sh/kratos": {
            "credentials": {
              "password": {
                "identifier": true
              }
            }
          }
        }
      },
      "required": ["username"],
      "additionalProperties": false
    }
  }
}

kratos config

version: v0.13.0

dsn: memory

serve:
  public:
    base_url: http://127.0.0.1:4433/
    cors:
      enabled: true
      allow_credentials: true
      allowed_origins:
        - http://127.0.0.1:4433
        - http://*127.0.0.1:4433
        - http://localhost:3000
        - http://*.localhost:3000
      allowed_methods:
        - POST
        - GET
        - PUT
        - PATCH
        - DELETE
      allowed_headers:
        - Authorization
        - Cookie
        - Content-Type
        - X-Session-Token
        - X-Csrf-Token
      exposed_headers:
        - Content-Type
        - Set-Cookie
      debug: true
  admin:
    base_url: http://0.0.0.0:4434/

selfservice:
  default_browser_return_url: http://localhost:3000/
  allowed_return_urls:
    - http://localhost:3000

  methods:
    password:
      enabled: true

  flows:
    login:
      ui_url: http://localhost:3000/auth/login

    registration:
      ui_url: http://localhost:3000/auth/registration

    settings:
      ui_url: http://localhost:3000/auth/settings

    recovery:
      enabled: false
      
log:
  level: debug

secrets:
  cookie:
    - PLEASE-CHANGE-ME-I-AM-VERY-INSECURE

identity:
  default_schema_id: default
  schemas:
    - id: default
      url: file:///etc/config/kratos/identity.schema.json

courier:
  smtp:
    connection_uri: smtps://test:test@mailslurper:1025/?skip_ssl_verify=true

can anyone suggest what is causing this error and any alternative or better way to achieve such system. I am using nextjs.13 and added /api/.ory/[..path].ts as well according to Kratos docs also. thanks!

Answer 1

Make sure you are using consistently http://127.0.0.1, localhost, or http://0.0.0.0 for your URLs in the Ory Kratos configuration. You can't mix them, you need to use either one everywhere.