From c9494e0ce2f7e355faf240b5ed338c0f01d81bd5 Mon Sep 17 00:00:00 2001 From: Jonas Hungershausen Date: Thu, 2 Apr 2026 10:34:48 -0400 Subject: [PATCH 1/6] feat: add docs for client side events in elements --- docs/elements/guides/20_events.mdx | 102 +++++++++++++++++++++++++++++ package-lock.json | 53 ++++++++++++++- 2 files changed, 153 insertions(+), 2 deletions(-) create mode 100644 docs/elements/guides/20_events.mdx diff --git a/docs/elements/guides/20_events.mdx b/docs/elements/guides/20_events.mdx new file mode 100644 index 0000000000..311fed4971 --- /dev/null +++ b/docs/elements/guides/20_events.mdx @@ -0,0 +1,102 @@ +--- +id: events +title: Submit and error events +sidebar_label: Lifecycle Events +--- + +Ory Elements emits events for various actions, such as successful form submissions and errors that occur during form submissions. +You can listen to these events to perform custom actions in your application. + +To attach an event listener, simply pass a callback function to the corresponding event prop of the form component. The available +events are: + +## `onSuccess` + +The `onSuccess` event is emitted when a form is successfully submitted. You can use this event to track successful form +submissions. + +```tsx title="LoginForm.tsx" + { + console.log("Flow submitted successfully!", event) + }} +/> +``` + +All success events emitted by Ory Elements contain the following properties: + +| Property | Type | Description | +| ---------- | ---------- | -------------------------------------------------------------------- | +| `flowType` | `FlowType` | The type of the flow that was submitted (Login, Registration, etc.). | +| `flow` | `Flow` | The current flow object. | +| `method` | `string` | The method, the user submitted (Password, Passkey, etc.) | + +:::danger + +The `flow` object may contain pontentially sensitive information, such as the user's email address or other personally +identifiable information (PII). Be cautious when logging or handling this data to avoid unintentional exposure of sensitive +information. + +::: + +The **login** flow also contains the following additional properties: + +| Property | Type | Description | +| --------- | --------- | ----------------------------------------- | +| `session` | `Session` | The session object of the logged in user. | + +The **registration** flow also contains the following additional properties: + +| Property | Type | Description | +| ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------- | +| `session` | `Session` | The session object of the registered user. Only included if Kratos is configured to issue a session after registration | +| `identity` | `Identity` | The identity object of the registered user. | + +## `onError` + +The `onError` event is emitted when a form submission fails. The reason for this is exposed via the `error` property of the event. +You can use this event to track failed form submissions and the reasons for the failures. + +Common reasons include: + +- `flow_expired`: The flow has expired and a new flow needed to be created. +- `csrf_error`: The CSRF token is invalid or missing or the request was made from a different origin. This can happen if the user + has multiple tabs open or if the user is using a different browser. +- `flow_not_found`: The flow could not be found. +- `flow_replaced`: The flow was replaced by another flow. +- `consent_error`: An error occurred during the OAuth2 consent flow. + +In addition, the `error` property may also contain a `body` property, which is the original error response from the Ory API. + +```tsx title="LoginForm.tsx" + { + console.error("Flow submission failed!", event.type, event.body) + }} +/> +``` + +## `onValidationError` + +The `onValidationError` event is emitted when a form submission fails due to validation errors. The event contains the current +flow object, which includes the validation messages. You can use this event to track validation errors and display them to the +user. + +The actual error may be found in the `flow.ui.messages` property of the event object, or in the `flow.ui.nodes` property if the +validation error is related to a specific form field. + +```tsx title="LoginForm.tsx" + { + console.error("Flow submission failed due to validation errors!", event.flow.ui.messages) + }} +/> +``` + +## Examples + +- A full example of handling events with Matomo can be found here in the + [Ory Elements with Matomo example](https://github.com/ory/elements/tree/main/examples/nextjs-app-router-matomo). diff --git a/package-lock.json b/package-lock.json index e1720c1264..1ba744161c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -271,6 +271,7 @@ "version": "5.44.0", "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-5.44.0.tgz", "integrity": "sha512-/FRKUM1G4xn3vV8+9xH1WJ9XknU8rkBGlefruq9jDhYUAvYozKimhrmC2pRqw/RyHhPivmgZCRuC8jHP8piz4Q==", + "peer": true, "dependencies": { "@algolia/client-common": "5.44.0", "@algolia/requester-browser-xhr": "5.44.0", @@ -447,6 +448,7 @@ "node_modules/@babel/core": { "version": "7.26.0", "license": "MIT", + "peer": true, "dependencies": { "@ampproject/remapping": "^2.2.0", "@babel/code-frame": "^7.26.0", @@ -2433,6 +2435,7 @@ "url": "https://opencollective.com/csstools" } ], + "peer": true, "engines": { "node": ">=18" }, @@ -2454,6 +2457,7 @@ "url": "https://opencollective.com/csstools" } ], + "peer": true, "engines": { "node": ">=18" } @@ -2558,6 +2562,7 @@ "version": "7.1.0", "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz", "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==", + "peer": true, "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -2963,6 +2968,7 @@ "version": "7.1.0", "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz", "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==", + "peer": true, "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -3901,6 +3907,7 @@ "version": "3.9.2", "resolved": "https://registry.npmjs.org/@docusaurus/plugin-content-docs/-/plugin-content-docs-3.9.2.tgz", "integrity": "sha512-C5wZsGuKTY8jEYsqdxhhFOe1ZDjH0uIYJ9T/jebHwkyxqnr4wW0jTkB72OMqNjsoQRcb0JN3PcSeTwFlVgzCZg==", + "peer": true, "dependencies": { "@docusaurus/core": "3.9.2", "@docusaurus/logger": "3.9.2", @@ -4185,6 +4192,7 @@ "version": "3.9.2", "resolved": "https://registry.npmjs.org/@docusaurus/theme-common/-/theme-common-3.9.2.tgz", "integrity": "sha512-6c4DAbR6n6nPbnZhY2V3tzpnKnGL+6aOsLvFL26VRqhlczli9eWG0VDUNoCQEPnGwDMhPS42UhSAnz5pThm5Ag==", + "peer": true, "dependencies": { "@docusaurus/mdx-loader": "3.9.2", "@docusaurus/module-type-aliases": "3.9.2", @@ -4288,6 +4296,7 @@ "version": "3.9.2", "resolved": "https://registry.npmjs.org/@docusaurus/utils/-/utils-3.9.2.tgz", "integrity": "sha512-lBSBiRruFurFKXr5Hbsl2thmGweAPmddhF3jb99U4EMDA5L+e5Y1rAkOS07Nvrup7HUMBDrCV45meaxZnt28nQ==", + "peer": true, "dependencies": { "@docusaurus/logger": "3.9.2", "@docusaurus/types": "3.9.2", @@ -5470,6 +5479,7 @@ "node_modules/@mdx-js/react": { "version": "3.1.0", "license": "MIT", + "peer": true, "dependencies": { "@types/mdx": "^2.0.0" }, @@ -5529,6 +5539,7 @@ "node_modules/@octokit/core": { "version": "5.2.0", "license": "MIT", + "peer": true, "dependencies": { "@octokit/auth-token": "^4.0.0", "@octokit/graphql": "^7.1.0", @@ -5877,6 +5888,7 @@ "node_modules/@rjsf/core": { "version": "5.24.1", "license": "Apache-2.0", + "peer": true, "dependencies": { "lodash": "^4.17.21", "lodash-es": "^4.17.21", @@ -5897,6 +5909,7 @@ "resolved": "https://registry.npmjs.org/@rjsf/utils/-/utils-5.24.1.tgz", "integrity": "sha512-A25fFj/TNz5bKikCIs20DiedKAalLuAQ7vUX9VQkD2hps5C9YVr0dJgSlsPa5kzl6lQMaRsNouTx8E1ZdLV2fg==", "license": "Apache-2.0", + "peer": true, "dependencies": { "json-schema-merge-allof": "^0.8.1", "jsonpointer": "^5.0.1", @@ -6186,6 +6199,7 @@ "version": "8.1.0", "resolved": "https://registry.npmjs.org/@svgr/core/-/core-8.1.0.tgz", "integrity": "sha512-8QqtOQT5ACVlmsvKOJNEaWmRPmcojMOzCz4Hs2BGG/toAp/K38LcsMRyLp349glq5AzJbCEeimEoxaX6v/fLrA==", + "peer": true, "dependencies": { "@babel/core": "^7.21.3", "@svgr/babel-preset": "8.1.0", @@ -6285,6 +6299,7 @@ "dev": true, "hasInstallScript": true, "license": "Apache-2.0", + "peer": true, "dependencies": { "@swc/counter": "^0.1.2", "@swc/types": "^0.1.5" @@ -7261,7 +7276,8 @@ }, "node_modules/@types/json-schema": { "version": "7.0.15", - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/@types/keyv": { "version": "3.1.4", @@ -7293,6 +7309,7 @@ "node_modules/@types/node": { "version": "22.8.4", "license": "MIT", + "peer": true, "dependencies": { "undici-types": "~6.19.8" } @@ -7335,6 +7352,7 @@ "node_modules/@types/react": { "version": "18.3.12", "license": "MIT", + "peer": true, "dependencies": { "@types/prop-types": "*", "csstype": "^3.0.2" @@ -7657,6 +7675,7 @@ "version": "8.15.0", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz", "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", + "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -7737,6 +7756,7 @@ "node_modules/ajv": { "version": "8.17.1", "license": "MIT", + "peer": true, "dependencies": { "fast-deep-equal": "^3.1.3", "fast-uri": "^3.0.1", @@ -7778,6 +7798,7 @@ "version": "5.44.0", "resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-5.44.0.tgz", "integrity": "sha512-f8IpsbdQjzTjr/4mJ/jv5UplrtyMnnciGax6/B0OnLCs2/GJTK13O4Y7Ff1AvJVAaztanH+m5nzPoUq6EAy+aA==", + "peer": true, "dependencies": { "@algolia/abtesting": "1.10.0", "@algolia/client-abtesting": "5.44.0", @@ -8070,6 +8091,7 @@ "version": "1.13.2", "resolved": "https://registry.npmjs.org/axios/-/axios-1.13.2.tgz", "integrity": "sha512-VPk9ebNqPcy5lRGuSlKx752IlDatOjT9paPlm8A7yOuW2Fbvp4X3JznJtT4f0GzGLLiWE9W8onz51SqLYwzGaA==", + "peer": true, "dependencies": { "follow-redirects": "^1.15.6", "form-data": "^4.0.4", @@ -8566,6 +8588,7 @@ "url": "https://github.com/sponsors/ai" } ], + "peer": true, "dependencies": { "baseline-browser-mapping": "^2.8.25", "caniuse-lite": "^1.0.30001754", @@ -8929,6 +8952,7 @@ "version": "11.0.3", "resolved": "https://registry.npmjs.org/chevrotain/-/chevrotain-11.0.3.tgz", "integrity": "sha512-ci2iJH6LeIkvP9eJW6gpueU8cnZhv85ELY8w8WiFtNjMHA5ad6pQLaJo9mEly/9qUyCpvqX8/POVUTf18/HFdw==", + "peer": true, "dependencies": { "@chevrotain/cst-dts-gen": "11.0.3", "@chevrotain/gast": "11.0.3", @@ -9570,6 +9594,7 @@ "version": "3.38.1", "hasInstallScript": true, "license": "MIT", + "peer": true, "funding": { "type": "opencollective", "url": "https://opencollective.com/core-js" @@ -9859,6 +9884,7 @@ "version": "7.1.0", "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz", "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==", + "peer": true, "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -10169,6 +10195,7 @@ "node_modules/cytoscape": { "version": "3.31.0", "license": "MIT", + "peer": true, "engines": { "node": ">=0.10" } @@ -10534,6 +10561,7 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz", "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==", + "peer": true, "engines": { "node": ">=12" } @@ -12070,6 +12098,7 @@ "node_modules/file-loader/node_modules/ajv": { "version": "6.12.6", "license": "MIT", + "peer": true, "dependencies": { "fast-deep-equal": "^3.1.1", "fast-json-stable-stringify": "^2.0.0", @@ -14731,6 +14760,7 @@ "node_modules/jsep": { "version": "1.4.0", "license": "MIT", + "peer": true, "engines": { "node": ">= 10.16.0" } @@ -17892,6 +17922,7 @@ "resolved": "https://registry.npmjs.org/mobx/-/mobx-6.13.7.tgz", "integrity": "sha512-aChaVU/DO5aRPmk1GX8L+whocagUUpBQqoPtJk+cm7UOXUk87J4PeWCh6nNmTTIfEhiR9DI/+FnA8dln/hTK7g==", "license": "MIT", + "peer": true, "funding": { "type": "opencollective", "url": "https://opencollective.com/mobx" @@ -18372,6 +18403,7 @@ "version": "6.12.6", "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", + "peer": true, "dependencies": { "fast-deep-equal": "^3.1.1", "fast-json-stable-stringify": "^2.0.0", @@ -19352,6 +19384,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "nanoid": "^3.3.7", "picocolors": "^1.1.1", @@ -20207,6 +20240,7 @@ "version": "7.1.0", "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz", "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==", + "peer": true, "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -20775,6 +20809,7 @@ "version": "3.2.5", "dev": true, "license": "MIT", + "peer": true, "bin": { "prettier": "bin/prettier.cjs" }, @@ -21166,6 +21201,7 @@ "version": "6.12.6", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "fast-deep-equal": "^3.1.1", "fast-json-stable-stringify": "^2.0.0", @@ -21232,6 +21268,7 @@ "resolved": "https://registry.npmjs.org/react/-/react-19.0.1.tgz", "integrity": "sha512-nVRaZCuEyvu69sWrkdwjP6QY57C+lY+uMNNMyWUFJb9Z/JlaBOQus7mSMfGYsblv7R691u6SSJA/dX9IRnyyLQ==", "license": "MIT", + "peer": true, "engines": { "node": ">=0.10.0" } @@ -21241,6 +21278,7 @@ "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-1.6.8.tgz", "integrity": "sha512-yD6uN78XlFOkETQp6GRuVe0s5509x3XYx8PfPbirwFTYCj5/RfmSs9YZGCwkUrhZNFzj7tZPdpb+3k50mK1E4g==", "license": "MIT", + "peer": true, "dependencies": { "@babel/runtime": "^7.14.0", "@restart/context": "^2.1.4", @@ -21270,6 +21308,7 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.0.1.tgz", "integrity": "sha512-3TJg51HSbJiLVYCS6vWwWsyqoS36aGEOCmtLLHxROlSZZ5Bk10xpxHFbrCu4DdqgR85DDc9Vucxqhai3g2xjtA==", "license": "MIT", + "peer": true, "dependencies": { "scheduler": "^0.25.0" }, @@ -21322,6 +21361,7 @@ "name": "@docusaurus/react-loadable", "version": "6.0.0", "license": "MIT", + "peer": true, "dependencies": { "@types/react": "*" }, @@ -21366,6 +21406,7 @@ "node_modules/react-router": { "version": "5.3.4", "license": "MIT", + "peer": true, "dependencies": { "@babel/runtime": "^7.12.13", "history": "^4.9.0", @@ -23816,6 +23857,7 @@ "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.18.tgz", "integrity": "sha512-Mvf3gJFzZCkhjY2Y/Fx9z1m3dxbza0uI9H1CbNZm/jSHCojzJhQ0R7bByrlFJINnMzz/gPulpoFFGymNwrsMcw==", "license": "MIT", + "peer": true, "dependencies": { "@emotion/is-prop-valid": "1.2.2", "@emotion/unitless": "0.8.1", @@ -24100,6 +24142,7 @@ "node_modules/terser-webpack-plugin/node_modules/ajv": { "version": "6.12.6", "license": "MIT", + "peer": true, "dependencies": { "fast-deep-equal": "^3.1.1", "fast-json-stable-stringify": "^2.0.0", @@ -24528,6 +24571,7 @@ "version": "10.9.1", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@cspotcode/source-map-support": "^0.8.0", "@tsconfig/node10": "^1.0.7", @@ -24573,7 +24617,8 @@ }, "node_modules/tslib": { "version": "2.8.0", - "license": "0BSD" + "license": "0BSD", + "peer": true }, "node_modules/tty-browserify": { "version": "0.0.1", @@ -25054,6 +25099,7 @@ "node_modules/url-loader/node_modules/ajv": { "version": "6.12.6", "license": "MIT", + "peer": true, "dependencies": { "fast-deep-equal": "^3.1.1", "fast-json-stable-stringify": "^2.0.0", @@ -25386,6 +25432,7 @@ "node_modules/webpack": { "version": "5.95.0", "license": "MIT", + "peer": true, "dependencies": { "@types/estree": "^1.0.5", "@webassemblyjs/ast": "^1.12.1", @@ -25666,6 +25713,7 @@ "node_modules/webpack/node_modules/ajv": { "version": "6.12.6", "license": "MIT", + "peer": true, "dependencies": { "fast-deep-equal": "^3.1.1", "fast-json-stable-stringify": "^2.0.0", @@ -26189,6 +26237,7 @@ "version": "4.1.12", "resolved": "https://registry.npmjs.org/zod/-/zod-4.1.12.tgz", "integrity": "sha512-JInaHOamG8pt5+Ey8kGmdcAcg3OL9reK8ltczgHTAwNhMys/6ThXHityHxVV2p3fkw/c+MAvBHFVYHFZDmjMCQ==", + "peer": true, "funding": { "url": "https://github.com/sponsors/colinhacks" } From 3798cf91cc528bc10d3ec97cce2d768f836dcd6f Mon Sep 17 00:00:00 2001 From: Jonas Hungershausen Date: Thu, 2 Apr 2026 15:03:03 -0400 Subject: [PATCH 2/6] Apply suggestions from code review Co-authored-by: unatasha8 Co-authored-by: Jonas Hungershausen --- docs/elements/guides/20_events.mdx | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/docs/elements/guides/20_events.mdx b/docs/elements/guides/20_events.mdx index 311fed4971..3c0479e744 100644 --- a/docs/elements/guides/20_events.mdx +++ b/docs/elements/guides/20_events.mdx @@ -4,10 +4,10 @@ title: Submit and error events sidebar_label: Lifecycle Events --- -Ory Elements emits events for various actions, such as successful form submissions and errors that occur during form submissions. -You can listen to these events to perform custom actions in your application. +Ory Elements emits events for form submission actions, including on success, on error, and on validation error. +Your application can listen to these events to perform custom actions in your application. -To attach an event listener, simply pass a callback function to the corresponding event prop of the form component. The available +To attach an event listener, pass a callback function to the form component's corresponding event prop. The available events are: ## `onSuccess` @@ -24,13 +24,13 @@ submissions. /> ``` -All success events emitted by Ory Elements contain the following properties: +All `onSuccess` events contain the following properties: | Property | Type | Description | | ---------- | ---------- | -------------------------------------------------------------------- | | `flowType` | `FlowType` | The type of the flow that was submitted (Login, Registration, etc.). | | `flow` | `Flow` | The current flow object. | -| `method` | `string` | The method, the user submitted (Password, Passkey, etc.) | +| `method` | `string` | The method the user submitted (Password, Passkey, etc.) | :::danger @@ -44,24 +44,24 @@ The **login** flow also contains the following additional properties: | Property | Type | Description | | --------- | --------- | ----------------------------------------- | -| `session` | `Session` | The session object of the logged in user. | +| `session` | `Session` | The session object for the logged in user. | The **registration** flow also contains the following additional properties: | Property | Type | Description | | ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------- | -| `session` | `Session` | The session object of the registered user. Only included if Kratos is configured to issue a session after registration | -| `identity` | `Identity` | The identity object of the registered user. | +| `session` | `Session` | The session object for the registered user, but only if Kratos is configured to issue a session after registration | +| `identity` | `Identity` | The identity object for the registered user. | ## `onError` -The `onError` event is emitted when a form submission fails. The reason for this is exposed via the `error` property of the event. -You can use this event to track failed form submissions and the reasons for the failures. +The `onError` event is emitted when a form submission fails. The reason for the error is exposed via the `error` property of the event. +You can use this event to track a failed form submission and the reason for the failure. Common reasons include: - `flow_expired`: The flow has expired and a new flow needed to be created. -- `csrf_error`: The CSRF token is invalid or missing or the request was made from a different origin. This can happen if the user +- `csrf_error`: The CSRF token is invalid or missing, or the request was made from a different origin. This can happen if the user has multiple tabs open or if the user is using a different browser. - `flow_not_found`: The flow could not be found. - `flow_replaced`: The flow was replaced by another flow. @@ -98,5 +98,5 @@ validation error is related to a specific form field. ## Examples -- A full example of handling events with Matomo can be found here in the +- A full example of how to handle events with Matomo can be found here in the [Ory Elements with Matomo example](https://github.com/ory/elements/tree/main/examples/nextjs-app-router-matomo). From ce6d1f62093d8399042a476180b246d41390d0bc Mon Sep 17 00:00:00 2001 From: Jonas Hungershausen Date: Thu, 2 Apr 2026 15:04:50 -0400 Subject: [PATCH 3/6] chore: format --- docs/elements/guides/20_events.mdx | 23 +++++++++++------------ 1 file changed, 11 insertions(+), 12 deletions(-) diff --git a/docs/elements/guides/20_events.mdx b/docs/elements/guides/20_events.mdx index 3c0479e744..00d8bd03f6 100644 --- a/docs/elements/guides/20_events.mdx +++ b/docs/elements/guides/20_events.mdx @@ -4,11 +4,10 @@ title: Submit and error events sidebar_label: Lifecycle Events --- -Ory Elements emits events for form submission actions, including on success, on error, and on validation error. -Your application can listen to these events to perform custom actions in your application. +Ory Elements emits events for form submission actions, including on success, on error, and on validation error. Your application +can listen to these events to perform custom actions in your application. -To attach an event listener, pass a callback function to the form component's corresponding event prop. The available -events are: +To attach an event listener, pass a callback function to the form component's corresponding event prop. The available events are: ## `onSuccess` @@ -30,7 +29,7 @@ All `onSuccess` events contain the following properties: | ---------- | ---------- | -------------------------------------------------------------------- | | `flowType` | `FlowType` | The type of the flow that was submitted (Login, Registration, etc.). | | `flow` | `Flow` | The current flow object. | -| `method` | `string` | The method the user submitted (Password, Passkey, etc.) | +| `method` | `string` | The method the user submitted (Password, Passkey, etc.) | :::danger @@ -42,21 +41,21 @@ information. The **login** flow also contains the following additional properties: -| Property | Type | Description | -| --------- | --------- | ----------------------------------------- | +| Property | Type | Description | +| --------- | --------- | ------------------------------------------ | | `session` | `Session` | The session object for the logged in user. | The **registration** flow also contains the following additional properties: -| Property | Type | Description | -| ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------- | +| Property | Type | Description | +| ---------- | ---------- | ------------------------------------------------------------------------------------------------------------------ | | `session` | `Session` | The session object for the registered user, but only if Kratos is configured to issue a session after registration | -| `identity` | `Identity` | The identity object for the registered user. | +| `identity` | `Identity` | The identity object for the registered user. | ## `onError` -The `onError` event is emitted when a form submission fails. The reason for the error is exposed via the `error` property of the event. -You can use this event to track a failed form submission and the reason for the failure. +The `onError` event is emitted when a form submission fails. The reason for the error is exposed via the `error` property of the +event. You can use this event to track a failed form submission and the reason for the failure. Common reasons include: From ef070964d842f86f66b5686809dfa06469cae817 Mon Sep 17 00:00:00 2001 From: Jonas Hungershausen Date: Fri, 3 Apr 2026 15:28:53 -0400 Subject: [PATCH 4/6] chore: apply suggestion --- docs/elements/guides/20_events.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/elements/guides/20_events.mdx b/docs/elements/guides/20_events.mdx index 00d8bd03f6..f1764654fa 100644 --- a/docs/elements/guides/20_events.mdx +++ b/docs/elements/guides/20_events.mdx @@ -59,7 +59,7 @@ event. You can use this event to track a failed form submission and the reason f Common reasons include: -- `flow_expired`: The flow has expired and a new flow needed to be created. +- `flow_expired`: The flow expired and a new flow was created. - `csrf_error`: The CSRF token is invalid or missing, or the request was made from a different origin. This can happen if the user has multiple tabs open or if the user is using a different browser. - `flow_not_found`: The flow could not be found. From 88487fd53cb2ea75fd244c67dc428f3311991e76 Mon Sep 17 00:00:00 2001 From: Jonas Hungershausen Date: Mon, 8 Jun 2026 09:09:40 -0400 Subject: [PATCH 5/6] Potential fix for pull request finding Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> --- docs/elements/guides/20_events.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/elements/guides/20_events.mdx b/docs/elements/guides/20_events.mdx index f1764654fa..f7512d879a 100644 --- a/docs/elements/guides/20_events.mdx +++ b/docs/elements/guides/20_events.mdx @@ -33,7 +33,7 @@ All `onSuccess` events contain the following properties: :::danger -The `flow` object may contain pontentially sensitive information, such as the user's email address or other personally +The `flow` object may contain potentially sensitive information, such as the user's email address or other personally identifiable information (PII). Be cautious when logging or handling this data to avoid unintentional exposure of sensitive information. From b20c4a020ade17aa47080f2dec5bc71690945bea Mon Sep 17 00:00:00 2001 From: Jonas Hungershausen Date: Mon, 8 Jun 2026 09:37:19 -0400 Subject: [PATCH 6/6] chore: format --- docs/elements/guides/20_events.mdx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/docs/elements/guides/20_events.mdx b/docs/elements/guides/20_events.mdx index f7512d879a..53014530bf 100644 --- a/docs/elements/guides/20_events.mdx +++ b/docs/elements/guides/20_events.mdx @@ -33,9 +33,8 @@ All `onSuccess` events contain the following properties: :::danger -The `flow` object may contain potentially sensitive information, such as the user's email address or other personally -identifiable information (PII). Be cautious when logging or handling this data to avoid unintentional exposure of sensitive -information. +The `flow` object may contain potentially sensitive information, such as the user's email address or other personally identifiable +information (PII). Be cautious when logging or handling this data to avoid unintentional exposure of sensitive information. :::