@passkeyme/react-auth 1.0.0 → 1.1.1

package/dist/index.js

@@ -2,10 +2,351 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var reactCore = require('@passkeyme/react-core');
 var auth = require('@passkeyme/auth');
 var reactDom = require('react-dom');
 
+/**
+ * React Context Provider for PasskeyMe Authentication (Core)
+ * This is the shared provider for React and React Native
+ */
+const PasskeymeContext = React.createContext(null);
+const usePasskeymeContext = () => {
+    const context = React.useContext(PasskeymeContext);
+    if (!context) {
+        throw new Error("usePasskeymeContext must be used within a PasskeymeProvider");
+    }
+    return context;
+};
+const PasskeymeProvider$1 = ({ config, children, loadingComponent = null, errorComponent, onAuthChange, onError, }) => {
+    const [auth$1] = React.useState(() => new auth.PasskeymeAuth(config));
+    const [authState, setAuthState] = React.useState({
+        user: null,
+        loading: true,
+        error: null,
+        isAuthenticated: false,
+    });
+    const [authLoading, setAuthLoading] = React.useState(false);
+    const [appConfig, setAppConfig] = React.useState(null);
+    React.useEffect(() => {
+        // Subscribe to state changes using the new subscription system
+        const unsubscribeState = auth$1.subscribe((newState) => {
+            setAuthState(newState);
+            // Call auth change callback
+            if (onAuthChange) {
+                onAuthChange(newState.user);
+            }
+            // Call error callback
+            if (newState.error && onError) {
+                onError(newState.error);
+            }
+        });
+        // Set up event listener for additional auth events
+        const unsubscribeEvents = auth$1.addEventListener((event) => {
+            // Handle specific events
+            switch (event.type) {
+                case "login":
+                    if (onAuthChange && event.user) {
+                        onAuthChange(event.user);
+                    }
+                    break;
+                case "logout":
+                    if (onAuthChange) {
+                        onAuthChange(null);
+                    }
+                    break;
+                case "error":
+                    if (onError && event.error) {
+                        onError(event.error);
+                    }
+                    break;
+            }
+        });
+        // Initialize auth
+        const initAuth = async () => {
+            try {
+                await auth$1.init();
+                // Load app configuration
+                try {
+                    const config = await auth$1.getAppConfig();
+                    setAppConfig(config);
+                }
+                catch (configError) {
+                    console.warn("Failed to load app configuration:", configError);
+                }
+            }
+            catch (error) {
+                const errorMessage = error instanceof Error
+                    ? error.message
+                    : "Authentication initialization failed";
+                if (onError) {
+                    onError(errorMessage);
+                }
+            }
+        };
+        initAuth();
+        // Cleanup
+        return () => {
+            unsubscribeState();
+            unsubscribeEvents();
+        };
+    }, [auth$1, onAuthChange, onError]);
+    const contextValue = {
+        auth: auth$1,
+        user: authState.user,
+        loading: authState.loading,
+        error: authState.error,
+        isAuthenticated: authState.isAuthenticated,
+        authLoading,
+        setAuthLoading,
+        config,
+        appConfig,
+    };
+    // Show loading component if provided
+    if (authState.loading && loadingComponent) {
+        return React.createElement(React.Fragment, null, loadingComponent);
+    }
+    // Show error component if provided
+    if (authState.error && !authState.isAuthenticated && errorComponent) {
+        return React.createElement(React.Fragment, null, errorComponent(authState.error));
+    }
+    return (React.createElement(PasskeymeContext.Provider, { value: contextValue }, children));
+};
+
+/**
+ * Core React hooks for PasskeyMe Authentication
+ * Shared between React and React Native
+ */
+// Simple debug function for core package
+function debugLog$1(config, ...args) {
+    if (config.debug) {
+        console.log("[PasskeymeAuth]", ...args);
+    }
+}
+const usePasskeyme = () => {
+    const { auth: auth$1, user, loading, error, isAuthenticated, authLoading, setAuthLoading, config, } = usePasskeymeContext();
+    if (!auth$1) {
+        throw new Error("PasskeyMe auth instance not available");
+    }
+    const redirectToLogin = React.useCallback((options) => {
+        return auth$1.redirectToLogin(options);
+    }, [auth$1]);
+    const redirectToOAuth = React.useCallback((provider, redirectUri) => {
+        return auth$1.redirectToOAuth(provider, redirectUri);
+    }, [auth$1]);
+    const handleAuthCallback = React.useCallback(async () => {
+        return auth$1.handleAuthCallback();
+    }, [auth$1]);
+    const handleCallback = React.useCallback(async () => {
+        return auth$1.handleCallback();
+    }, [auth$1]);
+    const handleTokenCallback = React.useCallback(async (token) => {
+        return auth$1.handleTokenCallback(token);
+    }, [auth$1]);
+    const logout = React.useCallback(async () => {
+        return auth$1.logout();
+    }, [auth$1]);
+    const getAccessToken = React.useCallback(async () => {
+        return auth$1.getAccessToken();
+    }, [auth$1]);
+    const refreshToken = React.useCallback(async () => {
+        return auth$1.refreshToken();
+    }, [auth$1]);
+    const getBaseUrl = React.useCallback(() => {
+        return auth$1.getBaseUrl();
+    }, [auth$1]);
+    const getAppId = React.useCallback(() => {
+        return auth$1.getAppId();
+    }, [auth$1]);
+    const isPasskeySupported = React.useCallback(() => {
+        return auth$1.isPasskeySupported();
+    }, [auth$1]);
+    const hasStoredPasskeys = React.useCallback(async (username) => {
+        return await auth$1.hasStoredPasskeys(username);
+    }, [auth$1]);
+    const passkeyLogin = React.useCallback(async (username, apiKey) => {
+        return auth$1.passkeyLogin(username, apiKey);
+    }, [auth$1]);
+    const smartLogin = React.useCallback(async (username, apiKey) => {
+        return auth$1.smartLogin(username, apiKey);
+    }, [auth$1]);
+    const getAppConfig = React.useCallback(async () => {
+        return auth$1.getAppConfig();
+    }, [auth$1]);
+    const triggerPasskeymeAuth = React.useCallback(async (options = {}) => {
+        var _a, _b;
+        const { username, apiKey, mode = "hosted", onSuccess, onError, onOAuthRequired, showNotifications = false, // Default to false for core package
+        forcePasskeyOnly = false, } = options;
+        debugLog$1(config, "triggerPasskeymeAuth", "Starting authentication with options:", {
+            username: username || "(discoverable)",
+            hasApiKey: !!(apiKey ||
+                config.passkeyApiKey ||
+                ((_a = config.passkey) === null || _a === void 0 ? void 0 : _a.apiKey)),
+            mode,
+            forcePasskeyOnly,
+            showNotifications,
+            isPasskeySupported: auth$1.isPasskeySupported(),
+            // Note: hasStoredPasskeys is now async, so we can't include it in this sync log
+        });
+        try {
+            setAuthLoading(true);
+            // Get effective API key
+            const effectiveApiKey = apiKey || config.passkeyApiKey || ((_b = config.passkey) === null || _b === void 0 ? void 0 : _b.apiKey);
+            if (forcePasskeyOnly) {
+                // Force passkey-only authentication
+                debugLog$1(config, "triggerPasskeymeAuth", "Force passkey-only mode");
+                if (!effectiveApiKey) {
+                    throw new Error("API key required for passkey authentication");
+                }
+                const result = await auth$1.passkeyLogin(username || undefined, effectiveApiKey);
+                debugLog$1(config, "triggerPasskeymeAuth", "Passkey-only authentication successful");
+                if (onSuccess) {
+                    onSuccess(result, "passkey");
+                }
+            }
+            else {
+                // Try passkey authentication first, then handle fallback based on mode
+                try {
+                    debugLog$1(config, "triggerPasskeymeAuth", "Attempting passkey authentication");
+                    // Validate that we have an API key for passkey authentication
+                    if (!effectiveApiKey) {
+                        debugLog$1(config, "triggerPasskeymeAuth", "No API key available for passkey auth, skipping to fallback");
+                        throw new Error("No API key available for passkey authentication");
+                    }
+                    let authUsername = username;
+                    // If no username provided, let smartLogin handle the logic
+                    // (it will check app config, localStorage, discoverable credentials, etc.)
+                    if (!authUsername) {
+                        debugLog$1(config, "triggerPasskeymeAuth", "No username provided, letting smartLogin handle auto-detection");
+                    }
+                    // Attempt smart passkey authentication (handles localStorage, discoverable credentials, etc.)
+                    debugLog$1(config, "triggerPasskeymeAuth", "Calling smartLogin with username:", authUsername || "(auto-detect)");
+                    const result = await auth$1.smartLogin(authUsername, effectiveApiKey);
+                    debugLog$1(config, "triggerPasskeymeAuth", "Smart authentication result:", result);
+                    if (result.method === "passkey" && result.user) {
+                        debugLog$1(config, "triggerPasskeymeAuth", "Passkey authentication successful");
+                        if (onSuccess) {
+                            onSuccess(result.user, "passkey");
+                        }
+                    }
+                    else {
+                        // smartLogin returned redirect method, which means it already redirected
+                        debugLog$1(config, "triggerPasskeymeAuth", "smartLogin redirected to hosted auth");
+                        return;
+                    }
+                }
+                catch (passkeyError) {
+                    // Passkey failed, handle fallback based on mode
+                    debugLog$1(config, "triggerPasskeymeAuth", "Passkey authentication failed:", passkeyError);
+                    // Enhanced error handling for PasskeymeError
+                    if (passkeyError instanceof auth.PasskeymeError) {
+                        debugLog$1(config, "triggerPasskeymeAuth", "PasskeymeError details:", {
+                            code: passkeyError.code,
+                            message: passkeyError.message,
+                            userMessage: passkeyError.userMessage,
+                            recoverable: passkeyError.recoverable,
+                            retryable: passkeyError.retryable,
+                            suggestedAction: passkeyError.suggestedAction,
+                        });
+                        // Handle specific error codes that should not trigger fallback
+                        if (passkeyError.code === auth.PasskeymeErrorCode.USER_CANCELLED ||
+                            passkeyError.code === auth.PasskeymeErrorCode.PASSKEY_CANCELLED) {
+                            // User cancelled - don't fallback, just call error handler
+                            if (onError) {
+                                onError(passkeyError.userMessage);
+                            }
+                            return;
+                        }
+                        if (passkeyError.code === auth.PasskeymeErrorCode.PASSKEY_NOT_SUPPORTED) {
+                            // Passkeys not supported - immediately fallback without retrying
+                            debugLog$1(config, "triggerPasskeymeAuth", "Passkeys not supported, proceeding to fallback");
+                        }
+                    }
+                    debugLog$1(config, "triggerPasskeymeAuth", "Handling fallback for mode:", mode);
+                    if (mode === "hosted") {
+                        // Hosted mode: redirect to hosted auth pages
+                        debugLog$1(config, "triggerPasskeymeAuth", "Passkey failed, redirecting to hosted auth");
+                        auth$1.redirectToLogin();
+                        return;
+                    }
+                    else if (mode === "inline") {
+                        // Inline mode: provide OAuth providers to developer
+                        debugLog$1(config, "triggerPasskeymeAuth", "Passkey failed, providing OAuth options for inline mode");
+                        if (onOAuthRequired) {
+                            try {
+                                // Get available OAuth providers from app config
+                                const appConfig = await auth$1.getAppConfig();
+                                const providers = appConfig.oauthProviders || [
+                                    "google",
+                                    "github",
+                                ];
+                                debugLog$1(config, "triggerPasskeymeAuth", "Available OAuth providers:", providers);
+                                onOAuthRequired(providers);
+                                return;
+                            }
+                            catch (configError) {
+                                debugLog$1(config, "triggerPasskeymeAuth", "Failed to get app config, using default providers");
+                                onOAuthRequired(["google", "github"]);
+                                return;
+                            }
+                        }
+                        else {
+                            throw new Error("Passkey authentication failed and no onOAuthRequired callback provided for inline mode");
+                        }
+                    }
+                }
+            }
+        }
+        catch (error) {
+            console.error("[triggerPasskeymeAuth] Authentication error:", error);
+            let errorMessage = "Authentication failed";
+            // Enhanced error handling for PasskeymeError
+            if (error instanceof auth.PasskeymeError) {
+                errorMessage = error.userMessage;
+                debugLog$1(config, "triggerPasskeymeAuth", "Final error handling:", {
+                    code: error.code,
+                    userMessage: error.userMessage,
+                    retryable: error.retryable,
+                    suggestedAction: error.suggestedAction,
+                });
+            }
+            else {
+                errorMessage = (error === null || error === void 0 ? void 0 : error.message) || "Authentication failed";
+            }
+            if (onError) {
+                onError(errorMessage);
+            }
+        }
+        finally {
+            setAuthLoading(false);
+        }
+    }, [auth$1, config, setAuthLoading]);
+    return {
+        user,
+        loading,
+        error,
+        isAuthenticated,
+        config,
+        redirectToLogin,
+        redirectToOAuth,
+        handleAuthCallback,
+        handleCallback,
+        handleTokenCallback,
+        logout,
+        getAccessToken,
+        refreshToken,
+        getBaseUrl,
+        getAppId,
+        isPasskeySupported,
+        hasStoredPasskeys,
+        passkeyLogin,
+        smartLogin,
+        getAppConfig,
+        triggerPasskeymeAuth,
+        authLoading,
+        auth: auth$1,
+    };
+};
+
 const NotificationContext = React.createContext(null);
 const useNotifications = () => {
     const context = React.useContext(NotificationContext);
@@ -295,10 +636,10 @@ const PasskeymeProvider = ({ children, config, enableNotifications = true, ...co
         };
     }, [config]);
     if (enableNotifications) {
-        return (jsxRuntime.jsx(reactCore.PasskeymeProvider, { ...coreProviderProps, config: enhancedConfig, children: jsxRuntime.jsx(NotificationProvider, { children: children }) }));
+        return (jsxRuntime.jsx(PasskeymeProvider$1, { ...coreProviderProps, config: enhancedConfig, children: jsxRuntime.jsx(NotificationProvider, { children: children }) }));
     }
     // If notifications are disabled, just use the core provider
