@pubflow/react 0.4.6 → 0.4.8

package/dist/types/components/BridgeTable.d.ts

@@ -107,4 +107,4 @@ export interface BridgeTableProps<T extends EntityData> extends UseBridgeCrudOpt
 /**
  * Component for displaying data in a table with sorting, filtering, and pagination
  */
-export declare function BridgeTable<T extends EntityData>({ columns, showPagination, showSearch, showFilters, rowKey, onRowClick, className, loadingComponent, emptyComponent, errorComponent, paginationComponent, searchComponent, filterComponent, searchPlaceholder, actions, ...crudOptions }: BridgeTableProps<T>): string | number | true | Iterable<React.ReactNode> | import("react/jsx-runtime").JSX.Element;
+export declare function BridgeTable<T extends EntityData>({ columns, showPagination, showSearch, showFilters, rowKey, onRowClick, className, loadingComponent, emptyComponent, errorComponent, paginationComponent, searchComponent, filterComponent, searchPlaceholder, actions, ...crudOptions }: BridgeTableProps<T>): string | number | bigint | true | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element;

package/dist/types/context/PubflowProvider.d.ts

@@ -2,15 +2,17 @@
  * Pubflow Provider for React
  *
  * Provides a context provider for Pubflow in React applications
+ * Following the same pattern as Next.js and React Native packages
  */
 import React from 'react';
-import { PubflowInstanceConfig, ApiClient, AuthService, User } from '@pubflow/core';
+import { PubflowInstanceConfig, ApiClient, AuthService, TwoFactorService, User, type TwoFactorMethod, type TwoFactorVerifyResult, type TwoFactorStartResult } from '@pubflow/core';
 /**
  * Pubflow context value
  */
 export interface PubflowContextValue {
     instances: Record<string, PubflowInstance>;
     defaultInstance: string;
+    isReady: boolean;
 }
 /**
  * Pubflow instance
@@ -19,9 +21,12 @@ export interface PubflowInstance {
     config: PubflowInstanceConfig;
     apiClient: ApiClient;
     authService: AuthService;
+    twoFactorService: TwoFactorService;
     user: User | null | undefined;
     isAuthenticated: boolean;
     isLoading: boolean;
+    twoFactorPending: boolean;
+    twoFactorMethods: TwoFactorMethod[];
     login: (credentials: {
         email?: string;
         userName?: string;
@@ -33,28 +38,13 @@ export interface PubflowInstance {
         expiresAt?: string;
         user?: User;
     }>;
+    verifyTwoFactor: (methodId: string, code: string) => Promise<TwoFactorVerifyResult>;
+    startTwoFactor: (methodId: string, method: string) => Promise<TwoFactorStartResult>;
 }
 /**
  * Create Pubflow context
  */
 export declare const PubflowContext: React.Context<PubflowContextValue>;
-/**
- * Persistent cache configuration
- */
-export interface PersistentCacheConfig {
-    /**
-     * Whether to enable persistent cache
-     */
-    enabled: boolean;
-    /**
-     * Cache provider function
-     */
-    provider?: () => Map<any, any>;
-    /**
-     * Cache options
-     */
-    options?: any;
-}
 /**
  * Pubflow provider props
  */
@@ -63,38 +53,22 @@ export interface PubflowProviderProps {
     config?: PubflowInstanceConfig;
     instances?: PubflowInstanceConfig[];
     defaultInstance?: string;
-    onSessionExpired?: () => void;
-    onSessionRefreshed?: () => void;
-    showSessionAlerts?: boolean;
-    /**
-     * Persistent cache configuration
-     */
-    persistentCache?: PersistentCacheConfig;
-    /**
-     * Login redirect path (for automatic redirects)
-     */
-    loginRedirectPath?: string;
-    /**
-     * Public paths that don't require authentication
-     */
-    publicPaths?: string[];
-    /**
-     * Enable debug tools
-     * When enabled, debug utilities will be available
-     * Default: false
-     */
     enableDebugTools?: boolean;
-    /**
-     * Theme configuration
-     */
+    showSessionAlerts?: boolean;
+    persistentCache?: {
+        enabled: boolean;
+        maxAge?: number;
+    };
     theme?: {
         primaryColor?: string;
         secondaryColor?: string;
         appName?: string;
-        logo?: string | React.ReactNode;
+        logo?: string;
     };
+    loginRedirectPath?: string;
+    publicPaths?: string[];
 }
 /**
- * Pubflow provider for React
+ * Pubflow Provider Component
  */
