dfoxg / kratos-admin-ui

A simple Admin-Interface for ory/kratos

kratos-admin-ui

A simple Admin-Interface for ory/kratos. Made with React und microsoft/fluentui.

Run

To run the image, you have to provide two environment variables:

• KRATOS_ADMIN_URL: the admin url of your kratos instance
• KRATOS_PUBLIC_URL: the public url of your kratos instance

You should follow the kratos best practices, which recommends to never expore the admin-api to the internet, since there is no authentication.

To run the admin-ui, which of course needs access to the admin-api, you should run the admin-ui in the same network as kratos.

In the following snipped the admin-ui gets deployed in the same docker network (kratos_intranet) as kratos - over the Docker-Compose-DNS resolution the nginx reverse proxy can call the admin

docker run -it \
--rm -p 3000:8080 \
-e KRATOS_ADMIN_URL=http://kratos:4434 \
-e KRATOS_PUBLIC_URL=http://kratos:4433 \
--network kratos_intranet \
ghcr.io/dfoxg/kratos-admin-ui

or like here, include it in the docker compose:

version: '3.7'
services:
  kratos-migrate:
    image: oryd/kratos:v1.0.0
    environment:
      - DSN=sqlite:///var/lib/sqlite/db.sqlite?_fk=true&mode=rwc
    volumes:
      - type: volume
        source: kratos-sqlite
        target: /var/lib/sqlite
        read_only: false
      - type: bind
        source: ./contrib/quickstart/kratos/email-password
        target: /etc/config/kratos
    command: -c /etc/config/kratos/kratos.yml migrate sql -e --yes
    restart: on-failure
    networks:
      - intranet
  kratos:
    image: oryd/kratos:v1.0.0
    depends_on:
      - kratos-migrate
    ports:
      - '4433:4433' # public
    #  - '4434:4434' # admin, do not expose!
    restart: unless-stopped
    environment:
      - DSN=sqlite:///var/lib/sqlite/db.sqlite?_fk=true
      - LOG_LEVEL=trace
    command: serve -c /etc/config/kratos/kratos.yml --dev --watch-courier
    volumes:
      - type: volume
        source: kratos-sqlite
        target: /var/lib/sqlite
        read_only: false
      - type: bind
        source: ./contrib/quickstart/kratos/email-password
        target: /etc/config/kratos
    networks:
      - intranet
  admin_ui:
    image: ghcr.io/dfoxg/kratos-admin-ui:v2.3.2
    ports:
      - '80:8080'
    restart: unless-stopped
    environment:
      - KRATOS_ADMIN_URL=http://kratos:4434
      - KRATOS_PUBLIC_URL=http://kratos:4433
    networks:
      - intranet
networks:
  intranet:
volumes:
  kratos-sqlite:

Optional Environment Variables

• NAMESERVER: the nameserver to use for dns resolution for kratos urls. By default, it reads values from /etc/resolv.conf, so it works well without setting this value in many runtimes. If there is no /etc/resolv.conf, it will be set to 127.0.0.11 (Docker dns).

Start local

It is required, that a local instance of ory kratos is running. the latest tested version is v1.1.0.

cd kratos-admin-ui
npm install
node cors-proxy.js // starts a cors-proxy for the admin-api, so the browser can make requests
npm run start

Build Docker-Image

cd kratos-admin-ui
docker build -t kratos-admin-ui .

Images

Following a few sample images:

List Identites

Single Select Identity

Multiselect Identities

Create Identity

Edit Identity

View Identity

kratos-admin-ui's Issues

Dynamic React Environments

See https://www.freecodecamp.org/news/how-to-implement-runtime-environment-variables-with-create-react-app-docker-and-nginx-7f9d42a91d70/

CORS issue

I change the Admin URL on public/config.json to my domain admin.example.com:4434 and public to public.example.com:4433 and also edit the cors-proxy.js but still got a cors error.

Boolean traits shows as fields, any input leads to mismatch of types sting!=boolean

Describe the bug
Boolean traits shows as fields, any input leads to mismatch of types sting!=boolean, which lead to problem to update the traits.

To Reproduce
Steps to reproduce the behavior:

1. create a JSON schema

