@leancodepl/kratos 8.5.1 → 9.0.0

package/README.md

@@ -1,14 +1,6 @@
 # @leancodepl/kratos
 
-React components and hooks for Ory Kratos authentication integration.
-
-## Features
-
-- **Complete auth flows** - Login, registration, recovery, verification, and settings flows
-- **Ready-to-use components** - Login, registration, recovery, and settings cards
-- **Session management** - Automatic token handling with RxJS observables
-- **Customizable UI** - Override any component with your own implementation
-- **Error handling** - Built-in validation and flow error management
+Headless React components library for building Ory Kratos authentication flows.
 
 ## Installation
 
@@ -20,352 +12,554 @@ yarn add @leancodepl/kratos
 
 ## API
 
-### `createKratosClient(configuration)`
-
-Creates Ory Kratos FrontendApi client with axios and credentials configuration.
-
-**Parameters:**
-
-- `configuration: ConfigurationParameters` - Kratos client configuration parameters
-
-**Returns:** Configured FrontendApi instance for Kratos operations
-
-### `useKratosContext()`
-
-Access Kratos context data with components and error handling.
-
-**Returns:** Kratos context data with initialized components
-
-**Throws:** Error when Kratos context components are not initialized
-
-### `KratosContextProvider(components, useHandleFlowError, excludeScripts, children)`
-
-Provides Kratos context to child components with customizable configuration.
-
-**Parameters:**
-
-- `components?: Partial<KratosComponents>` - Partial override of default Kratos UI components
-- `useHandleFlowError?: UseHandleFlowError` - Custom error handler for authentication flows
-- `excludeScripts?: boolean` - Whether to exclude script node execution
-- `children?: ReactNode` - Child React components
-
-**Returns:** JSX element providing Kratos context
-
-### `BaseSessionManager(authUrl, loginRoute)`
-
-Manages Kratos session state with RxJS observables for authentication status.
-
-**Parameters:**
-
-- `authUrl: string` - Base URL for Kratos authentication endpoints
-- `loginRoute: string` - Application route for login page
-
-### `useLoginFlow(kratosClient, returnTo, onLoggedIn, onSessionAlreadyAvailable, searchParams, updateSearchParams)`
+### `mkKratos(queryClient, basePath, traits, SessionManager)`
 
-Manages Kratos login flow state and form submission.
+Creates a Kratos client factory with authentication flows, session management, and React providers.
 
 **Parameters:**
 
-- `kratosClient: FrontendApi` - Configured Kratos FrontendApi client
-- `returnTo?: string` - URL to redirect after successful login
-- `onLoggedIn?: Function` - Callback executed when user successfully logs in
-- `onSessionAlreadyAvailable?: Function` - Callback when session already exists
-- `searchParams?: LoginSearchParams` - URL search parameters for flow state
-- `updateSearchParams: Function` - Function to update URL search parameters
-
-**Returns:** Object with current flow and submit function
-
-### `useRegistrationFlow(kratosClient, onSessionAlreadyAvailable, onContinueWith, searchParams, updateSearchParams)`
-
-Manages Kratos registration flow state and form submission.
-
-**Parameters:**
-
-- `kratosClient: FrontendApi` - Configured Kratos FrontendApi client
-- `onSessionAlreadyAvailable: Function` - Callback when session already exists
-- `onContinueWith?: Function` - Optional callback for post-registration actions
-- `searchParams?: Object` - URL search parameters for flow state
-- `updateSearchParams: Function` - Function to update URL search parameters
-
-**Returns:** Object with current flow, submit function, and registration status
+- `queryClient: QueryClient` - React Query client instance for managing server state
+- `basePath: string` - Base URL for the Kratos API server
+- `traits?: TTraitsConfig` - Optional traits configuration object for user schema validation
+- `SessionManager?: new (props: BaseSessionManagerContructorProps) => TSessionManager` - Optional session manager
+  constructor, defaults to BaseSessionManager
 
-### `useRecoveryFlow(kratosClient, onSessionAlreadyAvailable, onContinueWith, searchParams, updateSearchParams)`
+**Returns:** Object with the following structure:
 
-Manages Kratos account recovery flow state and form submission.
+#### `flows`
 
-**Parameters:**
+Authentication flow components and hooks:
 
