@djangocfg/layouts 2.1.618 → 2.1.621

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.618",
+  "version": "2.1.621",
   "description": "Simple, straightforward layout components for Next.js - import and use with props",
   "keywords": [
     "layouts",
@@ -91,11 +91,11 @@
     "test": "vitest run"
   },
   "peerDependencies": {
-    "@djangocfg/analytics": "^2.1.618",
-    "@djangocfg/api": "^2.1.618",
-    "@djangocfg/devtools": "^2.1.618",
-    "@djangocfg/i18n": "^2.1.618",
-    "@djangocfg/ui-core": "^2.1.618",
+    "@djangocfg/analytics": "^2.1.621",
+    "@djangocfg/api": "^2.1.621",
+    "@djangocfg/devtools": "^2.1.621",
+    "@djangocfg/i18n": "^2.1.621",
+    "@djangocfg/ui-core": "^2.1.621",
     "@hookform/resolvers": "^5.2.2 || ^7.0.2",
     "consola": "^3.4.2",
     "lucide-react": "^1.68.0",
@@ -123,12 +123,12 @@
     "qrcode.react": "^4.2.0"
   },
   "devDependencies": {
-    "@djangocfg/analytics": "^2.1.618",
-    "@djangocfg/api": "^2.1.618",
-    "@djangocfg/devtools": "^2.1.618",
-    "@djangocfg/i18n": "^2.1.618",
-    "@djangocfg/typescript-config": "^2.1.618",
-    "@djangocfg/ui-core": "^2.1.618",
+    "@djangocfg/analytics": "^2.1.621",
+    "@djangocfg/api": "^2.1.621",
+    "@djangocfg/devtools": "^2.1.621",
+    "@djangocfg/i18n": "^2.1.621",
+    "@djangocfg/typescript-config": "^2.1.621",
+    "@djangocfg/ui-core": "^2.1.621",
     "@storybook/react-vite": "^10.6.5",
     "@types/node": "^25.9.5",
     "@types/react": "19.3.0",

package/src/layouts/PrivateLayout/PrivateLayout.tsx

@@ -102,12 +102,14 @@ export function PrivateLayout({
 
   if (isLoading) {
     return (
+      // The auth gate covers the whole viewport: solid, above the chat dock (z-100), sheets, dialogs and popovers.
+      // Nothing behind it may show or take a click while the session is still being decided.
       <Preloader
         variant="fullscreen"
         text={loadingText}
         size="lg"
-        backdrop={true}
-        backdropOpacity={80}
+        backdrop={false}
+        className="z-[9996] bg-background"
       />
     );
   }

package/src/layouts/PrivateLayout/hooks/useAuthGuard.ts

@@ -15,6 +15,7 @@ import {
   resolveGuardIsAuthenticated,
   shouldRedirectToAuth,
   isForbidden,
+  authTrace,
 } from '@djangocfg/api/auth';
 
 interface UseAuthGuardOptions {
@@ -27,10 +28,8 @@ interface UseAuthGuardOptions {
   /** Explicit override; defaults to the app's resolved `useAuth().routes.auth`. */
   authPath?: string;
   /**
-   * Safety net: if auth is still "loading" this many ms after mount, stop
-   * waiting and let the guard decide from whatever token state we have. Prevents
-   * an endless preloader if AuthContext initialization ever wedges (a hung
-   * request, a CSP-swallowed response, an unresolved promise). Default 8s.
+   * @deprecated No effect. The provider owns the single safety timer (8 s), so
+   * `status` always leaves 'resolving'. Kept so existing callers still compile.
    */
   loadingTimeoutMs?: number;
 }
@@ -50,9 +49,11 @@ export function useAuthGuard({
   requireAuth = true,
   requireStaff = false,
   authPath,
-  loadingTimeoutMs = 8000,
 }: UseAuthGuardOptions): UseAuthGuardResult {
-  const { isAuthenticated, isLoading: authLoading, isAdminUser, saveRedirectUrl, routes } = useAuth();
+  const { status, isAdminUser, saveRedirectUrl, routes } = useAuth();
+  // One linear state decides everything: 'resolving' → spinner, 'authenticated' → render, 'anonymous' → redirect.
+  const isAuthenticated = status === 'authenticated';
+  const authLoading = status === 'resolving';
   const resolvedAuthPath = authPath ?? routes.auth;
   const router = useRouter();
   const [isRedirecting, setIsRedirecting] = useState(false);
@@ -65,26 +66,14 @@ export function useAuthGuard({
   const [mounted, setMounted] = useState(false);
   useEffect(() => setMounted(true), []);
 
-  // Safety-net timeout: force auth to be considered "resolved" if it hasn't
-  // settled within loadingTimeoutMs, so the guard can act (render or redirect)
-  // instead of spinning forever. Only armed while actually loading.
-  const [authTimedOut, setAuthTimedOut] = useState(false);
-  useEffect(() => {
-    if (!mounted || !authLoading || authTimedOut) return;
-    const t = setTimeout(() => setAuthTimedOut(true), loadingTimeoutMs);
-    return () => clearTimeout(t);
-  }, [mounted, authLoading, authTimedOut, loadingTimeoutMs]);
-
   // Guard state derives from a single pure resolver (see @djangocfg/api/auth
   // utils/guard) so the "spinner vs redirect vs render" decision is unit-tested
   // in isolation and can't silently regress into the "stuck on Authenticating…"
   // state where a resolved-but-unauthenticated session never redirects.
-  // `authLoading` is forced false once the safety-net timeout fires.
-  const effectiveAuthLoading = authLoading && !authTimedOut;
   const guardState = {
     mounted,
     requireAuth,
-    authLoading: effectiveAuthLoading,
+    authLoading,
     isRedirecting,
     isAuthenticated,
     requireStaff,
@@ -94,12 +83,13 @@ export function useAuthGuard({
   useEffect(() => {
     if (shouldRedirectToAuth(guardState)) {
       const currentUrl = window.location.pathname + window.location.search;
+      authTrace('guard.redirect', { from: window.location.pathname, to: resolvedAuthPath });
       saveRedirectUrl(currentUrl);
       setIsRedirecting(true);
       router.push(resolvedAuthPath);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [mounted, requireAuth, isAuthenticated, effectiveAuthLoading, isRedirecting, router, saveRedirectUrl, resolvedAuthPath]);
+  }, [mounted, requireAuth, isAuthenticated, authLoading, isRedirecting, router, saveRedirectUrl, resolvedAuthPath]);
 
   const isLoading = resolveGuardIsLoading(guardState);
   const loadingText = isRedirecting ? 'Redirecting to login...' : 'Authenticating...';

package/src/testing/MockAuthProvider.tsx

@@ -63,6 +63,7 @@ export const MockAuthProvider: React.FC<MockAuthProviderProps> = ({
   const value = useMemo<AuthContextType>(() => ({
     user,
     isLoading,
+    status: isLoading ? 'resolving' : (isAuthenticated ?? Boolean(user)) ? 'authenticated' : 'anonymous',
     isAuthenticated: isAuthenticated ?? Boolean(user),
     isAdminUser,
     routes: { auth: '/auth', defaultCallback: '/', defaultAuthCallback: '/auth', ...routes },