UNPKG

@leancodepl/kratos

Version:

Headless React components library for building Ory Kratos authentication flows

63 lines 3.46 kB
import { ComponentType } from 'react'; import { OidcProvidersConfig, TraitsConfig } from '../../utils'; import { EmailVerificationFormProps } from '../verification'; import { ChooseMethodFormProps } from './chooseMethodForm'; import { TraitsFormProps } from './traitsForm'; import { OnRegistrationFlowError } from './types'; export type RegistrationFlowProps<TTraitsConfig extends TraitsConfig, TOidcProvidersConfig extends OidcProvidersConfig = readonly []> = { traitsConfig: TTraitsConfig; oidcProvidersConfig?: TOidcProvidersConfig; traitsForm: ComponentType<TraitsFormProps<TTraitsConfig, TOidcProvidersConfig>>; chooseMethodForm: ComponentType<ChooseMethodFormProps>; emailVerificationForm: ComponentType<EmailVerificationFormProps>; initialFlowId?: string; returnTo?: string; onError?: OnRegistrationFlowError<TTraitsConfig>; onRegistrationSuccess?: () => void; onVerificationSuccess?: () => void; onFlowRestart?: () => void; onSessionAlreadyAvailable?: () => void; }; /** * Provides a complete registration flow with step-by-step form handling and verification. * * Manages the user registration process through multiple steps: traits collection, * credentials selection, and optional email verification. Automatically handles flow * transitions and error states. * * @template TTraitsConfig - Configuration type for user traits schema * @param props - Registration flow configuration and form components * @param props.traitsConfig - Configuration defining user traits schema and validation * @param props.traitsForm - React component for collecting user traits (name, email, etc.) * @param props.chooseMethodForm - React component for selecting authentication method * @param props.emailVerificationForm - React component for email verification process * @param props.initialFlowId - Optional existing flow ID to resume registration * @param props.returnTo - Optional URL to redirect after successful registration * @param props.onError - Optional callback for handling registration flow errors * @param props.onRegistrationSuccess - Optional callback triggered after successful registration * @param props.onVerificationSuccess - Optional callback triggered after email verification * @param props.onFlowRestart - Optional callback triggered when flow restarts due to expiration * @param props.onSessionAlreadyAvailable - Optional callback triggered when user is already authenticated * @returns React component that renders the appropriate registration step * @example * ```tsx * import { RegistrationFlow } from '@leancodepl/kratos'; * * const traitsConfig = { Email: { trait: "email", type: "string", }, GivenName: { trait: "given_name", type: "string", } } as const; * * function App() { * return ( * <RegistrationFlow * traitsConfig={traitsConfig} * traitsForm={UserTraitsForm} * chooseMethodForm={MethodSelectionForm} * emailVerificationForm={EmailVerifyForm} * onRegistrationSuccess={() => console.log('Registration completed')} * onVerificationSuccess={() => console.log('Email verified')} * /> * ); * } * ``` */ export declare function RegistrationFlow<TTraitsConfig extends TraitsConfig, TOidcProvidersConfig extends OidcProvidersConfig = readonly []>(props: RegistrationFlowProps<TTraitsConfig, TOidcProvidersConfig>): import("react/jsx-runtime").JSX.Element; //# sourceMappingURL=registrationFlow.d.ts.map