@payez/next-mvp 3.9.1 → 4.0.0

package/dist/client/fetch-with-auth.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.fetchWithAuth = fetchWithAuth;
 // src/client/fetch-with-auth.ts
-const react_1 = require("next-auth/react");
+const better_auth_client_1 = require("./better-auth-client");
 /**
  * A wrapper for the `fetch` API that automatically injects the session's
  * accessToken into the Authorization header and handles 401 Unauthorized
@@ -15,7 +15,7 @@ const react_1 = require("next-auth/react");
  */
 async function fetchWithAuth(url, options = {}) {
     // 1. Retrieve the client-side session to get the accessToken.
-    const session = await (0, react_1.getSession)();
+    const { data: session } = await better_auth_client_1.authClient.getSession();
     // 2. Inject the accessToken into the Authorization header.
     const headers = new Headers(options.headers);
     if (session?.accessToken) {

package/dist/components/SessionSync.js

@@ -1,119 +1,121 @@
-"use strict";
-'use client';
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SessionSync = SessionSync;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_2 = require("next-auth/react");
-const authStore_1 = require("../stores/authStore");
-const session_1 = require("../lib/session");
-const app_slug_1 = require("../lib/app-slug");
-/**
- * Sanitize sensitive data for logging
- * Never log full user IDs or emails in any environment
- */
-function sanitizeForLog(value, type) {
-    if (!value)
-        return '(empty)';
-    if (type === 'email') {
-        return '***@***'; // Never log emails
-    }
-    if (type === 'userId') {
-        // Only show first 8 chars in development
-        if (process.env.NODE_ENV === 'development') {
-            return value.substring(0, 8) + '...';
-        }
-        return '***'; // Fully redact in production
-    }
-    return '***';
-}
-/**
- * SessionSync - Bridges NextAuth session with Zustand auth store
- *
- * CRITICAL: This component enforces strict session validation. If NextAuth
- * reports an authenticated status but the session data is invalid (empty user ID,
- * empty email, or missing access token), it forces a sign-out to prevent
- * contradictory state like "hasSession: true, userId: ''"
- *
- * This ensures the app NEVER shows authenticated UI with empty/invalid session data.
- */
-function SessionSync({ children }) {
-    const { data: session, status } = (0, react_2.useSession)();
-    const { setSession, clearSession } = (0, authStore_1.useAuthStore)();
-    // Guard against duplicate sign-out calls
-    const isSigningOutRef = (0, react_1.useRef)(false);
-    (0, react_1.useEffect)(() => {
-        let isMounted = true;
-        // Only process when NextAuth has finished loading
-        if (status === 'loading') {
-            return;
-        }
-        // Strict validation: Check if session is actually valid
-        const isValid = (0, session_1.isValidSession)(session);
-        // CRITICAL FIX: If NextAuth says "authenticated" but session is invalid,
-        // this is a broken state that must be fixed immediately
-        if (status === 'authenticated' && !isValid) {
-            // GUARD: Prevent duplicate sign-out
-            if (isSigningOutRef.current) {
-                console.warn('[SessionSync] Sign-out already in progress, skipping');
-                return;
-            }
-            isSigningOutRef.current = true;
-            console.error('[SessionSync] CRITICAL: Invalid session detected despite authenticated status!');
-            console.error('[SessionSync] This indicates a session with empty user data - forcing sign-out');
-            // Log diagnostic info with PII redaction
-            // Note: session is typed as Session | null from NextAuth, but may have invalid/partial data
-            const sessionData = session; // Explicit cast needed for error logging
-            console.error('[SessionSync] Session data:', {
-                hasSessionObject: !!sessionData,
-                hasUser: !!sessionData?.user,
-                userId: sanitizeForLog(sessionData?.user?.id, 'userId'),
-                userEmail: sanitizeForLog(sessionData?.user?.email, 'email'),
-                hasAccessToken: !!sessionData?.accessToken,
-            });
-            // Clear the auth store immediately
-            clearSession();
-            // FIX: Force clear all auth cookies including stale provisional tokens (app-slug prefixed)
-            // This prevents infinite loop when provisional token exists but session is invalid
-            // Root cause: OAuth creates provisional token before Redis session exists
-            try {
-                const secureSession = (0, app_slug_1.getSecureSessionCookieName)();
-                const secureCsrf = (0, app_slug_1.getSecureCsrfCookieName)();
-                const callbackUrl = (0, app_slug_1.getCallbackUrlCookieName)();
-                document.cookie = `${secureSession}=; path=/; expires=Thu, 01 Jan 1970 00:00:00 UTC; Secure; SameSite=Lax`;
-                document.cookie = `${secureCsrf}=; path=/; expires=Thu, 01 Jan 1970 00:00:00 UTC; SameSite=Lax`;
-                document.cookie = `__Secure-${callbackUrl}=; path=/; expires=Thu, 01 Jan 1970 00:00:00 UTC; Secure; SameSite=Lax`;
-            }
-            catch (e) {
-                // Cookie clearing failed - non-critical, continue with signout
-            }
-            // Force NextAuth to sign out (this will clear cookies and trigger redirect)
-            (0, react_2.signOut)({ redirect: false })
-                .then(() => {
-                if (isMounted) {
-                    // Use generic error code instead of implementation details
-                    window.location.href = '/account-auth/login?error=SessionExpired&code=1001';
-                }
-            })
-                .catch((err) => {
-                console.error('[SessionSync] Error during forced signout:', err);
-                if (isMounted) {
-                    window.location.href = '/account-auth/login?error=SessionExpired&code=1001';
-                }
-            });
-            return;
-        }
-        // Normal flow: Update store based on valid session status
-        if (status === 'authenticated' && isValid) {
-            setSession(session);
-        }
-        else if (status === 'unauthenticated') {
-            clearSession();
-        }
-        // Cleanup function to prevent post-unmount updates
-        return () => {
-            isMounted = false;
-        };
-    }, [session, status, setSession, clearSession]);
-    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
-}
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SessionSync = SessionSync;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const better_auth_client_1 = require("../client/better-auth-client");
+const authStore_1 = require("../stores/authStore");
+const session_1 = require("../lib/session");
+const app_slug_1 = require("../lib/app-slug");
+/**
+ * Sanitize sensitive data for logging
+ * Never log full user IDs or emails in any environment
+ */
+function sanitizeForLog(value, type) {
+    if (!value)
+        return '(empty)';
+    if (type === 'email') {
+        return '***@***'; // Never log emails
+    }
+    if (type === 'userId') {
+        // Only show first 8 chars in development
+        if (process.env.NODE_ENV === 'development') {
+            return value.substring(0, 8) + '...';
+        }
+        return '***'; // Fully redact in production
+    }
+    return '***';
+}
+/**
+ * SessionSync - Bridges NextAuth session with Zustand auth store
+ *
+ * CRITICAL: This component enforces strict session validation. If NextAuth
+ * reports an authenticated status but the session data is invalid (empty user ID,
+ * empty email, or missing access token), it forces a sign-out to prevent
+ * contradictory state like "hasSession: true, userId: ''"
+ *
+ * This ensures the app NEVER shows authenticated UI with empty/invalid session data.
+ */
+function SessionSync({ children }) {
+    const { data: sessionData, isPending } = better_auth_client_1.authClient.useSession();
+    const session = sessionData;
+    const status = isPending ? 'loading' : session ? 'authenticated' : 'unauthenticated';
+    const { setSession, clearSession } = (0, authStore_1.useAuthStore)();
+    // Guard against duplicate sign-out calls
+    const isSigningOutRef = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(() => {
+        let isMounted = true;
+        // Only process when NextAuth has finished loading
+        if (status === 'loading') {
+            return;
+        }
+        // Strict validation: Check if session is actually valid
+        const isValid = (0, session_1.isValidSession)(session);
+        // CRITICAL FIX: If NextAuth says "authenticated" but session is invalid,
+        // this is a broken state that must be fixed immediately
+        if (status === 'authenticated' && !isValid) {
+            // GUARD: Prevent duplicate sign-out
+            if (isSigningOutRef.current) {
+                console.warn('[SessionSync] Sign-out already in progress, skipping');
+                return;
+            }
+            isSigningOutRef.current = true;
+            console.error('[SessionSync] CRITICAL: Invalid session detected despite authenticated status!');
+            console.error('[SessionSync] This indicates a session with empty user data - forcing sign-out');
+            // Log diagnostic info with PII redaction
+            // Note: session is typed as Session | null from NextAuth, but may have invalid/partial data
+            const sessionData = session; // Explicit cast needed for error logging
+            console.error('[SessionSync] Session data:', {
+                hasSessionObject: !!sessionData,
+                hasUser: !!sessionData?.user,
+                userId: sanitizeForLog(sessionData?.user?.id, 'userId'),
+                userEmail: sanitizeForLog(sessionData?.user?.email, 'email'),
+                hasAccessToken: !!sessionData?.accessToken,
+            });
+            // Clear the auth store immediately
+            clearSession();
+            // FIX: Force clear all auth cookies including stale provisional tokens (app-slug prefixed)
+            // This prevents infinite loop when provisional token exists but session is invalid
+            // Root cause: OAuth creates provisional token before Redis session exists
+            try {
+                const secureSession = (0, app_slug_1.getSecureSessionCookieName)();
+                const secureCsrf = (0, app_slug_1.getSecureCsrfCookieName)();
+                const callbackUrl = (0, app_slug_1.getCallbackUrlCookieName)();
+                document.cookie = `${secureSession}=; path=/; expires=Thu, 01 Jan 1970 00:00:00 UTC; Secure; SameSite=Lax`;
+                document.cookie = `${secureCsrf}=; path=/; expires=Thu, 01 Jan 1970 00:00:00 UTC; SameSite=Lax`;
+                document.cookie = `__Secure-${callbackUrl}=; path=/; expires=Thu, 01 Jan 1970 00:00:00 UTC; Secure; SameSite=Lax`;
+            }
+            catch (e) {
+                // Cookie clearing failed - non-critical, continue with signout
+            }
+            // Force Better Auth to sign out (this will clear cookies and trigger redirect)
+            better_auth_client_1.authClient.signOut()
+                .then(() => {
+                if (isMounted) {
+                    // Use generic error code instead of implementation details
+                    window.location.href = '/account-auth/login?error=SessionExpired&code=1001';
+                }
+            })
+                .catch((err) => {
+                console.error('[SessionSync] Error during forced signout:', err);
+                if (isMounted) {
+                    window.location.href = '/account-auth/login?error=SessionExpired&code=1001';
+                }
+            });
+            return;
+        }
+        // Normal flow: Update store based on valid session status
+        if (status === 'authenticated' && isValid) {
+            setSession(session);
+        }
+        else if (status === 'unauthenticated') {
+            clearSession();
+        }
+        // Cleanup function to prevent post-unmount updates
+        return () => {
+            isMounted = false;
+        };
+    }, [session, status, setSession, clearSession]);
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
+}

package/dist/components/account/MobileNavDrawer.js

@@ -1,63 +1,63 @@
-"use strict";
-'use client';
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MobileNavDrawer = MobileNavDrawer;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_2 = require("next-auth/react");
-const navigation_1 = require("next/navigation");
-const image_1 = __importDefault(require("next/image"));
-const link_1 = __importDefault(require("next/link"));
-const lucide_react_1 = require("lucide-react");
-function MobileNavDrawer({ isOpen, onClose, navItems, customSections, basePath = '/account', onSignIn, signInCallbackUrl = '/dashboard', unauthActions, authFooter, }) {
-    const { data: session } = (0, react_2.useSession)();
-    const pathname = (0, navigation_1.usePathname)();
-    const isAuthenticated = !!session?.user;
-    const isActiveRoute = (0, react_1.useCallback)((href) => pathname?.startsWith(href) ?? false, [pathname]);
-    // Close on Escape key
-    (0, react_1.useEffect)(() => {
-        function handleEscape(event) {
-            if (event.key === 'Escape') {
-                onClose();
-            }
-        }
-        if (isOpen) {
-            document.addEventListener('keydown', handleEscape);
-            return () => document.removeEventListener('keydown', handleEscape);
-        }
-    }, [isOpen, onClose]);
-    // Lock body scroll when open
-    (0, react_1.useEffect)(() => {
-        if (isOpen) {
-            document.body.style.overflow = 'hidden';
-            return () => {
-                document.body.style.overflow = '';
-            };
-        }
-    }, [isOpen]);
-    const handleSignIn = () => {
-        onClose();
-        if (onSignIn) {
-            onSignIn();
-        }
-        else {
-            (0, react_2.signIn)(undefined, { callbackUrl: signInCallbackUrl });
-        }
-    };
-    const handleSectionItemClick = (item) => {
-        onClose();
-        if (item.onClick) {
-            item.onClick();
-        }
-    };
-    // Derive display initial from name or email
-    const userName = session?.user?.name;
-    const userEmail = session?.user?.email;
-    const displaySource = userName || userEmail;
-    const userInitial = displaySource?.charAt(0).toUpperCase() || '?';
+"use strict";
+'use client';
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobileNavDrawer = MobileNavDrawer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const better_auth_client_1 = require("../../client/better-auth-client");
+const navigation_1 = require("next/navigation");
+const image_1 = __importDefault(require("next/image"));
+const link_1 = __importDefault(require("next/link"));
+const lucide_react_1 = require("lucide-react");
+function MobileNavDrawer({ isOpen, onClose, navItems, customSections, basePath = '/account', onSignIn, signInCallbackUrl = '/dashboard', unauthActions, authFooter, }) {
+    const { data: session } = better_auth_client_1.authClient.useSession();
+    const pathname = (0, navigation_1.usePathname)();
+    const isAuthenticated = !!session?.user;
+    const isActiveRoute = (0, react_1.useCallback)((href) => pathname?.startsWith(href) ?? false, [pathname]);
+    // Close on Escape key
+    (0, react_1.useEffect)(() => {
+        function handleEscape(event) {
+            if (event.key === 'Escape') {
+                onClose();
+            }
+        }
+        if (isOpen) {
+            document.addEventListener('keydown', handleEscape);
+            return () => document.removeEventListener('keydown', handleEscape);
+        }
+    }, [isOpen, onClose]);
+    // Lock body scroll when open
+    (0, react_1.useEffect)(() => {
+        if (isOpen) {
+            document.body.style.overflow = 'hidden';
+            return () => {
+                document.body.style.overflow = '';
+            };
+        }
+    }, [isOpen]);
+    const handleSignIn = () => {
+        onClose();
+        if (onSignIn) {
+            onSignIn();
+        }
+        else {
+            better_auth_client_1.authClient.signIn.social({ provider: 'google', callbackURL: signInCallbackUrl });
+        }
+    };
+    const handleSectionItemClick = (item) => {
+        onClose();
+        if (item.onClick) {
+            item.onClick();
+        }
+    };
+    // Derive display initial from name or email
+    const userName = session?.user?.name;
+    const userEmail = session?.user?.email;
+    const displaySource = userName || userEmail;
+    const userInitial = displaySource?.charAt(0).toUpperCase() || '?';
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `
           fixed inset-0 bg-black/50 backdrop-blur-sm z-40 lg:hidden
           transition-opacity duration-300
@@ -74,8 +74,8 @@ function MobileNavDrawer({ isOpen, onClose, navItems, customSections, basePath =
         `, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between p-4 border-b border-gray-200 dark:border-white/10", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: "Menu" }), (0, jsx_runtime_1.jsx)("button", { onClick: onClose, className: "\r\n              p-2 rounded-xl\r\n              text-gray-400 hover:text-gray-900\r\n              dark:hover:text-white\r\n              hover:bg-gray-100 dark:hover:bg-white/10\r\n              transition-colors\r\n            ", "aria-label": "Close menu", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-5 w-5" }) })] }), isAuthenticated && session?.user && ((0, jsx_runtime_1.jsx)("div", { className: "p-4 border-b border-gray-200 dark:border-white/10", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [session.user.image ? ((0, jsx_runtime_1.jsx)(image_1.default, { src: session.user.image, alt: "", width: 48, height: 48, className: "w-12 h-12 rounded-full", unoptimized: true })) : ((0, jsx_runtime_1.jsx)("div", { className: "w-12 h-12 rounded-full bg-blue-500 flex items-center justify-center text-white font-semibold text-lg", children: userInitial })), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 min-w-0", children: [userName && ((0, jsx_runtime_1.jsx)("p", { className: "text-sm font-semibold text-gray-900 dark:text-white truncate", children: userName })), userEmail && ((0, jsx_runtime_1.jsx)("p", { className: "text-xs text-gray-500 dark:text-slate-400 truncate", children: userEmail }))] })] }) })), (0, jsx_runtime_1.jsx)("div", { className: "p-2", children: navItems.map((item) => ((0, jsx_runtime_1.jsxs)(link_1.default, { href: item.href, onClick: onClose, className: `
                 flex items-center gap-3 px-4 py-3.5 rounded-xl
                 transition-colors duration-200
-                ${isActiveRoute(item.href)
-                                ? 'bg-blue-500/10 text-blue-500'
+                ${isActiveRoute(item.href)
+                                ? 'bg-blue-500/10 text-blue-500'
                                 : 'text-gray-900 dark:text-white hover:bg-gray-100 dark:hover:bg-white/10'}
-              `, children: [item.icon && (0, jsx_runtime_1.jsx)("span", { className: "text-xl", children: item.icon }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: item.label }), isActiveRoute(item.href) && ((0, jsx_runtime_1.jsx)("span", { className: "ml-auto w-2 h-2 rounded-full bg-blue-500" }))] }, item.href))) }), customSections?.map((section, sectionIndex) => ((0, jsx_runtime_1.jsxs)("div", { className: "p-2 border-t border-gray-200 dark:border-white/10", children: [section.title && ((0, jsx_runtime_1.jsx)("p", { className: "px-4 py-2 text-xs font-semibold text-gray-500 dark:text-slate-400 uppercase tracking-wider", children: section.title })), section.items.map((item, itemIndex) => item.href ? ((0, jsx_runtime_1.jsxs)(link_1.default, { href: item.href, onClick: onClose, className: "\r\n                    flex items-center gap-3 px-4 py-3 rounded-xl\r\n                    text-gray-900 dark:text-white\r\n                    hover:bg-gray-100 dark:hover:bg-white/10\r\n                    transition-colors\r\n                  ", children: [item.icon && (0, jsx_runtime_1.jsx)("span", { className: "text-xl", children: item.icon }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: item.label })] }, itemIndex)) : ((0, jsx_runtime_1.jsxs)("button", { onClick: () => handleSectionItemClick(item), className: "\r\n                    flex items-center gap-3 px-4 py-3 rounded-xl w-full text-left\r\n                    text-gray-900 dark:text-white\r\n                    hover:bg-gray-100 dark:hover:bg-white/10\r\n                    transition-colors\r\n                  ", children: [item.icon && (0, jsx_runtime_1.jsx)("span", { className: "text-xl", children: item.icon }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: item.label })] }, itemIndex)))] }, sectionIndex))), (0, jsx_runtime_1.jsx)("div", { className: "p-4 mt-auto border-t border-gray-200 dark:border-white/10", children: !isAuthenticated ? (unauthActions ?? ((0, jsx_runtime_1.jsx)("div", { className: "space-y-3", children: (0, jsx_runtime_1.jsx)("button", { onClick: handleSignIn, className: "\r\n                    w-full px-4 py-3 rounded-xl\r\n                    text-blue-500 font-semibold\r\n                    border border-blue-500/30\r\n                    hover:bg-blue-500/10\r\n                    transition-colors\r\n                  ", children: "Login" }) }))) : (authFooter ?? ((0, jsx_runtime_1.jsx)(link_1.default, { href: basePath, onClick: onClose, className: "\r\n                  flex items-center justify-center gap-2\r\n                  w-full px-4 py-3 rounded-xl\r\n                  text-gray-500 dark:text-slate-400 font-medium\r\n                  hover:bg-gray-100 dark:hover:bg-white/10\r\n                  transition-colors\r\n                ", children: "Account Settings" }))) })] })] }));
-}
+              `, children: [item.icon && (0, jsx_runtime_1.jsx)("span", { className: "text-xl", children: item.icon }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: item.label }), isActiveRoute(item.href) && ((0, jsx_runtime_1.jsx)("span", { className: "ml-auto w-2 h-2 rounded-full bg-blue-500" }))] }, item.href))) }), customSections?.map((section, sectionIndex) => ((0, jsx_runtime_1.jsxs)("div", { className: "p-2 border-t border-gray-200 dark:border-white/10", children: [section.title && ((0, jsx_runtime_1.jsx)("p", { className: "px-4 py-2 text-xs font-semibold text-gray-500 dark:text-slate-400 uppercase tracking-wider", children: section.title })), section.items.map((item, itemIndex) => item.href ? ((0, jsx_runtime_1.jsxs)(link_1.default, { href: item.href, onClick: onClose, className: "\r\n                    flex items-center gap-3 px-4 py-3 rounded-xl\r\n                    text-gray-900 dark:text-white\r\n                    hover:bg-gray-100 dark:hover:bg-white/10\r\n                    transition-colors\r\n                  ", children: [item.icon && (0, jsx_runtime_1.jsx)("span", { className: "text-xl", children: item.icon }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: item.label })] }, itemIndex)) : ((0, jsx_runtime_1.jsxs)("button", { onClick: () => handleSectionItemClick(item), className: "\r\n                    flex items-center gap-3 px-4 py-3 rounded-xl w-full text-left\r\n                    text-gray-900 dark:text-white\r\n                    hover:bg-gray-100 dark:hover:bg-white/10\r\n                    transition-colors\r\n                  ", children: [item.icon && (0, jsx_runtime_1.jsx)("span", { className: "text-xl", children: item.icon }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: item.label })] }, itemIndex)))] }, sectionIndex))), (0, jsx_runtime_1.jsx)("div", { className: "p-4 mt-auto border-t border-gray-200 dark:border-white/10", children: !isAuthenticated ? (unauthActions ?? ((0, jsx_runtime_1.jsx)("div", { className: "space-y-3", children: (0, jsx_runtime_1.jsx)("button", { onClick: handleSignIn, className: "\r\n                    w-full px-4 py-3 rounded-xl\r\n                    text-blue-500 font-semibold\r\n                    border border-blue-500/30\r\n                    hover:bg-blue-500/10\r\n                    transition-colors\r\n                  ", children: "Login" }) }))) : (authFooter ?? ((0, jsx_runtime_1.jsx)(link_1.default, { href: basePath, onClick: onClose, className: "\r\n                  flex items-center justify-center gap-2\r\n                  w-full px-4 py-3 rounded-xl\r\n                  text-gray-500 dark:text-slate-400 font-medium\r\n                  hover:bg-gray-100 dark:hover:bg-white/10\r\n                  transition-colors\r\n                ", children: "Account Settings" }))) })] })] }));
+}

