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

package/dist/index.mjs

@@ -1,5 +1,5 @@
-import { UiNodeGroupEnum, isUiNodeInputAttributes, isUiNodeAnchorAttributes, isUiNodeImageAttributes, isUiNodeScriptAttributes, FlowType, getNodeId, isUiNodeTextAttributes, UiNodeInputAttributesTypeEnum, handleContinueWith, handleFlowError, settingsUrl, isResponseError, loginUrl, recoveryUrl, verificationUrl, registrationUrl, Configuration, FrontendApi, instanceOfContinueWithRecoveryUi } from '@ory/client-fetch';
-import { createContext, useContext, useState, useMemo, useReducer, useRef, useEffect } from 'react';
+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 { 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';
 import { useFormContext, useForm, FormProvider } from 'react-hook-form';
@@ -406,6 +406,110 @@ function OryFlowProvider({
     }
   );
 }
+
+// src/client/config.ts
+function isProduction() {
+  var _a, _b;
+  return ["production", "prod"].indexOf(
+    (_b = (_a = process.env.VERCEL_ENV) != null ? _a : process.env.NODE_ENV) != null ? _b : ""
+  ) > -1;
+}
+function frontendClient(sdkUrl, opts = {}) {
+  const config = new Configuration({
+    ...opts,
+    basePath: sdkUrl,
+    credentials: "include",
+    headers: {
+      Accept: "application/json",
+      ...opts.headers
+    }
+  });
+  return new FrontendApi(config);
+}
+var defaultProject = {
+  name: "Ory",
+  registration_enabled: true,
+  verification_enabled: true,
+  recovery_enabled: true,
+  recovery_ui_url: "/ui/recovery",
+  registration_ui_url: "/ui/registration",
+  verification_ui_url: "/ui/verification",
+  login_ui_url: "/ui/login",
+  settings_ui_url: "/ui/settings",
+  default_redirect_url: "/ui/welcome",
+  error_ui_url: "/ui/error",
+  default_locale: "en",
+  locale_behavior: "force_default"
+};
+function useOryConfiguration() {
+  const configCtx = useContext(OryConfigurationContext);
+  return {
+    sdk: {
+      ...configCtx.sdk,
+      frontend: frontendClient(configCtx.sdk.url, configCtx.sdk.options)
+    },
+    project: {
+      ...configCtx.project
+    }
+  };
+}
+var OryConfigurationContext = createContext({
+  sdk: computeSdkConfig({}),
+  project: defaultProject
+});
+function OryConfigurationProvider({
+  children,
+  sdk: initialConfig,
+  project
+}) {
+  const configRef = useRef({
+    sdk: computeSdkConfig(initialConfig),
+    project: {
+      ...defaultProject,
+      ...project
+    }
+  });
+  return /* @__PURE__ */ jsx(OryConfigurationContext.Provider, { value: configRef.current, children });
+}
+function computeSdkConfig(config) {
+  if ((config == null ? void 0 : config.url) && typeof config.url === "string") {
+    console.debug("Using sdk url from config");
+    return {
+      url: config.url.replace(/\/$/, ""),
+      options: config.options || {}
+    };
+  }
+  return {
+    url: getSDKUrl(),
+    options: (config == null ? void 0 : config.options) || {}
+  };
+}
+function getSDKUrl() {
+  var _a;
+  if (typeof process !== "undefined" && process.versions && process.versions.node) {
+    if (isProduction()) {
+      const sdkUrl = (_a = process.env["NEXT_PUBLIC_ORY_SDK_URL"]) != null ? _a : process.env["ORY_SDK_URL"];
+      if (!sdkUrl) {
+        throw new Error(
+          "Unable to determine SDK URL. Please set NEXT_PUBLIC_ORY_SDK_URL and/or ORY_SDK_URL in production environments."
+        );
+      }
+      return sdkUrl.replace(/\/$/, "");
+    } else {
+      if (process.env["__NEXT_PRIVATE_ORIGIN"]) {
+        return process.env["__NEXT_PRIVATE_ORIGIN"].replace(/\/$/, "");
+      } else if (process.env["VERCEL_URL"]) {
+        return `https://${process.env["VERCEL_URL"]}`.replace(/\/$/, "");
+      }
+    }
+  }
+  if (typeof window !== "undefined") {
+    return window.location.origin;
+  }
+  throw new Error(
+    "Unable to determine SDK URL. Please set NEXT_PUBLIC_ORY_SDK_URL and/or ORY_SDK_URL or supply the sdk.url parameter in the Ory configuration."
+  );
+}
 function mergeTranslations(customTranslations) {
   return Object.keys(customTranslations).reduce((acc, key) => {
     acc[key] = { ...OryLocales[key], ...customTranslations[key] };
@@ -435,17 +539,18 @@ var IntlProvider = ({
 function OryProvider({
   children,
   components: Components,
+  config,
   ...oryFlowProps
 }) {
   var _a, _b, _c;
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(OryConfigurationProvider, { sdk: config.sdk, project: config.project, children: /* @__PURE__ */ jsx(
     IntlProvider,
     {
-      locale: (_b = (_a = oryFlowProps.config.intl) == null ? void 0 : _a.locale) != null ? _b : "en",
-      customTranslations: (_c = oryFlowProps.config.intl) == null ? void 0 : _c.customTranslations,
+      locale: (_b = (_a = config.intl) == null ? void 0 : _a.locale) != null ? _b : "en",
+      customTranslations: (_c = config.intl) == null ? void 0 : _c.customTranslations,
       children: /* @__PURE__ */ jsx(OryFlowProvider, { ...oryFlowProps, children: /* @__PURE__ */ jsx(OryComponentProvider, { components: Components, children }) })
     }
-  );
+  ) });
 }
 function OryCardHeader() {
   const { Card } = useComponents();
@@ -564,18 +669,6 @@ function OryCardContent({ children }) {
   const { Card } = useComponents();
   return /* @__PURE__ */ jsx(Card.Content, { children });
 }
-function frontendClient(sdkUrl, opts = {}) {
-  const config = new Configuration({
-    ...opts,
-    basePath: sdkUrl,
-    credentials: "include",
-    headers: {
-      Accept: "application/json",
-      ...opts.headers
-    }
-  });
-  return new FrontendApi(config);
-}
 
 // src/util/internal.ts
 function replaceWindowFlowId(flow) {
@@ -585,7 +678,7 @@ function replaceWindowFlowId(flow) {
 }
 
 // src/util/onSubmitLogin.ts
-async function onSubmitLogin({ config, flow }, {
+async function onSubmitLogin({ flow }, config, {
   setFlowContainer,
   body,
   onRedirect
@@ -614,7 +707,6 @@ async function onSubmitLogin({ config, flow }, {
       },
       onValidationError: (body2) => {
         setFlowContainer({
-          config,
           flow: body2,
           flowType: FlowType.Login
         });
@@ -623,18 +715,12 @@ async function onSubmitLogin({ config, flow }, {
     })
   );
 }
-async function onSubmitRecovery({ config, flow }, {
+async function onSubmitRecovery({ flow }, config, {
   setFlowContainer,
   body,
   onRedirect
 }) {
-  var _a;
-  if (!config.sdk.url) {
-    throw new Error(
-      `Please supply your Ory Network SDK url to the Ory Elements configuration.`
-    );
-  }
-  await frontendClient(config.sdk.url, (_a = config.sdk.options) != null ? _a : {}).updateRecoveryFlowRaw({
+  await config.sdk.frontend.updateRecoveryFlowRaw({
     flow: flow.id,
     updateRecoveryFlowBody: body
   }).then(async (res) => {
@@ -647,8 +733,7 @@ async function onSubmitRecovery({ config, flow }, {
     }
     setFlowContainer({
       flow: flow2,
-      flowType: FlowType.Recovery,
-      config
+      flowType: FlowType.Recovery
     });
   }).catch(
     handleFlowError({
@@ -666,8 +751,7 @@ async function onSubmitRecovery({ config, flow }, {
         } else {
           setFlowContainer({
             flow: body2,
-            flowType: FlowType.Recovery,
-            config
+            flowType: FlowType.Recovery
           });
         }
       },
@@ -688,19 +772,12 @@ function handleContinueWithRecoveryUIError(error, config, onRedirect) {
   }
   onRedirect(recoveryUrl(config), true);
 }
-async function onSubmitRegistration({ config, flow }, {
+async function onSubmitRegistration({ flow }, config, {
   setFlowContainer,
   body,
   onRedirect
 }) {
-  var _a;
-  if (!config.sdk.url) {
-    throw new Error(
-      `Please supply your Ory Network SDK url to the Ory Elements configuration.`
-    );
-  }
-  const client = frontendClient(config.sdk.url, (_a = config.sdk.options) != null ? _a : {});
-  await client.updateRegistrationFlowRaw({
+  await config.sdk.frontend.updateRegistrationFlowRaw({
     flow: flow.id,
     updateRegistrationFlowBody: body
   }).then(async (res) => {
@@ -724,27 +801,19 @@ async function onSubmitRegistration({ config, flow }, {
       onValidationError: (body2) => {
         setFlowContainer({
           flow: body2,
-          flowType: FlowType.Registration,
-          config
+          flowType: FlowType.Registration
         });
       },
       onRedirect
     })
   );
 }
-async function onSubmitSettings({ config, flow }, {
+async function onSubmitSettings({ flow }, config, {
   setFlowContainer,
   body,
   onRedirect
 }) {
-  var _a;
-  if (!config.sdk.url) {
-    throw new Error(
-      `Please supply your Ory Network SDK url to the Ory Elements configuration.`
-    );
-  }
-  const client = frontendClient(config.sdk.url, (_a = config.sdk.options) != null ? _a : {});
-  await client.updateSettingsFlowRaw({
+  await config.sdk.frontend.updateSettingsFlowRaw({
     flow: flow.id,
     updateSettingsFlowBody: body
   }).then(async (res) => {
@@ -757,8 +826,7 @@ async function onSubmitSettings({ config, flow }, {
     }
     setFlowContainer({
       flow: body2,
-      flowType: FlowType.Settings,
-      config
+      flowType: FlowType.Settings
     });
   }).catch(
     handleFlowError({
@@ -772,8 +840,7 @@ async function onSubmitSettings({ config, flow }, {
       onValidationError: (body2) => {
         setFlowContainer({
           flow: body2,
-          flowType: FlowType.Settings,
-          config
+          flowType: FlowType.Settings
         });
       },
       onRedirect
@@ -790,25 +857,18 @@ async function onSubmitSettings({ config, flow }, {
     }
   });
 }
-async function onSubmitVerification({ config, flow }, {
+async function onSubmitVerification({ flow }, config, {
   setFlowContainer,
   body,
   onRedirect
 }) {
-  var _a;
-  if (!config.sdk.url) {
-    throw new Error(
-      `Please supply your Ory Network SDK URL to the Ory Elements configuration.`
-    );
-  }
-  await frontendClient(config.sdk.url, (_a = config.sdk.options) != null ? _a : {}).updateVerificationFlowRaw({
+  await config.sdk.frontend.updateVerificationFlowRaw({
     flow: flow.id,
     updateVerificationFlowBody: body
   }).then(
     async (res) => setFlowContainer({
       flow: await res.value(),
-      flowType: FlowType.Verification,
-      config
+      flowType: FlowType.Verification
     })
   ).catch(
     handleFlowError({
@@ -822,8 +882,7 @@ async function onSubmitVerification({ config, flow }, {
       onValidationError: (body2) => {
         setFlowContainer({
           flow: body2,
-          flowType: FlowType.Verification,
-          config
+          flowType: FlowType.Verification
         });
       },
       onRedirect
@@ -836,6 +895,7 @@ var supportsSelectAccountPrompt = ["google", "github"];
 function useOryFormSubmit(onAfterSubmit) {
   const flowContainer = useOryFlow();
   const methods = useFormContext();
+  const config = useOryConfiguration();
   const handleSuccess = (flow) => {
     flowContainer.setFlowContainer(flow);
     methods.reset(computeDefaultValues(flow.flow.ui.nodes));
@@ -852,7 +912,7 @@ function useOryFormSubmit(onAfterSubmit) {
         if (submitData.method === "code" && data.code) {
           submitData.resend = "";
         }
-        await onSubmitLogin(flowContainer, {
+        await onSubmitLogin(flowContainer, config, {
           onRedirect,
           setFlowContainer: handleSuccess,
           body: submitData
@@ -866,7 +926,7 @@ function useOryFormSubmit(onAfterSubmit) {
         if (submitData.method === "code" && submitData.code) {
           submitData.resend = "";
         }
-        await onSubmitRegistration(flowContainer, {
+        await onSubmitRegistration(flowContainer, config, {
           onRedirect,
           setFlowContainer: handleSuccess,
           body: submitData
@@ -874,7 +934,7 @@ function useOryFormSubmit(onAfterSubmit) {
         break;
       }
       case FlowType.Verification:
-        await onSubmitVerification(flowContainer, {
+        await onSubmitVerification(flowContainer, config, {
           onRedirect,
           setFlowContainer: handleSuccess,
           body: data
@@ -887,7 +947,7 @@ function useOryFormSubmit(onAfterSubmit) {
         if (data.code) {
           submitData.email = "";
         }
-        await onSubmitRecovery(flowContainer, {
+        await onSubmitRecovery(flowContainer, config, {
           onRedirect,
           setFlowContainer: handleSuccess,
           body: submitData
@@ -915,7 +975,7 @@ function useOryFormSubmit(onAfterSubmit) {
         if ("passkey_remove" in submitData) {
           submitData.method = "passkey";
         }
-        await onSubmitSettings(flowContainer, {
+        await onSubmitSettings(flowContainer, config, {
           onRedirect,
           setFlowContainer: handleSuccess,
           body: submitData
@@ -1235,7 +1295,7 @@ function OryTwoStepCardStateMethodActive({
           onAfterSubmit: handleAfterFormSubmit(dispatchFormState),
           children: /* @__PURE__ */ jsxs(Form.Group, { children: [
             ui.nodes.filter(
-              (n) => isUiNodeScriptAttributes(n.attributes) || n.group === UiNodeGroupEnum.Captcha || n.group === UiNodeGroupEnum.Default || n.group === UiNodeGroupEnum.Profile
+              (n) => isUiNodeScriptAttributes(n.attributes) || n.group === UiNodeGroupEnum.Default || n.group === UiNodeGroupEnum.Profile
             ).map((node, k) => /* @__PURE__ */ jsx(Node, { node }, k)),
             finalNodes.sort(sortNodes).map((node, k) => /* @__PURE__ */ jsx(Node, { node }, k))
           ] })
@@ -4304,6 +4364,6 @@ var OryLocales = {
   sv: sv_default
 };
 
-export { HeadlessPageHeader, OryCard, OryCardContent, OryCardFooter, OryCardHeader, OryCardValidationMessages, OryConsentCard, OryForm, OryFormGroupDivider, OryFormGroups, OryFormOidcButtons, OryFormSection, OryFormSocialButtonsForm, OryLocales, OryProvider, OrySettingsCard, OryTwoStepCard, messageTestId, uiTextToFormattedMessage, useComponents, useNodeSorter, useOryFlow };
+export { HeadlessPageHeader, OryCard, OryCardContent, OryCardFooter, OryCardHeader, OryCardValidationMessages, OryConfigurationProvider, OryConsentCard, OryForm, OryFormGroupDivider, OryFormGroups, OryFormOidcButtons, OryFormSection, OryFormSocialButtonsForm, OryLocales, OryProvider, OrySettingsCard, OryTwoStepCard, messageTestId, uiTextToFormattedMessage, useComponents, useNodeSorter, useOryConfiguration, useOryFlow };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map