@passkeyme/react-auth 2.2.10 → 2.3.0
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,7 @@ export interface PasskeymeAuthPanelProps {
|
|
|
81
81
|
passkeyFirst?: boolean;
|
|
82
82
|
hideProvidersInitially?: boolean;
|
|
83
83
|
autoTriggerPasskey?: boolean;
|
|
84
|
+
detectDeviceCredentials?: boolean;
|
|
84
85
|
title?: string;
|
|
85
86
|
subtitle?: string;
|
|
86
87
|
passkeyButtonText?: string;
|
|
@@ -116,6 +117,6 @@ export interface PasskeymeAuthPanelProps {
|
|
|
116
117
|
* A fully customizable authentication panel that handles passkey and OAuth authentication
|
|
117
118
|
* with extensive theming and configuration options.
|
|
118
119
|
*/
|
|
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;
|
|
120
|
+
export declare const PasskeymeAuthPanel: ({ providers, enablePasskeys, enableUsernamePassword: _enableUsernamePassword, redirectUri, state: _state, layout, spacing, passkeyFirst, hideProvidersInitially, autoTriggerPasskey, detectDeviceCredentials, 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
121
|
export default PasskeymeAuthPanel;
|
|
121
122
|
//# 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,
|
|
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,41 @@ 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 (!detectDeviceCredentials || !isPasskeySupported())
|
|
2283
|
+
return;
|
|
2284
|
+
const detectCredentials = async () => {
|
|
2285
|
+
var _a;
|
|
2286
|
+
try {
|
|
2287
|
+
if (typeof ((_a = navigator.credentials) === null || _a === void 0 ? void 0 : _a.get) === "function") {
|
|
2288
|
+
const credentials = await navigator.credentials.get({
|
|
2289
|
+
mediation: "silent",
|
|
2290
|
+
publicKey: {},
|
|
2291
|
+
});
|
|
2292
|
+
setHasDeviceCredentials(!!credentials);
|
|
2293
|
+
if (debugMode) {
|
|
2294
|
+
console.log("🔐 PasskeymeAuthPanel: Device credentials detected:", !!credentials);
|
|
2295
|
+
}
|
|
2296
|
+
}
|
|
2297
|
+
}
|
|
2298
|
+
catch (error) {
|
|
2299
|
+
if (debugMode) {
|
|
2300
|
+
console.log("🔐 PasskeymeAuthPanel: Silent credential detection skipped (expected in some contexts)");
|
|
2301
|
+
}
|
|
2302
|
+
}
|
|
2303
|
+
};
|
|
2304
|
+
detectCredentials();
|
|
2305
|
+
}, [detectDeviceCredentials, isPasskeySupported, debugMode]);
|
|
2306
|
+
// Auto-trigger passkey on mount if enabled and device has credentials
|
|
2280
2307
|
useEffect(() => {
|
|
2281
2308
|
if (autoTriggerPasskey &&
|
|
2282
2309
|
passkeyFirst &&
|
|
2283
2310
|
enablePasskeys &&
|
|
2284
2311
|
isPasskeySupported() &&
|
|
2285
2312
|
!passkeyAttempted &&
|
|
2286
|
-
!isAuthenticated
|
|
2313
|
+
!isAuthenticated &&
|
|
2314
|
+
hasDeviceCredentials) {
|
|
2287
2315
|
handlePasskeyAuth();
|
|
2288
2316
|
}
|
|
2289
2317
|
}, [
|
|
@@ -2293,6 +2321,7 @@ debugMode = false, passkeyOptions = {}, }) => {
|
|
|
2293
2321
|
isPasskeySupported,
|
|
2294
2322
|
passkeyAttempted,
|
|
2295
2323
|
isAuthenticated,
|
|
2324
|
+
hasDeviceCredentials,
|
|
2296
2325
|
]);
|
|
2297
2326
|
const handlePasskeyAuth = () => {
|
|
2298
2327
|
if (debugMode)
|
|
@@ -2402,7 +2431,7 @@ debugMode = false, passkeyOptions = {}, }) => {
|
|
|
2402
2431
|
fontSize: "14px",
|
|
2403
2432
|
width: "100%",
|
|
2404
2433
|
textAlign: "center",
|
|
2405
|
-
}, children: internalError })), enablePasskeys && showOAuthOptions && (jsx("button", { onClick: handlePasskeyAuth, disabled: authLoading, style: passkeyButtonStyles, onMouseEnter: e => {
|
|
2434
|
+
}, children: internalError })), enablePasskeys && showOAuthOptions && hasDeviceCredentials && (jsx("button", { onClick: handlePasskeyAuth, disabled: authLoading, style: passkeyButtonStyles, onMouseEnter: e => {
|
|
2406
2435
|
var _a;
|
|
2407
2436
|
if (!authLoading) {
|
|
2408
2437
|
e.currentTarget.style.backgroundColor =
|
|
@@ -2417,13 +2446,39 @@ debugMode = false, passkeyOptions = {}, }) => {
|
|
|
2417
2446
|
}, children: authLoading ? passkeyLoadingText : passkeyButtonText })), showDividerText &&
|
|
2418
2447
|
showOAuthOptions &&
|
|
2419
2448
|
enablePasskeys &&
|
|
2449
|
+
hasDeviceCredentials &&
|
|
2420
2450
|
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
2451
|
flex: layout === "horizontal" ? 1 : undefined,
|
|
2422
2452
|
minWidth: layout === "grid" ? "140px" : undefined,
|
|
2423
2453
|
width: layout === "vertical" ? "100%" : undefined,
|
|
2424
2454
|
}, children: jsxs(PasskeymeOAuthButton, { provider: provider, redirectUri: redirectUri, onClick: () => handleOAuthClick(provider), style: {
|
|
2425
2455
|
width: layout === "vertical" ? "100%" : undefined,
|
|
2426
|
-
}, children: ["Continue with", " ", provider.charAt(0).toUpperCase() + provider.slice(1)] }) }, provider))) })),
|
|
2456
|
+
}, children: ["Continue with", " ", provider.charAt(0).toUpperCase() + provider.slice(1)] }) }, provider))) })), enablePasskeys && showOAuthOptions && !hasDeviceCredentials && (jsxs(Fragment, { children: [jsx("p", { style: {
|
|
2457
|
+
margin: 0,
|
|
2458
|
+
...mergedTheme.dividerText,
|
|
2459
|
+
fontSize: "12px",
|
|
2460
|
+
opacity: "0.7",
|
|
2461
|
+
}, children: dividerText }), jsx("button", { onClick: handlePasskeyAuth, disabled: authLoading, style: {
|
|
2462
|
+
backgroundColor: "#e5e7eb",
|
|
2463
|
+
color: "#374151",
|
|
2464
|
+
border: "none",
|
|
2465
|
+
borderRadius: "8px",
|
|
2466
|
+
padding: "10px 20px",
|
|
2467
|
+
fontSize: "14px",
|
|
2468
|
+
fontWeight: "500",
|
|
2469
|
+
cursor: authLoading ? "not-allowed" : "pointer",
|
|
2470
|
+
transition: "all 0.2s ease",
|
|
2471
|
+
width: "100%",
|
|
2472
|
+
minHeight: "40px",
|
|
2473
|
+
}, onMouseEnter: e => {
|
|
2474
|
+
if (!authLoading) {
|
|
2475
|
+
e.currentTarget.style.backgroundColor = "#d1d5db";
|
|
2476
|
+
}
|
|
2477
|
+
}, onMouseLeave: e => {
|
|
2478
|
+
if (!authLoading) {
|
|
2479
|
+
e.currentTarget.style.backgroundColor = "#e5e7eb";
|
|
2480
|
+
}
|
|
2481
|
+
}, 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
2482
|
};
|
|
2428
2483
|
|
|
2429
2484
|
/**
|