feat: show settings validation messages as toasts

jonas-jonas · ory-bot · commit afbabb9b0528 · 2025-06-12T15:56:40.000Z
GitOrigin-RevId: 3df9f7e46afa84acf31aa3e177a2961e5c24c394
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/elements-react/api-report/elements-react.api.json b/packages/elements-react/api-report/elements-react.api.json
@@ -2237,6 +2237,24 @@
               "text": "OryMessageContentProps",
               "canonicalReference": "@ory/elements-react!OryMessageContentProps:type"
             },
+            {
+              "kind": "Content",
+              "text": ">;\n        Toast: "
+            },
+            {
+              "kind": "Reference",
+              "text": "ComponentType",
+              "canonicalReference": "@types/react!React.ComponentType:type"
+            },
+            {
+              "kind": "Content",
+              "text": "<"
+            },
+            {
+              "kind": "Reference",
+              "text": "OryToastProps",
+              "canonicalReference": "@ory/elements-react!OryToastProps:type"
+            },
             {
               "kind": "Content",
               "text": ">;\n    };\n    Page: {\n        Header: "
@@ -2269,7 +2287,7 @@
           "name": "OryFlowComponents",
           "typeTokenRange": {
             "startIndex": 1,
-            "endIndex": 134
+            "endIndex": 138
           }
         },
         {
@@ -3866,6 +3884,41 @@
             "endIndex": 8
           }
         },
+        {
+          "kind": "TypeAlias",
+          "canonicalReference": "@ory/elements-react!OryToastProps:type",
+          "docComment": "",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "type OryToastProps = "
+            },
+            {
+              "kind": "Content",
+              "text": "{\n    message: "
+            },
+            {
+              "kind": "Reference",
+              "text": "UiText",
+              "canonicalReference": "@ory/client-fetch!UiText:interface"
+            },
+            {
+              "kind": "Content",
+              "text": ";\n    id: string | number;\n}"
+            },
+            {
+              "kind": "Content",
+              "text": ";"
+            }
+          ],
+          "fileUrlPath": "dist/index.d.ts",
+          "releaseTag": "Public",
+          "name": "OryToastProps",
+          "typeTokenRange": {
+            "startIndex": 1,
+            "endIndex": 4
+          }
+        },
         {
           "kind": "Function",
           "canonicalReference": "@ory/elements-react!OryTwoStepCard:function(1)",
diff --git a/packages/elements-react/api-report/elements-react.api.md b/packages/elements-react/api-report/elements-react.api.md
@@ -258,6 +258,7 @@ export type OryFlowComponents = {
     Message: {
         Root: ComponentType<OryMessageRootProps>;
         Content: ComponentType<OryMessageContentProps>;
+        Toast: ComponentType<OryToastProps>;
     };
     Page: {
         Header: ComponentType<OryPageHeaderProps>;
@@ -463,6 +464,12 @@ export type OrySettingsWebauthnProps = {
     })[];
 };
 
+// @public (undocumented)
+export type OryToastProps = {
+    message: UiText;
+    id: string | number;
+};
+
 // @public (undocumented)
 export function OryTwoStepCard(): react_jsx_runtime.JSX.Element;
 
@@ -497,7 +504,7 @@ export type VerificationFlowContainer = OryFlow<FlowType.Verification, Verificat
 
 // Warnings were encountered during analysis:
 //
-// dist/index.d.ts:635:5 - (ae-forgotten-export) The symbol "OrySDK" needs to be exported by the entry point index.d.ts
+// dist/index.d.ts:645:5 - (ae-forgotten-export) The symbol "OrySDK" needs to be exported by the entry point index.d.ts
 
 // (No @packageDocumentation comment for this package)
 
diff --git a/packages/elements-react/package.json b/packages/elements-react/package.json
@@ -50,9 +50,9 @@
     "input-otp": "1.4.2",
     "react-hook-form": "7.56.4",
     "react-intl": "7.1.10",
+    "sonner": "^2.0.0",
     "tailwind-merge": "3.3.0",
-    "usehooks-ts": "3.1.1",
-    "zustand": "5.0.4"
+    "usehooks-ts": "3.1.1"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0 || ^19.0.0-0",
diff --git a/packages/elements-react/src/components/form/form.tsx b/packages/elements-react/src/components/form/form.tsx
@@ -211,12 +211,24 @@ export type OryFlowComponents = {
      * The Message component is rendered whenever a message is encountered.
      */
     Content: ComponentType<OryMessageContentProps>
+
+    /**
+     * The Toast component is rendered for toast messages.
+     *
+     * Currently only used in the settings page to display messages.
+     */
+    Toast: ComponentType<OryToastProps>
   }
   Page: {
     Header: ComponentType<OryPageHeaderProps>
   }
 }
 