package/dist/components/account/UserAvatarMenu.js

@@ -1,88 +1,91 @@
-"use strict";
-'use client';
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.UserAvatarMenu = UserAvatarMenu;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_2 = require("next-auth/react");
-const navigation_1 = require("next/navigation");
-const image_1 = __importDefault(require("next/image"));
-const lucide_react_1 = require("lucide-react");
-function UserAvatarMenu({ basePath = '', showProfile = true, showSettings = true, showSecurity = true, customItems, onSignOut, }) {
-    const { data: session, status } = (0, react_2.useSession)();
-    const router = (0, navigation_1.useRouter)();
-    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
-    const menuRef = (0, react_1.useRef)(null);
-    // Close menu when clicking outside
-    (0, react_1.useEffect)(() => {
-        function handleClickOutside(event) {
-            if (menuRef.current && !menuRef.current.contains(event.target)) {
-                setIsOpen(false);
-            }
-        }
-        if (isOpen) {
-            document.addEventListener('mousedown', handleClickOutside);
-            return () => document.removeEventListener('mousedown', handleClickOutside);
-        }
-    }, [isOpen]);
-    // Close menu on Escape
-    (0, react_1.useEffect)(() => {
-        function handleEscape(event) {
-            if (event.key === 'Escape') {
-                setIsOpen(false);
-            }
-        }
-        if (isOpen) {
-            document.addEventListener('keydown', handleEscape);
-            return () => document.removeEventListener('keydown', handleEscape);
-        }
-    }, [isOpen]);
-    // Loading state
-    if (status === 'loading') {
-        return ((0, jsx_runtime_1.jsx)("div", { className: "h-10 w-10 rounded-full bg-gray-200 dark:bg-white/10 animate-pulse" }));
-    }
-    // Not authenticated
-    if (!session?.user) {
-        return null;
-    }
-    // Derive display initial from name or email — ignore anon/internal IDs
-    const userName = session.user?.name;
-    const userEmail = session.user.email;
-    const displaySource = userName || userEmail;
-    const userInitial = displaySource?.charAt(0).toUpperCase() || '?';
-    const handleNavigation = (path) => {
-        setIsOpen(false);
-        router.push(path);
-    };
-    const handleSignOut = async () => {
-        setIsOpen(false);
-        if (onSignOut) {
-            onSignOut();
-        }
-        else {
-            // Use NEXT_PUBLIC env var or default to root
-            const logoutUrl = process.env.NEXT_PUBLIC_LOGOUT_REDIRECT_URL || '/';
-            await (0, react_2.signOut)({ callbackUrl: logoutUrl });
-        }
-    };
-    const handleItemClick = (item) => {
-        setIsOpen(false);
-        if (item.onClick) {
-            item.onClick();
-        }
-        else if (item.href) {
-            router.push(item.href);
-        }
-    };
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: menuRef, className: "relative", children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => setIsOpen(!isOpen), className: "flex items-center justify-center h-10 w-10 rounded-full overflow-hidden bg-blue-500 text-white font-semibold text-lg hover:opacity-90 transition-opacity focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900", "aria-label": "User menu", "aria-expanded": isOpen, "aria-haspopup": "true", children: session.user.image ? ((0, jsx_runtime_1.jsx)(image_1.default, { src: session.user.image, alt: "", width: 40, height: 40, className: "w-10 h-10 rounded-full object-cover", unoptimized: true })) : (userInitial) }), isOpen && ((0, jsx_runtime_1.jsxs)("div", { className: "absolute right-0 mt-2 w-56 rounded-md shadow-lg z-50\r\n            bg-white dark:bg-slate-900\r\n            border border-gray-200 dark:border-slate-700", role: "menu", "aria-orientation": "vertical", children: [(0, jsx_runtime_1.jsx)("div", { className: "px-4 py-3 border-b border-gray-200 dark:border-slate-700", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [session.user.image ? ((0, jsx_runtime_1.jsx)(image_1.default, { src: session.user.image, alt: "", width: 32, height: 32, className: "w-8 h-8 rounded-full flex-shrink-0", unoptimized: true })) : ((0, jsx_runtime_1.jsx)("div", { className: "w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white font-semibold text-sm flex-shrink-0", children: userInitial })), (0, jsx_runtime_1.jsxs)("div", { className: "min-w-0", children: [userName && ((0, jsx_runtime_1.jsx)("p", { className: "text-sm font-medium text-gray-700 dark:text-slate-200 truncate", children: userName })), userEmail && ((0, jsx_runtime_1.jsx)("p", { className: "text-sm text-gray-500 dark:text-slate-400 truncate", children: userEmail })), !userName && !userEmail && ((0, jsx_runtime_1.jsx)("p", { className: "text-sm text-gray-500 dark:text-slate-400", children: "Signed in" }))] })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "py-1", children: [showProfile && ((0, jsx_runtime_1.jsx)(MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.User, { className: "h-4 w-4" }), label: "Profile", onClick: () => handleNavigation(`${basePath}/profile`) })), showSettings && ((0, jsx_runtime_1.jsx)(MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Settings, { className: "h-4 w-4" }), label: "Settings", onClick: () => handleNavigation(`${basePath}/settings`) })), showSecurity && ((0, jsx_runtime_1.jsx)(MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Shield, { className: "h-4 w-4" }), label: "Security", onClick: () => handleNavigation(`${basePath}/security`) })), customItems?.map((item, index) => ((0, jsx_runtime_1.jsx)(MenuItem, { icon: item.icon, label: item.label, onClick: () => handleItemClick(item) }, index)))] }), (0, jsx_runtime_1.jsx)("div", { className: "border-t border-gray-200 dark:border-slate-700 py-1", children: (0, jsx_runtime_1.jsx)(MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.LogOut, { className: "h-4 w-4" }), label: "Sign Out", onClick: handleSignOut, variant: "danger" }) })] }))] }));
-}
-function MenuItem({ icon, label, onClick, variant = 'default' }) {
-    const baseClasses = "flex items-center w-full px-4 py-2 text-sm cursor-pointer transition-colors";
-    const variantClasses = variant === 'danger'
-        ? "text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-slate-800"
-        : "text-gray-700 dark:text-white hover:bg-gray-100 dark:hover:bg-slate-800";
-    return ((0, jsx_runtime_1.jsxs)("button", { onClick: onClick, className: `${baseClasses} ${variantClasses}`, role: "menuitem", children: [icon && (0, jsx_runtime_1.jsx)("span", { className: "mr-3", children: icon }), (0, jsx_runtime_1.jsx)("span", { children: label })] }));
-}
+"use strict";
+'use client';
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UserAvatarMenu = UserAvatarMenu;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const better_auth_client_1 = require("../../client/better-auth-client");
+const navigation_1 = require("next/navigation");
+const image_1 = __importDefault(require("next/image"));
+const lucide_react_1 = require("lucide-react");
+function UserAvatarMenu({ basePath = '', showProfile = true, showSettings = true, showSecurity = true, customItems, onSignOut, }) {
+    const { data: sessionData, isPending } = better_auth_client_1.authClient.useSession();
+    const session = sessionData;
+    const status = isPending ? 'loading' : session ? 'authenticated' : 'unauthenticated';
+    const router = (0, navigation_1.useRouter)();
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const menuRef = (0, react_1.useRef)(null);
+    // Close menu when clicking outside
+    (0, react_1.useEffect)(() => {
+        function handleClickOutside(event) {
+            if (menuRef.current && !menuRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        }
+        if (isOpen) {
+            document.addEventListener('mousedown', handleClickOutside);
+            return () => document.removeEventListener('mousedown', handleClickOutside);
+        }
+    }, [isOpen]);
+    // Close menu on Escape
+    (0, react_1.useEffect)(() => {
+        function handleEscape(event) {
+            if (event.key === 'Escape') {
+                setIsOpen(false);
+            }
+        }
+        if (isOpen) {
+            document.addEventListener('keydown', handleEscape);
+            return () => document.removeEventListener('keydown', handleEscape);
+        }
+    }, [isOpen]);
+    // Loading state
+    if (status === 'loading') {
+        return ((0, jsx_runtime_1.jsx)("div", { className: "h-10 w-10 rounded-full bg-gray-200 dark:bg-white/10 animate-pulse" }));
+    }
+    // Not authenticated
+    if (!session?.user) {
+        return null;
+    }
+    // Derive display initial from name or email — ignore anon/internal IDs
+    const userName = session.user?.name;
+    const userEmail = session.user.email;
+    const displaySource = userName || userEmail;
+    const userInitial = displaySource?.charAt(0).toUpperCase() || '?';
+    const handleNavigation = (path) => {
+        setIsOpen(false);
+        router.push(path);
+    };
+    const handleSignOut = async () => {
+        setIsOpen(false);
+        if (onSignOut) {
+            onSignOut();
+        }
+        else {
+            // Use NEXT_PUBLIC env var or default to root
+            const logoutUrl = process.env.NEXT_PUBLIC_LOGOUT_REDIRECT_URL || '/';
+            await better_auth_client_1.authClient.signOut();
+            window.location.href = logoutUrl;
+        }
+    };
+    const handleItemClick = (item) => {
+        setIsOpen(false);
+        if (item.onClick) {
+            item.onClick();
+        }
+        else if (item.href) {
+            router.push(item.href);
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: menuRef, className: "relative", children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => setIsOpen(!isOpen), className: "flex items-center justify-center h-10 w-10 rounded-full overflow-hidden bg-blue-500 text-white font-semibold text-lg hover:opacity-90 transition-opacity focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900", "aria-label": "User menu", "aria-expanded": isOpen, "aria-haspopup": "true", children: session.user.image ? ((0, jsx_runtime_1.jsx)(image_1.default, { src: session.user.image, alt: "", width: 40, height: 40, className: "w-10 h-10 rounded-full object-cover", unoptimized: true })) : (userInitial) }), isOpen && ((0, jsx_runtime_1.jsxs)("div", { className: "absolute right-0 mt-2 w-56 rounded-md shadow-lg z-50\r\n            bg-white dark:bg-slate-900\r\n            border border-gray-200 dark:border-slate-700", role: "menu", "aria-orientation": "vertical", children: [(0, jsx_runtime_1.jsx)("div", { className: "px-4 py-3 border-b border-gray-200 dark:border-slate-700", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [session.user.image ? ((0, jsx_runtime_1.jsx)(image_1.default, { src: session.user.image, alt: "", width: 32, height: 32, className: "w-8 h-8 rounded-full flex-shrink-0", unoptimized: true })) : ((0, jsx_runtime_1.jsx)("div", { className: "w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white font-semibold text-sm flex-shrink-0", children: userInitial })), (0, jsx_runtime_1.jsxs)("div", { className: "min-w-0", children: [userName && ((0, jsx_runtime_1.jsx)("p", { className: "text-sm font-medium text-gray-700 dark:text-slate-200 truncate", children: userName })), userEmail && ((0, jsx_runtime_1.jsx)("p", { className: "text-sm text-gray-500 dark:text-slate-400 truncate", children: userEmail })), !userName && !userEmail && ((0, jsx_runtime_1.jsx)("p", { className: "text-sm text-gray-500 dark:text-slate-400", children: "Signed in" }))] })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "py-1", children: [showProfile && ((0, jsx_runtime_1.jsx)(MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.User, { className: "h-4 w-4" }), label: "Profile", onClick: () => handleNavigation(`${basePath}/profile`) })), showSettings && ((0, jsx_runtime_1.jsx)(MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Settings, { className: "h-4 w-4" }), label: "Settings", onClick: () => handleNavigation(`${basePath}/settings`) })), showSecurity && ((0, jsx_runtime_1.jsx)(MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Shield, { className: "h-4 w-4" }), label: "Security", onClick: () => handleNavigation(`${basePath}/security`) })), customItems?.map((item, index) => ((0, jsx_runtime_1.jsx)(MenuItem, { icon: item.icon, label: item.label, onClick: () => handleItemClick(item) }, index)))] }), (0, jsx_runtime_1.jsx)("div", { className: "border-t border-gray-200 dark:border-slate-700 py-1", children: (0, jsx_runtime_1.jsx)(MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.LogOut, { className: "h-4 w-4" }), label: "Sign Out", onClick: handleSignOut, variant: "danger" }) })] }))] }));
+}
+function MenuItem({ icon, label, onClick, variant = 'default' }) {
+    const baseClasses = "flex items-center w-full px-4 py-2 text-sm cursor-pointer transition-colors";
+    const variantClasses = variant === 'danger'
+        ? "text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-slate-800"
+        : "text-gray-700 dark:text-white hover:bg-gray-100 dark:hover:bg-slate-800";
+    return ((0, jsx_runtime_1.jsxs)("button", { onClick: onClick, className: `${baseClasses} ${variantClasses}`, role: "menuitem", children: [icon && (0, jsx_runtime_1.jsx)("span", { className: "mr-3", children: icon }), (0, jsx_runtime_1.jsx)("span", { children: label })] }));
+}