@passkeyme/react-auth 2.2.10 → 2.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -81,6 +81,9 @@ export interface PasskeymeAuthPanelProps {
|
|
|
81
81
|
passkeyFirst?: boolean;
|
|
82
82
|
hideProvidersInitially?: boolean;
|
|
83
83
|
autoTriggerPasskey?: boolean;
|
|
84
|
+
detectDeviceCredentials?: boolean;
|
|
85
|
+
detectUsingLocalStorage?: boolean;
|
|
86
|
+
localStorageKey?: string;
|
|
84
87
|
title?: string;
|
|
85
88
|
subtitle?: string;
|
|
86
89
|
passkeyButtonText?: string;
|
|
@@ -116,6 +119,6 @@ export interface PasskeymeAuthPanelProps {
|
|
|
116
119
|
* A fully customizable authentication panel that handles passkey and OAuth authentication
|
|
117
120
|
* with extensive theming and configuration options.
|
|
118
121
|
*/
|
|
119
|
-
export declare const PasskeymeAuthPanel: ({ providers, enablePasskeys, enableUsernamePassword: _enableUsernamePassword, redirectUri, state: _state, layout, spacing, passkeyFirst, hideProvidersInitially, autoTriggerPasskey, title, subtitle, passkeyButtonText, passkeyLoadingText, dividerText, successTitle, successSubtitle, logoutButtonText, showTitle, showSubtitle, showDividerText, showSuccessState, showLogoutButton, showDebugInfo, theme, className, style, onSuccess, onError, onProviderSelect, onPasskeyAttempt, onOAuthRequired, onLogout, debugMode, passkeyOptions, }: PasskeymeAuthPanelProps) => import("react/jsx-runtime").JSX.Element;
|
|
122
|
+
export declare const PasskeymeAuthPanel: ({ providers, enablePasskeys, enableUsernamePassword: _enableUsernamePassword, redirectUri, state: _state, layout, spacing, passkeyFirst, hideProvidersInitially, autoTriggerPasskey, detectDeviceCredentials, detectUsingLocalStorage, localStorageKey, title, subtitle, passkeyButtonText, passkeyLoadingText, dividerText, successTitle, successSubtitle, logoutButtonText, showTitle, showSubtitle, showDividerText, showSuccessState, showLogoutButton, showDebugInfo, theme, className, style, onSuccess, onError, onProviderSelect, onPasskeyAttempt, onOAuthRequired, onLogout, debugMode, passkeyOptions, }: PasskeymeAuthPanelProps) => import("react/jsx-runtime").JSX.Element;
|
|
120
123
|
export default PasskeymeAuthPanel;
|
|
121
124
|
//# sourceMappingURL=PasskeymeAuthPanel.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PasskeymeAuthPanel.d.ts","sourceRoot":"","sources":["../../src/components/PasskeymeAuthPanel.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"PasskeymeAuthPanel.d.ts","sourceRoot":"","sources":["../../src/components/PasskeymeAuthPanel.tsx"],"names":[],"mappings":"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"}
|
package/dist/index.esm.js
CHANGED
|
@@ -2248,7 +2248,7 @@ const PasskeymeAuthPanel = ({
|
|
|
2248
2248
|
providers = ["google", "github", "apple", "microsoft"], enablePasskeys = true, enableUsernamePassword: _enableUsernamePassword = false, // Reserved for future implementation
|
|
2249
2249
|
redirectUri, state: _state, // Reserved for future implementation
|
|
2250
2250
|
// Layout & behavior
|
|
2251
|
-
layout = "vertical", spacing = "normal", passkeyFirst = true, hideProvidersInitially = false, autoTriggerPasskey = true,
|
|
2251
|
+
layout = "vertical", spacing = "normal", passkeyFirst = true, hideProvidersInitially = false, autoTriggerPasskey = true, detectDeviceCredentials = true, detectUsingLocalStorage = true, localStorageKey = "passkeyme_initialized",
|
|
2252
2252
|
// Content customization
|
|
2253
2253
|
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",
|
|
2254
2254
|
// Visibility controls
|
|
@@ -2265,6 +2265,7 @@ debugMode = false, passkeyOptions = {}, }) => {
|
|
|
2265
2265
|
const [availableProviders, setAvailableProviders] = useState(providers);
|
|
2266
2266
|
const [passkeyAttempted, setPasskeyAttempted] = useState(false);
|
|
2267
2267
|
const [internalError, setInternalError] = useState(null);
|
|
2268
|
+
const [hasDeviceCredentials, setHasDeviceCredentials] = useState(false);
|
|
2268
2269
|
// Merge theme with defaults
|
|
2269
2270
|
const mergedTheme = {
|
|
2270
2271
|
container: { ...defaultTheme.container, ...theme.container },
|
|
@@ -2276,14 +2277,62 @@ debugMode = false, passkeyOptions = {}, }) => {
|
|
|
2276
2277
|
successState: { ...defaultTheme.successState, ...theme.successState },
|
|
2277
2278
|
debugInfo: { ...defaultTheme.debugInfo, ...theme.debugInfo },
|
|
2278
2279
|
};
|
|
2279
|
-
//
|
|
2280
|
+
// Detect device credentials silently on mount
|
|
2281
|
+
useEffect(() => {
|
|
2282
|
+
if (!isPasskeySupported())
|
|
2283
|
+
return;
|
|
2284
|
+
const detectCredentials = async () => {
|
|
2285
|
+
var _a;
|
|
2286
|
+
let hasCredentials = false;
|
|
2287
|
+
// Check localStorage if enabled
|
|
2288
|
+
if (detectUsingLocalStorage) {
|
|
2289
|
+
const localStorageValue = localStorage.getItem(localStorageKey);
|
|
2290
|
+
if (localStorageValue === "true" || localStorageValue === "1") {
|
|
2291
|
+
hasCredentials = true;
|
|
2292
|
+
if (debugMode) {
|
|
2293
|
+
console.log("🔐 PasskeymeAuthPanel: Passkey setup detected in localStorage");
|
|
2294
|
+
}
|
|
2295
|
+
}
|
|
2296
|
+
}
|
|
2297
|
+
// Also check device credentials silently if enabled
|
|
2298
|
+
if (detectDeviceCredentials && !hasCredentials) {
|
|
2299
|
+
try {
|
|
2300
|
+
if (typeof ((_a = navigator.credentials) === null || _a === void 0 ? void 0 : _a.get) === "function") {
|
|
2301
|
+
const credentials = await navigator.credentials.get({
|
|
2302
|
+
mediation: "silent",
|
|
2303
|
+
publicKey: {},
|
|
2304
|
+
});
|
|
2305
|
+
hasCredentials = !!credentials;
|
|
2306
|
+
if (debugMode) {
|
|
2307
|
+
console.log("🔐 PasskeymeAuthPanel: Device credentials detected:", !!credentials);
|
|
2308
|
+
}
|
|
2309
|
+
}
|
|
2310
|
+
}
|
|
2311
|
+
catch (error) {
|
|
2312
|
+
if (debugMode) {
|
|
2313
|
+
console.log("🔐 PasskeymeAuthPanel: Silent credential detection skipped (expected in some contexts)");
|
|
2314
|
+
}
|
|
2315
|
+
}
|
|
2316
|
+
}
|
|
2317
|
+
setHasDeviceCredentials(hasCredentials);
|
|
2318
|
+
};
|
|
2319
|
+
detectCredentials();
|
|
2320
|
+
}, [
|
|
2321
|
+
detectDeviceCredentials,
|
|
2322
|
+
detectUsingLocalStorage,
|
|
2323
|
+
localStorageKey,
|
|
2324
|
+
isPasskeySupported,
|
|
2325
|
+
debugMode,
|
|
2326
|
+
]);
|
|
2327
|
+
// Auto-trigger passkey on mount if enabled and device has credentials
|
|
2280
2328
|
useEffect(() => {
|
|
2281
2329
|
if (autoTriggerPasskey &&
|
|
2282
2330
|
passkeyFirst &&
|
|
2283
2331
|
enablePasskeys &&
|
|
2284
2332
|
isPasskeySupported() &&
|
|
2285
2333
|
!passkeyAttempted &&
|
|
2286
|
-
!isAuthenticated
|
|
2334
|
+
!isAuthenticated &&
|
|
2335
|
+
hasDeviceCredentials) {
|
|
2287
2336
|
handlePasskeyAuth();
|
|
2288
2337
|
}
|
|
2289
2338
|
}, [
|
|
@@ -2293,6 +2342,7 @@ debugMode = false, passkeyOptions = {}, }) => {
|
|
|
2293
2342
|
isPasskeySupported,
|
|
2294
2343
|
passkeyAttempted,
|
|
2295
2344
|
isAuthenticated,
|
|
2345
|
+
hasDeviceCredentials,
|
|
2296
2346
|
]);
|
|
2297
2347
|
const handlePasskeyAuth = () => {
|
|
2298
2348
|
if (debugMode)
|
|
@@ -2402,7 +2452,7 @@ debugMode = false, passkeyOptions = {}, }) => {
|
|
|
2402
2452
|
fontSize: "14px",
|
|
2403
2453
|
width: "100%",
|
|
2404
2454
|
textAlign: "center",
|
|
2405
|
-
}, children: internalError })), enablePasskeys && showOAuthOptions && (jsx("button", { onClick: handlePasskeyAuth, disabled: authLoading, style: passkeyButtonStyles, onMouseEnter: e => {
|
|
2455
|
+
}, children: internalError })), enablePasskeys && showOAuthOptions && hasDeviceCredentials && (jsx("button", { onClick: handlePasskeyAuth, disabled: authLoading, style: passkeyButtonStyles, onMouseEnter: e => {
|
|
2406
2456
|
var _a;
|
|
2407
2457
|
if (!authLoading) {
|
|
2408
2458
|
e.currentTarget.style.backgroundColor =
|
|
@@ -2417,13 +2467,39 @@ debugMode = false, passkeyOptions = {}, }) => {
|
|
|
2417
2467
|
}, children: authLoading ? passkeyLoadingText : passkeyButtonText })), showDividerText &&
|
|
2418
2468
|
showOAuthOptions &&
|
|
2419
2469
|
enablePasskeys &&
|
|
2470
|
+
hasDeviceCredentials &&
|
|
2420
2471
|
availableProviders.length > 0 && (jsx("p", { style: { margin: 0, ...mergedTheme.dividerText }, children: dividerText })), showOAuthOptions && availableProviders.length > 0 && (jsx("div", { style: oauthContainerStyles, children: availableProviders.map(provider => (jsx("div", { style: {
|
|
2421
2472
|
flex: layout === "horizontal" ? 1 : undefined,
|
|
2422
2473
|
minWidth: layout === "grid" ? "140px" : undefined,
|
|
2423
2474
|
width: layout === "vertical" ? "100%" : undefined,
|
|
2424
2475
|
}, children: jsxs(PasskeymeOAuthButton, { provider: provider, redirectUri: redirectUri, onClick: () => handleOAuthClick(provider), style: {
|
|
2425
2476
|
width: layout === "vertical" ? "100%" : undefined,
|
|
2426
|
-
}, children: ["Continue with", " ", provider.charAt(0).toUpperCase() + provider.slice(1)] }) }, provider))) })),
|
|
2477
|
+
}, children: ["Continue with", " ", provider.charAt(0).toUpperCase() + provider.slice(1)] }) }, provider))) })), enablePasskeys && showOAuthOptions && !hasDeviceCredentials && (jsxs(Fragment, { children: [jsx("p", { style: {
|
|
2478
|
+
margin: 0,
|
|
2479
|
+
...mergedTheme.dividerText,
|
|
2480
|
+
fontSize: "12px",
|
|
2481
|
+
opacity: "0.7",
|
|
2482
|
+
}, children: dividerText }), jsx("button", { onClick: handlePasskeyAuth, disabled: authLoading, style: {
|
|
2483
|
+
backgroundColor: "#e5e7eb",
|
|
2484
|
+
color: "#374151",
|
|
2485
|
+
border: "none",
|
|
2486
|
+
borderRadius: "8px",
|
|
2487
|
+
padding: "10px 20px",
|
|
2488
|
+
fontSize: "14px",
|
|
2489
|
+
fontWeight: "500",
|
|
2490
|
+
cursor: authLoading ? "not-allowed" : "pointer",
|
|
2491
|
+
transition: "all 0.2s ease",
|
|
2492
|
+
width: "100%",
|
|
2493
|
+
minHeight: "40px",
|
|
2494
|
+
}, onMouseEnter: e => {
|
|
2495
|
+
if (!authLoading) {
|
|
2496
|
+
e.currentTarget.style.backgroundColor = "#d1d5db";
|
|
2497
|
+
}
|
|
2498
|
+
}, onMouseLeave: e => {
|
|
2499
|
+
if (!authLoading) {
|
|
2500
|
+
e.currentTarget.style.backgroundColor = "#e5e7eb";
|
|
2501
|
+
}
|
|
2502
|
+
}, children: authLoading ? passkeyLoadingText : "🔑 Already have a passkey?" })] })), (showDebugInfo || debugMode) && (jsxs("div", { style: mergedTheme.debugInfo, children: [jsx("strong", { children: "\uD83D\uDC1B Debug Info:" }), jsx("br", {}), "Passkey Support: ", isPasskeySupported() ? "Yes" : "No", jsx("br", {}), "Authenticated: ", isAuthenticated ? "Yes" : "No", jsx("br", {}), "Auth Loading: ", authLoading ? "Yes" : "No", jsx("br", {}), "Passkey Attempted: ", passkeyAttempted ? "Yes" : "No", jsx("br", {}), "Device Credentials: ", hasDeviceCredentials ? "Yes" : "No", jsx("br", {}), "Show OAuth: ", showOAuthOptions ? "Yes" : "No", jsx("br", {}), "Available Providers: ", availableProviders.join(", ") || "None"] }))] }));
|
|
2427
2503
|
};
|
|
2428
2504
|
|
|
2429
2505
|
/**
|