+export type OryToastProps = {
+  message: UiText
+  id: string | number
+}
+
 type DeepPartialTwoLevels<T> = {
   [P in keyof T]?: T[P] extends object ? { [K in keyof T[P]]?: T[P][K] } : T[P]
 }
diff --git a/packages/elements-react/src/components/settings/settings-card.tsx b/packages/elements-react/src/components/settings/settings-card.tsx
@@ -2,15 +2,17 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import {
+  getNodeId,
   isUiNodeScriptAttributes,
   UiNode,
   UiNodeGroupEnum,
-  getNodeId,
 } from "@ory/client-fetch"
+import { useEffect } from "react"
 import { useIntl } from "react-intl"
+import { Toaster } from "sonner"
 import { useComponents, useOryFlow } from "../../context"
+import { showToast } from "../../util/showToast"
 import { useNodesGroups } from "../../util/ui"
-import { OryCardValidationMessages } from "../form"
 import { Node } from "../form/nodes/node"
 import { OryFormSection } from "../form/section"
 import { OrySettingsOidc } from "./oidc-settings"
@@ -160,7 +162,6 @@ export function OrySettingsCard() {
 
   return (
     <>
-      <OryCardValidationMessages />
       {scriptNodes.map((n) => (
         <Node node={n} key={getNodeId(n)} />
       ))}
@@ -173,6 +174,28 @@ export function OrySettingsCard() {
           <SettingsSectionContent key={group} group={group} nodes={nodes} />
         )
       })}
+      <SettingsMessageToaster />
     </>
   )
 }
+
+function SettingsMessageToaster() {
+  const { flow } = useOryFlow()
+  const { Message } = useComponents()
+
+  useEffect(() => {
+    if (!flow.ui.messages) {
+      return
+    }
+    flow.ui.messages.forEach((message) => {
+      showToast(
+        {
+          message,
+        },
+        Message.Toast,
+      )
+    })
+  }, [flow.ui.messages, Message.Toast])
+
+  return <Toaster />
+}
diff --git a/packages/elements-react/src/locales/de.json b/packages/elements-react/src/locales/de.json
@@ -255,6 +255,8 @@
   "settings.title-totp": "Verwalten Sie die Authentifikator-App",
   "settings.title-webauthn": "Hardware-Token verwalten",
   "settings.webauthn.info": "Hardware-Tokens werden für die Zweitfaktor-Authentifizierung oder als Erstfaktor-Authentifizierung mit Passkeys verwendet",
+  "settings.messages.toast-title.success": "Einstellungen aktualisiert",
+  "settings.messages.toast-title.error": "Fehler beim Aktualisieren der Einstellungen",
   "card.footer.select-another-method": "Eine andere Methode verwenden",
   "account-linking.title": "Account verbinden",
   "property.email": "E-Mail",
diff --git a/packages/elements-react/src/locales/en.json b/packages/elements-react/src/locales/en.json
@@ -209,6 +209,8 @@
   "settings.profile.description": "Update your profile information",
   "settings.webauthn.title": "Manage Hardware Tokens",
   "settings.webauthn.description": "Manage your hardware token settings",
