@ory/elements-react/dist/index.d.mts

Ory Elements React - a collection of React components for authentication UIs.

import { UiNodeInputAttributes, UiNode, UiNodeAnchorAttributes, UiNodeTextAttributes, UiNodeImageAttributes, UiNodeGroupEnum, UiText, ConfigurationParameters, FlowType, LoginFlow, RegistrationFlow, RecoveryFlow, VerificationFlow, SettingsFlow, UiContainer, OAuth2ConsentRequest, Session, FlowError, UpdateLoginFlowBody, UpdateRegistrationFlowBody, UpdateVerificationFlowBody, UpdateRecoveryFlowBody, UpdateSettingsFlowBody, OnRedirectHandler } 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';
import * as react_jsx_runtime from 'react/jsx-runtime';
import { IntlShape } from 'react-intl';

declare const buttonStyles: (props?: ({
    intent?: "primary" | "secondary" | null | undefined;
    defaultVariants?: "intent" | null | undefined;
} & class_variance_authority_types.ClassProp) | undefined) => string;
type ButtonVariants = VariantProps<typeof buttonStyles>;

type OryNodeButtonProps = {
    attributes: UiNodeInputAttributes;
    node: UiNode;
} & Omit<ComponentPropsWithoutRef<"button">, "children"> & ButtonVariants;
type OryNodeAnchorProps = {
    attributes: UiNodeAnchorAttributes;
    node: UiNode;
} & Omit<ComponentPropsWithoutRef<"a">, "children">;
type OryNodeLabelProps = {
    attributes: UiNodeInputAttributes;
    node: UiNode;
} & ComponentPropsWithoutRef<"label">;
type OryNodeTextProps = {
    attributes: UiNodeTextAttributes;
    node: UiNode;
};
type OryCardLogoProps = Record<string, never>;
type OryNodeCaptchaProps = {
    node: UiNode;
};
/**
 * Props for the AuthMethodListItem component. This component is used
 * to render a single auth method in the AuthMethodList component.
 */
type OryCardAuthMethodListItemProps = {
    onClick: () => void;
    group: string;
    title?: {
        id: string;
        values?: Record<string, string>;
    };
};
type OryNodeImageProps = {
    attributes: UiNodeImageAttributes;
    node: UiNode;
};
/**
 * A generic type for the form values.
 */
type FormValues = Record<string, string | boolean | number | undefined>;
type OryFormRootProps = ComponentPropsWithoutRef<"form"> & {
    onSubmit: FormEventHandler<HTMLFormElement>;
    "data-testid"?: string;
};
type OryNodeInputProps = {
    attributes: UiNodeInputAttributes;
    node: UiNode;
    onClick?: MouseEventHandler;
};
type OryNodeConsentScopeCheckboxProps = {
    attributes: UiNodeInputAttributes;
    node: UiNode;
    onCheckedChange: (checked: boolean) => void;
};
type OryFormSectionContentProps = PropsWithChildren<{
    title?: string;
    description?: string;
}>;
type OryFormSectionFooterProps = PropsWithChildren<{
    text?: string;
}>;

type OryCardHeaderProps = Record<string, never>;
declare function OryCardHeader(): react_jsx_runtime.JSX.Element;

type OryCardRootProps = PropsWithChildren;
/**
 * The root component of the Ory Card.
 *
 * This can be used to build fully custom implementations of the Ory Flows.
 *
 * However, you most likely want to override the individual components instead.
 *
 * @param props - pass children to render instead of the default Ory Card components
 * @returns
 */
declare function OryCard({ children }: PropsWithChildren): react_jsx_runtime.JSX.Element;

type OryCardFooterProps = Record<string, never>;
declare function OryCardFooter(): react_jsx_runtime.JSX.Element;

/**
 * Props for the OryCardContent component.
 */