-- `kratosClient: FrontendApi` - Configured Kratos FrontendApi client
-- `onSessionAlreadyAvailable: Function` - Callback when session already exists
-- `onContinueWith?: Function` - Optional callback for post-recovery actions
-- `searchParams?: Object` - URL search parameters for flow state
-- `updateSearchParams: Function` - Function to update URL search parameters
+- `useLogout()` - Hook providing logout functionality with optional returnTo parameter
+- `LoginFlow` - Complete login flow component with multi-step authentication support
+- `RecoveryFlow` - Password recovery flow component with email verification and reset
+- `RegistrationFlow` - User registration flow component with traits collection and verification
+- `SettingsFlow` - User settings flow component for account management and profile updates
+- `VerificationFlow` - Email verification flow component
 
-**Returns:** Object with current flow, submit function, and recovery status
+#### `providers`
 
-### `LoginCard(flow, onSubmit, className)`
+React context providers for the application:
 
-Pre-built login card component for Kratos login flows.
+- `KratosProviders` - Composite provider that wraps your app with necessary Kratos context
+  - Includes `KratosClientProvider` for API access
+  - Includes `KratosSessionProvider` for session management
 
-**Parameters:**
+#### `session`
 
-- `flow: LoginFlow` - Kratos login flow object
-- `onSubmit?: Function` - Form submission handler
-- `className?: string` - Optional CSS class name
+Session management utilities:
 
-**Returns:** JSX element with login form
+- `sessionManager` - Session manager instance with methods and hooks for:
+  - **Async Methods**: `getSession()`, `getIdentity()`, `getUserId()`, `isLoggedIn()`, `checkIfLoggedIn()`
+  - **React Hooks**: `useSession()`, `useIdentity()`, `useUserId()`, `useIsLoggedIn()`, `useIsAal2Required()`
+  - **Extensible**: Can be extended to provide trait-specific methods like `useEmail()`, `useFirstName()` for typed user
+    data access
 
-### `RegistrationCard(flow, onSubmit, className)`
+### `BaseSessionManager(queryClient, api)`
 
-Pre-built registration card component for Kratos registration flows.
+Manages Ory Kratos session and identity state with React Query integration.
 
 **Parameters:**
 
-- `flow: RegistrationFlow` - Kratos registration flow object
-- `onSubmit?: Function` - Form submission handler
-- `className?: string` - Optional CSS class name
+- `queryClient: QueryClient` - React Query `QueryClient` instance for caching and fetching session data
+- `api: FrontendApi` - Ory Kratos `FrontendApi` instance for session and identity requests
 
-**Returns:** JSX element with registration form
-
-### `RecoveryCard(flow, onSubmit, className)`
+## Usage Examples
 
-Pre-built recovery card component for Kratos account recovery flows.
+### Basic Setup
 
-**Parameters:**
+To use the library, you need to create new instance of Kratos client with `mkKratos` factory:
 
-- `flow: RecoveryFlow` - Kratos recovery flow object
-- `onSubmit?: Function` - Form submission handler
-- `className?: string` - Optional CSS class name
+```typescript
+// kratosService.ts
 
-**Returns:** JSX element with recovery form
+import { queryClient } from "./queryService"
 
-### `VerificationCard(flow, onSubmit, className)`
+const traitsConfig = {
+  Email: { trait: "email", type: "string" },
+  GivenName: { trait: "given_name", type: "string" },
+  RegulationsAccepted: { trait: "regulations_accepted", type: "boolean" },
+} as const
 
-Pre-built verification card component for Kratos verification flows.
+const {
+  session: { sessionManager },
+  providers: { KratosProviders },
+  flows: { LoginFlow, RegistrationFlow, SettingsFlow, VerificationFlow, RecoveryFlow, useLogout },
+} = mkKratos({
+  queryClient,
+  basePath: environment.authUrl,
+  traits: traitsConfig,
+})
 
-**Parameters:**
+// session
+export { sessionManager }
 
-- `flow: VerificationFlow` - Kratos verification flow object
-- `onSubmit?: Function` - Form submission handler
-- `className?: string` - Optional CSS class name
+// providers
+export { KratosProviders }
 
-**Returns:** JSX element with verification form
+// flows
+export { LoginFlow, RecoveryFlow, RegistrationFlow, SettingsFlow, useLogout, VerificationFlow }
 
-### `useVerificationFlow(initialFlowId, kratosClient, onVerified, searchParams, updateSearchParams)`
-
-Manages Kratos email/phone verification flow state and form submission.
+// traits
+export type AuthTraitsConfig = typeof traitsConfig
+```
 
-**Parameters:**
+And then wrap your app with `KratosProviders` from `mkKratos`:
 