+  "settings.messages.toast-title.success": "Settings updated",
+  "settings.messages.toast-title.error": "Could not update settings",
   "verification.registration-button": "Sign up",
   "verification.registration-label": "Don't have an account?",
   "verification.title": "Verify your account",
diff --git a/packages/elements-react/src/locales/es.json b/packages/elements-react/src/locales/es.json
@@ -202,6 +202,8 @@
   "settings.profile.title": "Configuración de Perfil",
   "settings.webauthn.description": "Administra la configuración de tu token de hardware",
   "settings.webauthn.title": "Gestionar Tokens de Hardware",
+  "settings.messages.toast-title.success": "Configuración actualizada con éxito",
+  "settings.messages.toast-title.error": "Error al actualizar la configuración",
   "consent.title": "Autorizar {party}",
   "consent.subtitle": "Una aplicación de terceros quiere acceder a la información asociada a su cuenta {identifier}.",
   "consent.scope.openid.title": "Identidad",
diff --git a/packages/elements-react/src/locales/fr.json b/packages/elements-react/src/locales/fr.json
@@ -244,6 +244,8 @@
   "settings.profile.description": "Mettre à jour les informations de votre profil",
   "settings.webauthn.title": "Gérer les jetons matériels",
   "settings.webauthn.description": "Gérer les paramètres de votre jeton matériel",
+  "settings.messages.toast-title.success": "Paramètres mis à jour avec succès",
+  "settings.messages.toast-title.error": "Échec de la mise à jour des paramètres",
   "verification.subtitle": "Saisissez l'adresse e-mail associée à votre compte pour la vérifier",
   "input.placeholder": "Saisissez votre {placeholder}",
   "card.header.parts.oidc": "un fournisseur de réseaux sociaux",
diff --git a/packages/elements-react/src/locales/nl.json b/packages/elements-react/src/locales/nl.json
@@ -255,6 +255,8 @@
   "settings.webauthn.description": "",
   "settings.webauthn.info": "",
   "settings.webauthn.title": "",
+  "settings.messages.toast-title.success": "Instellingen bijgewerkt",
+  "settings.messages.toast-title.error": "Fout bij het bijwerken van instellingen",
   "card.footer.select-another-method": "",
   "account-linking.title": "",
   "property.code": "",
diff --git a/packages/elements-react/src/locales/pl.json b/packages/elements-react/src/locales/pl.json
@@ -255,6 +255,8 @@
   "settings.webauthn.description": "",
   "settings.webauthn.info": "",
   "settings.webauthn.title": "",
+  "settings.messages.toast-title.success": "Ustawienia zaktualizowane pomyślnie",
+  "settings.messages.toast-title.error": "Wystąpił błąd podczas aktualizacji ustawień",
   "card.footer.select-another-method": "",
   "account-linking.title": "",
   "property.code": "",
diff --git a/packages/elements-react/src/locales/pt.json b/packages/elements-react/src/locales/pt.json
@@ -255,6 +255,8 @@
   "settings.webauthn.description": "",
   "settings.webauthn.info": "",
   "settings.webauthn.title": "",
+  "settings.messages.toast-title.success": "Configurações atualizadas com sucesso",
+  "settings.messages.toast-title.error": "Erro ao atualizar configurações",
   "card.footer.select-another-method": "",
   "account-linking.title": "",
   "property.code": "",
diff --git a/packages/elements-react/src/locales/sv.json b/packages/elements-react/src/locales/sv.json
@@ -255,6 +255,8 @@
   "settings.webauthn.description": "Hantera inställningarna för din maskinvarutoken",
   "settings.webauthn.info": "Hårdvarutokens används för andrafaktorsautentisering eller som förstafaktor med lösenordsnycklar",
   "settings.webauthn.title": "Hantera maskinvarutokens",
+  "settings.messages.toast-title.success": "Inställningarna har uppdaterats",
+  "settings.messages.toast-title.error": "Ett fel uppstod",
   "card.footer.select-another-method": "Välj en annan metod",
   "account-linking.title": "Länka ditt konto",
   "property.password": "lösenord",