type OryCardContentProps = PropsWithChildren;
/**
 * A component that renders the content of the Ory Card.
 * This is the main content of the card, such as the flow's form, with it's input fields and messages.
 *
 * You can use this component to build fully custom implementations of the Ory Flows.
 *
 * However, you most likely want to override the individual components instead.
 *
 * @param props - pass children to render instead of the default Ory Card components
 * @returns
 */
declare function OryCardContent({ children }: OryCardContentProps): react_jsx_runtime.JSX.Element;

declare function OryTwoStepCard(): react_jsx_runtime.JSX.Element;

declare function OryConsentCard(): react_jsx_runtime.JSX.Element;

/**
 * Props type for the Form Group Divider component.
 */
type OryCardDividerProps = Record<string, never>;
/**
 * Renders the @see Card.Divider between the groups of nodes in the Ory Form.
 *
 * You can use this component to build fully custom implementations of the Ory Flows.
 *
 * However, you most likely want to override the individual components instead.
 *
 * @returns
 */
declare function OryFormGroupDivider(): react_jsx_runtime.JSX.Element | null;

type OryPageHeaderProps = Record<never, never>;
declare const HeadlessPageHeader: () => react_jsx_runtime.JSX.Element;

declare function OrySettingsCard(): react_jsx_runtime.JSX.Element;

type OrySettingsRecoveryCodesProps = {
    codes: string[];
    regnerateButton: UiNode | undefined;
    revealButton: UiNode | undefined;
    onRegenerate: () => void;
    onReveal: () => void;
};
type OrySettingsTotpProps = {
    totpImage: UiNode | undefined;
    totpSecret: UiNode | undefined;
    totpInput: UiNode | undefined;
    totpUnlink: UiNode | undefined;
    onUnlink: () => void;
};
type OrySettingsOidcProps = {
    linkButtons: (UiNode & {
        onClick: () => void;
    })[];
    unlinkButtons: (UiNode & {
        onClick: () => void;
    })[];
};
type OrySettingsWebauthnProps = {
    nameInput: UiNode;
    triggerButton: UiNode & {
        onClick: () => void;
    };
    removeButtons: (UiNode & {
        onClick: () => void;
    })[];
};
type OrySettingsPasskeyProps = {
    triggerButton: UiNode & {
        onClick: () => void;
    };
    removeButtons: (UiNode & {
        onClick: () => void;
    })[];
};

type OryFormGroupsProps = PropsWithChildren<{
    groups: UiNodeGroupEnum[];
}>;
type OryFormGroupProps = PropsWithChildren;
declare function OryFormGroups({ groups }: OryFormGroupsProps): react_jsx_runtime.JSX.Element;

type OryMessageContentProps = {
    message: UiText;
};
type OryMessageRootProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
declare function OryCardValidationMessages({ ...props }: OryMessageRootProps): react_jsx_runtime.JSX.Element | null;

type OryFormProps$1 = Omit<ComponentPropsWithoutRef<"form">, "action" | "method" | "onSubmit">;
type OryFormSectionProps = PropsWithChildren<OryFormProps$1 & {
    nodes?: UiNode[];
}>;
type OryCardSettingsSectionProps = PropsWithChildren & {
    action: string;
    method: string;
    onSubmit: FormEventHandler<HTMLFormElement>;
};
declare function OryFormSection({ children, nodes, ...rest }: OryFormSectionProps): react_jsx_runtime.JSX.Element;

type OryFormOidcRootProps = PropsWithChildren<{
    nodes: UiNode[];
}>;
type OryNodeOidcButtonProps = {
    node: UiNode;
    attributes: UiNodeInputAttributes;
    onClick?: () => void;
};
declare function OryFormOidcButtons(): react_jsx_runtime.JSX.Element | null;
declare function OryFormSocialButtonsForm(): react_jsx_runtime.JSX.Element | null;

/**
 * A record of all the components that are used in the OryForm component.
 */
