@passkeyme/react-auth 2.2.9 → 2.3.0

package/dist/index.js

@@ -2249,7 +2249,7 @@ const PasskeymeAuthPanel = ({
 providers = ["google", "github", "apple", "microsoft"], enablePasskeys = true, enableUsernamePassword: _enableUsernamePassword = false, // Reserved for future implementation
 redirectUri, state: _state, // Reserved for future implementation
 // Layout & behavior
-layout = "vertical", spacing = "normal", passkeyFirst = true, hideProvidersInitially = false, autoTriggerPasskey = true, 
+layout = "vertical", spacing = "normal", passkeyFirst = true, hideProvidersInitially = false, autoTriggerPasskey = true, detectDeviceCredentials = true, 
 // Content customization
 title = "Sign In", subtitle = "Choose your preferred authentication method", passkeyButtonText = "🔐 Sign in with Passkey", passkeyLoadingText = "⏳ Authenticating...", dividerText = "or continue with", successTitle = "✅ Welcome back!", successSubtitle, logoutButtonText = "Sign Out", 
 // Visibility controls
@@ -2266,6 +2266,7 @@ debugMode = false, passkeyOptions = {}, }) => {
     const [availableProviders, setAvailableProviders] = React.useState(providers);
     const [passkeyAttempted, setPasskeyAttempted] = React.useState(false);
     const [internalError, setInternalError] = React.useState(null);
+    const [hasDeviceCredentials, setHasDeviceCredentials] = React.useState(false);
     // Merge theme with defaults
     const mergedTheme = {
         container: { ...defaultTheme.container, ...theme.container },
@@ -2277,14 +2278,41 @@ debugMode = false, passkeyOptions = {}, }) => {
         successState: { ...defaultTheme.successState, ...theme.successState },
         debugInfo: { ...defaultTheme.debugInfo, ...theme.debugInfo },
     };
-    // Auto-trigger passkey on mount if enabled
+    // Detect device credentials silently on mount
+    React.useEffect(() => {
+        if (!detectDeviceCredentials || !isPasskeySupported())
+            return;
+        const detectCredentials = async () => {
+            var _a;
+            try {
+                if (typeof ((_a = navigator.credentials) === null || _a === void 0 ? void 0 : _a.get) === "function") {
+                    const credentials = await navigator.credentials.get({
+                        mediation: "silent",
+                        publicKey: {},
+                    });
+                    setHasDeviceCredentials(!!credentials);
+                    if (debugMode) {
+                        console.log("🔐 PasskeymeAuthPanel: Device credentials detected:", !!credentials);
+                    }
+                }
+            }
+            catch (error) {
+                if (debugMode) {
+                    console.log("🔐 PasskeymeAuthPanel: Silent credential detection skipped (expected in some contexts)");
+                }
+            }
+        };
+        detectCredentials();
+    }, [detectDeviceCredentials, isPasskeySupported, debugMode]);
+    // Auto-trigger passkey on mount if enabled and device has credentials
     React.useEffect(() => {
         if (autoTriggerPasskey &&
             passkeyFirst &&
             enablePasskeys &&
             isPasskeySupported() &&
             !passkeyAttempted &&
-            !isAuthenticated) {
+            !isAuthenticated &&
+            hasDeviceCredentials) {
             handlePasskeyAuth();
         }
     }, [
@@ -2294,6 +2322,7 @@ debugMode = false, passkeyOptions = {}, }) => {
         isPasskeySupported,
         passkeyAttempted,
         isAuthenticated,
+        hasDeviceCredentials,
     ]);
     const handlePasskeyAuth = () => {
         if (debugMode)
@@ -2403,7 +2432,7 @@ debugMode = false, passkeyOptions = {}, }) => {
                     fontSize: "14px",
                     width: "100%",
                     textAlign: "center",
-                }, children: internalError })), enablePasskeys && showOAuthOptions && (jsxRuntime.jsx("button", { onClick: handlePasskeyAuth, disabled: authLoading, style: passkeyButtonStyles, onMouseEnter: e => {
+                }, children: internalError })), enablePasskeys && showOAuthOptions && hasDeviceCredentials && (jsxRuntime.jsx("button", { onClick: handlePasskeyAuth, disabled: authLoading, style: passkeyButtonStyles, onMouseEnter: e => {
                     var _a;
                     if (!authLoading) {
                         e.currentTarget.style.backgroundColor =
@@ -2418,13 +2447,39 @@ debugMode = false, passkeyOptions = {}, }) => {
                 }, children: authLoading ? passkeyLoadingText : passkeyButtonText })), showDividerText &&
                 showOAuthOptions &&
                 enablePasskeys &&
