@ory/elements-react 1.0.0-next.15 → 1.0.0-next.17

package/CHANGELOG.md

@@ -1,3 +1,51 @@
+## 1.0.0-next.17 (2024-11-27)
+
+
+### 🚀 Features
+
+- allow overriding OIDC logos
+
+- enable proper account linking flows
+
+- **core:** add react-hook form resolver
+
+
+### 🩹 Fixes
+
+- handle recovery brute force protection
+
+
+### ❤️  Thank You
+
+- Jonas Hungershausen
+
+## 1.0.0-next.16 (2024-11-26)
+
+
+### 🚀 Features
+
+- allow overriding of field messages
+
+- add test ids to components
+
+
+### 🩹 Fixes
+
+- use --font-sans CSS variable for font
+
+- registration & login flow form states
+
+- missing resend button on login & registration
+
+- password validation error form state
+
+- current identifier button overflowing on long values
+
+
+### ❤️  Thank You
+
+- Jonas Hungershausen
+
 ## 1.0.0-next.15 (2024-11-18)
 
 

package/api-report/elements-react-theme.api.json

@@ -172,6 +172,156 @@
       "name": "",
       "preserveMemberOrder": false,
       "members": [
+        {
+          "kind": "Function",
+          "canonicalReference": "@ory/elements-react!DefaultButtonSocial:function(1)",
+          "docComment": "",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "declare function DefaultButtonSocial({ attributes, node, onClick, "
+            },
+            {
+              "kind": "Reference",
+              "text": "showLabel",
+              "canonicalReference": "@ory/elements-react!~__type#showLabel"
+            },
+            {
+              "kind": "Content",
+              "text": ": _showLabel, "
+            },
+            {
+              "kind": "Reference",
+              "text": "logos",
+              "canonicalReference": "@ory/elements-react!~__type#logos"
+            },
+            {
+              "kind": "Content",
+              "text": ": providedLogos, }: "
+            },
+            {
+              "kind": "Reference",
+              "text": "DefaultSocialButtonProps",
+              "canonicalReference": "@ory/elements-react!~DefaultSocialButtonProps:type"
+            },
+            {
+              "kind": "Content",
+              "text": "): "
+            },
+            {
+              "kind": "Reference",
+              "text": "react_jsx_runtime.JSX.Element",
+              "canonicalReference": "@types/react!JSX.Element:interface"
+            },
+            {
+              "kind": "Content",
+              "text": ";"
+            }
+          ],
+          "fileUrlPath": "dist/theme/default/index.d.ts",
+          "returnTypeTokenRange": {
+            "startIndex": 7,
+            "endIndex": 8
+          },
+          "releaseTag": "Public",
+          "overloadIndex": 1,
+          "parameters": [
+            {
+              "parameterName": "{ attributes, node, onClick, showLabel: _showLabel, logos: providedLogos, }",
+              "parameterTypeTokenRange": {
+                "startIndex": 5,
+                "endIndex": 6
+              },
+              "isOptional": false
+            }
+          ],
+          "name": "DefaultButtonSocial"
+        },
+        {
+          "kind": "Namespace",
+          "canonicalReference": "@ory/elements-react!DefaultButtonSocial:namespace",
+          "docComment": "",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "declare namespace DefaultButtonSocial "
+            }
+          ],
+          "fileUrlPath": "dist/theme/default/index.d.ts",
+          "releaseTag": "Public",
+          "name": "DefaultButtonSocial",
+          "preserveMemberOrder": false,
+          "members": [
+            {
+              "kind": "Function",
+              "canonicalReference": "@ory/elements-react!DefaultButtonSocial.WithLogos:function(1)",
+              "docComment": "",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "WithLogos: (logos: "
+                },
+                {
+                  "kind": "Reference",
+                  "text": "Record",
+                  "canonicalReference": "!Record:type"
+                },
+                {
+                  "kind": "Content",
+                  "text": "<string, "
+                },
+                {
+                  "kind": "Reference",
+                  "text": "ElementType",
+                  "canonicalReference": "@types/react!React.ElementType:type"
+                },
+                {
+                  "kind": "Content",
+                  "text": ">"
+                },
+                {
+                  "kind": "Content",
+                  "text": ") => "
+                },
+                {
+                  "kind": "Content",
+                  "text": "(props: "
+                },
+                {
+                  "kind": "Reference",
+                  "text": "DefaultSocialButtonProps",
+                  "canonicalReference": "@ory/elements-react!~DefaultSocialButtonProps:type"
+                },
+                {
+                  "kind": "Content",
+                  "text": ") => "
+                },
+                {
+                  "kind": "Reference",
+                  "text": "react_jsx_runtime.JSX.Element",
+                  "canonicalReference": "@types/react!JSX.Element:interface"
+                }
+              ],
+              "returnTypeTokenRange": {
+                "startIndex": 6,
+                "endIndex": 10
+              },
+              "releaseTag": "Public",
+              "overloadIndex": 1,
+              "parameters": [
+                {
+                  "parameterName": "logos",
+                  "parameterTypeTokenRange": {
+                    "startIndex": 1,
+                    "endIndex": 5
+                  },
+                  "isOptional": false
+                }
+              ],
+              "name": "WithLogos"
+            }
+          ]
+        },
         {
           "kind": "Function",
           "canonicalReference": "@ory/elements-react!DefaultCard:function(1)",

package/api-report/elements-react-theme.api.md

@@ -8,6 +8,7 @@ import { ComponentPropsWithoutRef } from 'react';
 import { ComponentType } from 'react';
 import { ConfigurationParameters } from '@ory/client-fetch';
 import { DetailedHTMLProps } from 'react';
+import { ElementType } from 'react';
 import { FlowError } from '@ory/client-fetch';
 import { FormEventHandler } from 'react';
 import { HTMLAttributes } from 'react';
@@ -28,6 +29,17 @@ import { UiText } from '@ory/client-fetch';
 import { VariantProps } from 'class-variance-authority';
 import { VerificationFlow } from '@ory/client-fetch';
 
+// Warning: (ae-forgotten-export) The symbol "DefaultSocialButtonProps" needs to be exported by the entry point index.d.ts
+//
+// @public (undocumented)
+export function DefaultButtonSocial({ attributes, node, onClick, showLabel: _showLabel, logos: providedLogos, }: DefaultSocialButtonProps): react_jsx_runtime.JSX.Element;
+
+// @public (undocumented)
+export namespace DefaultButtonSocial {
+    var // (undocumented)
+    WithLogos: (logos: Record<string, ElementType>) => (props: DefaultSocialButtonProps) => react_jsx_runtime.JSX.Element;
+}
+
 // Warning: (ae-forgotten-export) The symbol "OryCardRootProps" needs to be exported by the entry point index.d.ts
 //
 // @public (undocumented)
@@ -126,8 +138,8 @@ export type VerificationFlowContextProps = {
 
 // Warnings were encountered during analysis:
 //
-// dist/theme/default/index.d.ts:27:5 - (ae-forgotten-export) The symbol "OryFlowComponentOverrides" needs to be exported by the entry point index.d.ts
-// dist/theme/default/index.d.ts:28:5 - (ae-forgotten-export) The symbol "OryClientConfiguration" needs to be exported by the entry point index.d.ts
+// dist/theme/default/index.d.ts:36:5 - (ae-forgotten-export) The symbol "OryFlowComponentOverrides" needs to be exported by the entry point index.d.ts
+// dist/theme/default/index.d.ts:37:5 - (ae-forgotten-export) The symbol "OryClientConfiguration" needs to be exported by the entry point index.d.ts
 
 // (No @packageDocumentation comment for this package)
 

package/api-report/temp/elements-react-theme.api.md

@@ -8,6 +8,7 @@ import { ComponentPropsWithoutRef } from 'react';
 import { ComponentType } from 'react';
 import { ConfigurationParameters } from '@ory/client-fetch';
 import { DetailedHTMLProps } from 'react';
+import { ElementType } from 'react';
 import { FlowError } from '@ory/client-fetch';
 import { FormEventHandler } from 'react';
 import { HTMLAttributes } from 'react';
@@ -28,6 +29,17 @@ import { UiText } from '@ory/client-fetch';
 import { VariantProps } from 'class-variance-authority';
 import { VerificationFlow } from '@ory/client-fetch';
 
+// Warning: (ae-forgotten-export) The symbol "DefaultSocialButtonProps" needs to be exported by the entry point index.d.ts
+//
+// @public (undocumented)
+export function DefaultButtonSocial({ attributes, node, onClick, showLabel: _showLabel, logos: providedLogos, }: DefaultSocialButtonProps): react_jsx_runtime.JSX.Element;
+
+// @public (undocumented)
+export namespace DefaultButtonSocial {
+    var // (undocumented)
+    WithLogos: (logos: Record<string, ElementType>) => (props: DefaultSocialButtonProps) => react_jsx_runtime.JSX.Element;
+}
+
 // Warning: (ae-forgotten-export) The symbol "OryCardRootProps" needs to be exported by the entry point index.d.ts
 //
 // @public (undocumented)
@@ -126,8 +138,8 @@ export type VerificationFlowContextProps = {
 
 // Warnings were encountered during analysis:
 //
-// dist/theme/default/index.d.ts:27:5 - (ae-forgotten-export) The symbol "OryFlowComponentOverrides" needs to be exported by the entry point index.d.ts
-// dist/theme/default/index.d.ts:28:5 - (ae-forgotten-export) The symbol "OryClientConfiguration" needs to be exported by the entry point index.d.ts
+// dist/theme/default/index.d.ts:36:5 - (ae-forgotten-export) The symbol "OryFlowComponentOverrides" needs to be exported by the entry point index.d.ts
+// dist/theme/default/index.d.ts:37:5 - (ae-forgotten-export) The symbol "OryClientConfiguration" needs to be exported by the entry point index.d.ts
 
 // (No @packageDocumentation comment for this package)
 

package/dist/index.js

@@ -107,20 +107,34 @@ function getFinalNodes(uniqueGroups, selectedGroup) {
 }
 
 // src/context/form-state.ts
+function findMethodWithMessage(nodes) {
+  var _a;
+  return (_a = nodes == null ? void 0 : nodes.filter((n) => !["default", "identifier_first"].includes(n.group))) == null ? void 0 : _a.find((node) => {
+    var _a2;
+    return ((_a2 = node.messages) == null ? void 0 : _a2.length) > 0;
+  });
+}
 function parseStateFromFlow(flow) {
+  var _a;
   switch (flow.flowType) {
     case clientFetch.FlowType.Registration:
-    case clientFetch.FlowType.Login:
+    case clientFetch.FlowType.Login: {
+      const methodWithMessage = findMethodWithMessage(flow.flow.ui.nodes);
       if (flow.flow.active == "link_recovery") {
         return { current: "method_active", method: "link" };
       } else if (flow.flow.active == "code_recovery") {
         return { current: "method_active", method: "code" };
+      } else if (methodWithMessage) {
+        return { current: "method_active", method: methodWithMessage.group };
+      } else if (flow.flow.active && !["default", "identifier_first", "oidc"].includes(flow.flow.active)) {
+        return { current: "method_active", method: flow.flow.active };
       } else if (isChoosingMethod(flow.flow.ui.nodes)) {
         return { current: "select_method" };
-      } else if (flow.flow.active) {
-        return { current: "method_active", method: flow.flow.active };
+      } else if ((_a = flow.flow.ui.messages) == null ? void 0 : _a.some((m) => m.id === 1010016)) {
+        return { current: "select_method" };
       }
       return { current: "provide_identifier" };
+    }
     case clientFetch.FlowType.Recovery:
     case clientFetch.FlowType.Verification:
       if (flow.flow.active === "code" || flow.flow.active === "link") {
@@ -427,7 +441,8 @@ var en_default = {
   "settings.passkey.title": "Manage Passkeys",
   "settings.passkey.description": "Manage your passkey settings",
   "settings.passkey.info": "Manage your passkey settings",
-  "card.footer.select-another-method": "Select another method"
+  "card.footer.select-another-method": "Select another method",
+  "account-linking.title": "Link account"
 };
 
 // src/locales/de.json
@@ -673,7 +688,8 @@ var de_default = {
   "settings.title-totp": "Verwalten Sie die 2FA TOTP Authenticator-App",
   "settings.title-webauthn": "Hardware-Token verwalten",
   "settings.webauthn.info": "Hardware-Tokens werden f\xFCr die Zweitfaktor-Authentifizierung oder als Erstfaktor-Authentifizierung mit Passkeys verwendet",
-  "card.footer.select-another-method": "Eine andere Methode verwenden"
+  "card.footer.select-another-method": "Eine andere Methode verwenden",
+  "account-linking.title": "Account Verbinden"
 };
 
 // src/locales/es.json
@@ -919,7 +935,8 @@ var es_default = {
   "settings.title-totp": "",
   "settings.title-webauthn": "",
   "settings.webauthn.info": "",
-  "card.footer.select-another-method": ""
+  "card.footer.select-another-method": "",
+  "account-linking.title": ""
 };
 
 // src/locales/fr.json
@@ -1165,7 +1182,8 @@ var fr_default = {
   "settings.webauthn.description": "",
   "settings.webauthn.info": "",
   "settings.webauthn.title": "",
-  "card.footer.select-another-method": ""
+  "card.footer.select-another-method": "",
+  "account-linking.title": ""
 };
 
 // src/locales/nl.json
@@ -1411,7 +1429,8 @@ var nl_default = {
   "settings.webauthn.description": "",
   "settings.webauthn.info": "",
   "settings.webauthn.title": "",
-  "card.footer.select-another-method": ""
+  "card.footer.select-another-method": "",
+  "account-linking.title": ""
 };
 
 // src/locales/pl.json
@@ -1657,7 +1676,8 @@ var pl_default = {
   "settings.webauthn.description": "",
   "settings.webauthn.info": "",
   "settings.webauthn.title": "",
-  "card.footer.select-another-method": ""
+  "card.footer.select-another-method": "",
+  "account-linking.title": ""
 };
 
 // src/locales/pt.json
@@ -1903,7 +1923,8 @@ var pt_default = {
   "settings.webauthn.description": "",
   "settings.webauthn.info": "",
   "settings.webauthn.title": "",
-  "card.footer.select-another-method": ""
+  "card.footer.select-another-method": "",
+  "account-linking.title": ""
 };
 
 // src/locales/sv.json
@@ -2149,7 +2170,8 @@ var sv_default = {
   "settings.webauthn.description": "Hantera inst\xE4llningarna f\xF6r din maskinvarutoken",
   "settings.webauthn.info": "H\xE5rdvarutokens anv\xE4nds f\xF6r andrafaktorsautentisering eller som f\xF6rstafaktor med l\xF6senordsnycklar",
   "settings.webauthn.title": "Hantera maskinvarutokens",
-  "card.footer.select-another-method": "V\xE4lj en annan metod"
+  "card.footer.select-another-method": "V\xE4lj en annan metod",
+  "account-linking.title": "L\xE4nka ditt konto"
 };
 
 // src/locales/index.ts
@@ -2287,16 +2309,34 @@ async function onSubmitRecovery({ config, flow }, {
         onRedirect(clientFetch.recoveryUrl(config), true);
       },
       onValidationError: (body2) => {
-        setFlowContainer({
-          flow: body2,
-          flowType: clientFetch.FlowType.Recovery,
-          config
-        });
+        if ("error" in body2) {
+          handleContinueWithRecoveryUIError(body2.error, config, onRedirect);
+          return;
+        } else {
+          setFlowContainer({
+            flow: body2,
+            flowType: clientFetch.FlowType.Recovery,
+            config
+          });
+        }
       },
       onRedirect
     })
   );
 }
+function handleContinueWithRecoveryUIError(error, config, onRedirect) {
+  if ("continue_with" in error.details && Array.isArray(error.details.continue_with)) {
+    const continueWithRecovery = error.details.continue_with.find(clientFetch.instanceOfContinueWithRecoveryUi);
+    if ((continueWithRecovery == null ? void 0 : continueWithRecovery.action) === "show_recovery_ui") {
+      onRedirect(
+        config.project.recovery_ui_url + "?flow=" + (continueWithRecovery == null ? void 0 : continueWithRecovery.flow.id),
+        false
+      );
+      return;
+    }
+  }
+  onRedirect(clientFetch.recoveryUrl(config), true);
+}
 async function onSubmitRegistration({ config, flow }, {
   setFlowContainer,
   body,
@@ -2427,20 +2467,22 @@ function computeDefaultValues(nodes) {
   return nodes.reduce((acc, node) => {
     const attrs = node.attributes;
     if (clientFetch.isUiNodeInputAttributes(attrs)) {
-      if (attrs.name === "method" || attrs.type === "submit" || typeof attrs.value === "undefined")
+      if (attrs.name === "method" || attrs.type === "submit" || typeof attrs.value === "undefined") {
         return acc;
-      const unrolled = unrollTrait({
-        name: attrs.name,
-        value: attrs.value
-      });
-      Object.assign(acc, unrolled != null ? unrolled : { [attrs.name]: attrs.value });
+      }
+      return unrollTrait(
+        {
+          name: attrs.name,
+          value: attrs.value
+        },
+        acc
+      );
     }
     return acc;
   }, {});
 }
 function unrollTrait(input, output = {}) {
   const keys = input.name.split(".");
-  if (!keys.length) return void 0;
   let current = output;
   keys.forEach((key, index) => {
     if (!key) return;
@@ -2536,8 +2578,10 @@ var NodeInput = ({
     //
     ...attrs
   } = attributes;
+  const isResendNode = ((_a = node.meta.label) == null ? void 0 : _a.id) === 1070008;
+  const isScreenSelectionNode = "name" in node.attributes && node.attributes.name === "screen";
   const setFormValue = () => {
-    if (attrs.value) {
+    if (attrs.value && !(isResendNode || isScreenSelectionNode)) {
       setValue(attrs.name, attrs.value);
     }
   };
@@ -2562,8 +2606,6 @@ var NodeInput = ({
   };
   const isSocial = (attrs.name === "provider" || attrs.name === "link") && node.group === "oidc";
   const isPinCodeInput = attrs.name === "code" && node.group === "code" || attrs.name === "totp_code" && node.group === "totp";
-  const isResendNode = ((_a = node.meta.label) == null ? void 0 : _a.id) === 1070008;
-  const isScreenSelectionNode = "name" in node.attributes && node.attributes.name === "screen";
   switch (attributes.type) {
     case clientFetch.UiNodeInputAttributesTypeEnum.Submit:
     case clientFetch.UiNodeInputAttributesTypeEnum.Button:
@@ -2635,6 +2677,51 @@ function OryFormGroups({ children, groups }) {
     return /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k);
   }) });
 }
+
+// src/components/form/form-resolver.ts
+function isCodeResendRequest(data) {
+  var _a;
+  return (_a = data.email) != null ? _a : data.resend;
+}
+function useOryFormResolver() {
+  const flowContainer = useOryFlow();
+  return (data) => {
+    if (flowContainer.formState.current === "method_active") {
+      if (data.method === "code" && !data.code && !isCodeResendRequest(data)) {
+        return {
+          values: data,
+          errors: {
+            code: {
+              id: 4000002,
+              context: {
+                property: "code"
+              },
+              type: "error",
+              text: "Property code is missing"
+            }
+          }
+        };
+      }
+    }
+    return {
+      values: data,
+      errors: {}
+    };
+  };
+}
+function OryFormProvider({
+  children,
+  nodes
+}) {
+  const flowContainer = useOryFlow();
+  const defaultNodes = nodes ? flowContainer.flow.ui.nodes.filter((node) => node.group === clientFetch.UiNodeGroupEnum.Default).concat(nodes) : flowContainer.flow.ui.nodes;
+  const methods = reactHookForm.useForm({
+    // TODO: Generify this, so we have typesafety in the submit handler.
+    defaultValues: computeDefaultValues(defaultNodes),
+    resolver: useOryFormResolver()
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(reactHookForm.FormProvider, { ...methods, children });
+}
 function OryFormOidcButtons({
   children,
   hideDivider
@@ -2680,7 +2767,7 @@ function OryFormSocialButtonsForm() {
   if (filteredNodes.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(OryForm, { children: /* @__PURE__ */ jsxRuntime.jsx(OryFormOidcButtons, {}) });
+  return /* @__PURE__ */ jsxRuntime.jsx(OryFormProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(OryForm, { children: /* @__PURE__ */ jsxRuntime.jsx(OryFormOidcButtons, {}) }) });
 }
 function OryForm({ children, onAfterSubmit }) {
   var _a;
@@ -2779,6 +2866,12 @@ function OryForm({ children, onAfterSubmit }) {
         break;
       }
     }
+    if ("password" in data) {
+      methods.setValue("password", "");
+    }
+    if ("code" in data) {
+      methods.setValue("code", "");
+    }
     onAfterSubmit == null ? void 0 : onAfterSubmit(data.method);
   };
   const hasMethods = flowContainer.flow.ui.nodes.filter((node) => {
@@ -2824,7 +2917,7 @@ function OryForm({ children, onAfterSubmit }) {
     }
   );
 }
-var messageIdsToHide = [1040009, 1060003, 1080003, 1010014, 1040005];
+var messageIdsToHide = [1040009, 1060003, 1080003, 1010014, 1040005, 1010016];
 function OryCardValidationMessages({ ...props }) {
   var _a;
   const { flow } = useOryFlow();
@@ -2837,18 +2930,6 @@ function OryCardValidationMessages({ ...props }) {
   }
   return /* @__PURE__ */ jsxRuntime.jsx(Message.Root, { ...props, children: messages == null ? void 0 : messages.map((message) => /* @__PURE__ */ jsxRuntime.jsx(Message.Content, { message }, message.id)) });
 }
-function OryFormProvider({
-  children,
-  nodes
-}) {
-  const flowContainer = useOryFlow();
-  const defaultNodes = nodes ? flowContainer.flow.ui.nodes.filter((node) => node.group === clientFetch.UiNodeGroupEnum.Default).concat(nodes) : flowContainer.flow.ui.nodes;
-  const methods = reactHookForm.useForm({
-    // TODO: Generify this, so we have typesafety in the submit handler.
-    defaultValues: computeDefaultValues(defaultNodes)
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(reactHookForm.FormProvider, { ...methods, children });
-}
 function OryFormSection({ children, nodes }) {
   const { Card } = useComponents();
   return /* @__PURE__ */ jsxRuntime.jsx(OryFormProvider, { nodes, children: /* @__PURE__ */ jsxRuntime.jsx(OryForm, { children: /* @__PURE__ */ jsxRuntime.jsx(Card.SettingsSection, { children }) }) });