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

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+## 1.0.0-rc.3 (2025-05-09)
+
+### 🩹 Fixes
+
+- captcha reloading and duplication ([#518](https://github.com/ory/elements/pull/518))
+- ⚠️  rework configuration management ([#515](https://github.com/ory/elements/pull/515))
+- add missing testids to method selector and checkbox ([#517](https://github.com/ory/elements/pull/517))
+
+### ⚠️  Breaking Changes
+
+- ⚠️  rework configuration management ([#515](https://github.com/ory/elements/pull/515))
+
+### ❤️ Thank You
+
+- hackerman @aeneasr
+- Jonas Hungershausen
+
 ## 1.0.0-rc.2 (2025-04-30)
 
 ### 🚀 Features

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import { UiNodeInputAttributes, UiNode, UiNodeAnchorAttributes, UiNodeTextAttributes, UiNodeImageAttributes, UiNodeGroupEnum, UiText, ConfigurationParameters, AccountExperienceConfiguration, FlowType, LoginFlow, RegistrationFlow, RecoveryFlow, VerificationFlow, SettingsFlow, UiContainer, OAuth2ConsentRequest, Session, FlowError, UpdateLoginFlowBody, UpdateRegistrationFlowBody, UpdateVerificationFlowBody, UpdateRecoveryFlowBody, UpdateSettingsFlowBody, OnRedirectHandler } from '@ory/client-fetch';
+import { UiNodeInputAttributes, UiNode, UiNodeAnchorAttributes, UiNodeTextAttributes, UiNodeImageAttributes, UiNodeGroupEnum, UiText, FlowType, LoginFlow, RegistrationFlow, RecoveryFlow, VerificationFlow, SettingsFlow, UiContainer, OAuth2ConsentRequest, Session, FlowError, ConfigurationParameters, AccountExperienceConfiguration, UpdateLoginFlowBody, UpdateRegistrationFlowBody, UpdateVerificationFlowBody, UpdateRecoveryFlowBody, UpdateSettingsFlowBody, OnRedirectHandler, FrontendApi } from '@ory/client-fetch';
 import { ComponentPropsWithoutRef, FormEventHandler, MouseEventHandler, PropsWithChildren, DetailedHTMLProps, HTMLAttributes, ComponentType, Dispatch } from 'react';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
@@ -384,71 +384,6 @@ declare function useNodeSorter(): (a: UiNode, b: UiNode, ctx: {
     flowType: string;
 }) => number;
 
-type LocaleMap = Record<string, Record<string, string>>;
-declare const OryLocales: LocaleMap;
-
-type Locale = keyof typeof OryLocales;
-type IntlContextProps = {
-    locale: Locale;
-    customTranslations?: Partial<LocaleMap>;
-};
-
-type IntlConfig = IntlContextProps;
-/**
- * The configuration for Ory Elements.
- *
- * This configuration is used to customize the behavior and appearance of Ory Elements.
- *
- * By setting UI urls, you can override the default URLs for the login, registration, recovery, and verification flows.
- *
- * You can also set the name of the application, the logo URL, and the SDK configuration.
- * By default, the name and logo are displayed in the card's header.
- */
-type OryClientConfiguration = {
-    /**
-     * An optional logo URL to display in the UI instead of the name.
-     * @deprecated Use `project.logo_light_url` instead.
-     */
-    logoUrl?: string;
-    /**
-     * The SDK configuration.
-     * This configuration is used to set the URL of the Ory SDK and any additional options used for the SDK client.
-     */
-    sdk: {
-        url: string;
-        options?: Partial<ConfigurationParameters>;
-    };
-    /**
-     * The internationalization configuration.
-     * This configuration is used to set the locale and any additional options used for the i18n library.
-     * The locale is used to determine the language of the UI.
-     * The default locale is "en".
-     */
-    intl?: IntlConfig;
-} & ({
-    /**
-     * The name of the application the user is logging in to.
-     * @deprecated Use `project.name` instead.
-     */
-    name: string;
-    /**
-     * The configuration for the project.
-     */
-    project: Omit<AccountExperienceConfiguration, "name"> & {
-        name?: string;
-    };
-} | {
-    /**
-     * The name of the application the user is logging in to.
-     * @deprecated Use `project.name` instead.
-     */
-    name?: string;
-    /**
-     * The configuration for the project.
-     */
-    project: AccountExperienceConfiguration;
-});
-
 /**
  * A generic flow container, containing a flowType, the flow itself and the config object
  *
@@ -457,7 +392,6 @@ type OryClientConfiguration = {
 type OryFlow<TFlowType extends FlowType, TFlow> = {
     flowType: TFlowType;
     flow: TFlow;
-    config: OryClientConfiguration;
 };
 /**
  * A flow container for the login flow
@@ -521,6 +455,48 @@ type ConsentFlowContainer = OryFlow<FlowType.OAuth2Consent, ConsentFlow>;
  */
 type OryFlowContainer = LoginFlowContainer | RegistrationFlowContainer | RecoveryFlowContainer | VerificationFlowContainer | SettingsFlowContainer | ConsentFlowContainer;
 
+type LocaleMap = Record<string, Record<string, string>>;
+declare const OryLocales: LocaleMap;
+
+type Locale = keyof typeof OryLocales;
+type IntlContextProps = {
+    locale: Locale;
+    customTranslations?: Partial<LocaleMap>;
+};
+
+type IntlConfig = IntlContextProps;
+/**
+ * The configuration for Ory Elements.
+ *
+ * This configuration is used to customize the behavior and appearance of Ory Elements.
+ *
+ * By setting UI urls, you can override the default URLs for the login, registration, recovery, and verification flows.
+ *
+ * You can also set the name of the application, the logo URL, and the SDK configuration.
+ * By default, the name and logo are displayed in the card's header.
+ */
+type OryClientConfiguration = {
+    /**
+     * The SDK configuration.
+     * This configuration is used to set the URL of the Ory SDK and any additional options used for the SDK client.
+     */
+    sdk?: {
+        url?: string;
+        options?: Partial<ConfigurationParameters>;
+    };
+    /**
+     * The internationalization configuration.
+     * This configuration is used to set the locale and any additional options used for the i18n library.
+     * The locale is used to determine the language of the UI.
+     * The default locale is "en".
+     */
+    intl?: IntlConfig;
+    /**
+     * The configuration for the project.
+     */
+    project: AccountExperienceConfiguration;
+};
+
 /**
  * Converts a UiText to a FormattedMessage.
  * The UiText contains the id of the message and the context.
@@ -649,7 +625,33 @@ type FlowContextValue = OryFlowContainer & {
 
 type OryProviderProps = {
     components: OryFlowComponents;
+    config: OryClientConfiguration;
 } & OryFlowContainer & PropsWithChildren;
-declare function OryProvider({ children, components: Components, ...oryFlowProps }: OryProviderProps): react_jsx_runtime.JSX.Element;
+declare function OryProvider({ children, components: Components, config, ...oryFlowProps }: OryProviderProps): react_jsx_runtime.JSX.Element;
+
+type OryElementsConfiguration = {
+    sdk: OrySDK;
+    project: AccountExperienceConfiguration;
+};
+declare function useOryConfiguration(): OryElementsConfiguration;
+type OrySDK = SDKConfig & {
+    /**
+     * The frontend client for the Ory SDK.
+     * This client is used to interact with the Ory SDK and should be used to make API calls.
+     */
+    frontend: FrontendApi;
+};
+type SDKConfig = {
+    /**
+     * The URL of the Ory SDK.
+     * This URL is used to connect to the Ory SDK and should be set to the base URL of your Ory instance.
+     */
+    url: string;
+    options?: Partial<ConfigurationParameters>;
+};
+declare function OryConfigurationProvider({ children, sdk: initialConfig, project, }: PropsWithChildren<{
+    sdk?: Partial<OryClientConfiguration["sdk"]>;
+    project?: Partial<AccountExperienceConfiguration>;
+}>): react_jsx_runtime.JSX.Element;
 
-export { type ConsentFlow, type ConsentFlowContainer, type ErrorFlowContainer, type FlowContainerSetter, type FlowContextValue, type FormState, type FormStateAction, type FormStateMethodActive, type FormStateProvideIdentifier, type FormStateSelectMethod, type FormValues, HeadlessPageHeader, type IntlConfig, type LoginFlowContainer, type OnSubmitHandlerProps, OryCard, type OryCardAuthMethodListItemProps, OryCardContent, type OryCardContentProps, type OryCardDividerProps, OryCardFooter, type OryCardFooterProps, OryCardHeader, type OryCardHeaderProps, type OryCardLogoProps, type OryCardRootProps as OryCardProps, type OryCardSettingsSectionProps, OryCardValidationMessages, type OryClientConfiguration, OryConsentCard, type OryFlowComponentOverrides, type OryFlowComponents, type OryFlowContainer, OryForm, OryFormGroupDivider, type OryFormGroupProps, OryFormGroups, type OryFormGroupsProps, OryFormOidcButtons, type OryFormOidcRootProps, type OryFormProps, type OryFormRootProps, OryFormSection, type OryFormSectionContentProps, type OryFormSectionFooterProps, type OryFormSectionProps, OryFormSocialButtonsForm, OryLocales, type OryMessageContentProps, type OryMessageRootProps, type OryNodeAnchorProps, type OryNodeButtonProps, type OryNodeCaptchaProps, type OryNodeConsentScopeCheckboxProps, type OryNodeImageProps, type OryNodeInputProps, type OryNodeLabelProps, type OryNodeOidcButtonProps, type OryNodeTextProps, type OryPageHeaderProps, OryProvider, type OryProviderProps, OrySettingsCard, type OrySettingsOidcProps, type OrySettingsPasskeyProps, type OrySettingsRecoveryCodesProps, type OrySettingsTotpProps, type OrySettingsWebauthnProps, OryTwoStepCard, type RecoveryFlowContainer, type RegistrationFlowContainer, type SettingsFlowContainer, type VerificationFlowContainer, messageTestId, uiTextToFormattedMessage, useComponents, useNodeSorter, useOryFlow };
+export { type ConsentFlow, type ConsentFlowContainer, type ErrorFlowContainer, type FlowContainerSetter, type FlowContextValue, type FormState, type FormStateAction, type FormStateMethodActive, type FormStateProvideIdentifier, type FormStateSelectMethod, type FormValues, HeadlessPageHeader, type IntlConfig, type LoginFlowContainer, type OnSubmitHandlerProps, OryCard, type OryCardAuthMethodListItemProps, OryCardContent, type OryCardContentProps, type OryCardDividerProps, OryCardFooter, type OryCardFooterProps, OryCardHeader, type OryCardHeaderProps, type OryCardLogoProps, type OryCardRootProps as OryCardProps, type OryCardSettingsSectionProps, OryCardValidationMessages, type OryClientConfiguration, OryConfigurationProvider, OryConsentCard, type OryElementsConfiguration, type OryFlowComponentOverrides, type OryFlowComponents, type OryFlowContainer, OryForm, OryFormGroupDivider, type OryFormGroupProps, OryFormGroups, type OryFormGroupsProps, OryFormOidcButtons, type OryFormOidcRootProps, type OryFormProps, type OryFormRootProps, OryFormSection, type OryFormSectionContentProps, type OryFormSectionFooterProps, type OryFormSectionProps, OryFormSocialButtonsForm, OryLocales, type OryMessageContentProps, type OryMessageRootProps, type OryNodeAnchorProps, type OryNodeButtonProps, type OryNodeCaptchaProps, type OryNodeConsentScopeCheckboxProps, type OryNodeImageProps, type OryNodeInputProps, type OryNodeLabelProps, type OryNodeOidcButtonProps, type OryNodeTextProps, type OryPageHeaderProps, OryProvider, type OryProviderProps, OrySettingsCard, type OrySettingsOidcProps, type OrySettingsPasskeyProps, type OrySettingsRecoveryCodesProps, type OrySettingsTotpProps, type OrySettingsWebauthnProps, OryTwoStepCard, type RecoveryFlowContainer, type RegistrationFlowContainer, type SettingsFlowContainer, type VerificationFlowContainer, messageTestId, uiTextToFormattedMessage, useComponents, useNodeSorter, useOryConfiguration, useOryFlow };

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { UiNodeInputAttributes, UiNode, UiNodeAnchorAttributes, UiNodeTextAttributes, UiNodeImageAttributes, UiNodeGroupEnum, UiText, ConfigurationParameters, AccountExperienceConfiguration, FlowType, LoginFlow, RegistrationFlow, RecoveryFlow, VerificationFlow, SettingsFlow, UiContainer, OAuth2ConsentRequest, Session, FlowError, UpdateLoginFlowBody, UpdateRegistrationFlowBody, UpdateVerificationFlowBody, UpdateRecoveryFlowBody, UpdateSettingsFlowBody, OnRedirectHandler } from '@ory/client-fetch';
+import { UiNodeInputAttributes, UiNode, UiNodeAnchorAttributes, UiNodeTextAttributes, UiNodeImageAttributes, UiNodeGroupEnum, UiText, FlowType, LoginFlow, RegistrationFlow, RecoveryFlow, VerificationFlow, SettingsFlow, UiContainer, OAuth2ConsentRequest, Session, FlowError, ConfigurationParameters, AccountExperienceConfiguration, UpdateLoginFlowBody, UpdateRegistrationFlowBody, UpdateVerificationFlowBody, UpdateRecoveryFlowBody, UpdateSettingsFlowBody, OnRedirectHandler, FrontendApi } from '@ory/client-fetch';
 import { ComponentPropsWithoutRef, FormEventHandler, MouseEventHandler, PropsWithChildren, DetailedHTMLProps, HTMLAttributes, ComponentType, Dispatch } from 'react';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
@@ -384,71 +384,6 @@ declare function useNodeSorter(): (a: UiNode, b: UiNode, ctx: {
     flowType: string;
 }) => number;
 
-type LocaleMap = Record<string, Record<string, string>>;
-declare const OryLocales: LocaleMap;
-
-type Locale = keyof typeof OryLocales;
-type IntlContextProps = {
-    locale: Locale;
-    customTranslations?: Partial<LocaleMap>;
-};
-
-type IntlConfig = IntlContextProps;
-/**
- * The configuration for Ory Elements.
- *
- * This configuration is used to customize the behavior and appearance of Ory Elements.
- *
- * By setting UI urls, you can override the default URLs for the login, registration, recovery, and verification flows.
- *
- * You can also set the name of the application, the logo URL, and the SDK configuration.
- * By default, the name and logo are displayed in the card's header.
- */
-type OryClientConfiguration = {
-    /**
-     * An optional logo URL to display in the UI instead of the name.
-     * @deprecated Use `project.logo_light_url` instead.
-     */
-    logoUrl?: string;
-    /**
-     * The SDK configuration.
-     * This configuration is used to set the URL of the Ory SDK and any additional options used for the SDK client.
-     */
-    sdk: {
-        url: string;
-        options?: Partial<ConfigurationParameters>;
-    };
-    /**
-     * The internationalization configuration.
-     * This configuration is used to set the locale and any additional options used for the i18n library.
-     * The locale is used to determine the language of the UI.
-     * The default locale is "en".
-     */
-    intl?: IntlConfig;
-} & ({
-    /**
-     * The name of the application the user is logging in to.
-     * @deprecated Use `project.name` instead.
-     */
-    name: string;
-    /**
-     * The configuration for the project.
-     */
-    project: Omit<AccountExperienceConfiguration, "name"> & {
-        name?: string;
-    };
-} | {
-    /**
-     * The name of the application the user is logging in to.
-     * @deprecated Use `project.name` instead.
-     */
-    name?: string;
-    /**
-     * The configuration for the project.
-     */
-    project: AccountExperienceConfiguration;
-});
-
 /**
  * A generic flow container, containing a flowType, the flow itself and the config object
  *
@@ -457,7 +392,6 @@ type OryClientConfiguration = {
 type OryFlow<TFlowType extends FlowType, TFlow> = {
     flowType: TFlowType;
     flow: TFlow;
-    config: OryClientConfiguration;
 };
 /**
  * A flow container for the login flow
@@ -521,6 +455,48 @@ type ConsentFlowContainer = OryFlow<FlowType.OAuth2Consent, ConsentFlow>;
  */
 type OryFlowContainer = LoginFlowContainer | RegistrationFlowContainer | RecoveryFlowContainer | VerificationFlowContainer | SettingsFlowContainer | ConsentFlowContainer;
 
+type LocaleMap = Record<string, Record<string, string>>;
+declare const OryLocales: LocaleMap;
+
+type Locale = keyof typeof OryLocales;
+type IntlContextProps = {
+    locale: Locale;
+    customTranslations?: Partial<LocaleMap>;
+};
+
+type IntlConfig = IntlContextProps;
+/**
+ * The configuration for Ory Elements.
+ *
+ * This configuration is used to customize the behavior and appearance of Ory Elements.
+ *
+ * By setting UI urls, you can override the default URLs for the login, registration, recovery, and verification flows.
+ *
+ * You can also set the name of the application, the logo URL, and the SDK configuration.
+ * By default, the name and logo are displayed in the card's header.
+ */
+type OryClientConfiguration = {
+    /**
+     * The SDK configuration.
+     * This configuration is used to set the URL of the Ory SDK and any additional options used for the SDK client.
+     */
+    sdk?: {
+        url?: string;
+        options?: Partial<ConfigurationParameters>;
+    };
+    /**
+     * The internationalization configuration.
+     * This configuration is used to set the locale and any additional options used for the i18n library.
+     * The locale is used to determine the language of the UI.
+     * The default locale is "en".
+     */
+    intl?: IntlConfig;
+    /**
+     * The configuration for the project.
+     */
+    project: AccountExperienceConfiguration;
+};
+
 /**
  * Converts a UiText to a FormattedMessage.
  * The UiText contains the id of the message and the context.
@@ -649,7 +625,33 @@ type FlowContextValue = OryFlowContainer & {
 
 type OryProviderProps = {
     components: OryFlowComponents;
+    config: OryClientConfiguration;
 } & OryFlowContainer & PropsWithChildren;
-declare function OryProvider({ children, components: Components, ...oryFlowProps }: OryProviderProps): react_jsx_runtime.JSX.Element;
+declare function OryProvider({ children, components: Components, config, ...oryFlowProps }: OryProviderProps): react_jsx_runtime.JSX.Element;
+
+type OryElementsConfiguration = {
+    sdk: OrySDK;
+    project: AccountExperienceConfiguration;
+};
+declare function useOryConfiguration(): OryElementsConfiguration;
+type OrySDK = SDKConfig & {
+    /**
+     * The frontend client for the Ory SDK.
+     * This client is used to interact with the Ory SDK and should be used to make API calls.
+     */
+    frontend: FrontendApi;
+};
+type SDKConfig = {
+    /**
+     * The URL of the Ory SDK.
+     * This URL is used to connect to the Ory SDK and should be set to the base URL of your Ory instance.
+     */
+    url: string;
+    options?: Partial<ConfigurationParameters>;
+};
+declare function OryConfigurationProvider({ children, sdk: initialConfig, project, }: PropsWithChildren<{
+    sdk?: Partial<OryClientConfiguration["sdk"]>;
+    project?: Partial<AccountExperienceConfiguration>;
+}>): react_jsx_runtime.JSX.Element;
 
-export { type ConsentFlow, type ConsentFlowContainer, type ErrorFlowContainer, type FlowContainerSetter, type FlowContextValue, type FormState, type FormStateAction, type FormStateMethodActive, type FormStateProvideIdentifier, type FormStateSelectMethod, type FormValues, HeadlessPageHeader, type IntlConfig, type LoginFlowContainer, type OnSubmitHandlerProps, OryCard, type OryCardAuthMethodListItemProps, OryCardContent, type OryCardContentProps, type OryCardDividerProps, OryCardFooter, type OryCardFooterProps, OryCardHeader, type OryCardHeaderProps, type OryCardLogoProps, type OryCardRootProps as OryCardProps, type OryCardSettingsSectionProps, OryCardValidationMessages, type OryClientConfiguration, OryConsentCard, type OryFlowComponentOverrides, type OryFlowComponents, type OryFlowContainer, OryForm, OryFormGroupDivider, type OryFormGroupProps, OryFormGroups, type OryFormGroupsProps, OryFormOidcButtons, type OryFormOidcRootProps, type OryFormProps, type OryFormRootProps, OryFormSection, type OryFormSectionContentProps, type OryFormSectionFooterProps, type OryFormSectionProps, OryFormSocialButtonsForm, OryLocales, type OryMessageContentProps, type OryMessageRootProps, type OryNodeAnchorProps, type OryNodeButtonProps, type OryNodeCaptchaProps, type OryNodeConsentScopeCheckboxProps, type OryNodeImageProps, type OryNodeInputProps, type OryNodeLabelProps, type OryNodeOidcButtonProps, type OryNodeTextProps, type OryPageHeaderProps, OryProvider, type OryProviderProps, OrySettingsCard, type OrySettingsOidcProps, type OrySettingsPasskeyProps, type OrySettingsRecoveryCodesProps, type OrySettingsTotpProps, type OrySettingsWebauthnProps, OryTwoStepCard, type RecoveryFlowContainer, type RegistrationFlowContainer, type SettingsFlowContainer, type VerificationFlowContainer, messageTestId, uiTextToFormattedMessage, useComponents, useNodeSorter, useOryFlow };
+export { type ConsentFlow, type ConsentFlowContainer, type ErrorFlowContainer, type FlowContainerSetter, type FlowContextValue, type FormState, type FormStateAction, type FormStateMethodActive, type FormStateProvideIdentifier, type FormStateSelectMethod, type FormValues, HeadlessPageHeader, type IntlConfig, type LoginFlowContainer, type OnSubmitHandlerProps, OryCard, type OryCardAuthMethodListItemProps, OryCardContent, type OryCardContentProps, type OryCardDividerProps, OryCardFooter, type OryCardFooterProps, OryCardHeader, type OryCardHeaderProps, type OryCardLogoProps, type OryCardRootProps as OryCardProps, type OryCardSettingsSectionProps, OryCardValidationMessages, type OryClientConfiguration, OryConfigurationProvider, OryConsentCard, type OryElementsConfiguration, type OryFlowComponentOverrides, type OryFlowComponents, type OryFlowContainer, OryForm, OryFormGroupDivider, type OryFormGroupProps, OryFormGroups, type OryFormGroupsProps, OryFormOidcButtons, type OryFormOidcRootProps, type OryFormProps, type OryFormRootProps, OryFormSection, type OryFormSectionContentProps, type OryFormSectionFooterProps, type OryFormSectionProps, OryFormSocialButtonsForm, OryLocales, type OryMessageContentProps, type OryMessageRootProps, type OryNodeAnchorProps, type OryNodeButtonProps, type OryNodeCaptchaProps, type OryNodeConsentScopeCheckboxProps, type OryNodeImageProps, type OryNodeInputProps, type OryNodeLabelProps, type OryNodeOidcButtonProps, type OryNodeTextProps, type OryPageHeaderProps, OryProvider, type OryProviderProps, OrySettingsCard, type OrySettingsOidcProps, type OrySettingsPasskeyProps, type OrySettingsRecoveryCodesProps, type OrySettingsTotpProps, type OrySettingsWebauthnProps, OryTwoStepCard, type RecoveryFlowContainer, type RegistrationFlowContainer, type SettingsFlowContainer, type VerificationFlowContainer, messageTestId, uiTextToFormattedMessage, useComponents, useNodeSorter, useOryConfiguration, useOryFlow };