-- `initialFlowId?: string` - Optional initial flow ID to start with
-- `kratosClient: FrontendApi` - Configured Kratos FrontendApi client
-- `onVerified: Function` - Callback executed when verification is successful
-- `searchParams?: Object` - URL search parameters for flow state
-- `updateSearchParams: Function` - Function to update URL search parameters
+```tsx
+// main.tsx
 
-**Returns:** Object with current flow, submit function, and reset function
+import { QueryClientProvider } from "@tanstack/react-query"
+import { KratosProviders } from "./kratosService"
+import { queryClient } from "./queryService"
 
-### `useSettingsFlow(kratosClient, params, onContinueWith, searchParams, updateSearchParams)`
+function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <KratosProviders>
+        <Routes>
+          <Route path="/login" element={<LoginPage />} />
+          <Route path="/register" element={<RegisterPage />} />
+          <Route path="/settings" element={<SettingsPage />} />
+        </Routes>
+      </KratosProviders>
+    </QueryClientProvider>
+  )
+}
+```
 
-Manages Kratos user settings flow state and form submission.
+### Session Management
 
-**Parameters:**
+```tsx
+import { sessionManager } from "./kratosService"
 
-- `kratosClient: FrontendApi` - Configured Kratos FrontendApi client
-- `params?: Object` - Optional Axios request parameters
-- `onContinueWith?: Function` - Optional callback for post-settings actions
-- `searchParams?: Object` - URL search parameters for flow state
-- `updateSearchParams: Function` - Function to update URL search parameters
+function UserProfile() {
+  const { isLoggedIn, isLoading } = sessionManager.useIsLoggedIn()
+  const { userId } = sessionManager.useUserId()
+  const { email } = sessionManager.useEmail()
+  const { firstName } = sessionManager.useFirstName()
 
-**Returns:** Object with current flow and submit function
+  if (isLoading) return <div>Loading...</div>
+  if (!isLoggedIn) return <div>Not logged in</div>
 
-### `useReauthenticationFlow(kratosClient, onReauthenticated)`
+  return (
+    <div>
+      <h1>User Profile</h1>
+      <p>ID: {userId}</p>
+      <p>Email: {email}</p>
+      <p>Name: {firstName}</p>
+    </div>
+  )
+}
+```
 
-Manages Kratos reauthentication flow for elevated security operations.
+### Login Flow
 
-**Parameters:**
+```tsx
+import { LoginFlow } from "./kratosService"
 
-- `kratosClient: FrontendApi` - Configured Kratos FrontendApi client
-- `onReauthenticated: Function` - Callback executed with session after successful reauthentication
+function LoginPage() {
+  return (
+    <LoginFlow
+      chooseMethodForm={ChooseMethodForm}
+      secondFactorForm={SecondFactorForm}
+      secondFactorEmailForm={SecondFactorEmailForm}
+      emailVerificationForm={EmailVerificationForm}
+      returnTo="/identity"
+      onLoginSuccess={() => {
+        console.log("Login successful")
+      }}
+      onSessionAlreadyAvailable={() => {
+        location.href = "/identity"
+      }}
+      onError={({ target, errors }) => {
+        console.error(`Error in ${target}:`, errors)
+      }}
+    />
+  )
+}
+```
 
-**Returns:** Object with current flow and submit function
+### Registration Flow
 
-### `useLogoutFlow(kratosClient, returnTo, onLoggedOut)`
+```tsx
+import { RegistrationFlow } from "./kratosService"
 
-Manages Kratos user logout flow with callback support.
+function RegisterPage() {
+  return (
+    <RegistrationFlow
+      chooseMethodForm={ChooseMethodForm}
+      emailVerificationForm={EmailVerificationForm}
+      traitsForm={TraitsForm}
+      returnTo="/welcome"
+      onRegistrationSuccess={() => {
+        console.log("Registration successful")
+      }}
+      onVerificationSuccess={() => {
+        console.log("Email verified")
+      }}
+      onError={({ target, errors }) => {
+        console.error(`Registration error in ${target}:`, errors)
+      }}
+    />
+  )
+}
+```
 
-**Parameters:**
+### Settings Flow
 
