@authon/react 0.2.0 → 0.3.0

package/dist/index.d.cts

@@ -1,12 +1,14 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode } from 'react';
+import { ReactNode, CSSProperties, InputHTMLAttributes } from 'react';
 import { Authon, AuthonConfig } from '@authon/js';
-import { AuthonUser } from '@authon/shared';
+import { AuthonUser, AuthonOrganization, BrandingConfig, OAuthProviderType, MfaSetupResponse, MfaStatus, PasskeyCredential, Web3Chain, Web3WalletType, Web3NonceResponse, Web3Wallet, SessionInfo, OrganizationMember, CreateOrganizationParams } from '@authon/shared';
 
 interface AuthonContextValue {
     isSignedIn: boolean;
     isLoading: boolean;
     user: AuthonUser | null;
+    activeOrganization: AuthonOrganization | null;
+    setActiveOrganization: (org: AuthonOrganization | null) => void;
     signOut: () => Promise<void>;
     openSignIn: () => Promise<void>;
     openSignUp: () => Promise<void>;
@@ -28,17 +30,33 @@ declare function useUser(): {
 };
 
 interface SignInProps {
-    mode?: 'popup' | 'embedded';
-    redirectUrl?: string;
+    appearance?: {
+        variables?: Partial<BrandingConfig>;
+    };
+    afterSignInUrl?: string;
+    onSignIn?: () => void;
+    onNavigateSignUp?: () => void;
 }
-declare function SignIn({ mode }: SignInProps): react_jsx_runtime.JSX.Element | null;
+declare function SignIn({ appearance, afterSignInUrl, onSignIn, onNavigateSignUp }: SignInProps): react_jsx_runtime.JSX.Element;
 
 interface SignUpProps {
-    mode?: 'popup' | 'embedded';
+    appearance?: {
+        variables?: Partial<BrandingConfig>;
+    };
+    afterSignUpUrl?: string;
+    onSignUp?: () => void;
+    onNavigateSignIn?: () => void;
 }
-declare function SignUp({ mode }: SignUpProps): react_jsx_runtime.JSX.Element | null;
+declare function SignUp({ appearance, afterSignUpUrl, onSignUp, onNavigateSignIn }: SignUpProps): react_jsx_runtime.JSX.Element;
 
-declare function UserButton(): react_jsx_runtime.JSX.Element;
+interface UserButtonProps {
+    appearance?: {
+        variables?: Partial<BrandingConfig>;
+    };
+    afterSignOutUrl?: string;
+    userProfileUrl?: string;
+}
+declare function UserButton({ appearance, afterSignOutUrl, userProfileUrl }: UserButtonProps): react_jsx_runtime.JSX.Element;
 
 interface SignedInProps {
     children: ReactNode;
@@ -57,4 +75,195 @@ interface ProtectProps {
 }
 declare function Protect({ children, fallback, condition }: ProtectProps): react_jsx_runtime.JSX.Element | null;
 
-export { type AuthonContextValue, AuthonProvider, Protect, SignIn, SignUp, SignedIn, SignedOut, UserButton, useAuthon, useUser };
+interface SocialButtonProps {
+    provider: OAuthProviderType;
+    onClick: (provider: OAuthProviderType) => void | Promise<void>;
+    loading?: boolean;
+    disabled?: boolean;
+    /** Override button label. Default: "Continue with {Provider}" */
+    label?: string;
+    /** Compact mode — icon-only square button (default: false) */
+    compact?: boolean;
+    /** Override button className */
+    className?: string;
+    /** Override button style */
+    style?: React.CSSProperties;
+    /** Icon size (default: 20, compact default: 24) */
+    iconSize?: number;
+    /** Border radius in px (default: 10) */
+    borderRadius?: number;
+    /** Button height in px (default: 48) */
+    height?: number;
+    /** Button size for compact mode in px (default: 48) */
+    size?: number;
+}
+declare function SocialButton({ provider, onClick, loading, disabled, label, compact, className, style: userStyle, iconSize, borderRadius, height, size, }: SocialButtonProps): react_jsx_runtime.JSX.Element;
+
+interface SocialButtonsProps {
+    /** Called after successful OAuth sign-in */
+    onSuccess?: () => void;
+    /** Called on OAuth error */
+    onError?: (error: Error) => void;
+    /** Container className */
+    className?: string;
+    /** Container style */
+    style?: React.CSSProperties;
+    /** Gap between buttons in px (default: 10, compact default: 12) */
+    gap?: number;
+    /** Compact mode — icon-only square buttons in a row (default: false) */
+    compact?: boolean;
+    /** Custom labels per provider. e.g. { google: 'Google로 로그인' } */
+    labels?: Partial<Record<OAuthProviderType, string>>;
+    /** Props to pass through to each SocialButton */
+    buttonProps?: Partial<Omit<SocialButtonProps, 'provider' | 'onClick' | 'loading' | 'disabled' | 'compact' | 'label'>>;
+}
+declare function SocialButtons({ onSuccess, onError, className, style: userStyle, gap, compact, labels, buttonProps, }: SocialButtonsProps): react_jsx_runtime.JSX.Element | null;
+
+interface UseAuthonMfaReturn {
+    /** Start MFA setup — returns secret, QR code SVG, and backup codes */
+    setupMfa: () => Promise<(MfaSetupResponse & {
+        qrCodeSvg: string;
+    }) | null>;
+    /** Verify TOTP code to complete MFA setup */
+    verifyMfaSetup: (code: string) => Promise<boolean>;
+    /** Verify TOTP code during sign-in (after receiving mfaToken) */
+    verifyMfa: (mfaToken: string, code: string) => Promise<boolean>;
+    /** Disable MFA (requires current TOTP code) */
+    disableMfa: (code: string) => Promise<boolean>;
+    /** Get current MFA status */
+    getMfaStatus: () => Promise<MfaStatus | null>;
+    /** Regenerate backup codes (requires current TOTP code) */
+    regenerateBackupCodes: (code: string) => Promise<string[] | null>;
+    /** Loading state */
+    isLoading: boolean;
+    /** Last error */
+    error: Error | null;
+}
+declare function useAuthonMfa(): UseAuthonMfaReturn;
+
+interface UseAuthonPasskeysReturn {
+    registerPasskey: (name?: string) => Promise<PasskeyCredential | null>;
+    authenticateWithPasskey: (email?: string) => Promise<boolean>;
+    listPasskeys: () => Promise<PasskeyCredential[] | null>;
+    renamePasskey: (id: string, name: string) => Promise<PasskeyCredential | null>;
+    revokePasskey: (id: string) => Promise<boolean>;
+    isLoading: boolean;
+    error: Error | null;
+}
+declare function useAuthonPasskeys(): UseAuthonPasskeysReturn;
+
+interface UseAuthonPasswordlessReturn {
+    sendMagicLink: (email: string) => Promise<boolean>;
+    sendEmailOtp: (email: string) => Promise<boolean>;
+    verifyPasswordless: (opts: {
+        token?: string;
+        email?: string;
+        code?: string;
+    }) => Promise<boolean>;
+    isLoading: boolean;
+    error: Error | null;
+}
+declare function useAuthonPasswordless(): UseAuthonPasswordlessReturn;
+
+interface LinkWalletParams {
+    address: string;
+    chain: Web3Chain;
+    walletType: Web3WalletType;
+    chainId?: number;
+    message: string;
+    signature: string;
+}
+interface UseAuthonWeb3Return {
+    getNonce: (address: string, chain: Web3Chain, walletType: Web3WalletType, chainId?: number) => Promise<Web3NonceResponse | null>;
+    verify: (message: string, signature: string, address: string, chain: Web3Chain, walletType: Web3WalletType) => Promise<boolean>;
+    listWallets: () => Promise<Web3Wallet[] | null>;
+    linkWallet: (params: LinkWalletParams) => Promise<Web3Wallet | null>;
+    unlinkWallet: (walletId: string) => Promise<boolean>;
+    isLoading: boolean;
+    error: Error | null;
+}
+declare function useAuthonWeb3(): UseAuthonWeb3Return;
+
+interface UseAuthonSessionsReturn {
+    listSessions: () => Promise<SessionInfo[] | null>;
+    revokeSession: (sessionId: string) => Promise<boolean>;
+    isLoading: boolean;
+    error: Error | null;
+}
+declare function useAuthonSessions(): UseAuthonSessionsReturn;
+
+interface UseOrganizationReturn {
+    organization: AuthonOrganization | null;
+    members: OrganizationMember[];
+    isLoaded: boolean;
+}
+declare function useOrganization(): UseOrganizationReturn;
+
+interface UseOrganizationListReturn {
+    organizations: AuthonOrganization[];
+    isLoaded: boolean;
+    createOrganization: (params: CreateOrganizationParams) => Promise<AuthonOrganization | null>;
+    setActive: (org: AuthonOrganization | null) => void;
+}
+declare function useOrganizationList(): UseOrganizationListReturn;
+
+interface BrandingState {
+    branding: BrandingConfig;
+    providers: OAuthProviderType[];
+    isLoaded: boolean;
+}
+declare function useBranding(): BrandingState;
+
+interface UserProfileProps {
+    appearance?: {
+        variables?: Partial<BrandingConfig>;
+    };
+}
+declare function UserProfile({ appearance }: UserProfileProps): react_jsx_runtime.JSX.Element;
+
+interface ThemeProviderProps {
+    branding: BrandingConfig;
+    children: ReactNode;
+    overrides?: Partial<BrandingConfig>;
+    style?: CSSProperties;
+    className?: string;
+}
+declare function ThemeProvider({ branding, children, overrides, style, className }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
+
+type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'social' | 'ghost';
+type ButtonSize = 'sm' | 'md' | 'lg';
+interface ButtonProps {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    fullWidth?: boolean;
+    loading?: boolean;
+    disabled?: boolean;
+    children: ReactNode;
+    onClick?: () => void | Promise<void>;
+    type?: 'button' | 'submit' | 'reset';
+    style?: CSSProperties;
+}
+declare function Button({ variant, size, fullWidth, loading, disabled, children, onClick, type, style: userStyle, }: ButtonProps): react_jsx_runtime.JSX.Element;
+
+interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+    label?: string;
+    error?: string;
+    hint?: string;
+    inputStyle?: 'outline' | 'filled';
+    onChange?: (value: string) => void;
+    rightElement?: React.ReactNode;
+}
+declare function Input({ label, error, hint, inputStyle, onChange, rightElement, style: userStyle, ...rest }: InputProps): react_jsx_runtime.JSX.Element;
+
+interface DividerProps {
+    label?: string;
+}
+declare function Divider({ label }: DividerProps): react_jsx_runtime.JSX.Element;
+
+interface ProviderIconProps {
+    provider: OAuthProviderType;
+    size?: number;
+}
+declare function ProviderIcon({ provider, size }: ProviderIconProps): react_jsx_runtime.JSX.Element;
+
+export { type AuthonContextValue, AuthonProvider, type BrandingState, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Divider, Input, type InputProps, type LinkWalletParams, Protect, ProviderIcon, SignIn, type SignInProps, SignUp, type SignUpProps, SignedIn, SignedOut, SocialButton, type SocialButtonProps, SocialButtons, type SocialButtonsProps, ThemeProvider, type UseAuthonMfaReturn, type UseAuthonPasskeysReturn, type UseAuthonPasswordlessReturn, type UseAuthonSessionsReturn, type UseAuthonWeb3Return, type UseOrganizationListReturn, type UseOrganizationReturn, UserButton, type UserButtonProps, UserProfile, type UserProfileProps, useAuthon, useAuthonMfa, useAuthonPasskeys, useAuthonPasswordless, useAuthonSessions, useAuthonWeb3, useBranding, useOrganization, useOrganizationList, useUser };

package/dist/index.d.ts

@@ -1,12 +1,14 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode } from 'react';
+import { ReactNode, CSSProperties, InputHTMLAttributes } from 'react';
 import { Authon, AuthonConfig } from '@authon/js';
-import { AuthonUser } from '@authon/shared';
+import { AuthonUser, AuthonOrganization, BrandingConfig, OAuthProviderType, MfaSetupResponse, MfaStatus, PasskeyCredential, Web3Chain, Web3WalletType, Web3NonceResponse, Web3Wallet, SessionInfo, OrganizationMember, CreateOrganizationParams } from '@authon/shared';
 
 interface AuthonContextValue {
     isSignedIn: boolean;
     isLoading: boolean;
     user: AuthonUser | null;
+    activeOrganization: AuthonOrganization | null;
+    setActiveOrganization: (org: AuthonOrganization | null) => void;
     signOut: () => Promise<void>;
     openSignIn: () => Promise<void>;
     openSignUp: () => Promise<void>;
@@ -28,17 +30,33 @@ declare function useUser(): {
 };
 
 interface SignInProps {
-    mode?: 'popup' | 'embedded';
-    redirectUrl?: string;
+    appearance?: {
+        variables?: Partial<BrandingConfig>;
+    };
+    afterSignInUrl?: string;
+    onSignIn?: () => void;
+    onNavigateSignUp?: () => void;
 }
-declare function SignIn({ mode }: SignInProps): react_jsx_runtime.JSX.Element | null;
+declare function SignIn({ appearance, afterSignInUrl, onSignIn, onNavigateSignUp }: SignInProps): react_jsx_runtime.JSX.Element;
 
 interface SignUpProps {
-    mode?: 'popup' | 'embedded';
+    appearance?: {
+        variables?: Partial<BrandingConfig>;
+    };
+    afterSignUpUrl?: string;
+    onSignUp?: () => void;
+    onNavigateSignIn?: () => void;
 }
-declare function SignUp({ mode }: SignUpProps): react_jsx_runtime.JSX.Element | null;
+declare function SignUp({ appearance, afterSignUpUrl, onSignUp, onNavigateSignIn }: SignUpProps): react_jsx_runtime.JSX.Element;
 
-declare function UserButton(): react_jsx_runtime.JSX.Element;
+interface UserButtonProps {
+    appearance?: {
+        variables?: Partial<BrandingConfig>;
+    };
+    afterSignOutUrl?: string;
+    userProfileUrl?: string;
+}
+declare function UserButton({ appearance, afterSignOutUrl, userProfileUrl }: UserButtonProps): react_jsx_runtime.JSX.Element;
 
 interface SignedInProps {
     children: ReactNode;
@@ -57,4 +75,195 @@ interface ProtectProps {
 }
 declare function Protect({ children, fallback, condition }: ProtectProps): react_jsx_runtime.JSX.Element | null;
 
-export { type AuthonContextValue, AuthonProvider, Protect, SignIn, SignUp, SignedIn, SignedOut, UserButton, useAuthon, useUser };
+interface SocialButtonProps {
+    provider: OAuthProviderType;
+    onClick: (provider: OAuthProviderType) => void | Promise<void>;
+    loading?: boolean;
+    disabled?: boolean;
+    /** Override button label. Default: "Continue with {Provider}" */
+    label?: string;
+    /** Compact mode — icon-only square button (default: false) */
+    compact?: boolean;
+    /** Override button className */
+    className?: string;
+    /** Override button style */
+    style?: React.CSSProperties;
+    /** Icon size (default: 20, compact default: 24) */
+    iconSize?: number;
+    /** Border radius in px (default: 10) */
+    borderRadius?: number;
+    /** Button height in px (default: 48) */
+    height?: number;
+    /** Button size for compact mode in px (default: 48) */
+    size?: number;
+}
+declare function SocialButton({ provider, onClick, loading, disabled, label, compact, className, style: userStyle, iconSize, borderRadius, height, size, }: SocialButtonProps): react_jsx_runtime.JSX.Element;
+
+interface SocialButtonsProps {
+    /** Called after successful OAuth sign-in */
+    onSuccess?: () => void;
+    /** Called on OAuth error */
+    onError?: (error: Error) => void;
+    /** Container className */
+    className?: string;
+    /** Container style */
+    style?: React.CSSProperties;
+    /** Gap between buttons in px (default: 10, compact default: 12) */
+    gap?: number;
+    /** Compact mode — icon-only square buttons in a row (default: false) */
+    compact?: boolean;
+    /** Custom labels per provider. e.g. { google: 'Google로 로그인' } */
+    labels?: Partial<Record<OAuthProviderType, string>>;
+    /** Props to pass through to each SocialButton */
+    buttonProps?: Partial<Omit<SocialButtonProps, 'provider' | 'onClick' | 'loading' | 'disabled' | 'compact' | 'label'>>;
+}
+declare function SocialButtons({ onSuccess, onError, className, style: userStyle, gap, compact, labels, buttonProps, }: SocialButtonsProps): react_jsx_runtime.JSX.Element | null;
+
+interface UseAuthonMfaReturn {
+    /** Start MFA setup — returns secret, QR code SVG, and backup codes */
+    setupMfa: () => Promise<(MfaSetupResponse & {
+        qrCodeSvg: string;
+    }) | null>;
+    /** Verify TOTP code to complete MFA setup */
+    verifyMfaSetup: (code: string) => Promise<boolean>;
+    /** Verify TOTP code during sign-in (after receiving mfaToken) */
+    verifyMfa: (mfaToken: string, code: string) => Promise<boolean>;
+    /** Disable MFA (requires current TOTP code) */
+    disableMfa: (code: string) => Promise<boolean>;
+    /** Get current MFA status */
+    getMfaStatus: () => Promise<MfaStatus | null>;
+    /** Regenerate backup codes (requires current TOTP code) */
+    regenerateBackupCodes: (code: string) => Promise<string[] | null>;
+    /** Loading state */
+    isLoading: boolean;
+    /** Last error */
+    error: Error | null;
+}
+declare function useAuthonMfa(): UseAuthonMfaReturn;
+
+interface UseAuthonPasskeysReturn {
+    registerPasskey: (name?: string) => Promise<PasskeyCredential | null>;
+    authenticateWithPasskey: (email?: string) => Promise<boolean>;
+    listPasskeys: () => Promise<PasskeyCredential[] | null>;
+    renamePasskey: (id: string, name: string) => Promise<PasskeyCredential | null>;
+    revokePasskey: (id: string) => Promise<boolean>;
+    isLoading: boolean;
+    error: Error | null;
+}
+declare function useAuthonPasskeys(): UseAuthonPasskeysReturn;
+
+interface UseAuthonPasswordlessReturn {
+    sendMagicLink: (email: string) => Promise<boolean>;
+    sendEmailOtp: (email: string) => Promise<boolean>;
+    verifyPasswordless: (opts: {
+        token?: string;
+        email?: string;
+        code?: string;
+    }) => Promise<boolean>;
+    isLoading: boolean;
+    error: Error | null;
+}
+declare function useAuthonPasswordless(): UseAuthonPasswordlessReturn;
+
+interface LinkWalletParams {
+    address: string;
+    chain: Web3Chain;
+    walletType: Web3WalletType;
+    chainId?: number;
+    message: string;
+    signature: string;
+}
+interface UseAuthonWeb3Return {
+    getNonce: (address: string, chain: Web3Chain, walletType: Web3WalletType, chainId?: number) => Promise<Web3NonceResponse | null>;
+    verify: (message: string, signature: string, address: string, chain: Web3Chain, walletType: Web3WalletType) => Promise<boolean>;
+    listWallets: () => Promise<Web3Wallet[] | null>;
+    linkWallet: (params: LinkWalletParams) => Promise<Web3Wallet | null>;
+    unlinkWallet: (walletId: string) => Promise<boolean>;
+    isLoading: boolean;
+    error: Error | null;
+}
+declare function useAuthonWeb3(): UseAuthonWeb3Return;
+
+interface UseAuthonSessionsReturn {
+    listSessions: () => Promise<SessionInfo[] | null>;
+    revokeSession: (sessionId: string) => Promise<boolean>;
+    isLoading: boolean;
+    error: Error | null;
+}
+declare function useAuthonSessions(): UseAuthonSessionsReturn;
+
+interface UseOrganizationReturn {
+    organization: AuthonOrganization | null;
+    members: OrganizationMember[];
+    isLoaded: boolean;
+}
+declare function useOrganization(): UseOrganizationReturn;
+
+interface UseOrganizationListReturn {
+    organizations: AuthonOrganization[];
+    isLoaded: boolean;
+    createOrganization: (params: CreateOrganizationParams) => Promise<AuthonOrganization | null>;
+    setActive: (org: AuthonOrganization | null) => void;
+}
+declare function useOrganizationList(): UseOrganizationListReturn;
+
+interface BrandingState {
+    branding: BrandingConfig;
+    providers: OAuthProviderType[];
+    isLoaded: boolean;
+}
+declare function useBranding(): BrandingState;
+
+interface UserProfileProps {
+    appearance?: {
+        variables?: Partial<BrandingConfig>;
+    };
+}
+declare function UserProfile({ appearance }: UserProfileProps): react_jsx_runtime.JSX.Element;
+
+interface ThemeProviderProps {
+    branding: BrandingConfig;
+    children: ReactNode;
+    overrides?: Partial<BrandingConfig>;
+    style?: CSSProperties;
+    className?: string;
+}
+declare function ThemeProvider({ branding, children, overrides, style, className }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
+
+type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'social' | 'ghost';
+type ButtonSize = 'sm' | 'md' | 'lg';
+interface ButtonProps {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    fullWidth?: boolean;
+    loading?: boolean;
+    disabled?: boolean;
+    children: ReactNode;
+    onClick?: () => void | Promise<void>;
+    type?: 'button' | 'submit' | 'reset';
+    style?: CSSProperties;
+}
+declare function Button({ variant, size, fullWidth, loading, disabled, children, onClick, type, style: userStyle, }: ButtonProps): react_jsx_runtime.JSX.Element;
+
+interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+    label?: string;
+    error?: string;
+    hint?: string;
+    inputStyle?: 'outline' | 'filled';
+    onChange?: (value: string) => void;
+    rightElement?: React.ReactNode;
+}
+declare function Input({ label, error, hint, inputStyle, onChange, rightElement, style: userStyle, ...rest }: InputProps): react_jsx_runtime.JSX.Element;
+
+interface DividerProps {
+    label?: string;
+}
+declare function Divider({ label }: DividerProps): react_jsx_runtime.JSX.Element;
+
+interface ProviderIconProps {
+    provider: OAuthProviderType;
+    size?: number;
+}
+declare function ProviderIcon({ provider, size }: ProviderIconProps): react_jsx_runtime.JSX.Element;
+
+export { type AuthonContextValue, AuthonProvider, type BrandingState, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Divider, Input, type InputProps, type LinkWalletParams, Protect, ProviderIcon, SignIn, type SignInProps, SignUp, type SignUpProps, SignedIn, SignedOut, SocialButton, type SocialButtonProps, SocialButtons, type SocialButtonsProps, ThemeProvider, type UseAuthonMfaReturn, type UseAuthonPasskeysReturn, type UseAuthonPasswordlessReturn, type UseAuthonSessionsReturn, type UseAuthonWeb3Return, type UseOrganizationListReturn, type UseOrganizationReturn, UserButton, type UserButtonProps, UserProfile, type UserProfileProps, useAuthon, useAuthonMfa, useAuthonPasskeys, useAuthonPasswordless, useAuthonSessions, useAuthonWeb3, useBranding, useOrganization, useOrganizationList, useUser };