-    return (jsxRuntime.jsx(reactCore.PasskeymeProvider, { ...coreProviderProps, config: enhancedConfig, children: children }));
+    return (jsxRuntime.jsx(PasskeymeProvider$1, { ...coreProviderProps, config: enhancedConfig, children: children }));
 };
 
 /**
@@ -578,7 +919,7 @@ const useLoadingState = (options = {}) => {
  * Hook to get only the authentication state
  */
 const useAuthState = () => {
-    const { user, loading, error, isAuthenticated } = reactCore.usePasskeyme();
+    const { user, loading, error, isAuthenticated } = usePasskeyme();
     return {
         user,
         loading,
@@ -590,7 +931,7 @@ const useAuthState = () => {
  * Hook to get only the authentication methods
  */
 const useAuth = () => {
-    const { redirectToLogin, redirectToOAuth, handleAuthCallback, handleCallback, logout, getAccessToken, refreshToken, } = reactCore.usePasskeyme();
+    const { redirectToLogin, redirectToOAuth, handleAuthCallback, handleCallback, logout, getAccessToken, refreshToken, } = usePasskeyme();
     return {
         redirectToLogin,
         redirectToOAuth,
@@ -629,7 +970,7 @@ const DEFAULT_STORAGE_KEY = "passkeyme_last_username";
  * ```
  */
 function useUsernameManager({ initialUsername = "", rememberUsername: initialRememberUsername = true, storageKey = DEFAULT_STORAGE_KEY, appId, } = {}) {
-    const { config } = reactCore.usePasskeyme();
+    const { config } = usePasskeyme();
     // Use app ID from config if not provided
     const effectiveAppId = appId || config.appId;
     // Create app-specific storage key
@@ -726,7 +1067,7 @@ const providerNames = {
     facebook: "Facebook",
 };
 const PasskeymeOAuthButtonComponent = ({ provider, variant = "default", size = "medium", redirectUri, children, className = "", style = {}, disabled = false, onClick, loading: externalLoading = false, }) => {
-    const { redirectToOAuth, loading: authLoading } = reactCore.usePasskeyme();
+    const { redirectToOAuth, loading: authLoading } = usePasskeyme();
     const [internalLoading, setInternalLoading] = React.useState(false);
     // Memoize loading state calculation
     const isLoading = React.useMemo(() => authLoading || externalLoading || internalLoading, [authLoading, externalLoading, internalLoading]);
@@ -1493,7 +1834,7 @@ const PasskeymeButtonComponent = ({ username, apiKey, children, className, style
 // Accessibility props
 "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy, "aria-pressed": ariaPressed, id, tabIndex, onKeyDown, onFocus, onBlur, autoFocus = false, }) => {
     var _a;
-    const { smartLogin, isPasskeySupported, redirectToLogin, config } = reactCore.usePasskeyme();
+    const { smartLogin, isPasskeySupported, redirectToLogin, config } = usePasskeyme();
     const notifications = useNotifications();
     const [loading, setLoading] = React.useState(false);
     const [, setIsFocused] = React.useState(false);
@@ -1902,7 +2243,7 @@ onSuccess, onError, onProviderSelect, onPasskeyAttempt, onOAuthRequired, onLogou
 // Advanced options
 debugMode = false, passkeyOptions = {}, }) => {
     var _a, _b, _c;
-    const { user, isAuthenticated, logout, triggerPasskeymeAuth, authLoading, isPasskeySupported, } = reactCore.usePasskeyme();
+    const { user, isAuthenticated, logout, triggerPasskeymeAuth, authLoading, isPasskeySupported, } = usePasskeyme();
     const [showOAuthOptions, setShowOAuthOptions] = React.useState(!hideProvidersInitially);
     const [availableProviders, setAvailableProviders] = React.useState(providers);
     const [passkeyAttempted, setPasskeyAttempted] = React.useState(false);
@@ -5925,7 +6266,7 @@ const DefaultPasskeyPrompt = ({ user, onRegister, onSkip, loading, }) => (jsxRun
  */
 const PasskeymeCallbackHandler = ({ loadingComponent: LoadingComponent, errorComponent: ErrorComponent, successRedirect = "/", errorRedirect = "/login", onSuccess, onError, passkey, }) => {
     var _a, _b, _c, _d, _e;
-    const { handleCallback, user, error: authError, getBaseUrl, handleTokenCallback, config, auth, } = reactCore.usePasskeyme();
+    const { handleCallback, user, error: authError, getBaseUrl, handleTokenCallback, config, auth, } = usePasskeyme();
     const notifications = useNotifications();
     const [state, setState] = React.useState({
         loading: true,
@@ -6039,7 +6380,7 @@ const PasskeymeCallbackHandler = ({ loadingComponent: LoadingComponent, errorCom
             updateState({ passkeyRegistering: true });
             // Create axios instance for PasskeyMe API
             const axiosInstance = axios$1.create({
-                baseURL: `${getBaseUrl()}/api/webauthn/${config.appId}`,
+                baseURL: `${getBaseUrl()}/webauthn/${config.appId}`,
                 headers: {
                     "x-api-key": effectivePasskeyConfig.apiKey,
                     "Content-Type": "application/json",
@@ -6601,7 +6942,7 @@ var PasskeymeErrorDisplay$1 = /*#__PURE__*/Object.freeze({
 });
 
 const PasskeymeProtectedRoute = React.memo(({ children, fallback = jsxRuntime.jsx("div", { children: "Please log in to access this content." }), redirectTo, requiredRoles = [], hasAccess }) => {
-    const { user, loading, isAuthenticated } = reactCore.usePasskeyme();
+    const { user, loading, isAuthenticated } = usePasskeyme();
     const accessResult = React.useMemo(() => {
         // Show loading state
         if (loading) {
@@ -8154,7 +8495,7 @@ const MockPasskeymeProvider = ({ children, config = {}, initialUser = null, init
         redirectUri: "http://localhost:3000/callback",
         ...config,
     };
-    return jsxRuntime.jsx(reactCore.PasskeymeProvider, { config: mockConfig, children: children });
+    return jsxRuntime.jsx(PasskeymeProvider$1, { config: mockConfig, children: children });
 };
 /**
  * Custom render function with PasskeyMe provider
@@ -8398,7 +8739,7 @@ const createMockConfig = (overrides = {}) => ({
 });
 
 const DevToolsDashboard = ({ show = process.env.NODE_ENV === "development", position = "bottom-right", collapsed: initialCollapsed = true, }) => {
-    const { user, isAuthenticated, config } = reactCore.usePasskeyme();
+    const { user, isAuthenticated, config } = usePasskeyme();
     const [isCollapsed, setIsCollapsed] = React.useState(initialCollapsed);
     const [logs, setLogs] = React.useState([]);
     const [activeTab, setActiveTab] = React.useState("state");
@@ -8730,14 +9071,6 @@ const useVirtualScrollList = (initialItems = [], itemHeight = 50, containerHeigh
     };
 };
 
-Object.defineProperty(exports, 'usePasskeyme', {
-    enumerable: true,
-    get: function () { return reactCore.usePasskeyme; }
-});
-Object.defineProperty(exports, 'usePasskeymeContext', {
-    enumerable: true,
-    get: function () { return reactCore.usePasskeymeContext; }
-});
 Object.defineProperty(exports, 'ErrorHandler', {
     enumerable: true,
     get: function () { return auth.ErrorHandler; }
@@ -8811,6 +9144,8 @@ exports.useLoadingState = useLoadingState;
 exports.useMemoryMonitor = useMemoryMonitor;
 exports.useNotifications = useNotifications;
 exports.useOptimizedStorage = useOptimizedStorage;
+exports.usePasskeyme = usePasskeyme;
+exports.usePasskeymeContext = usePasskeymeContext;
 exports.usePerformanceMonitor = usePerformanceMonitor;
 exports.usePerformanceStats = usePerformanceStats;
 exports.useRequestCache = useRequestCache;