@djangocfg/layouts 2.1.619 → 2.1.621

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.619",
+  "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.619",
-    "@djangocfg/api": "^2.1.619",
-    "@djangocfg/devtools": "^2.1.619",
-    "@djangocfg/i18n": "^2.1.619",
-    "@djangocfg/ui-core": "^2.1.619",
+    "@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.619",
-    "@djangocfg/api": "^2.1.619",
-    "@djangocfg/devtools": "^2.1.619",
-    "@djangocfg/i18n": "^2.1.619",
-    "@djangocfg/typescript-config": "^2.1.619",
-    "@djangocfg/ui-core": "^2.1.619",
+    "@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

@@ -9,13 +9,13 @@
 import { useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
 
-import { auth } from '@djangocfg/api';
 import {
   useAuth,
   resolveGuardIsLoading,
   resolveGuardIsAuthenticated,
   shouldRedirectToAuth,
   isForbidden,
+  authTrace,
 } from '@djangocfg/api/auth';
 
 interface UseAuthGuardOptions {
@@ -28,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;
 }
@@ -51,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);
@@ -66,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,
@@ -93,16 +81,15 @@ export function useAuthGuard({
   };
 
   useEffect(() => {
-    // The React snapshot can still be the server's 'anonymous' while the store holds a live session (hydration, or a
-    // full-page load right after sign-in). Never redirect on that: the snapshot catches up and the effect re-runs.
-    if (shouldRedirectToAuth(guardState) && !auth.isAuthenticated()) {
+    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 },