@ory/elements-react 1.0.0-pr.5494d7c2 → 1.0.0-pr.6c5e72b6

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { UiNodeGroupEnum, isUiNodeInputAttributes, isUiNodeAnchorAttributes, isUiNodeImageAttributes, isUiNodeScriptAttributes, FlowType, getNodeId, Configuration, FrontendApi, isUiNodeTextAttributes, UiNodeInputAttributesTypeEnum, handleContinueWith, handleFlowError, settingsUrl, isResponseError, loginUrl, recoveryUrl, verificationUrl, registrationUrl, instanceOfContinueWithRecoveryUi } from '@ory/client-fetch';
+import { UiNodeGroupEnum, isUiNodeInputAttributes, isUiNodeAnchorAttributes, isUiNodeImageAttributes, isUiNodeScriptAttributes, FlowType, getNodeId, Configuration, FrontendApi, isUiNodeTextAttributes, UiNodeInputAttributesTypeEnum, handleContinueWith, isResponseError as isResponseError$1, loginUrl, settingsUrl, registrationUrl, FetchError, ResponseError, recoveryUrl, instanceOfContinueWithRecoveryUi, verificationUrl as verificationUrl$1 } from '@ory/client-fetch';
 import { createContext, useContext, useRef, useState, useMemo, useReducer, useEffect } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useIntl, IntlProvider as IntlProvider$1 } from 'react-intl';
@@ -270,12 +270,25 @@ function useNodeGroupsWithVisibleNodes(nodes) {
 }
 
 // src/components/card/two-step/utils.ts