+                hasDeviceCredentials &&
                 availableProviders.length > 0 && (jsxRuntime.jsx("p", { style: { margin: 0, ...mergedTheme.dividerText }, children: dividerText })), showOAuthOptions && availableProviders.length > 0 && (jsxRuntime.jsx("div", { style: oauthContainerStyles, children: availableProviders.map(provider => (jsxRuntime.jsx("div", { style: {
                         flex: layout === "horizontal" ? 1 : undefined,
                         minWidth: layout === "grid" ? "140px" : undefined,
                         width: layout === "vertical" ? "100%" : undefined,
                     }, children: jsxRuntime.jsxs(PasskeymeOAuthButton, { provider: provider, redirectUri: redirectUri, onClick: () => handleOAuthClick(provider), style: {
                             width: layout === "vertical" ? "100%" : undefined,
-                        }, children: ["Continue with", " ", provider.charAt(0).toUpperCase() + provider.slice(1)] }) }, provider))) })), (showDebugInfo || debugMode) && (jsxRuntime.jsxs("div", { style: mergedTheme.debugInfo, children: [jsxRuntime.jsx("strong", { children: "\uD83D\uDC1B Debug Info:" }), jsxRuntime.jsx("br", {}), "Passkey Support: ", isPasskeySupported() ? "Yes" : "No", jsxRuntime.jsx("br", {}), "Authenticated: ", isAuthenticated ? "Yes" : "No", jsxRuntime.jsx("br", {}), "Auth Loading: ", authLoading ? "Yes" : "No", jsxRuntime.jsx("br", {}), "Passkey Attempted: ", passkeyAttempted ? "Yes" : "No", jsxRuntime.jsx("br", {}), "Show OAuth: ", showOAuthOptions ? "Yes" : "No", jsxRuntime.jsx("br", {}), "Available Providers: ", availableProviders.join(", ") || "None"] }))] }));
+                        }, children: ["Continue with", " ", provider.charAt(0).toUpperCase() + provider.slice(1)] }) }, provider))) })), enablePasskeys && showOAuthOptions && !hasDeviceCredentials && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("p", { style: {
+                            margin: 0,
+                            ...mergedTheme.dividerText,
+                            fontSize: "12px",
+                            opacity: "0.7",
+                        }, children: dividerText }), jsxRuntime.jsx("button", { onClick: handlePasskeyAuth, disabled: authLoading, style: {
+                            backgroundColor: "#e5e7eb",
+                            color: "#374151",
+                            border: "none",
+                            borderRadius: "8px",
+                            padding: "10px 20px",
+                            fontSize: "14px",
+                            fontWeight: "500",
+                            cursor: authLoading ? "not-allowed" : "pointer",
+                            transition: "all 0.2s ease",
+                            width: "100%",
+                            minHeight: "40px",
+                        }, onMouseEnter: e => {
+                            if (!authLoading) {
+                                e.currentTarget.style.backgroundColor = "#d1d5db";
+                            }
+                        }, onMouseLeave: e => {
+                            if (!authLoading) {
+                                e.currentTarget.style.backgroundColor = "#e5e7eb";
+                            }
+                        }, children: authLoading ? passkeyLoadingText : "🔑 Already have a passkey?" })] })), (showDebugInfo || debugMode) && (jsxRuntime.jsxs("div", { style: mergedTheme.debugInfo, children: [jsxRuntime.jsx("strong", { children: "\uD83D\uDC1B Debug Info:" }), jsxRuntime.jsx("br", {}), "Passkey Support: ", isPasskeySupported() ? "Yes" : "No", jsxRuntime.jsx("br", {}), "Authenticated: ", isAuthenticated ? "Yes" : "No", jsxRuntime.jsx("br", {}), "Auth Loading: ", authLoading ? "Yes" : "No", jsxRuntime.jsx("br", {}), "Passkey Attempted: ", passkeyAttempted ? "Yes" : "No", jsxRuntime.jsx("br", {}), "Device Credentials: ", hasDeviceCredentials ? "Yes" : "No", jsxRuntime.jsx("br", {}), "Show OAuth: ", showOAuthOptions ? "Yes" : "No", jsxRuntime.jsx("br", {}), "Available Providers: ", availableProviders.join(", ") || "None"] }))] }));
 };
 
 /**
@@ -6608,7 +6663,7 @@ const PasskeymeCallbackHandler = ({ loadingComponent: LoadingComponent, errorCom
                 showPasskeyPrompt: false,
             });
             handlePasskeyRegistrationComplete(true);
-            proceedWithRedirect();
+            proceedWithRedirect(currentUser);
         }
         catch (error) {
             console.error("Passkey registration failed:", error);
@@ -6652,7 +6707,7 @@ const PasskeymeCallbackHandler = ({ loadingComponent: LoadingComponent, errorCom
                         }
                         // This is actually a "success" case - user has passkeys, just localStorage was out of sync
                         handlePasskeyRegistrationComplete(true, "Passkey already registered and ready to use.");
-                        proceedWithRedirect();
+                        proceedWithRedirect(currentUser);
                         return;
                     }
                     else if (msg.includes("user cancelled") ||
@@ -6672,7 +6727,7 @@ const PasskeymeCallbackHandler = ({ loadingComponent: LoadingComponent, errorCom
                 handlePasskeyRegistrationComplete(false, "Passkey registration failed. You can try again later.");
             }
             // Always proceed with redirect - don't block user flow
-            proceedWithRedirect();
+            proceedWithRedirect(currentUser);
         }
     };
     // Handle skipping passkey registration
@@ -6683,16 +6738,17 @@ const PasskeymeCallbackHandler = ({ loadingComponent: LoadingComponent, errorCom
         sessionStorage.setItem("passkey_declined", Date.now().toString());
         updateState({ showPasskeyPrompt: false });
         handlePasskeyRegistrationComplete(false, "User chose to skip passkey registration");
-        proceedWithRedirect();
+        proceedWithRedirect(state.authenticatedUser);
     };
     // Proceed with redirect after auth completion
-    const proceedWithRedirect = async () => {
+    const proceedWithRedirect = async (authenticatedUser) => {
         // CRITICAL: Clean URL synchronously BEFORE any async operations
         // This prevents Next.js App Router from remounting the component with stale URL params
         // Must happen outside setTimeout to execute immediately
         window.history.replaceState({}, document.title, window.location.pathname);
         setTimeout(async () => {
-            const currentUser = state.authenticatedUser || user;
+            // Use passed user or fall back to state/context user
+            const currentUser = authenticatedUser || state.authenticatedUser || user;
             // If custom onSuccess callback provided, use it and let parent handle navigation
             if (onSuccess) {
                 if (!currentUser) {
@@ -6784,8 +6840,8 @@ const PasskeymeCallbackHandler = ({ loadingComponent: LoadingComponent, errorCom
                         // Mark callback as processed to prevent re-execution
                         callbackProcessedRef.current = true;
                         if (!shouldPrompt) {
-                            // Proceed with normal redirect
-                            proceedWithRedirect();
+                            // Proceed with normal redirect, pass user directly to avoid state timing issues
+                            proceedWithRedirect(authenticatedUser);
                         }
                     }
                     catch (err) {
@@ -6835,8 +6891,8 @@ const PasskeymeCallbackHandler = ({ loadingComponent: LoadingComponent, errorCom
                         // Mark callback as processed to prevent re-execution
                         callbackProcessedRef.current = true;
                         if (!shouldPrompt) {
-                            // Proceed with normal redirect
-                            proceedWithRedirect();
+                            // Proceed with normal redirect, pass user directly to avoid state timing issues
+                            proceedWithRedirect(authenticatedUser);
                         }
                     }
                     catch (err) {