-- `kratosClient: FrontendApi` - Configured Kratos FrontendApi client
-- `returnTo?: string` - Optional URL to redirect after logout
-- `onLoggedOut?: Function` - Optional callback executed after successful logout
+```tsx
+import { SettingsFlow } from "./kratosService"
 
-**Returns:** Object with logout function
+function SettingsPage() {
+  const { isLoggedIn, isLoading } = sessionManager.useIsLoggedIn()
 
-### `UserSettingsCard(flow, flowType, onSubmit, className)`
+  if (isLoading) return <div>Loading...</div>
+  if (!isLoggedIn) return <div>Access denied</div>
 
-Pre-built settings card component for Kratos settings flows.
+  return (
+    <SettingsFlow
+      newPasswordForm={NewPasswordForm}
+      traitsForm={TraitsForm}
+      passkeysForm={PasskeysForm}
+      totpForm={TotpForm}
+      oidcForm={OidcForm}
+      settingsForm={({ traitsForm, newPasswordForm, passkeysForm }) => (
+        <div>
+          {traitsForm}
+          {newPasswordForm}
+          {passkeysForm}
+        </div>
+      )}
+      onChangePasswordSuccess={() => {
+        console.log("Password updated")
+      }}
+      onChangeTraitsSuccess={() => {
+        console.log("Profile updated")
+      }}
+    />
+  )
+}
+```
 
-**Parameters:**
+### Logout Functionality
 
-- `flow: SettingsFlow` - Kratos settings flow object
-- `flowType: UserSettingsFlowType` - Type of settings flow to render
-- `onSubmit?: Function` - Form submission handler
-- `className?: string` - Optional CSS class name
+```tsx
+import { useLogout } from "./kratosService"
 
-**Returns:** JSX element with settings form or null if flow type unavailable
+function LogoutButton() {
+  const { logout } = useLogout()
 
-## Usage Examples
+  const handleLogout = async () => {
+    const result = await logout({ returnTo: "/login" })
+    if (result.isSuccess) {
+      console.log("Logout successful")
+    } else {
+      console.error("Logout failed:", result.error)
+    }
+  }
 
-### Basic Setup
+  return <button onClick={handleLogout}>Logout</button>
+}
+```
 
-```typescript
-import { createKratosClient, KratosContextProvider } from '@leancodepl/kratos';
+### Recovery Flow
 
-const kratosClient = createKratosClient({
-  basePath: 'https://auth.example.com'
-});
+```tsx
+import { RecoveryFlow } from "./kratosService"
 
-function App() {
+function RecoveryPage() {
   return (
-    <KratosContextProvider>
-      <Routes>
-        <Route path="/login" element={<LoginPage />} />
-        <Route path="/register" element={<RegisterPage />} />
-      </Routes>
-    </KratosContextProvider>
-  );
+    <RecoveryFlow
+      emailForm={EmailForm}
+      codeForm={CodeForm}
+      newPasswordForm={NewPasswordForm}
+      onRecoverySuccess={() => {
+        console.log("Password recovery completed")
+      }}
+      onError={error => {
+        console.error("Recovery failed:", error)
+      }}
+    />
+  )
 }
 ```
 
-### Login Flow
+### Custom Error Handling
 
 ```typescript