{
  "$id": "https://schemas.ory.sh/presets/kratos/quickstart/email-password/identity.schema.json",
  "$schema": "http://json-schema.org/draft-07/schema#",
  "title": "Person",
  "type": "object",
  "definitions": {
    "tosUrl": {
      "type": "string",
      "const": "http://example.com/terms"
    }
  },
  "properties": {
    "traits": {
      "type": "object",
      "properties": {
        "email": {
          "type": "string",
          "format": "email",
          "title": "E-Mail",
          "minLength": 3,
          "ory.sh/kratos": {
            "credentials": {
              "password": {
                "identifier": true
              }
            },
            "verification": {
              "via": "email"
            },
            "recovery": {
              "via": "email"
            }
          }
        },
        "username": {
          "title": "Username",
          "type": "string",
          "readOnly": true
        },
        "name": {
          "type": "object",
          "properties": {
            "first": {
              "title": "First Name",
              "type": "string"
            },
            "last": {
              "title": "Last Name",
              "type": "string"
            }
          }
        },
        "tos": {
          "title": "Accept Terms of Service",
          "type": "boolean",
          "description": "I accept the terms of service",
          "writeOnly": true,
          "tosUrl": {
            "$ref": "#/definitions/tosUrl"
           }
        },
        "newsletter": {
          "type": "boolean",
          "title": "Newsletter subscription"
        }
      },
      "required": [
        "email",
        "username",
        "tos"
      ],
      "additionalProperties": false
    }
  }
}

3. register and verify user
4. open kratos-admin-ui
5. open created user on edit
6. update any boolean traits - Accept Terms of Service or Newsletter subscription
7. See error
   {"code":400,"status":"Bad Request","reason":"I[#/traits/newsletter] S[#/properties/traits/properties/newsletter/type] expected boolean, but got string","message":"The request was malformed or contained invalid parameters"}

Expected behavior
kratos-admin-ui shows checkbox as a checkbox, update of the checkbox passes without errors

Screenshots

Desktop (please complete the following information):

• OS: windows 10
• Browser chrome
• Version 123.0.6312.123

Additional context

kratos version 1.1.0

kratos-admin-ui used inside docker-compose.yaml as this

  kratos-admin-ui:
    image: ghcr.io/dfoxg/kratos-admin-ui
    ports:
      - 8080:8080
    environment:
      - KRATOS_ADMIN_URL=http://kratos:4434
      - KRATOS_PUBLIC_URL=http://kratos:4433
    depends_on:
      - kratos
      - auth-db
    networks:
      - intranet

Getting CORS errors

Hey @dfoxg, thanks for sharing amazing work!

I've deployed your repo here after replacing URLs with our own account.freshes.ca but it's showing CORS errors.
FYI, we're using Ory Kratos cloud, not running a local instance of Kratos.

Do you have any idea why? We added client.freshes.ca in the allowed URLs as well in Ory account.

Looking forward to hearing back from you soon!

Thanks,

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

• Update dependency react-router-dom to v6

Detected dependencies

dockerfile

kratos-admin-ui/Dockerfile

• node 20-alpine
• nginxinc/nginx-unprivileged 1.26.0

github-actions

.github/workflows/build-on-pr.yml

• actions/checkout v4

.github/workflows/publish-on-tag.yml

• actions/checkout v4
• docker/setup-qemu-action v3
• docker/setup-buildx-action v3
• docker/login-action v3
• docker/metadata-action v5
• docker/build-push-action v5

.github/workflows/publish.yml

• actions/checkout v4
• docker/setup-qemu-action v3
• docker/setup-buildx-action v3
• docker/login-action v3
• docker/metadata-action v5
• docker/build-push-action v5

npm

kratos-admin-ui/package.json

• @babel/plugin-proposal-private-property-in-object ^7.21.11
• @fluentui/react-components 9.49.1
• @fluentui/react-icons 2.0.239
• @ory/kratos-client 1.1.0
• bootstrap 5.3.3
• react 18.3.1
• react-dom 18.3.1
• react-router-dom 5.3.4
• sass 1.76.0
• typescript 5.4.5
• @testing-library/jest-dom 6.4.5
• @testing-library/react 15.0.6
• @testing-library/user-event 14.5.2
• @types/jest 29.5.12
• @types/node 20.12.8
• @types/react 18.3.1
• @types/react-dom 18.3.0
• @types/react-router-dom 5.3.3
• react-scripts 5.0.1

---

• Check this box to trigger a request for Renovate to run again on this repository

Preserve Metadata during edit

Edit removes the existing metadata_public and metadata_admin. I think adding these will preserve the values

kratos-admin-ui/kratos-admin-ui/src/sites/identities/edit/edit.tsx