type OryFlowComponents = {
    Node: {
        /**
         * Button component, rendered whenever a button is encountered in the Ory UI Nodes.
         */
        Button: ComponentType<OryNodeButtonProps>;
        /**
         * The SocialButton component is rendered whenever a button of group "oidc" node is encountered.
         *
         * It renders the "Login with Google", "Login with Facebook" etc. buttons.
         */
        OidcButton: ComponentType<OryNodeOidcButtonProps>;
        /**
         * Anchor component, rendered whenever an "anchor" node is encountered
         */
        Anchor: ComponentType<OryNodeAnchorProps>;
        /**
         * The Input component is rendered whenever a "input" node is encountered.
         */
        Input: ComponentType<OryNodeInputProps>;
        /**
         * Special version of the Input component for OTP codes.
         */
        CodeInput: ComponentType<OryNodeInputProps>;
        /**
         * The Image component is rendered whenever an "image" node is encountered.
         *
         * For example used in the "Logo" node.
         */
        Image: ComponentType<OryNodeImageProps>;
        /**
         * The Label component is rendered around Input components and is used to render form labels.
         */
        Label: ComponentType<OryNodeLabelProps>;
        /**
         * The Checkbox component is rendered whenever an input node with of boolean type is encountered.
         */
        Checkbox: ComponentType<OryNodeInputProps>;
        /**
         * The Text component is rendered whenever a "text" node is encountered.
         */
        Text: ComponentType<OryNodeTextProps>;
        /**
         * The Captcha component is rendered whenever a "captcha" group is encountered.
         */
        Captcha: ComponentType<OryNodeCaptchaProps>;
        /**
         * Special version of the Input component for scopes in OAuth2 flows.
         */
        ConsentScopeCheckbox: ComponentType<OryNodeConsentScopeCheckboxProps>;
    };
    Card: {
        /**
         * The card container is the main container of the card.
         */
        Root: ComponentType<OryCardRootProps>;
        /**
         * The card footer is the footer of the card container.
         */
        Footer: ComponentType<OryCardFooterProps>;
        /**
         * The card header is the header of the card container.
         */
        Header: ComponentType<OryCardRootProps>;
        /**
         * The card content is the main content of the card container.
         */
        Content: ComponentType<OryCardContentProps>;
        /**
         * The card logo is the logo of the card container.
         */
        Logo: ComponentType<OryCardLogoProps>;
        /**
         * The HorizontalDivider component is rendered between groups.
         */
        Divider: ComponentType<OryCardDividerProps>;
        /**
         * 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.
         */
        AuthMethodListContainer: ComponentType<PropsWithChildren>;
        /**
         * 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.
         */
        AuthMethodListItem: ComponentType<OryCardAuthMethodListItemProps>;
        /**
         * The SettingsSection component is rendered around each section of the settings.
         */
        SettingsSection: ComponentType<OryCardSettingsSectionProps>;
        /**
         * The SettingsSectionContent component is rendered around the content of each section of the settings.
         */
        SettingsSectionContent: ComponentType<OryFormSectionContentProps>;
        /**
         * The SettingsSectionFooter component is rendered around the footer of each section of the settings.
         */
        SettingsSectionFooter: ComponentType<OryFormSectionFooterProps>;
    };
    Form: {
        /**
         * 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.
         */
        Root: ComponentType<OryFormRootProps>;
        /**
         * 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.
         */
        OidcRoot: ComponentType<OryFormOidcRootProps>;
        /**
         * The FormGroup is rendered around each group of nodes in the UI nodes.
         */
        Group: ComponentType<OryFormGroupProps>;
        /**
         * The section on the settings page, rendering the OIDC settings
         */
        OidcSettings: ComponentType<OrySettingsOidcProps>;
        /**
         * The section on the settings page, rendering the Webauthn settings
         */
        WebauthnSettings: ComponentType<OrySettingsWebauthnProps>;
        /**
         * The section on the settings page, rendering the Passkey settings
         */
        PasskeySettings: ComponentType<OrySettingsPasskeyProps>;
        /**
         * The section on the settings page, rendering the TOTP settings
         */
        TotpSettings: ComponentType<OrySettingsTotpProps>;
        /**
         * The section on the settings page, rendering the recovery code settings
         */
        RecoveryCodesSettings: ComponentType<OrySettingsRecoveryCodesProps>;
    };
    Message: {
        /**
         * The MessageContainer is rendered around the messages.
         */
        Root: ComponentType<OryMessageRootProps>;
        /**
         * The Message component is rendered whenever a message is encountered.
         */
        Content: ComponentType<OryMessageContentProps>;
    };
    Page: {
        Header: ComponentType<OryPageHeaderProps>;
    };
};
type DeepPartialTwoLevels<T> = {
    [P in keyof T]?: T[P] extends object ? {
        [K in keyof T[P]]?: T[P][K];
    } : T[P];
};
type OryFlowComponentOverrides = DeepPartialTwoLevels<OryFlowComponents>;
type OryFormProps = PropsWithChildren<{
    onAfterSubmit?: (method: string | number | boolean | undefined) => void;
    "data-testid"?: string;
}>;
declare function OryForm({ children, onAfterSubmit, "data-testid": dataTestId, }: OryFormProps): react_jsx_runtime.JSX.Element;

