@ory/elements-react 1.0.0-pr.5494d7c2 → 1.0.0-pr.97a7df82

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';
@@ -320,6 +320,8 @@ 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)) {
@@ -328,8 +330,6 @@ function parseStateFromFlow(flow) {
           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 +680,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 +843,8 @@ async function onSubmitLogin({ flow }, config, {
           flowType: FlowType.Login
         });
       },
-      onRedirect
+      onRedirect,
+      config
     })
   );
 }
@@ -759,7 +888,8 @@ async function onSubmitRecovery({ flow }, config, {
           });
         }
       },
-      onRedirect
+      onRedirect,
+      config
     })
   );
 }
@@ -808,7 +938,8 @@ async function onSubmitRegistration({ flow }, config, {
           flowType: FlowType.Registration
         });
       },
-      onRedirect
+      onRedirect,
+      config
     })
   );
 }
@@ -847,10 +978,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 +1012,7 @@ async function onSubmitVerification({ flow }, config, {
         if (useFlowId) {
           replaceWindowFlowId(useFlowId);
         } else {
-          onRedirect(verificationUrl(config), true);
+          onRedirect(verificationUrl$1(config), true);
         }
       },
       onValidationError: (body2) => {
@@ -889,7 +1021,8 @@ async function onSubmitVerification({ flow }, config, {
           flowType: FlowType.Verification
         });
       },
-      onRedirect
+      onRedirect,
+      config
     })
   );
 }