Lines 95 to 98 in 0977adc

	adminAPI.adminUpdateIdentity(this.state.identity?.id!, {
	schema_id: this.state.identity?.schema_id!,
	traits: this.state.traits,
	state: IdentityState.Active

 metadata_public: this.state.identity?.metadata_public,
 metadata_admin: this.state.identity?.metadata_admin

ARM compatible docker image

Hi @dfoxg
Do you plan to add arm64 compatible docker image to public registry?
IMO it should be plug&play. I will be happy to help if you need anything.
Cheers!

Promise is not resolved on browser reload - Edit Identity

Describe the bug
When browser is reloaded the edit identity is not working due to the schema promise is not resolved.

kratos-admin-ui/kratos-admin-ui/src/service/schema-service.ts

Lines 39 to 44 in 0977adc

	const config = await getKratosConfig()
	const publicAPI = new V0alpha2Api(config.publicConfig)
	return publicAPI.getJsonSchema(schema).then(data => {
	this.extractSchemas([data.data])
	return this.schema_map.get(schema)
	})

But the edit.tsx expects the schema which is not resolved sometimes and schema is undefined - may be network issue

kratos-admin-ui/kratos-admin-ui/src/sites/identities/edit/edit.tsx

Lines 40 to 42 in 0977adc

	const schema = await SchemaService.getSchemaJSON(entity.data.schema_id);
	const schemaFields = SchemaService.getSchemaFields(schema);
	const map = SchemaService.mapKratosIdentity(entity.data, schemaFields);

To Reproduce
Steps to reproduce the behavior:

1. Select Identity and click edit
2. Reload the page
3. See error

schema-service.ts:50 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'properties')
    at SchemaService.getSchemaFields (schema-service.ts:50:1)
    at EditIdentitySite.mapEntity (edit.tsx:42:1)

Missing support for array properties

I believe there is no support for array properties like in the following identity schema example? I mean when you set Kratos to store multiple emails or whatever (usernames..).

{
  "$id": "https://schemas.ory.sh/presets/kratos/identity.email.schema.json",
  "title": "Person",
  "type": "object",
  "properties": {
    "traits": {
      "type": "object",
      "properties": {
        "emails": {
          "type": "array",
          "items": [
            {
              "type": "string",
              "format": "email",
              "title": "E-Mail",
              "ory.sh/kratos": {
                "credentials": {
                  "password": {
                    "identifier": true
                  },
                  "webauthn": {
                    "identifier": true
                  },
                  "totp": {
                    "account_name": true
                  }
                },
                "recovery": {
                  "via": "email"
                },
                "verification": {
                  "via": "email"
                }
              },
              "maxLength": 320
            }
          ]
        }
      },
      "required": ["emails"],
      "additionalProperties": false
    }
  }
}

What do you think about adding it? Great job with the admin UI by the way. Very useful tool! :)

Tag is listed incorrectly

Describe the bug
Attempted to pull ghcr.io/dfoxg/kratos-admin-ui:v2.3.1 and received an error

To Reproduce
Steps to reproduce the behavior:

• docker pull ghcr.io/dfoxg/kratos-admin-ui:v2.3.1

Expected behavior
The image is retrieved

This is occuring because your tags have changed and v2.3.1 was published as just 2.3.1 https://github.com/dfoxg/kratos-admin-ui/pkgs/container/kratos-admin-ui/201579567?tag=2.3.1

Please can you amend or update the docs

Cannot download the image

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. docker pull ghcr.io/dfoxg/kratos-admin-ui:2.2.0

Error response from daemon: manifest unknown

Expected behavior
To be able to pull the docker image

Additional context
This looks to be related to github ghcr.io provenance issues

Logging into the ghcr.io repo does not fix the issue-

Allow server-side connection with kratos admin endpoints.

For security reasons, the admin endpoint should communicate only within the private network, and it will not be bothered by CORS problems.
Is there any plan to achieve this instead of current browser to server connection? Or is the current architecture more advantageous?

If you don't mind, I'll contribute to this re-architecture.

version: v1.2.0

Admin UI is not compatible with kratos v0.13.

The error is most probably schema-related - the code breaks on the following line:

var n = JSON.parse(window.atob(e.schema + ""));

DNS resolver configuration in reverse proxy should respect /etc/resolv.conf for k8s etc.. container runtime.

Describe the bug
When I deploy this image on my Kubernetes cluster, the reverse proxy fails due to a DNS lookup error.
I didn't notice this problem because I didn't test it on kubernetes when I tested 2.0.0 in #119 🙇 .

Expected behavior
The system should resolve the hostname for Kratos in the internal network, applicable not only to Docker locally but also to other container runtimes.
Nginx should prioritize using /etc/resolv.conf, and default to 127.0.0.11 only if this configuration file is unavailable.
I confirmed /etc/resolv.conf is also available in the container on Docker for Desktop.

# cat /etc/resolv.conf 
nameserver 127.0.0.11
options ndots:0

Kubernetes:

• Version 1.21

kratos-admin-ui

• Version 2.0.0

Related context
It seems nginx-ingress-controller is also taking same approach.