declare function useComponents(): OryFlowComponents;
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;
type OryClientConfiguration = {
    /**
     * The name of the application the user is logging in to.
     */
    name: string;
    /**
     * An optional logo URL to display in the UI instead of the name.
     */
    logoUrl?: string;
    stylesheet?: string;
    favicon?: string;
    sdk: {
        url: string;
        options?: Partial<ConfigurationParameters>;
    };
    project: {
        registration_enabled: boolean;
        verification_enabled: boolean;
        recovery_enabled: boolean;
        recovery_ui_url: string;
        registration_ui_url: string;
        verification_ui_url: string;
        login_ui_url: string;
        default_redirect_url?: string;
    };
    intl?: IntlConfig;
};

/**
 * A generic flow container, containing a flowType, the flow itself and the config object
 *
 * @see OryClientConfiguration
 */
type OryFlow<TFlowType extends FlowType, TFlow> = {
    flowType: TFlowType;
    flow: TFlow;
    config: OryClientConfiguration;
};
/**
 * A flow container for the login flow
 *
 * @see OryFlow
 * @see LoginFlow
 */
type LoginFlowContainer = OryFlow<FlowType.Login, LoginFlow>;
/**
 * A flow container for the registration flow
 *
 * @see OryFlow
 * @see RegistrationFlow
 */
type RegistrationFlowContainer = OryFlow<FlowType.Registration, RegistrationFlow>;
/**
 * A flow container for the recovery flow
 *
 * @see OryFlow
 * @see RecoveryFlow
 */
type RecoveryFlowContainer = OryFlow<FlowType.Recovery, RecoveryFlow>;
/**
 * A flow container for the verification flow
 *
 * @see OryFlow
 * @see VerificationFlow
 *
 */
type VerificationFlowContainer = OryFlow<FlowType.Verification, VerificationFlow>;
/**
 * A flow container for the settings flow
 *
 * @see OryFlow
 * @see SettingsFlow
 */
type SettingsFlowContainer = OryFlow<FlowType.Settings, SettingsFlow>;
/**
 * A flow container for the error flow
 *
 * @see OryFlow
 * @see FlowError (Error flow)
 *
 */
type ErrorFlowContainer = OryFlow<FlowType.Error, FlowError>;
type ConsentFlow = {
    created_at: Date;
    expires_at: Date;
    id: string;
    issued_at: Date;
    state: "show_form" | "rejected" | "accepted";
    active: string;
    ui: UiContainer;
    consent_request: OAuth2ConsentRequest;
    session: Session;
};
type ConsentFlowContainer = OryFlow<FlowType.OAuth2Consent, ConsentFlow>;
/**
 * A union type of all flow containers
 */