diff --git a/packages/elements-react/src/theme/default/components/default-components.tsx b/packages/elements-react/src/theme/default/components/default-components.tsx
@@ -46,6 +46,7 @@ import { DefaultSettingsWebauthn } from "./settings/settings-webauthn"
 import { DefaultAuthMethodListContainer } from "./card/auth-method-list-container"
 import { DefaultCaptcha } from "./form/captcha"
 import { DefaultConsentScopeCheckbox } from "./form/consent-scope-checkbox"
+import { DefaultToast } from "./generic/toast"
 
 export function getOryComponents(
   overrides?: OryFlowComponentOverrides,
@@ -101,6 +102,7 @@ export function getOryComponents(
     Message: {
       Root: overrides?.Message?.Root ?? DefaultMessageContainer,
       Content: overrides?.Message?.Content ?? DefaultMessage,
+      Toast: overrides?.Message?.Toast ?? DefaultToast,
     },
     Page: {
       Header: overrides?.Page?.Header ?? DefaultPageHeader,
diff --git a/packages/elements-react/src/theme/default/components/generic/toast.tsx b/packages/elements-react/src/theme/default/components/generic/toast.tsx
@@ -0,0 +1,44 @@
+import {
+  messageTestId,
+  OryToastProps,
+  uiTextToFormattedMessage,
+} from "@ory/elements-react"
+import { cn } from "../../utils/cn"
+import { useIntl } from "react-intl"
+
+export function DefaultToast({
+  message,
+  // Id can be used to close the toast later, but we don't use it here
+  id: _,
+}: OryToastProps) {
+  const intl = useIntl()
+
+  const title =
+    message.type === "error"
+      ? intl.formatMessage({ id: "settings.messages.toast-title.error" })
+      : intl.formatMessage({ id: "settings.messages.toast-title.success" })
+  const messageText = uiTextToFormattedMessage(message, intl)
+  return (
+    <div
+      className="rounded-cards bg-interface-background-default-inverted border border-interface-border-default-primary p-5 flex-col"
+      {...messageTestId(message)}
+    >
+      <p
+        className={cn("font-medium", {
+          "text-interface-foreground-validation-success":
+            message.type === "success",
+          "text-interface-foreground-validation-danger":
+            message.type === "error",
+          "text-interface-foreground-validation-warning":
+            // Currently unused from Kratos, but kept for future use
+            (message.type as "warning") === "warning",
+        })}
+      >
+        {title}
+      </p>
+      <p className="text-interface-foreground-default-inverted">
+        {messageText}
+      </p>
+    </div>
+  )
+}
diff --git a/packages/elements-react/src/util/showToast.tsx b/packages/elements-react/src/util/showToast.tsx
diff --git a/packages/elements-react/tsup.config.ts b/packages/elements-react/tsup.config.ts

Original file line number	Diff line number	Diff line change
`@@ -211,12 +211,24 @@ export type OryFlowComponents = {`
`211`	`211`	`* The Message component is rendered whenever a message is encountered.`
`212`	`212`	`*/`
`213`	`213`	`Content: ComponentType<OryMessageContentProps>`
	`214`	`+`
	`215`	`+ /**`
	`216`	`+ * The Toast component is rendered for toast messages.`
	`217`	`+ *`
	`218`	`+ * Currently only used in the settings page to display messages.`
	`219`	`+ */`
	`220`	`+ Toast: ComponentType<OryToastProps>`
`214`	`221`	`}`
`215`	`222`	`Page: {`
`216`	`223`	`Header: ComponentType<OryPageHeaderProps>`
`217`	`224`	`}`
`218`	`225`	`}`
`219`	`226`
	`227`	`+export type OryToastProps = {`
	`228`	`+ message: UiText`
	`229`	`+ id: string \| number`
	`230`	`+}`
	`231`	`+`
`220`	`232`	`type DeepPartialTwoLevels<T> = {`
`221`	`233`	`[P in keyof T]?: T[P] extends object ? { [K in keyof T[P]]?: T[P][K] } : T[P]`
`222`	`234`	`}`