@ory/elements-react 1.0.0-next.16 → 1.0.0-next.18

package/dist/index.mjs

@@ -1,8 +1,8 @@
-import { UiNodeGroupEnum, isUiNodeInputAttributes, isUiNodeAnchorAttributes, isUiNodeImageAttributes, isUiNodeScriptAttributes, isUiNodeTextAttributes, FlowType, handleFlowError, loginUrl, handleContinueWith, recoveryUrl, registrationUrl, settingsUrl, isResponseError, verificationUrl, UiNodeInputAttributesTypeEnum, Configuration, FrontendApi } from '@ory/client-fetch';
-import { createContext, useContext, useState, useMemo, useReducer, useRef, useEffect } from 'react';
+import { UiNodeGroupEnum, isUiNodeInputAttributes, isUiNodeAnchorAttributes, isUiNodeImageAttributes, isUiNodeScriptAttributes, isUiNodeTextAttributes, UiNodeInputAttributesTypeEnum, FlowType, Configuration, FrontendApi, handleContinueWith, settingsUrl, handleFlowError, isResponseError, loginUrl, instanceOfContinueWithRecoveryUi, recoveryUrl, verificationUrl, registrationUrl } from '@ory/client-fetch';
+import { createContext, useContext, useRef, useEffect, useState, useReducer, useMemo } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useIntl, IntlProvider as IntlProvider$1 } from 'react-intl';
-import { useFormContext, useForm, FormProvider } from 'react-hook-form';
+import { useForm, FormProvider, useFormContext } from 'react-hook-form';
 
 // src/context/component.tsx
 var ComponentContext = createContext({
@@ -113,6 +113,7 @@ function findMethodWithMessage(nodes) {
   });
 }
 function parseStateFromFlow(flow) {
+  var _a;
   switch (flow.flowType) {
     case FlowType.Registration:
     case FlowType.Login: {
@@ -123,10 +124,12 @@ function parseStateFromFlow(flow) {
         return { current: "method_active", method: "code" };
       } else if (methodWithMessage) {
         return { current: "method_active", method: methodWithMessage.group };
-      } else if (flow.flow.active && !["default", "identifier_first"].includes(flow.flow.active)) {
+      } 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 ((_a = flow.flow.ui.messages) == null ? void 0 : _a.some((m) => m.id === 1010016)) {
+        return { current: "select_method" };
       }
       return { current: "provide_identifier" };
     }
@@ -436,7 +439,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
@@ -682,7 +686,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
@@ -928,7 +933,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
@@ -1174,7 +1180,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
@@ -1420,7 +1427,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
@@ -1666,7 +1674,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
@@ -1912,7 +1921,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
@@ -2158,7 +2168,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
@@ -2246,7 +2257,8 @@ async function onSubmitLogin({ config, flow }, {
     updateLoginFlowBody: body
   }).then(() => {
     var _a2;
-    window.location.href = (_a2 = flow.return_to) != null ? _a2 : config.sdk.url + "/self-service/login/browser";
+    window.location.href = // eslint-disable-next-line promise/always-return
+    (_a2 = flow.return_to) != null ? _a2 : config.sdk.url + "/self-service/login/browser";
   }).catch(
     handleFlowError({
       onRestartFlow: () => {
@@ -2296,16 +2308,34 @@ async function onSubmitRecovery({ config, flow }, {
         onRedirect(recoveryUrl(config), true);
       },
       onValidationError: (body2) => {
-        setFlowContainer({
-          flow: body2,
-          flowType: FlowType.Recovery,
-          config
-        });
+        if ("error" in body2) {
+          handleContinueWithRecoveryUIError(body2.error, config, onRedirect);
+          return;
+        } else {
+          setFlowContainer({
+            flow: body2,
+            flowType: 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(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(recoveryUrl(config), true);
+}
 async function onSubmitRegistration({ config, flow }, {
   setFlowContainer,
   body,
@@ -2436,20 +2466,25 @@ function computeDefaultValues(nodes) {
   return nodes.reduce((acc, node) => {
     const attrs = node.attributes;
     if (isUiNodeInputAttributes(attrs)) {
-      if (attrs.name === "method" || attrs.type === "submit" || typeof attrs.value === "undefined")
+      if (attrs.type === "checkbox" && typeof attrs.value === "undefined") {
+        attrs.value = false;
+      }
+      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;
@@ -2486,19 +2521,19 @@ function triggerToWindowCall(trigger) {
 }
 function triggerToFunction(trigger) {
   if (typeof window === "undefined") {
-    console.error(
+    console.debug(
       "The Ory SDK is missing a required function: window is undefined."
     );
     return void 0;
   }
   const typedWindow = window;
   if (!(trigger in typedWindow) || !typedWindow[trigger]) {
-    console.error(`The Ory SDK is missing a required function: ${trigger}.`);
+    console.debug(`The Ory SDK is missing a required function: ${trigger}.`);
     return void 0;
   }
   const triggerFn = typedWindow[trigger];
   if (typeof triggerFn !== "function") {
-    console.error(
+    console.debug(
       `The Ory SDK is missing a required function: ${trigger}. It is not a function.`
     );
     return void 0;
@@ -2545,8 +2580,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);
     }
   };
@@ -2571,8 +2608,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 UiNodeInputAttributesTypeEnum.Submit:
     case UiNodeInputAttributesTypeEnum.Button:
@@ -2644,6 +2679,51 @@ function OryFormGroups({ children, groups }) {
     return /* @__PURE__ */ 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 === UiNodeGroupEnum.Default).concat(nodes) : flowContainer.flow.ui.nodes;
+  const methods = useForm({
+    // TODO: Generify this, so we have typesafety in the submit handler.
+    defaultValues: computeDefaultValues(defaultNodes),
+    resolver: useOryFormResolver()
+  });
+  return /* @__PURE__ */ jsx(FormProvider, { ...methods, children });
+}
 function OryFormOidcButtons({
   children,
   hideDivider
@@ -2689,7 +2769,7 @@ function OryFormSocialButtonsForm() {
   if (filteredNodes.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx(OryForm, { children: /* @__PURE__ */ jsx(OryFormOidcButtons, {}) });
+  return /* @__PURE__ */ jsx(OryFormProvider, { children: /* @__PURE__ */ jsx(OryForm, { children: /* @__PURE__ */ jsx(OryFormOidcButtons, {}) }) });
 }
 function OryForm({ children, onAfterSubmit }) {
   var _a;
@@ -2839,7 +2919,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();
@@ -2852,18 +2932,6 @@ function OryCardValidationMessages({ ...props }) {
   }
   return /* @__PURE__ */ jsx(Message.Root, { ...props, children: messages == null ? void 0 : messages.map((message) => /* @__PURE__ */ jsx(Message.Content, { message }, message.id)) });
 }
-function OryFormProvider({
-  children,
-  nodes
-}) {
-  const flowContainer = useOryFlow();
-  const defaultNodes = nodes ? flowContainer.flow.ui.nodes.filter((node) => node.group === UiNodeGroupEnum.Default).concat(nodes) : flowContainer.flow.ui.nodes;
-  const methods = useForm({
-    // TODO: Generify this, so we have typesafety in the submit handler.
-    defaultValues: computeDefaultValues(defaultNodes)
-  });
-  return /* @__PURE__ */ jsx(FormProvider, { ...methods, children });
-}
 function OryFormSection({ children, nodes }) {
   const { Card } = useComponents();
   return /* @__PURE__ */ jsx(OryFormProvider, { nodes, children: /* @__PURE__ */ jsx(OryForm, { children: /* @__PURE__ */ jsx(Card.SettingsSection, { children }) }) });
@@ -3039,7 +3107,12 @@ function OrySettingsOidc({ nodes }) {
         )
       }
     ),
-    /* @__PURE__ */ jsx(Card.SettingsSectionFooter, { children: /* @__PURE__ */ jsx("span", { children: intl.formatMessage({ id: "settings.oidc.info" }) }) })
+    /* @__PURE__ */ jsx(
+      Card.SettingsSectionFooter,
+      {
+        text: intl.formatMessage({ id: "settings.oidc.info" })
+      }
+    )
   ] });
 }
 var getTriggerNode = (nodes) => nodes.find(
@@ -3096,7 +3169,12 @@ function OrySettingsPasskey({ nodes }) {
         ]
       }
     ),
-    /* @__PURE__ */ jsx(Card.SettingsSectionFooter, { children: /* @__PURE__ */ jsx("span", { children: intl.formatMessage({ id: "settings.passkey.info" }) }) })
+    /* @__PURE__ */ jsx(
+      Card.SettingsSectionFooter,
+      {
+        text: intl.formatMessage({ id: "settings.passkey.info" })
+      }
+    )
   ] });
 }
 var getRegenerateNode = (nodes) => nodes.find(
@@ -3181,16 +3259,19 @@ function OrySettingsTotp({ nodes }) {
         children: content
       }
     ),
-    /* @__PURE__ */ jsxs(Card.SettingsSectionFooter, { children: [
-      /* @__PURE__ */ jsx("span", { children: totpUnlink ? intl.formatMessage({ id: "settings.totp.info.linked" }) : intl.formatMessage({ id: "settings.totp.info.not-linked" }) }),
-      totpLinkButton && /* @__PURE__ */ jsx(
-        Node2.Button,
-        {
-          node: totpLinkButton,
-          attributes: totpLinkButton.attributes
-        }
-      )
-    ] })
+    /* @__PURE__ */ jsx(
+      Card.SettingsSectionFooter,
+      {
+        text: totpUnlink ? intl.formatMessage({ id: "settings.totp.info.linked" }) : intl.formatMessage({ id: "settings.totp.info.not-linked" }),
+        children: totpLinkButton && /* @__PURE__ */ jsx(
+          Node2.Button,
+          {
+            node: totpLinkButton,
+            attributes: totpLinkButton.attributes
+          }
+        )
+      }
+    )
   ] });
 }
 var getInputNode = (nodes) => nodes.find(
@@ -3202,9 +3283,6 @@ var getTriggerNode2 = (nodes) => nodes.find(
 var getRemoveButtons = (nodes) => nodes.filter(
   (node) => "name" in node.attributes && node.attributes.name === "webauthn_remove"
 );
-var getScriptNode = (nodes) => nodes.find(
-  (node) => "id" in node.attributes && node.attributes.id === "webauthn_script"
-);
 var getRegisterNode = (nodes) => nodes.find(
   (node) => "name" in node.attributes && node.attributes.name === "webauthn_register"
 );
@@ -3217,7 +3295,6 @@ function OrySettingsWebauthn({ nodes }) {
   const triggerButton = getTriggerNode2(nodes);
   const inputNode = getInputNode(nodes);
   const removeButtons = getRemoveButtons(nodes);
-  const scriptNode = getScriptNode(nodes);
   const registerNode = getRegisterNode(nodes);
   if (!inputNode || !triggerButton) {
     return null;
@@ -3240,8 +3317,6 @@ function OrySettingsWebauthn({ nodes }) {
         }),
         children: [
           (_a = groups.default) == null ? void 0 : _a.map((node, i) => /* @__PURE__ */ jsx(Node, { node }, `webauthn-default-${i}`)),
-          scriptNode && /* @__PURE__ */ jsx(Node, { node: scriptNode }),
-          registerNode && /* @__PURE__ */ jsx(Node, { node: registerNode }),
           /* @__PURE__ */ jsx(
             Form.WebauthnSettings,
             {
@@ -3253,11 +3328,17 @@ function OrySettingsWebauthn({ nodes }) {
               },
               removeButtons
             }
-          )
+          ),
+          registerNode && /* @__PURE__ */ jsx(Node, { node: registerNode })
         ]
       }
     ),
-    /* @__PURE__ */ jsx(Card.SettingsSectionFooter, { children: /* @__PURE__ */ jsx("span", { children: intl.formatMessage({ id: "settings.webauthn.info" }) }) })
+    /* @__PURE__ */ jsx(
+      Card.SettingsSectionFooter,
+      {
+        text: intl.formatMessage({ id: "settings.webauthn.info" })
+      }
+    )
   ] });
 }
 function SettingsSectionContent({ group, nodes }) {
@@ -3309,11 +3390,16 @@ function SettingsSectionContent({ group, nodes }) {
     ).map((node, k) => /* @__PURE__ */ jsx(Node, { node }, k)) })
   ] });
 }
+var getScriptNode = (nodes) => nodes.find(
+  (node) => "id" in node.attributes && node.attributes.id === "webauthn_script"
+);
 function OrySettingsCard() {
   const { flow } = useOryFlow();
   const uniqueGroups = useNodesGroups(flow.ui.nodes);
+  const scriptNode = getScriptNode(flow.ui.nodes);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(OryCardValidationMessages, {}),
+    scriptNode && /* @__PURE__ */ jsx(Node, { node: scriptNode }),
     uniqueGroups.entries.map(([group, nodes]) => {
       if (group === UiNodeGroupEnum.Default) {
         return null;