Skip to main content

OryFlowComponents

type OryFlowComponents = {
  Card: {
     AuthMethodListContainer: ComponentType<PropsWithChildren>;
     AuthMethodListItem: ComponentType<OryCardAuthMethodListItemProps>;
     Content: ComponentType<OryCardContentProps>;
     Divider: ComponentType<OryCardDividerProps>;
     Footer: ComponentType<OryCardFooterProps>;
     Header: ComponentType<OryCardProps>;
     Logo: ComponentType<OryCardLogoProps>;
     Root: ComponentType<OryCardProps>;
     SettingsSection: ComponentType<OryCardSettingsSectionProps>;
     SettingsSectionContent: ComponentType<OryFormSectionContentProps>;
     SettingsSectionFooter: ComponentType<OryFormSectionFooterProps>;
  };
  Form: {
     Group: ComponentType<OryFormGroupProps>;
     PasskeySettings: ComponentType<OrySettingsPasskeyProps>;
     RecoveryCodesSettings: ComponentType<OrySettingsRecoveryCodesProps>;
     Root: ComponentType<OryFormRootProps>;
     SsoRoot: ComponentType<OryFormSsoRootProps>;
     SsoSettings: ComponentType<OrySettingsSsoProps>;
     TotpSettings: ComponentType<OrySettingsTotpProps>;
     WebauthnSettings: ComponentType<OrySettingsWebauthnProps>;
  };
  Message: {
     Content: ComponentType<OryMessageContentProps>;
     Root: ComponentType<OryMessageRootProps>;
     Toast: ComponentType<OryToastProps>;
  };
  Node: {
     Anchor: ComponentType<OryNodeAnchorProps>;
     Button: ComponentType<OryNodeButtonProps>;
     Captcha: ComponentType<OryNodeCaptchaProps>;
     Checkbox: ComponentType<OryNodeInputProps>;
     CodeInput: ComponentType<OryNodeInputProps>;
     ConsentScopeCheckbox: ComponentType<OryNodeConsentScopeCheckboxProps>;
     Image: ComponentType<OryNodeImageProps>;
     Input: ComponentType<OryNodeInputProps>;
     Label: ComponentType<OryNodeLabelProps>;
     SsoButton: ComponentType<OryNodeSsoButtonProps>;
     Text: ComponentType<OryNodeTextProps>;
  };
  Page: {
     Header: ComponentType<OryPageHeaderProps>;
  };
};

A record of all the components that are used in the OryForm component.

Properties​

Card​

Card: {
  AuthMethodListContainer: ComponentType<PropsWithChildren>;
  AuthMethodListItem: ComponentType<OryCardAuthMethodListItemProps>;
  Content: ComponentType<OryCardContentProps>;
  Divider: ComponentType<OryCardDividerProps>;
  Footer: ComponentType<OryCardFooterProps>;
  Header: ComponentType<OryCardProps>;
  Logo: ComponentType<OryCardLogoProps>;
  Root: ComponentType<OryCardProps>;
  SettingsSection: ComponentType<OryCardSettingsSectionProps>;
  SettingsSectionContent: ComponentType<OryFormSectionContentProps>;
  SettingsSectionFooter: ComponentType<OryFormSectionFooterProps>;
};
NameTypeDescription
AuthMethodListContainerComponentType<PropsWithChildren>The AuthMethodListContainer component is rendered around the "method" chooser step in the identifier_first login flow. This is only used, if login is configured to use identifier_first authentication.
AuthMethodListItemComponentType<OryCardAuthMethodListItemProps>The AuthMethodListItem component is rendered on the "method" chooser step in the identifier_first login flow. This is only used, if login is configured to use identifier_first authentication.
ContentComponentType<OryCardContentProps>The card content is the main content of the card container.
DividerComponentType<OryCardDividerProps>The HorizontalDivider component is rendered between groups.
FooterComponentType<OryCardFooterProps>The card footer is the footer of the card container.
HeaderComponentType<OryCardProps>The card header is the header of the card container.
LogoComponentType<OryCardLogoProps>The card logo is the logo of the card container.
RootComponentType<OryCardProps>The card container is the main container of the card.
SettingsSectionComponentType<OryCardSettingsSectionProps>The SettingsSection component is rendered around each section of the settings.
SettingsSectionContentComponentType<OryFormSectionContentProps>The SettingsSectionContent component is rendered around the content of each section of the settings.
SettingsSectionFooterComponentType<OryFormSectionFooterProps>The SettingsSectionFooter component is rendered around the footer of each section of the settings.