-import { useLoginFlow, LoginCard } from '@leancodepl/kratos';
-import { useSearchParams, useNavigate } from 'react-router-dom';
-
-function LoginPage() {
-  const [searchParams, setSearchParams] = useSearchParams();
-  const navigate = useNavigate();
-
-  const { flow, submit } = useLoginFlow({
-    kratosClient,
-    onLoggedIn: (session) => navigate('/dashboard'),
-    searchParams: Object.fromEntries(searchParams),
-    updateSearchParams: (params) => setSearchParams(params)
-  });
-
-  if (!flow) return <div>Loading...</div>;
+import { AuthError } from "@leancodepl/kratos"
+
+function getErrorMessage(error: AuthError) {
+  switch (error.id) {
+    case "Error_InvalidCredentials":
+      return "Invalid email or password"
+    case "Error_MissingProperty":
+      return "This field is required"
+    case "Error_TooShort":
+      return "Password is too short"
+    default:
+      return "An error occurred"
+  }
+}
 
-  return <LoginCard flow={flow} onSubmit={submit} />;
+function handleError({ target, errors }) {
+  if (target === "root") {
+    console.error("Form errors:", errors.map(getErrorMessage))
+  } else {
+    console.error(`Field ${target} errors:`, errors.map(getErrorMessage))
+  }
 }
 ```
 
-### Session Management
+### Implementing flow form
 
-```typescript
-import { BaseSessionManager } from "@leancodepl/kratos"
-import { useEffect, useState } from "react"
+Each form in every flow exposes [slot components](https://www.radix-ui.com/primitives/docs/utilities/slot) for inputs
+and buttons. When wrapping your custom components with these slots, relevant props (such as the `onInput` event handler)
+are automatically applied. If you use a custom component as a child, you receive props from one of the following types:
+`CommonInputFieldProps`, `CommonCheckboxFieldProps`, or `CommonButtonProps`.
 
-const sessionManager = new BaseSessionManager("https://auth.example.com", "/login")
+Forms like `TraitsForm` have dynamic parameters determined by the `traitsConfig` you provide to the `mkKratos` factory.
+To type these correctly, use a generic such as `registrationFlow.TraitsFormProps<AuthTraitsConfig>` and pass your traits
+config.
 
-function useAuth() {
-    const [isLoggedIn, setIsLoggedIn] = useState(false)
-    const [userId, setUserId] = useState<string>()
+Some forms are typed as discriminated unions with multiple variants.
 
-    useEffect(() => {
-        const subscription = sessionManager.isLoggedIn.subscribe(setIsLoggedIn)
-        const userSub = sessionManager.userId$.subscribe(setUserId)
+#### Custom Input component with CommonInputFieldProps
 
-        return () => {
-            subscription.unsubscribe()
-            userSub.unsubscribe()
-        }
-    }, [])
+```tsx
+import { CommonInputFieldProps } from "@leancodepl/kratos"
+import { getErrorMessage } from "./kratosService"
 
-    return { isLoggedIn, userId }
-}
+type InputProps = CommonInputFieldProps & { placeholder?: string }
+
+export const Input = ({ errors, ...props }: InputProps) => (
+  <div>
+    <input {...props} />
+    {errors && errors.length > 0 && (
+      <div>
+        {errors.map(error => (
+          <div key={error.id}>{getErrorMessage(error)}</div>
+        ))}
+      </div>
+    )}
+  </div>
+)
 ```
 
-### Custom Components
+#### ChooseMethodForm in login flow
 
-```typescript
-import { KratosContextProvider, useKratosContext } from '@leancodepl/kratos';
-
-const customComponents = {
-  InputComponent: ({ node, attributes }) => (
-    <input
-      className="custom-input"
-      {...attributes}
-      value={node.attributes.value}
+```tsx
+import { loginFlow } from "@leancodepl/kratos"
+import { LoginFlow, getErrorMessage } from "./kratosService"
+import type { AuthTraitsConfig } from "./kratosService"
+
+function LoginPage() {
+  return (
+    <LoginFlow
+      chooseMethodForm={ChooseMethodForm}
+      // other props
     />
-  ),
-  ButtonComponent: ({ node, attributes }) => (
-    <button className="custom-button" {...attributes}>
-      {node.meta.label}
-    </button>
   )
-};
+}
+
+function ChooseMethodForm(props: loginFlow.ChooseMethodFormProps) {
+  if (props.isLoading) {
+    return <p>Loading login methods...</p>
+  }
+
+  const { Password, Google, Passkey, Apple, Facebook, errors, isSubmitting, isValidating } = props
+
+  if (props.isRefresh) {
+    const { identifier } = props
+
+    return (
+      <div>
+        <h2>
+          Complete login process as <strong>{identifier}</strong>
+        </h2>
+
+        {Password && (
+          <Password>
+            <input placeholder="Password" />
+          </Password>
+        )}
+
+        <button type="submit">Login</button>
+
+        {Google && (
+          <Google>
+            <button>Sign in with Google</button>
+          </Google>
+        )}
+
+        {Apple && (
+          <Apple>
+            <button>Sign in with Apple</button>
+          </Apple>
+        )}
+
+        {Facebook && (
+          <Facebook>
+            <button>Sign in with Facebook</button>
+          </Facebook>
+        )}
+
+        {Passkey && (
+          <Passkey>
+            <button>Sign in with Passkey</button>
+          </Passkey>
+        )}
+
+        {errors && errors.length > 0 && (
+          <div>
+            {errors.map(error => (
+              <div key={error.id}>{getErrorMessage(error)}</div>
+            ))}
+          </div>
+        )}
+      </div>
+    )
+  }
+
+  const { Identifier } = props
 
-function App() {
   return (
-    <KratosContextProvider components={customComponents}>
-      <LoginForm />
-    </KratosContextProvider>
-  );
+    <div>
+      {Identifier && (
+        <Identifier>
+          <input placeholder="Identifier" />
+        </Identifier>
+      )}
+
+      {Password && (
+        <Password>
+          <input placeholder="Password" />
+        </Password>
+      )}
+
+      <button type="submit">Login</button>
+
+      {Google && (
+        <Google>
+          <button>Sign in with Google</button>
+        </Google>
+      )}
+
+      {Apple && (
+        <Apple>
+          <button>Sign in with Apple</button>
+        </Apple>
+      )}
+
+      {Facebook && (
+        <Facebook>
+          <button>Sign in with Facebook</button>
+        </Facebook>
+      )}
+
+      {Passkey && (
+        <Passkey>
+          <button>Sign in with Passkey</button>
+        </Passkey>
+      )}
+
+      {errors && errors.length > 0 && (
+        <div>
+          {errors.map(error => (
+            <div key={error.id}>{getErrorMessage(error)}</div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
 }
 ```
 
-### Registration Flow
+#### TraitsForm in registration flow
 
-```typescript
-import { useRegistrationFlow, RegistrationCard } from '@leancodepl/kratos';
+```tsx
+import { registrationFlow } from "@leancodepl/kratos"
+import { RegistrationFlow, getErrorMessage } from "./kratosService"
+import type { AuthTraitsConfig } from "./kratosService"
 
 function RegisterPage() {
-  const [searchParams, setSearchParams] = useSearchParams();
-  const navigate = useNavigate();
-
-  const { flow, submit } = useRegistrationFlow({
-    kratosClient,
-    onRegistrationSuccess: () => navigate('/welcome'),
-    searchParams: Object.fromEntries(searchParams),
-    updateSearchParams: (params) => setSearchParams(params)
-  });
-
-  if (!flow) return <div>Loading...</div>;
+  return (
+    <RegistrationFlow
+      traitsForm={TraitsForm}
+      onError={handleError}
+      // other props
+    />
+  )
+}
 
+function TraitsForm({
+  errors,
+  Email,
+  RegulationsAccepted,
+  GivenName,
+  Google,
+  Apple,
+  Facebook,
+  isSubmitting,
+  isValidating,
+}: registrationFlow.TraitsFormProps<AuthTraitsConfig>) {
   return (
     <div>
-      <h1>Create Account</h1>
-      <RegistrationCard flow={flow} onSubmit={submit} />
+      {Email && (
+        <Email>
+          <input placeholder="Email" />
+        </Email>
+      )}
+      {GivenName && (
+        <GivenName>
+          <input placeholder="First name" />
+        </GivenName>
+      )}
+      {RegulationsAccepted && (
+        <RegulationsAccepted>
+          <input placeholder="Regulations accepted" type="checkbox">
+            I accept the regulations
+          </input>
+        </RegulationsAccepted>
+      )}
+
+      <button type="submit">Register</button>
+
+      {Google && (
+        <Google>
+          <button>Sign up with Google</button>
+        </Google>
+      )}
+
+      {Apple && (
+        <Apple>
+          <button>Sign up with Apple</button>
+        </Apple>
+      )}
+
+      {Facebook && (
+        <Facebook>
+          <button>Sign up with Facebook</button>
+        </Facebook>
+      )}
+
+      {errors && errors.length > 0 && (
+        <div>
+          {errors.map(error => (
+            <div key={error.id}>{getErrorMessage(error)}</div>
+          ))}
+        </div>
+      )}
     </div>
-  );
-}
-```
-
-### Error Handling
-
-```typescript
-import { useHandleFlowError } from '@leancodepl/kratos';
-
-function useCustomErrorHandler() {
-  return useHandleFlowError({
-    onUnauthenticated: () => navigate('/login'),
-    onValidationError: (error) => {
-      console.error('Validation failed:', error);
-      toast.error('Please check your input');
-    },
-    resetFlow: () => setFlow(undefined)
-  });
+  )
 }
 
-function AppWithErrorHandling() {
-  const customErrorHandler = useCustomErrorHandler();
-
-  return (
-    <KratosContextProvider useHandleFlowError={customErrorHandler}>
-      <App />
-    </KratosContextProvider>
-  );
+const handleError: registrationFlow.OnRegistrationFlowError<AuthTraitsConfig> = ({ target, errors }) => {
+  if (target === "root") {
+    console.error("Form errors:", errors.map(getErrorMessage))
+  } else {
+    console.error(`Field ${target} errors:`, errors.map(getErrorMessage))
+  }
 }
 ```