@ory/elements-react 1.0.0-rc.3 → 1.0.0-rc.4

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+## 1.0.0-rc.4 (2025-05-15)
+
+### 🩹 Fixes
+
+- properly handle missing fields in OIDC registration ([#534](https://github.com/ory/elements/pull/534))
+- incorrect if branching in handle error ([#533](https://github.com/ory/elements/pull/533))
+- re-enable method chooser on mfa method active screens ([#530](https://github.com/ory/elements/pull/530))
+
+### ❤️ Thank You
+
+- hackerman @aeneasr
+- Jonas Hungershausen
+
 ## 1.0.0-rc.3 (2025-05-09)
 
 ### 🩹 Fixes

package/dist/index.d.mts

@@ -592,6 +592,8 @@ type FormStateAction = {
 } | {
     type: "action_select_method";
     method: UiNodeGroupEnum;
+} | {
+    type: "action_clear_active_method";
 };
 
 /**

package/dist/index.d.ts

@@ -592,6 +592,8 @@ type FormStateAction = {
 } | {
     type: "action_select_method";
     method: UiNodeGroupEnum;
+} | {
+    type: "action_clear_active_method";
 };
 
 /**

package/dist/index.js

@@ -322,9 +322,7 @@ 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", "oidc", "saml"].includes(
-        flow.flow.active
-      )) {
+      } 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);
@@ -362,14 +360,20 @@ function useFormStateReducer(flow) {
   const formStateReducer = (state, action2) => {
     switch (action2.type) {
       case "action_flow_update": {
-        if (selectedMethod)
+        if (selectedMethod) {
           return { current: "method_active", method: selectedMethod };
+        }
         return parseStateFromFlow(action2.flow);
       }
       case "action_select_method": {
         setSelectedMethod(action2.method);
         return { current: "method_active", method: action2.method };
       }
+      case "action_clear_active_method": {
+        return {
+          current: "select_method"
+        };
+      }
     }
     return state;
   };
@@ -678,6 +682,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 clientFetch.ResponseError) {
+    return true;
+  }
+  return typeof err === "object" && !!err && "name" in err && err.name === "ResponseError";
+};
+var isFetchError = (err) => {
+  return err instanceof clientFetch.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 clientFetch.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 clientFetch.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 clientFetch.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 clientFetch.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 clientFetch.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 clientFetch.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, {
@@ -699,7 +831,7 @@ async function onSubmitLogin({ flow }, config, {
     window.location.href = // eslint-disable-next-line promise/always-return
     (_a2 = flow.return_to) != null ? _a2 : config.sdk.url + "/self-service/login/browser";
   }).catch(
-    clientFetch.handleFlowError({
+    handleFlowError({
       onRestartFlow: (useFlowId) => {
         if (useFlowId) {
           replaceWindowFlowId(useFlowId);
@@ -713,7 +845,8 @@ async function onSubmitLogin({ flow }, config, {
           flowType: clientFetch.FlowType.Login
         });
       },
-      onRedirect
+      onRedirect,
+      config
     })
   );
 }
@@ -738,7 +871,7 @@ async function onSubmitRecovery({ flow }, config, {
       flowType: clientFetch.FlowType.Recovery
     });
   }).catch(
-    clientFetch.handleFlowError({
+    handleFlowError({
       onRestartFlow: (useFlowId) => {
         if (useFlowId) {
           replaceWindowFlowId(useFlowId);
@@ -757,7 +890,8 @@ async function onSubmitRecovery({ flow }, config, {
           });
         }
       },
-      onRedirect
+      onRedirect,
+      config
     })
   );
 }
@@ -792,7 +926,7 @@ async function onSubmitRegistration({ flow }, config, {
     }
     onRedirect(clientFetch.registrationUrl(config), true);
   }).catch(
-    clientFetch.handleFlowError({
+    handleFlowError({
       onRestartFlow: (useFlowId) => {
         if (useFlowId) {
           replaceWindowFlowId(useFlowId);
@@ -806,7 +940,8 @@ async function onSubmitRegistration({ flow }, config, {
           flowType: clientFetch.FlowType.Registration
         });
       },
-      onRedirect
+      onRedirect,
+      config
     })
   );
 }
@@ -831,7 +966,7 @@ async function onSubmitSettings({ flow }, config, {
       flowType: clientFetch.FlowType.Settings
     });
   }).catch(
-    clientFetch.handleFlowError({
+    handleFlowError({
       onRestartFlow: (useFlowId) => {
         if (useFlowId) {
           replaceWindowFlowId(useFlowId);
@@ -845,7 +980,8 @@ async function onSubmitSettings({ flow }, config, {
           flowType: clientFetch.FlowType.Settings
         });
       },
-      onRedirect
+      onRedirect,
+      config
     })
   ).catch((err) => {
     if (clientFetch.isResponseError(err)) {
@@ -873,7 +1009,7 @@ async function onSubmitVerification({ flow }, config, {
       flowType: clientFetch.FlowType.Verification
     })
   ).catch(
-    clientFetch.handleFlowError({
+    handleFlowError({
       onRestartFlow: (useFlowId) => {
         if (useFlowId) {
           replaceWindowFlowId(useFlowId);
@@ -887,7 +1023,8 @@ async function onSubmitVerification({ flow }, config, {
           flowType: clientFetch.FlowType.Verification
         });
       },
-      onRedirect
+      onRedirect,
+      config
     })
   );
 }
@@ -1144,7 +1281,20 @@ var NodeInput = ({
     case clientFetch.UiNodeInputAttributesTypeEnum.Submit:
     case clientFetch.UiNodeInputAttributesTypeEnum.Button:
       if (isSocial) {
-        return null;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          Node2.OidcButton,
+          {
+            node,
+            attributes: attrs,
+            onClick: () => {
+              setValue(
+                "provider",
+                node.attributes.value
+              );
+              setValue("method", node.group);
+            }
+          }
+        );
       }
       if (isResendNode || isScreenSelectionNode) {
         return null;
@@ -1234,6 +1384,37 @@ var Node = ({ node, onClick }) => {
   }
   return null;
 };
+function OryTwoStepCardStateMethodActive({
+  formState
+}) {
+  const { Form } = useComponents();
+  const { flow, flowType, dispatchFormState } = useOryFlow();
+  const { ui } = flow;
+  const nodeSorter = useNodeSorter();
+  const sortNodes = (a, b) => nodeSorter(a, b, { flowType });
+  const groupsToShow = useNodeGroupsWithVisibleNodes(ui.nodes);
+  const finalNodes = getFinalNodes(groupsToShow, formState.method);
+  return /* @__PURE__ */ jsxRuntime.jsxs(OryCard, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(OryCardHeader, {}),
+    /* @__PURE__ */ jsxRuntime.jsxs(OryCardContent, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(OryCardValidationMessages, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        OryForm,
+        {
+          "data-testid": `ory/form/methods/local`,
+          onAfterSubmit: handleAfterFormSubmit(dispatchFormState),
+          children: /* @__PURE__ */ jsxRuntime.jsxs(Form.Group, { children: [
+            ui.nodes.filter(
+              (n) => clientFetch.isUiNodeScriptAttributes(n.attributes) || n.group === clientFetch.UiNodeGroupEnum.Default || n.group === clientFetch.UiNodeGroupEnum.Profile
+            ).map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k)),
+            finalNodes.sort(sortNodes).map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k))
+          ] })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(OryCardFooter, {})
+  ] });
+}
 function OryFormOidcButtons() {
   const {
     flow: { ui }
@@ -1264,8 +1445,10 @@ function OryFormOidcButtons() {
 }
 function OryFormSocialButtonsForm() {
   const {
-    flow: { ui }
+    flow: { ui },
+    formState
   } = useOryFlow();
+  console.log(formState);
   const filteredNodes = ui.nodes.filter(
     (node) => node.group === clientFetch.UiNodeGroupEnum.Saml || node.group === clientFetch.UiNodeGroupEnum.Oidc
   );
@@ -1274,39 +1457,6 @@ function OryFormSocialButtonsForm() {
   }
   return /* @__PURE__ */ jsxRuntime.jsx(OryFormProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(OryForm, { "data-testid": `ory/form/methods/oidc-saml`, children: /* @__PURE__ */ jsxRuntime.jsx(OryFormOidcButtons, {}) }) });
 }
-function OryTwoStepCardStateMethodActive({
-  formState
-}) {
-  const { Form } = useComponents();
-  const { flow, flowType, dispatchFormState } = useOryFlow();
-  const { ui } = flow;
-  const nodeSorter = useNodeSorter();
-  const sortNodes = (a, b) => nodeSorter(a, b, { flowType });
-  const groupsToShow = useNodeGroupsWithVisibleNodes(ui.nodes);
-  const finalNodes = getFinalNodes(groupsToShow, formState.method);
-  const selectedMethodIsSocial = formState.method === clientFetch.UiNodeGroupEnum.Oidc || formState.method === clientFetch.UiNodeGroupEnum.Saml;
-  return /* @__PURE__ */ jsxRuntime.jsxs(OryCard, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(OryCardHeader, {}),
-    /* @__PURE__ */ jsxRuntime.jsxs(OryCardContent, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(OryCardValidationMessages, {}),
-      selectedMethodIsSocial && /* @__PURE__ */ jsxRuntime.jsx(OryFormSocialButtonsForm, {}),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        OryForm,
-        {
-          "data-testid": `ory/form/methods/local`,
-          onAfterSubmit: handleAfterFormSubmit(dispatchFormState),
-          children: /* @__PURE__ */ jsxRuntime.jsxs(Form.Group, { children: [
-            ui.nodes.filter(
-              (n) => clientFetch.isUiNodeScriptAttributes(n.attributes) || n.group === clientFetch.UiNodeGroupEnum.Default || n.group === clientFetch.UiNodeGroupEnum.Profile
-            ).map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k)),
-            finalNodes.sort(sortNodes).map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k))
-          ] })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(OryCardFooter, {})
-  ] });
-}
 function OryTwoStepCardStateProvideIdentifier() {
   const { Form, Card } = useComponents();
   const { flowType, flow, dispatchFormState } = useOryFlow();