Form​

Form: {
  Group: ComponentType<OryFormGroupProps>;
  PasskeySettings: ComponentType<OrySettingsPasskeyProps>;
  RecoveryCodesSettings: ComponentType<OrySettingsRecoveryCodesProps>;
  Root: ComponentType<OryFormRootProps>;
  SsoRoot: ComponentType<OryFormSsoRootProps>;
  SsoSettings: ComponentType<OrySettingsSsoProps>;
  TotpSettings: ComponentType<OrySettingsTotpProps>;
  WebauthnSettings: ComponentType<OrySettingsWebauthnProps>;
};
NameTypeDescription
GroupComponentType<OryFormGroupProps>The FormGroup is rendered around each group of nodes in the UI nodes.
PasskeySettingsComponentType<OrySettingsPasskeyProps>The section on the settings page, rendering the Passkey settings
RecoveryCodesSettingsComponentType<OrySettingsRecoveryCodesProps>The section on the settings page, rendering the recovery code settings
RootComponentType<OryFormRootProps>The FormContainer component is the main container of the form. It should render its children. You most likely don't want to override this component directly.
SsoRootComponentType<OryFormSsoRootProps>A special form group container for the social buttons. This is required, because the social buttons need to be in its form, to not influence the other form groups. You most likely don't want to override this component directly.
SsoSettingsComponentType<OrySettingsSsoProps>The section on the settings page, rendering the OIDC settings
TotpSettingsComponentType<OrySettingsTotpProps>The section on the settings page, rendering the TOTP settings
WebauthnSettingsComponentType<OrySettingsWebauthnProps>The section on the settings page, rendering the Webauthn settings

Message​

Message: {
  Content: ComponentType<OryMessageContentProps>;
  Root: ComponentType<OryMessageRootProps>;
  Toast: ComponentType<OryToastProps>;
};
NameTypeDescription
ContentComponentType<OryMessageContentProps>The Message component is rendered whenever a message is encountered.
RootComponentType<OryMessageRootProps>The MessageContainer is rendered around the messages.
ToastComponentType<OryToastProps>The Toast component is rendered for toast messages. Currently only used in the settings page to display messages.

Node​

Node: {
  Anchor: ComponentType<OryNodeAnchorProps>;
  Button: ComponentType<OryNodeButtonProps>;
  Captcha: ComponentType<OryNodeCaptchaProps>;
  Checkbox: ComponentType<OryNodeInputProps>;
  CodeInput: ComponentType<OryNodeInputProps>;
  ConsentScopeCheckbox: ComponentType<OryNodeConsentScopeCheckboxProps>;
  Image: ComponentType<OryNodeImageProps>;
  Input: ComponentType<OryNodeInputProps>;
  Label: ComponentType<OryNodeLabelProps>;
  SsoButton: ComponentType<OryNodeSsoButtonProps>;
  Text: ComponentType<OryNodeTextProps>;
};
NameTypeDescription
AnchorComponentType<OryNodeAnchorProps>Anchor component, rendered whenever an "anchor" node is encountered
ButtonComponentType<OryNodeButtonProps>Button component, rendered whenever a button is encountered in the Ory UI Nodes.
CaptchaComponentType<OryNodeCaptchaProps>The Captcha component is rendered whenever a "captcha" group is encountered.
CheckboxComponentType<OryNodeInputProps>The Checkbox component is rendered whenever an input node with of boolean type is encountered.
CodeInputComponentType<OryNodeInputProps>Special version of the Input component for OTP codes.
ConsentScopeCheckboxComponentType<OryNodeConsentScopeCheckboxProps>Special version of the Input component for scopes in OAuth2 flows.
ImageComponentType<OryNodeImageProps>The Image component is rendered whenever an "image" node is encountered. For example used in the "Logo" node.
InputComponentType<OryNodeInputProps>The Input component is rendered whenever a "input" node is encountered.
LabelComponentType<OryNodeLabelProps>The Label component is rendered around Input components and is used to render form labels.
SsoButtonComponentType<OryNodeSsoButtonProps>The SsoButton component is rendered whenever a button of group "oidc" or "saml" node is encountered. It renders the "Login with Google", "Login with Facebook" etc. buttons.
TextComponentType<OryNodeTextProps>The Text component is rendered whenever a "text" node is encountered.

Page​

Page: {
  Header: ComponentType<OryPageHeaderProps>;
};
NameType
HeaderComponentType<OryPageHeaderProps>