Ory Kratos has no user interface included. Instead, it defines HTTP flows and APIs that make it simple to write your own UI in a variety of languages and frameworks.
The following two examples are typical UIs used in connection with Ory Kratos.
The AUI might show all of the identities in the system and provide features to administrators such as editing profiles, resetting passwords, and so on.
At present, there is no Open Source AUI for Ory Kratos.
The SSUI renders forms such as "Login", "Registration", "Update your profile", "Recover access to your account", and others. The following provides more reference for SSUI at github.com/ory/kratos-selfservice-ui-node.
The SSUI can be built in any programming language including Java, Node, or Python and can be run both a server or a end-user device for example a browser, or a mobile phone. Implementing a SSUI is simple and straight forward. There is no complex authentication mechanism required and no need to worry about possible attack vectors such as CSRF or Session Attacks since Ory Kratos provides the preventive measures built in.
Chapter Self-Service Flows contains further information on APIs and flows related to the SSUI, and build self-service applications.
To make UI customization easy, Ory Kratos prepares all the necessary data for forms that need to be shown during e.g. login, registration:
Nodes are grouped (using the
group key) based on the source that generated the
node. Sources are the different methods such as "password" ("Sign in/up with ID
& assword"), "oidc" (Social Sign In), "link" (Password reset and email
verification), "profile" ("Update your profile") and the "default" group which
typically contains the CSRF token.
You can use the node group to filter out items, re-arrange them, render them differently - up to you!
The first (and for now only) node type is the
It contains different attributes which you can map 1:1 to an HTML form:
Similarly, other form input types can be sent:
As you can see, some fields even include
meta.label information which you can
use for the labels:
For all traits, the labels and orders are taken from the Identity JSON Schema. A JSON Schema such as
will generate the following fields - take note that the order of the JSON Schema affects the order of the nodes:
Generally, submit buttons are the last node in a group. If you wish to have more flexibility with regards to order or labeling the best option is to implement this in your UI using map, filter, and other JSON transformation functions.
Ory Kratos helps users understand what is happening by providing messages that explain what went wrong or what needs to be done. Examples are "The provided credentials are invalid", "Missing property email" and similar.
Typically login, registration, settings, ... flows include such messages on different levels:
- At the root level, indicating that the message affects the whole request (e.g. request expired)
- At the method (password, oidc, profile) level, indicating that the message affects a specific method / form.
- At the field level, indicating that the message affects a form field (e.g. validation errors).
Each message has a layout of:
We will list all messages, their contents, their contexts, and their IDs at a later stage. For now please check out the code in the text module.
The message ID is a 7-digit number (
xis the message type which is either
1for an info message (e.g.
4020000) for an input validation error message, and
5020000) for a generic error message.
yyis the module or flow this error references and can be:
01for login messages (e.g.
02for logout messages (e.g.
03for multi-factor authentication messages (e.g.
04for registration messages (e.g.
05for settings messages (e.g.
06for account recovery messages (e.g.
07for email/phone verification messages (e.g.
zzzzis the message ID and typically starts at
0001. For example, message ID
4for input validation error,
0001for the concrete message) is:
The verification code has expired or was otherwise invalid. Please request another code..