@passkeyme/react-auth 2.2.10 → 2.3.1

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, detectUsingLocalStorage = true, localStorageKey = "passkeyme_initialized", 
 // 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,62 @@ 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 (!isPasskeySupported())
+            return;
+        const detectCredentials = async () => {
+            var _a;
+            let hasCredentials = false;
+            // Check localStorage if enabled
+            if (detectUsingLocalStorage) {
+                const localStorageValue = localStorage.getItem(localStorageKey);
+                if (localStorageValue === "true" || localStorageValue === "1") {
+                    hasCredentials = true;
+                    if (debugMode) {
+                        console.log("🔐 PasskeymeAuthPanel: Passkey setup detected in localStorage");
+                    }
+                }
+            }
+            // Also check device credentials silently if enabled
+            if (detectDeviceCredentials && !hasCredentials) {
+                try {
+                    if (typeof ((_a = navigator.credentials) === null || _a === void 0 ? void 0 : _a.get) === "function") {
+                        const credentials = await navigator.credentials.get({
+                            mediation: "silent",
+                            publicKey: {},
+                        });
+                        hasCredentials = !!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)");
+                    }
+                }
+            }
+            setHasDeviceCredentials(hasCredentials);
+        };
+        detectCredentials();
+    }, [
+        detectDeviceCredentials,
+        detectUsingLocalStorage,
+        localStorageKey,
+        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 +2343,7 @@ debugMode = false, passkeyOptions = {}, }) => {
         isPasskeySupported,
         passkeyAttempted,
         isAuthenticated,
+        hasDeviceCredentials,
     ]);
     const handlePasskeyAuth = () => {
         if (debugMode)
@@ -2403,7 +2453,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 +2468,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"] }))] }));
 };
 
 /**