-export declare function PubflowProvider({ children, config, instances, defaultInstance, onSessionExpired, onSessionRefreshed, showSessionAlerts, persistentCache, loginRedirectPath, publicPaths, enableDebugTools, theme }: PubflowProviderProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function PubflowProvider({ children, config, instances, defaultInstance, enableDebugTools, showSessionAlerts, persistentCache, theme, loginRedirectPath, publicPaths }: PubflowProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/hooks/useAuth.d.ts

@@ -3,7 +3,7 @@
  *
  * Provides a hook for accessing authentication functionality
  */
-import { User } from '@pubflow/core';
+import { User, type TwoFactorMethod, type TwoFactorVerifyResult, type TwoFactorStartResult } from '@pubflow/core';
 /**
  * Authentication hook result
  */
@@ -11,6 +11,10 @@ export interface UseAuthResult {
     user: User | null;
     isAuthenticated: boolean;
     isLoading: boolean;
+    /** Whether the user is in the 2FA pending step (session is partial) */
+    twoFactorPending: boolean;
+    /** Available 2FA methods for the pending step */
+    twoFactorMethods: TwoFactorMethod[];
     login: (credentials: {
         email?: string;
         userName?: string;
@@ -21,7 +25,10 @@ export interface UseAuthResult {
         isValid: boolean;
         expiresAt?: string;
     }>;
-    refreshUser: () => Promise<User | null>;
+    /** Submit a 2FA verification code to complete a pending login */
+    verifyTwoFactor: (methodId: string, code: string) => Promise<TwoFactorVerifyResult>;
+    /** (Re-)send a 2FA code for the given method */
+    startTwoFactor: (methodId: string, method: string) => Promise<TwoFactorStartResult>;
 }
 /**
  * Hook for accessing authentication functionality

package/dist/types/hooks/useAuthGuard.d.ts

@@ -0,0 +1,77 @@
+/**
+ * Authentication Guard Hook for React
+ *
+ * Framework-agnostic hook for handling authentication validation and redirects
+ */
+/**
+ * Authentication guard options
+ */
+export interface UseAuthGuardOptions {
+    /**
+     * Whether to validate the session on mount
+     */
+    validateOnMount?: boolean;
+    /**
+     * User types allowed to access the page
+     */
+    allowedTypes?: string[];
+    /**
+     * Pubflow instance ID
+     */
+    instanceId?: string;
+    /**
+     * Custom redirect function (framework-specific)
+     */
+    onRedirect?: (path: string, reason: 'unauthenticated' | 'unauthorized' | 'session-expired') => void;
+    /**
+     * Custom session expired handler
+     */
+    onSessionExpired?: () => void;
+    /**
+     * Login redirect path
+     */
+    loginRedirectPath?: string;
+    /**
+     * Access denied redirect path
+     */
+    accessDeniedPath?: string;
+    /**
+     * Whether to show console warnings
+     */
+    enableLogging?: boolean;
+}
+/**
+ * Authentication guard result
+ */
+export interface UseAuthGuardResult {
+    user: any;
+    isAuthenticated: boolean;
+    isLoading: boolean;
+    isAuthorized: boolean;
+    validateSession: () => Promise<{
+        isValid: boolean;
+        expiresAt?: string;
+        user?: any;
+    }>;
+    redirectReason: 'unauthenticated' | 'unauthorized' | 'session-expired' | null;
+}
+/**
+ * Hook for handling authentication validation and redirects
+ *
+ * This hook is framework-agnostic and requires the user to provide
+ * their own redirect function (e.g., Next.js router, React Router, etc.)
+ *
+ * @param options Hook options
+ * @returns Authentication guard result
+ */
+export declare function useAuthGuard({ validateOnMount, allowedTypes, instanceId, onRedirect, onSessionExpired, loginRedirectPath, accessDeniedPath, enableLogging }?: UseAuthGuardOptions): UseAuthGuardResult;
+/**
+ * Simple authentication guard hook with automatic redirects
+ *
+ * This is a simplified version that uses window.location for redirects
+ * Suitable for simple React apps without complex routing
+ *
+ * @param options Hook options
+ * @returns Authentication guard result
+ */
+export declare function useSimpleAuthGuard(options?: Omit<UseAuthGuardOptions, 'onRedirect'>): UseAuthGuardResult;

package/dist/types/hooks/useTwoFactor.d.ts

@@ -0,0 +1,50 @@
+/**
+ * useTwoFactor Hook for React
+ *
+ * Convenience hook for managing 2FA settings (setup, toggle, remove).
+ * For the LOGIN-TIME 2FA flow use useAuth() which surfaces
+ * twoFactorPending / verifyTwoFactor / startTwoFactor.
+ */
+import type { TwoFactorMethod, TwoFactorSetupResult, TwoFactorToggleResult, TwoFactorVerifyResult } from '@pubflow/core';
+export interface UseTwoFactorResult {
+    /** Whether the 2FA system is globally enabled on this server */
+    systemEnabled: boolean;
+    /** Available methods on the server (e.g. ['email']) */
+    availableMethods: string[];
+    /** User's configured 2FA methods (status = active only) */
+    methods: TwoFactorMethod[];
+    isLoading: boolean;
+    error: string | null;
+    /** Load system info and user methods */
+    refresh: () => Promise<void>;
+    /**
+     * Step 1 of setup: register method + send verification code.
+     * Returns { success, method_id, status: 'pending_setup', ... }
+     */
+    setup: (method: string, identifier: string) => Promise<TwoFactorSetupResult>;
+    /**
+     * Step 2 of setup: confirm the code received → activates the method.
+     */
+    confirmSetup: (methodId: string, method: string, code: string) => Promise<TwoFactorVerifyResult>;
+    /**
+     * Enable or disable 2FA for the user.
+     * When disabling with existing methods a verification code is required.
+     */
+    toggle: (enabled: boolean, verificationCode?: string, verificationMethodId?: string) => Promise<TwoFactorToggleResult>;
+    /**
+     * Remove a 2FA method. Requires a verification code from another active method.
+     */
+    removeMethod: (methodId: string, verificationCode: string, verificationMethodId: string) => Promise<{
+        success: boolean;
+        message?: string;
+        error?: string;
+    }>;
+}
+/**
+ * Hook for managing 2FA settings.
+ *
+ * Must be used inside a PubflowProvider.
+ *
+ * @param instanceId Optional Pubflow instance ID
+ */
+export declare function useTwoFactor(instanceId?: string): UseTwoFactorResult;

package/dist/types/index.d.ts

@@ -14,13 +14,16 @@ export * from './components/auth';
 export * from './components/theme';
 export * from './context/PubflowProvider';
 export * from './hooks/useAuth';
+export * from './hooks/useAuthGuard';
 export * from './hooks/useBridgeApi';
 export * from './hooks/useBridgeApiRaw';
 export * from './hooks/useBridgeQuery';
 export * from './hooks/useBridgeMutation';
-export * from './hooks/useServerAuth';
+export * from './hooks/useTwoFactor';
 export * from './hooks/useSearchQueryBuilder';
 import { useBridgeCrud } from './hooks/useBridgeCrud';
 export { useBridgeCrud };
 export * from './storage/BrowserStorageAdapter';
 export * from './utils/auth-utils';
+export { BridgePaymentClient } from '@pubflow/core';
+export type { BridgePaymentConfig, PaymentRequestOptions, CreatePaymentIntentRequest, PaymentIntent, Payment, PaymentMethodType, PaymentMethod, UpdatePaymentMethodRequest, AddressType, Address, CreateAddressRequest, UpdateAddressRequest, Customer, CreateCustomerRequest, UpdateCustomerRequest, SubscriptionStatus, Subscription, CreateSubscriptionRequest, CancelSubscriptionRequest, OrganizationRole, Organization, CreateOrganizationRequest, UpdateOrganizationRequest, OrganizationMember, AddOrganizationMemberRequest, UpdateOrganizationMemberRoleRequest, ConvertGuestToUserRequest, ConvertGuestToUserResponse, PaginationParams, ListResponse } from '@pubflow/core';

package/dist/types/simple/PubflowProvider.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Simple Pubflow Provider for React
+ *
+ * Framework-agnostic authentication provider that works with any React setup
+ */
+import { ReactNode } from 'react';
+export interface User {
+    id: string;
+    email: string;
+    name?: string;
+    [key: string]: any;
+}
+export interface PubflowConfig {
+    baseUrl: string;
+    authPath?: string;
+}
+export interface AuthContextValue {
+    user: User | null;
+    isAuthenticated: boolean;
+    isLoading: boolean;
+    login: (credentials: {
+        email: string;
+        password: string;
+    }) => Promise<{
+        success: boolean;
+        user?: User;
+        error?: string;
+    }>;
+    logout: () => Promise<void>;
+    validateSession: () => Promise<{
+        isValid: boolean;
+        user?: User;
+    }>;
+}
+export interface PubflowProviderProps {
+    children: ReactNode;
+    config: PubflowConfig;
+}
+export declare function PubflowProvider({ children, config }: PubflowProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useAuth(): AuthContextValue;

package/dist/types/utils/asset-utils.d.ts

@@ -0,0 +1,128 @@
+/**
+ * Asset Utilities for Pubflow React
+ *
+ * Utilities for handling assets like logos, images, and other media files
+ * Supports both external URLs and internal assets with proper Vite/bundler integration
+ */
+import React from 'react';
+/**
+ * Process asset URL - supports both external URLs and internal assets
+ *
+ * @param assetUrl - The asset URL to process
+ * @returns Processed URL ready for use in src attributes
+ */
+export declare function processAssetUrl(assetUrl: string | React.ReactNode): string | React.ReactNode;
+/**
+ * Process logo URL specifically - alias for processAssetUrl with better naming
+ *
+ * @param logoUrl - The logo URL to process
+ * @returns Processed URL ready for use in img src
+ */
+export declare function processLogoUrl(logoUrl: string | React.ReactNode): string | React.ReactNode;
+/**
+ * Check if an asset URL is external (hosted on a different domain)
+ *
+ * @param assetUrl - The asset URL to check
+ * @returns True if the URL is external
+ */
+export declare function isExternalAsset(assetUrl: string): boolean;
+/**
+ * Check if an asset URL is a data URL (base64 encoded)
+ *
+ * @param assetUrl - The asset URL to check
+ * @returns True if the URL is a data URL
+ */
+export declare function isDataUrl(assetUrl: string): boolean;
+/**
+ * Get asset file extension from URL
+ *
+ * @param assetUrl - The asset URL
+ * @returns File extension (e.g., 'svg', 'png', 'jpg') or null if not found
+ */
+export declare function getAssetExtension(assetUrl: string): string | null;
+/**
+ * Check if an asset is an image based on its extension
+ *
+ * @param assetUrl - The asset URL
+ * @returns True if the asset appears to be an image
+ */
+export declare function isImageAsset(assetUrl: string): boolean;
+/**
+ * Create a fallback image URL for broken images
+ *
+ * @param width - Image width
+ * @param height - Image height
+ * @param text - Text to display in fallback
+ * @param backgroundColor - Background color
+ * @param textColor - Text color
+ * @returns Data URL for fallback image
+ */
+export declare function createFallbackImageUrl(width?: number, height?: number, text?: string, backgroundColor?: string, textColor?: string): string;
+/**
+ * Asset loading utility with error handling
+ *
+ * @param assetUrl - The asset URL to load
+ * @returns Promise that resolves when asset is loaded
+ */
+export declare function loadAsset(assetUrl: string): Promise<void>;
+/**
+ * Batch load multiple assets
+ *
+ * @param assetUrls - Array of asset URLs to load
+ * @returns Promise that resolves when all assets are loaded
+ */
+export declare function loadAssets(assetUrls: string[]): Promise<void[]>;
+/**
+ * Asset configuration type for components
+ */
+export interface AssetConfig {
+    /**
+     * Asset URL (logo, image, etc.)
+     */
+    url?: string | React.ReactNode;
+    /**
+     * Alt text for accessibility
+     */
+    alt?: string;
+    /**
+     * Fallback URL if main asset fails to load
+     */
+    fallback?: string;
+    /**
+     * Whether to show a fallback placeholder if asset fails
+     */
+    showFallback?: boolean;
+    /**
+     * Custom styles for the asset
+     */
+    style?: React.CSSProperties;
+    /**
+     * CSS class name
+     */
+    className?: string;
+}
+/**
+ * Smart asset component that handles loading, errors, and fallbacks
+ */
+export interface SmartAssetProps extends AssetConfig {
+    /**
+     * Asset URL
+     */
+    src: string | React.ReactNode;
+    /**
+     * Component type to render
+     */
+    as?: 'img' | 'div';
+    /**
+     * Callback when asset loads successfully
+     */
+    onLoad?: () => void;
+    /**
+     * Callback when asset fails to load
+     */
+    onError?: (error: Error) => void;
+}
+/**
+ * Smart Asset Component with automatic fallback handling
+ */
+export declare function SmartAsset({ src, alt, fallback, showFallback, style, className, as, onLoad, onError }: SmartAssetProps): React.ReactElement | null;

package/dist/types/utils/index.d.ts

@@ -3,3 +3,4 @@
  */
 export * from './auth-utils';
 export * from './persistent-cache';
+export * from './asset-utils';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pubflow/react",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "description": "React adapter for Pubflow framework with support for TanStack Router and SWR - Now with snake_case support",
   "main": "dist/index.cjs",
   "module": "dist/index.esm.js",