import { ComponentType, ReactNode } from 'react'; /** * Composable IAM views. * * Drop-in React components that mirror the server-rendered embedded * login + onboarding flows. Each component is independently usable — * render the whole ``, or just the ``, or just the * ``, or assemble a custom flow from the primitives. * * Discovery * ========= * * `` reads {@link IAM_PATHS.authMethods} from the configured IAM * and renders only the buttons whose backends are actually wired. One * source of truth — the server emits the method list, the client renders * exactly that. No env mismatch, no client-side guessing. * * All OAuth interactions go through the canonical PKCE redirect flow in * `@hanzo/iam/browser` (which resolves every endpoint through * `OIDC_PATHS`). The email/password and OTP primitives drive the IAM * password/OTP grants and then hand off to the same redirect. * * @example * ```tsx * import { Login, OnboardingFlow } from '@hanzo/iam/views' * * function MyApp() { * return location.pathname === '/onboarding' * ? …} /> * : * } * ``` * * @packageDocumentation */ type AuthMethodKind = "password" | "social" | "wallet" | "email_otp" | "sms_otp"; interface AuthMethod { kind: AuthMethodKind; /** Set when kind = 'social'; one of 'google' | 'github' | 'apple' | … */ provider?: string; label: string; is_primary: boolean; is_secondary: boolean; } interface MethodsResponse { methods: AuthMethod[]; require_2fa: boolean; } /** Common props every view accepts. The redirectUri and state pair up * with the OIDC PKCE flow — see `@hanzo/iam/browser`. */ interface FlowProps { /** Base URL of the IAM server, e.g. 'https://iam.hanzo.ai'. */ serverUrl: string; clientId: string; redirectUri: string; /** The OIDC `state` param. Generate one per signinRedirect() call. */ state: string; /** * IAM organization the app belongs to (e.g. 'hanzo'). Required for the * credential (password / verification-code) login flow. */ organization?: string; /** IAM application name. Defaults to `clientId` (they match for Hanzo apps). */ application?: string; } interface MethodsView { loading: boolean; error: Error | null; has: (kind: AuthMethodKind) => boolean; providers: () => string[]; raw: AuthMethod[]; require2FA: boolean; } interface UseAuthMethodsOpts { serverUrl: string; fetcher?: typeof fetch; } /** * Fetch the live list of enabled auth methods from * {@link IAM_PATHS.authMethods}. SSR-safe: no fetch runs until the * component is mounted in the browser. */ declare function useAuthMethods(opts: UseAuthMethodsOpts): MethodsView; interface LoginProps extends FlowProps { /** Override individual button labels for white-label deployments. */ labels?: Partial<{ wallet: string; googleSocial: string; githubSocial: string; appleSocial: string; emailOtp: string; smsOtp: string; password: string; divider: string; }>; /** Render-prop slot for the brand mark above the form. */ brand?: ReactNode; /** Optional class hook for the outer card. */ className?: string; /** Called after a successful credential sign-in (pre-redirect). */ onSuccess?: (token: string) => void; /** * Social/wallet providers to render as buttons (e.g. ['google','github','apple']). * Each starts the PKCE redirect with that provider. Defaults to none — the * `/v1/iam/auth/methods` discovery endpoint is not relied upon (it is not * deployed), so providers are passed explicitly per app. */ providers?: string[]; } interface SocialButtonProps extends FlowProps { /** 'google' | 'github' | 'apple' (or a custom provider key). */ provider: string; label?: string; } interface WalletButtonProps extends FlowProps { label?: string; } interface EmailPasswordFormProps extends FlowProps { initialEmail?: string; onError?: (error: Error) => void; /** Called with the access token after a successful password grant. */ onSuccess?: (token: string) => void; } interface OTPStepProps extends FlowProps { channel: "email" | "sms"; /** Destination contact — when omitted the component prompts. */ destination?: string; label?: string; onError?: (error: Error) => void; onSuccess?: (token: string) => void; } /** * Social sign-in button. Starts the canonical PKCE redirect with the * provider passed through as an authorize param — IAM routes the user to * the upstream provider and back to `redirectUri`. */ declare const SocialButton: ComponentType; /** * Wallet sign-in button. Starts the canonical PKCE redirect with * `provider=wallet` so IAM presents the wallet-signature challenge. */ declare const WalletButton: ComponentType; /** * Email + password form. Drives IAM's password grant directly (RFC 6749 * §4.3) and reports the access token via `onSuccess`. No credential ever * touches a path other than the canonical token endpoint. */ declare const EmailPasswordForm: ComponentType; /** * One-time-code step. Sends a code to the destination via IAM, then * verifies it against the password grant using the OTP as the password * (IAM's `email_otp` / `sms_otp` grant). Reports the access token. */ declare const OTPStep: ComponentType; /** * Full embedded login. Reads the live method list and renders exactly * the enabled primitives — wallet, social providers, OTP, password — in * canonical order. White-label labels via `labels`; brand mark via * `brand`. */ declare const Login: ComponentType; type OnboardingStep = "identity" | "documents" | "biometric" | "screen" | "submit"; interface OnboardingFlowProps { serverUrl: string; /** Auth bearer token from the prior sign-in. */ token: string; /** Subset of steps to render. Defaults to all five in canonical order. */ steps?: OnboardingStep[]; /** Fired when the user finishes the final step. */ onComplete?: (applicationId: string) => void; /** Brand-mark slot, same shape as Login. */ brand?: ReactNode; className?: string; } interface StepProps { serverUrl: string; token: string; applicationId?: string; onNext: (applicationId: string) => void; onError?: (error: Error) => void; } /** PII step — date of birth + address. */ declare const IdentityStep: ComponentType; /** Document upload step — multipart. */ declare const DocumentsStep: ComponentType; /** Biometric / IDV handoff step. */ declare const BiometricStep: ComponentType; /** AML / sanctions screening step. */ declare const ScreenStep: ComponentType; /** Finalize + fan-out step. */ declare const SubmitStep: ComponentType; /** * Full onboarding pipeline. Renders the selected steps in canonical * order, threading the IAM `application_id` returned by each step into * the next, and fires `onComplete` after the final step. */ declare const OnboardingFlow: ComponentType; export { type AuthMethod, type AuthMethodKind, BiometricStep, DocumentsStep, EmailPasswordForm, type EmailPasswordFormProps, type FlowProps, IdentityStep, Login, type LoginProps, type MethodsResponse, type MethodsView, OTPStep, type OTPStepProps, OnboardingFlow, type OnboardingFlowProps, type OnboardingStep, ScreenStep, SocialButton, type SocialButtonProps, type StepProps, SubmitStep, type UseAuthMethodsOpts, WalletButton, type WalletButtonProps, useAuthMethods };