+function isScreenSelectionNode(node) {
+  if ("name" in node.attributes && node.attributes.name === "screen" && "value" in node.attributes && node.attributes.value === "previous") {
+    return true;
+  }
+  if (node.group === UiNodeGroupEnum.IdentifierFirst && "name" in node.attributes && node.attributes.name === "identifier" && node.attributes.type === "hidden") {
+    return true;
+  }
+  return false;
+}
 function isChoosingMethod(flow) {
-  return flow.flow.ui.nodes.some(
-    (node) => "name" in node.attributes && node.attributes.name === "screen" && "value" in node.attributes && node.attributes.value === "previous"
-  ) || flow.flow.ui.nodes.some(
-    (node) => node.group === UiNodeGroupEnum.IdentifierFirst && "name" in node.attributes && node.attributes.name === "identifier" && node.attributes.type === "hidden"
-  ) || flow.flowType === FlowType.Login && flow.flow.requested_aal === "aal2";
+  if (flow.flowType === FlowType.Login) {
+    if (flow.flow.requested_aal === "aal2") {
+      return true;
+    }
+    if (flow.flow.refresh) {
+      return true;
+    }
+  }
+  return flow.flow.ui.nodes.some(isScreenSelectionNode);
 }
 function getFinalNodes(uniqueGroups, selectedGroup) {
   var _a, _b, _c, _d;
@@ -320,16 +333,16 @@ function parseStateFromFlow(flow) {
         return { current: "method_active", method: "code" };
       } else if (methodWithMessage) {
         return { current: "method_active", method: methodWithMessage.group };
+      } else if ((_a = flow.flow.ui.messages) == null ? void 0 : _a.some((m) => m.id === 1010016)) {
+        return { current: "select_method" };
       } else if (flow.flow.active && !["default", "identifier_first"].includes(flow.flow.active)) {
         return { current: "method_active", method: flow.flow.active };
       } else if (isChoosingMethod(flow)) {
         const authMethods = nodesToAuthMethodGroups(flow.flow.ui.nodes);
-        if (authMethods.length === 1 && authMethods[0] !== "code") {
+        if (authMethods.length === 1 && !["code", "passkey"].includes(authMethods[0])) {
           return { current: "method_active", method: authMethods[0] };
         }
         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" };
     }
@@ -680,6 +693,134 @@ function replaceWindowFlowId(flow) {
   url.searchParams.set("flow", flow);
   window.location.href = url.toString();
 }
+function isGenericErrorResponse(response) {
+  return typeof response === "object" && !!response && "error" in response && typeof response.error === "object" && !!response.error && "id" in response.error;
+}
+function isNeedsPrivilegedSessionError(response) {
+  return isGenericErrorResponse(response) && response.error.id === "session_refresh_required";
+}
+function isSelfServiceFlowExpiredError(response) {
+  return isGenericErrorResponse(response) && response.error.id === "self_service_flow_expired";
+}
+function isBrowserLocationChangeRequired(response) {
+  return isGenericErrorResponse(response) && isGenericErrorResponse(response) && response.error.id === "browser_location_change_required";
+}
+function isAddressNotVerified(response) {
+  return isGenericErrorResponse(response) && response.error.id === "session_verified_address_required";
+}
+function isCsrfError(response) {
+  return isGenericErrorResponse(response) && response.error.id === "security_csrf_violation";
+}
+var isResponseError = (err) => {
+  if (err instanceof ResponseError) {
+    return true;
+  }
+  return typeof err === "object" && !!err && "name" in err && err.name === "ResponseError";
+};
+var isFetchError = (err) => {
+  return err instanceof FetchError;
+};
+
+// src/util/sdk-helpers/urlHelpers.ts
+var verificationUrl = (config) => config.sdk.url + "/self-service/verification/browser";
+var handleFlowError = (opts) => async (err) => {
+  var _a;
+  if (!isResponseError(err)) {
+    if (isFetchError(err)) {
+      throw new FetchError(
+        err,
+        "Unable to call the API endpoint. Ensure that CORS is set up correctly and that you have provided a valid SDK URL to Ory Elements."
+      );
+    }
+    throw err;
+  }
+  const contentType = err.response.headers.get("content-type") || "";
+  if (contentType.includes("application/json")) {
+    const body = await toBody(err.response);
+    if (isSelfServiceFlowExpiredError(body)) {
+      opts.onRestartFlow(body.use_flow_id);
+      return;
+    } else if (isAddressNotVerified(body)) {
+      for (const continueWith of ((_a = body.error.details) == null ? void 0 : _a.continue_with) || []) {
+        if (continueWith.action === "show_verification_ui" && continueWith.flow.url) {
+          opts.onRedirect(continueWith.flow.url, true);
+          return;
+        }
+      }
+      opts.onRedirect(verificationUrl(opts.config), true);
+      return;
+    } else if (isBrowserLocationChangeRequired(body) && body.redirect_browser_to) {
+      opts.onRedirect(body.redirect_browser_to, true);
+      return;
+    } else if (isNeedsPrivilegedSessionError(body) && body.redirect_browser_to) {
+      opts.onRedirect(body.redirect_browser_to, true);
+      return;
+    } else if (isCsrfError(body)) {
+      opts.onRestartFlow();
+      return;
+    }
+    switch (err.response.status) {
+      case 404:
+        opts.onRestartFlow();
+        return;
+      case 410:
+        opts.onRestartFlow();
+        return;
+      case 400:
+        return opts.onValidationError(
+          await err.response.json()
+        );
+      case 403:
+        opts.onRestartFlow();
+        return;
+      case 422: {
+        throw new ResponseError(
+          err.response,
+          "The API returned an error code indicating a required redirect, but the SDK is outdated and does not know how to handle the action. Received response: " + await err.response.json()
+        );
+      }
+    }
+    throw new ResponseError(
+      err.response,
+      "The Ory API endpoint returned a response code the SDK does not know how to handle. Please check the network tab for more information. Received response: " + await err.response.json()
+    );
+  } else if (
+    // Not a JSON response? If it's a text response we will return an error informing the user that the response is not JSON.
+    contentType.includes("text/") || contentType.includes("html") || contentType.includes("xml")
+  ) {
+    await logResponseError(err.response, true);
+    throw new ResponseError(
+      err.response,
+      `The Ory API endpoint returned an unexpected HTML or text response. Check your console output for details.`
+    );
+  }
+  await logResponseError(err.response, false);
+  throw new ResponseError(
+    err.response,
+    "The Ory API endpoint returned unexpected content type `" + contentType + "`.  Check your console output for details."
+  );
+};
+async function toBody(response) {
+  try {
+    return await response.clone().json();
+  } catch (e) {
+    await logResponseError(response, true, [e]);
+    throw new ResponseError(
+      response,
+      "Unable to decode API response using JSON."
+    );
+  }
+}
+async function logResponseError(response, printBody, wrap) {
+  console.error("Unable to decode API response", {
+    response: {
+      status: response.status,
+      headers: Object.fromEntries(response.headers.entries()),
+      body: printBody ? await response.clone().text() : void 0
+    },
+    errors: wrap
+  });
+}
 
 // src/util/onSubmitLogin.ts
 async function onSubmitLogin({ flow }, config, {
@@ -715,7 +856,8 @@ async function onSubmitLogin({ flow }, config, {
           flowType: FlowType.Login
         });
       },
-      onRedirect
+      onRedirect,
+      config
     })
   );
 }