type OryFlowContainer = LoginFlowContainer | RegistrationFlowContainer | RecoveryFlowContainer | VerificationFlowContainer | SettingsFlowContainer | ConsentFlowContainer;

/**
 * Converts a UiText to a FormattedMessage.
 * The UiText contains the id of the message and the context.
 * The context is used to inject values into the message from Ory, e.g. a timestamp.
 * For example a UI Node from Ory might look like this:
 *
 * \{
 *  "type":"input",
 *  "group":"default",
 *  "attributes": \{
 *      "name":"traits.email",
 *      "type":"email",
 *      "required":true,
 *      "autocomplete":"email",
 *      "disabled":false,
 *      "node_type":"input"
 *  \},
 *  "messages":[],
 *  "meta": \{
 *    "label": \{
 *      "id":1070002,
 *      "text":"E-Mail",
 *      "type":"info",
 *      "context":\{
 *        "title":"E-Mail"
 *      \},
 *    \}
 *  \}
 * \}
 *
 * The context has the key "title" which matches the formatter template name "\{title\}"
 * An example translation file would look like this:
 * \{
 *  "identities.messages.1070002": "\{title\}"
 * \}
 *
 * The formatter would then take the meta.label.id and look for the translation with the key matching the id.
 * It would then replace the template "\{title\}" with the value from the context with the key "title".
 *
 * @param uiText - The UiText is part of the UiNode object sent by Kratos when performing a flow.
 * @param intl - The intl object from react-intl
 */
declare const uiTextToFormattedMessage: ({ id, context, text }: Omit<UiText, "type">, intl: IntlShape) => string;

/**
 * Props for the submit handler
 */
type OnSubmitHandlerProps<T extends UpdateLoginFlowBody | UpdateRegistrationFlowBody | UpdateVerificationFlowBody | UpdateRecoveryFlowBody | UpdateSettingsFlowBody> = {
    /**
     * This method is used to update the flow container when a validation error occurs, for example.
     */
    setFlowContainer: (flowContainer: OryFlowContainer) => void;
    /**
     * The form values to submit.
     */
    body: T;
    /**
     * This method is used to redirect the user to a different page.
     */
    onRedirect: OnRedirectHandler;
};

/**
 * Helper function to generate a test id for a UiText message.
 *
 * @param message - the UiText message to generate a test id for
 * @returns a unique, stable test id for the message
 */
declare function messageTestId(message: UiText): {
    "data-testid": string;
};

type FormState = {
    current: "provide_identifier";
} | {
    current: "select_method";
} | {
    current: "method_active";
    method: UiNodeGroupEnum;
} | {
    current: "success_screen";
} | {
    current: "settings";
};
type FormStateAction = {
    type: "action_flow_update";
    flow: OryFlowContainer;
} | {
    type: "action_select_method";
    method: UiNodeGroupEnum;
};

/**
 * Returns an object that contains the current flow and the flow type, as well as the configuration.
 *
 * @returns The current flow container
 */
declare function useOryFlow(): FlowContextValue;
/**
 * Function to set the flow container.
 */
type FlowContainerSetter = Dispatch<OryFlowContainer>;
/**
 * The return value of the OryFlowContext.
 */
type FlowContextValue = OryFlowContainer & {
    /**
     * Function to set the flow container.
     */
    setFlowContainer: FlowContainerSetter;
    /**
     * The current form state.
     * @see FormState
     */
    formState: FormState;
    /**
     * Dispatch function to update the form state.
     */
    dispatchFormState: Dispatch<FormStateAction>;
};

type OryProviderProps = {
    components: OryFlowComponents;
} & OryFlowContainer & PropsWithChildren;
declare function OryProvider({ children, components: Components, ...oryFlowProps }: OryProviderProps): react_jsx_runtime.JSX.Element;

export { type ConsentFlow, type ConsentFlowContainer, type ErrorFlowContainer, type FlowContainerSetter, type FlowContextValue, type FormState, type FormStateAction, 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 };