Advisory: ory elements‐react upgrade guide to v1.0.0‐next.11

Changelog

Breaking Changes

• Renamed all Headless* types and components to Ory* equivalents to better align with naming conventions:

  • HeadlessButtonProps ➔ OryNodeButtonProps
  • HeadlessInputProps ➔ OryNodeInputProps
  • HeadlessImageProps ➔ OryNodeImageProps
  • HeadlessLabelProps ➔ OryNodeLabelProps
  • HeadlessTextProps ➔ OryNodeTextProps
  • HeadlessLinkButtonProps ➔ OryNodeAnchorProps
  • HeadlessMessageProps ➔ OryMessageContentProps
  • HeadlessMessagesProps ➔ OryMessageRootProps
  • HeadlessFormProps ➔ OryFormRootProps
  • HeadlessGroupProps ➔ OryFormGroupsProps
  • HeadlessGroupContainerProps ➔ OryFormGroupProps
  • HeadlessCurrentIdentifierProps ➔ OryCurrentIdentifierProps
  • HorizontalDividerProps ➔ OryCardDividerProps
  • HeadlessAuthMethodListItemProps ➔ OryCardAuthMethodListItemProps
  • HeadlessSocialButtonProps ➔ OryNodeOidcButtonProps
  • HeadlessSocialButtonContainerProps ➔ OryFormOidcRootProps
  • HeadlessSocialButtonsProps ➔ OryFormOidcButtonsProps

• Removed the following functions and types:

  • Functions:
    • onSubmitLogin
    • onSubmitRegistration
    • onSubmitRecovery
    • onSubmitSettings
    • onSubmitVerification
    • formatMessage
    • formElementId
    • formLabelId
    • isCustomTranslations
  • Types:
    • FlowContainer
    • IntlProvider
    • IntlProviderProps
    • CustomLanguageFormats
    • CustomTranslations
    • LanguageCodes
    • TranslationFile
    • ProviderProps
    • OryComponentProvider
    • OryFlowProvider
    • OryFlowProviderProps
    • OryFormComponents
    • OryCardComponents

• Modified types and components:

  • OryFlowComponents structure has been updated to accommodate the new naming conventions and component hierarchy.
  • FlowContainerSetter and FlowContextValue now expect OryFlowContainer instead of FlowContainer.
  • Removed the need of providing your own IntlProvider, simplifying custom translation management.

Migration Guide

To upgrade to this version, please make the following changes in your codebase:

1. Update Type and Component Names:

   • Replace all Headless* prefixes with Ory* in your imports and code.
   • Update component and type names according to the renaming list provided above.

2. Adjust Function Usage:

   • Remove any usage of the deprecated onSubmit* functions (onSubmitLogin, onSubmitRegistration, etc.). Implement your own submission handlers as needed.

3. Internationalization Updates:

   • Replace IntlProvider and IntlProviderProps with OryIntlProviderProps.
   • Adjust any custom translation implementations accordingly.

4. Component Provider Changes:

   • Remove OryComponentProvider, OryFlowProvider, and OryFlowProviderProps from your code. Their functionalities are now integrated into other components or no longer necessary.

5. Type Adjustments:

   • Replace any usage of FlowContainer with the specific flow container types like LoginFlowContainer, RegistrationFlowContainer, etc.
   • Update any references to removed types such as CustomLanguageFormats, CustomTranslations, LanguageCodes, and TranslationFile.

6. Review Component Structures:

   • Check the updated OryFlowComponents to understand the new component hierarchy and adjust your custom components if you have any overrides or extensions.

7. Easier custom translation handling

   • Instead of wrapping Ory Components with an IntlProvider, please provide your custom translations and i18n settings via the new intl object in the OryClientConfiguration passed to each flow component.

8. Alignment of the default theme stylesheet

   • Fixed the import path for the default theme stylesheet. To update, please adjust the import path from @ory/elements-react/theme/styles.css to @ory/elements-react/theme/styles.css

By addressing these changes, your application should be compatible with the latest version of @ory/elements-react.