@@ -759,7 +901,8 @@ async function onSubmitRecovery({ flow }, config, {
           });
         }
       },
-      onRedirect
+      onRedirect,
+      config
     })
   );
 }
@@ -808,7 +951,8 @@ async function onSubmitRegistration({ flow }, config, {
           flowType: FlowType.Registration
         });
       },
-      onRedirect
+      onRedirect,
+      config
     })
   );
 }
@@ -847,10 +991,11 @@ async function onSubmitSettings({ flow }, config, {
           flowType: FlowType.Settings
         });
       },
-      onRedirect
+      onRedirect,
+      config
     })
   ).catch((err) => {
-    if (isResponseError(err)) {
+    if (isResponseError$1(err)) {
       if (err.response.status === 401) {
         return onRedirect(
           loginUrl(config) + "?return_to=" + settingsUrl(config),
@@ -880,7 +1025,7 @@ async function onSubmitVerification({ flow }, config, {
         if (useFlowId) {
           replaceWindowFlowId(useFlowId);
         } else {
-          onRedirect(verificationUrl(config), true);
+          onRedirect(verificationUrl$1(config), true);
         }
       },
       onValidationError: (body2) => {
@@ -889,7 +1034,8 @@ async function onSubmitVerification({ flow }, config, {
           flowType: FlowType.Verification
         });
       },
-      onRedirect
+      onRedirect,
+      config
     })
   );
 }
@@ -1071,7 +1217,8 @@ var messageIdsToHide = [
   1010004,
   1010014,
   1040005,
-  1010016
+  1010016,
+  1010003
 ];
 function OryCardValidationMessages({ ...props }) {
   var _a;
@@ -1102,9 +1249,9 @@ 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 isScreenSelectionNode2 = "name" in node.attributes && node.attributes.name === "screen";
   const setFormValue = () => {
-    if (attrs.value && !(isResendNode || isScreenSelectionNode || node.group === UiNodeGroupEnum.Oauth2Consent)) {
+    if (attrs.value && !(isResendNode || isScreenSelectionNode2 || node.group === UiNodeGroupEnum.Oauth2Consent)) {
       setValue(attrs.name, attrs.value);
     }
   };
@@ -1161,7 +1308,7 @@ var NodeInput = ({
           }
         );
       }
-      if (isResendNode || isScreenSelectionNode) {
+      if (isResendNode || isScreenSelectionNode2) {
         return null;
       }
       if (node.group === "oauth2_consent") {
@@ -1243,7 +1390,8 @@ var Node = ({ node, onClick }) => {
       {
         crossOrigin: crossorigin,
         referrerPolicy: referrerpolicy,
-        ...attributes
+        ...attributes,
+        integrity: ""
       }
     );
   }
@@ -1401,15 +1549,17 @@ function toAuthMethodPickerOptions(visibleGroups) {
 }
 function OryTwoStepCardStateSelectMethod() {
   var _a, _b, _c, _d;
-  const { Form, Card, Message } = useComponents();
+  const { Form, Card } = useComponents();
   const { flow, flowType, dispatchFormState } = useOryFlow();
   const { ui } = flow;
-  const intl = useIntl();
   const nodeSorter = useNodeSorter();
   const sortNodes = (a, b) => nodeSorter(a, b, { flowType });
   const visibleGroups = useNodeGroupsWithVisibleNodes(ui.nodes);
   const authMethodBlocks = toAuthMethodPickerOptions(visibleGroups);
   const authMethodAdditionalNodes = useFunctionalNodes(ui.nodes);
+  const hiddenNodes = ui.nodes.filter(
+    (n) => n.attributes.node_type === "input" && n.attributes.type === "hidden" || isUiNodeScriptAttributes(n.attributes)
+  );
   if (UiNodeGroupEnum.Code in authMethodBlocks) {
     let identifier = (_b = (_a = findNode(ui.nodes, {
       group: "identifier_first",
@@ -1430,44 +1580,52 @@ function OryTwoStepCardStateSelectMethod() {
       };
     }
   }
-  const noMethods = {
-    id: 5000002,
-    text: intl.formatMessage({
-      id: `identities.messages.5000002`,
-      defaultMessage: "No authentication methods are available for this request. Please contact the site or app owner."
-    }),
-    type: "error"
-  };
   return /* @__PURE__ */ jsxs(OryCard, { children: [
     /* @__PURE__ */ jsx(OryCardHeader, {}),
     /* @__PURE__ */ jsxs(OryCardContent, { children: [
       /* @__PURE__ */ jsx(OryCardValidationMessages, {}),
       /* @__PURE__ */ jsx(OryFormSocialButtonsForm, {}),
-      Object.entries(authMethodBlocks).length > 0 ? /* @__PURE__ */ jsx(
+      Object.entries(authMethodBlocks).length > 0 ? /* @__PURE__ */ jsxs(
         OryForm,
         {
           "data-testid": `ory/form/methods/local`,
           onAfterSubmit: handleAfterFormSubmit(dispatchFormState),
-          children: /* @__PURE__ */ jsxs(Form.Group, { children: [
-            /* @__PURE__ */ jsx(Card.Divider, {}),
-            /* @__PURE__ */ jsx(
-              AuthMethodList,
-              {
-                options: authMethodBlocks,
-                setSelectedGroup: (group) => dispatchFormState({
-                  type: "action_select_method",
-                  method: group
-                })
-              }
-            ),
-            authMethodAdditionalNodes.sort(sortNodes).map((node, k) => /* @__PURE__ */ jsx(Node, { node }, k))
-          ] })
+          children: [
+            /* @__PURE__ */ jsxs(Form.Group, { children: [
+              /* @__PURE__ */ jsx(Card.Divider, {}),
+              /* @__PURE__ */ jsx(
+                AuthMethodList,
+                {
+                  options: authMethodBlocks,
+                  setSelectedGroup: (group) => dispatchFormState({
+                    type: "action_select_method",
+                    method: group
+                  })
+                }
+              ),
+              authMethodAdditionalNodes.sort(sortNodes).map((node, k) => /* @__PURE__ */ jsx(Node, { node }, k))
+            ] }),
+            hiddenNodes.map((node, k) => /* @__PURE__ */ jsx(Node, { node }, k))
+          ]
         }
-      ) : !hasSingleSignOnNodes(ui.nodes) && /* @__PURE__ */ jsx("div", { "data-testid": `ory/form/methods/local`, children: /* @__PURE__ */ jsx(Message.Root, { children: /* @__PURE__ */ jsx(Message.Content, { message: noMethods }, noMethods.id) }) })
+      ) : !hasSingleSignOnNodes(ui.nodes) && /* @__PURE__ */ jsx(NoMethodsMessage, {})
     ] }),
     /* @__PURE__ */ jsx(OryCardFooter, {})
   ] });
 }
+function NoMethodsMessage() {
+  const intl = useIntl();
+  const { Message } = useComponents();
+  const noMethods = {
+    id: 5000002,
+    text: intl.formatMessage({
+      id: `identities.messages.5000002`,
+      defaultMessage: "No authentication methods are available for this request. Please contact the site or app owner."
+    }),
+    type: "error"
+  };
+  return /* @__PURE__ */ jsx("div", { "data-testid": `ory/form/methods/local`, children: /* @__PURE__ */ jsx(Message.Root, { children: /* @__PURE__ */ jsx(Message.Content, { message: noMethods }, noMethods.id) }) });
+}
 function OryTwoStepCard() {
   const { formState } = useOryFlow();
   switch (formState.current) {
@@ -2298,6 +2456,7 @@ var en_default = {
   "two-step.webauthn.description": "Use your security key to authenticate",
   "two-step.passkey.title": "Passkey (recommended)",
   "two-step.passkey.description": "Use your device's for fingerprint or face recognition",
+  "two-step.passkey.description.error": "Could not load the necessary libraries to use your Passkey. Please try again later.",
   "two-step.totp.title": "Use your Authenticator App (TOTP)",
   "two-step.totp.description": "Use a 6-digit one-time code from your authenticator app",
   "two-step.lookup_secret.title": "Backup recovery code",
@@ -2523,12 +2682,13 @@ var de_default = {
   "registration.title": "Konto registrieren",
   "verification.registration-button": "Registrieren",
   "verification.registration-label": "Sie haben noch kein Konto?",
-  "verification.title": "Verifizieren Sie ihr Konto",
+  "verification.title": "Verifizieren Sie Ihr Konto",
   "verification.back-button": "Zur\xFCck",
   "two-step.code.description": "Ein Best\xE4tigungscode wird an Ihre E-Mail gesendet.",
   "two-step.code.title": "E-Mail-Code",
-  "two-step.passkey.description": "Verwenden Sie die Fingerabdruck- oder Gesichtserkennung Ihres Ger\xE4ts",
   "two-step.passkey.title": "Passkey (empfohlen)",
+  "two-step.passkey.description": "Verwenden Sie die Fingerabdruck- oder Gesichtserkennung Ihres Ger\xE4ts",
+  "two-step.passkey.description.error": "Konnte die erforderlichen Bibliotheken f\xFCr Passkeys nicht laden. Bitte versuchen Sie es sp\xE4ter erneut.",
   "two-step.password.description": "Geben Sie Ihr Passwort ein, das mit Ihrem Konto verkn\xFCpft ist",
   "two-step.password.title": "Passwort",
   "two-step.webauthn.title": "Sicherheitsschl\xFCssel",
@@ -2566,14 +2726,14 @@ var de_default = {
   "card.header.parts.password.login": "Ihrer {identifierLabel} und Ihrem Passwort",
   "card.header.parts.password.registration": "Ihrer {identifierLabel} und einem Passwort",
   "card.header.parts.webauthn": "ein Sicherheitsschl\xFCssel",
-  "card.header.parts.totp": "deine Authentifikator-App",
+  "card.header.parts.totp": "Ihre Authentifikator-App",
   "card.header.parts.lookup_secret": "ein Backup-Wiederherstellungscode",
   "recovery.subtitle": "Geben Sie die mit Ihrem Konto verkn\xFCpfte E-Mail-Adresse ein, um einen einmaligen Zugangscode zu erhalten",
   "verification.subtitle": "Geben Sie die mit Ihrem Konto verkn\xFCpfte E-Mail-Adresse ein, um es zu best\xE4tigen",
   "card.header.description.login": "Melden Sie sich mit {identifierLabel} an",
   "card.header.description.registration": "Registrieren Sie sich mit {identifierLabel}",
   "login.subtitle": "Melden Sie sich mit {parts} an",
-  "login.subtitle-refresh": "Best\xE4tigen Sie ihre Identit\xE4t mit {parts}",
+  "login.subtitle-refresh": "Best\xE4tigen Sie Ihre Identit\xE4t mit {parts}",
   "misc.or": "oder",
   "registration.subtitle": "Registrieren Sie sich mit {parts}",
   "forms.label.forgot-password": "Passwort vergessen?",
@@ -2826,6 +2986,7 @@ var es_default = {
   "two-step.code.title": "C\xF3digo de correo electr\xF3nico",
   "two-step.passkey.description": "Utiliza el reconocimiento de huellas dactilares o facial de tu dispositivo.",
   "two-step.passkey.title": "Clave de acceso (recomendada)",
+  "two-step.passkey.description.error": "No se pudieron cargar las bibliotecas necesarias para usar su Passkey. Por favor, int\xE9ntelo de nuevo m\xE1s tarde",
   "two-step.password.description": "Ingrese la contrase\xF1a asociada con su cuenta",
   "two-step.password.title": "Contrase\xF1a",
   "two-step.webauthn.title": "Clave de Seguridad",
@@ -3114,6 +3275,7 @@ var fr_default = {
   "two-step.code.title": "Code de courrier \xE9lectronique",
   "two-step.passkey.description": "Utilisez l'appareil pour la reconnaissance d'empreintes digitales ou de visage",
   "two-step.passkey.title": "Cl\xE9 de passe (recommand\xE9e)",
+  "two-step.passkey.description.error": "Impossible de charger les biblioth\xE8ques n\xE9cessaires pour utiliser votre Passkey. Veuillez r\xE9essayer plus tard.",
   "two-step.password.description": "Entrez votre mot de passe associ\xE9 \xE0 votre compte",
   "two-step.password.title": "Mot de passe",
   "two-step.webauthn.title": "Cl\xE9 de S\xE9curit\xE9",
@@ -3400,6 +3562,7 @@ var nl_default = {
   "two-step.code.description": "Een verificatiecode wordt naar uw e-mail gestuurd",
   "two-step.code.title": "E-mailcode",
   "two-step.passkey.description": "Gebruik de vingerafdruk- of gezichtsherkenning van uw apparaat",
+  "two-step.passkey.description.error": "De benodigde bibliotheken om uw Passkey te gebruiken konden niet worden geladen. Probeer het later opnieuw.",
   "two-step.passkey.title": "Toegangscode (aanbevolen)",
   "two-step.password.description": "Voer uw wachtwoord in dat is gekoppeld aan uw account",
   "two-step.password.title": "Wachtwoord",
@@ -3687,6 +3850,7 @@ var pl_default = {
   "two-step.code.description": "Kod weryfikacyjny zostanie wys\u0142any na Tw\xF3j adres email.",
   "two-step.code.title": "Kod email",
   "two-step.passkey.description": "U\u017Cyj swojego urz\u0105dzenia lub funkcji rozpoznawania twarzy na swoim urz\u0105dzeniu.",
+  "two-step.passkey.description.error": "Nie uda\u0142o si\u0119 za\u0142adowa\u0107 niezb\u0119dnych bibliotek do u\u017Cycia Passkey. Spr\xF3buj ponownie p\xF3\u017Aniej.",
   "two-step.passkey.title": "Klucz dost\u0119pu (zalecany)",
   "two-step.password.description": "Wprowad\u017A has\u0142o powi\u0105zane z twoim kontem",
   "two-step.password.title": "Has\u0142o",
@@ -3974,6 +4138,7 @@ var pt_default = {
   "two-step.code.description": "Um c\xF3digo de verifica\xE7\xE3o ser\xE1 enviado para o seu email",
   "two-step.code.title": "C\xF3digo de email",
   "two-step.passkey.description": "Use o seu dispositivo para reconhecimento de impress\xE3o digital ou facial.",
+  "two-step.passkey.description.error": "N\xE3o foi poss\xEDvel carregar as bibliotecas necess\xE1rias para usar o seu Passkey. Por favor, tente novamente mais tarde.",
   "two-step.passkey.title": "Chave de acesso (recomendado)",
   "two-step.password.description": "Insira a sua senha associada \xE0 sua conta",
   "two-step.password.title": "Senha",
@@ -4280,6 +4445,7 @@ var sv_default = {
   "two-step.code.title": "E-postkod",
   "two-step.passkey.description": "Anv\xE4nd din enhets fingeravtryck eller ansiktsigenk\xE4nning",
   "two-step.passkey.title": "Passerkod (rekommenderad)",
+  "two-step.passkey.description.error": "Det gick inte att ladda de n\xF6dv\xE4ndiga biblioteken f\xF6r att anv\xE4nda din Passkey. F\xF6rs\xF6k igen senare.",
   "two-step.password.description": "Ange ditt l\xF6senord kopplat till ditt konto",
   "two-step.password.title": "L\xF6senord",
   "two-step.webauthn.title": "S\xE4kerhetsnyckel",