@djangocfg/layouts 2.1.621 → 2.1.622

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.621",
+  "version": "2.1.622",
   "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.621",
-    "@djangocfg/api": "^2.1.621",
-    "@djangocfg/devtools": "^2.1.621",
-    "@djangocfg/i18n": "^2.1.621",
-    "@djangocfg/ui-core": "^2.1.621",
+    "@djangocfg/analytics": "^2.1.622",
+    "@djangocfg/api": "^2.1.622",
+    "@djangocfg/devtools": "^2.1.622",
+    "@djangocfg/i18n": "^2.1.622",
+    "@djangocfg/ui-core": "^2.1.622",
     "@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.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",
+    "@djangocfg/analytics": "^2.1.622",
+    "@djangocfg/api": "^2.1.622",
+    "@djangocfg/devtools": "^2.1.622",
+    "@djangocfg/i18n": "^2.1.622",
+    "@djangocfg/typescript-config": "^2.1.622",
+    "@djangocfg/ui-core": "^2.1.622",
     "@storybook/react-vite": "^10.6.5",
     "@types/node": "^25.9.5",
     "@types/react": "19.3.0",

package/src/layouts/AuthLayout/components/oauth/OAuthSection.tsx

@@ -52,7 +52,12 @@ function OAuthSectionRaw({ sourceUrl, disabled, onError, onFocusEmail }: OAuthSe
           <AuthDivider />
         </>
       )}
-      {!oauth.isReady && <div className="auth-oauth-reserve" aria-hidden="true" />}
+      {!oauth.isReady && (
+        <div className="auth-oauth-reserve" aria-hidden="true">
+          <span className="auth-oauth-skeleton" />
+          <span className="auth-oauth-skeleton" />
+        </div>
+      )}
     </>
   );
 }

package/src/layouts/AuthLayout/styles/oauth.css

@@ -20,7 +20,28 @@
 /* Holds the room of two buttons, the gap and the divider while the server's
    provider list loads, so the email field does not jump when it arrives. */
 .auth-oauth-reserve {
-  height: calc(2 * var(--auth-oauth-height) + var(--auth-oauth-gap) + var(--auth-gap) + 1rem);
+  display: flex;
+  flex-direction: column;
+  gap: var(--auth-oauth-gap);
+  /* Two buttons plus the divider's room below them. */
+  padding-bottom: calc(var(--auth-gap) + 1rem);
+}
+
+/* A quiet placeholder of one provider button, so the held room reads as "loading", not as a hole. */
+.auth-oauth-skeleton {
+  display: block;
+  height: var(--auth-oauth-height);
+  border-radius: var(--auth-radius, 0.75rem);
+  background: color-mix(in srgb, var(--auth-muted, currentColor) 12%, transparent);
+  animation: auth-oauth-pulse 1.4s ease-in-out infinite;
+}
+
+@keyframes auth-oauth-pulse {
+  50% { opacity: 0.5; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .auth-oauth-skeleton { animation: none; }
 }
 
 /* The line for whoever deploys the site, under a notice about configuration. */

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

@@ -0,0 +1,20 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+
+import { redirectLoopDetected, resetRedirectLoop } from './useAuthGuard';
+
+describe('guard redirect circuit breaker', () => {
+  beforeEach(resetRedirectLoop);
+
+  it('allows a few redirects', () => {
+    for (let i = 0; i < 5; i++) expect(redirectLoopDetected(1000 + i * 400)).toBe(false);
+  });
+
+  it('trips on the sixth redirect inside the window', () => {
+    for (let i = 0; i < 5; i++) redirectLoopDetected(1000 + i * 400);
+    expect(redirectLoopDetected(3500)).toBe(true);
+  });
+
+  it('forgets redirects older than the window (a slow, legitimate sequence never trips)', () => {
+    for (let i = 0; i < 20; i++) expect(redirectLoopDetected(i * 6000)).toBe(false);
+  });
+});

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

@@ -18,6 +18,27 @@ import {
   authTrace,
 } from '@djangocfg/api/auth';
 
+/**
+ * Circuit breaker. A redirect that never lands (the sign-in page sends the user straight back) would otherwise
+ * run forever and hide the cause. After LOOP_MAX redirects within LOOP_WINDOW_MS the guard stops redirecting,
+ * writes `guard.loop` to the auth trace and shows a message that names the way to read it.
+ */
+const LOOP_MAX = 5;
+const LOOP_WINDOW_MS = 5000;
+const redirectTimes: number[] = [];
+
+/** @internal exported for tests */
+export function resetRedirectLoop(): void {
+  redirectTimes.length = 0;
+}
+
+/** @internal exported for tests */
+export function redirectLoopDetected(now: number): boolean {
+  redirectTimes.push(now);
+  while (redirectTimes.length && now - (redirectTimes[0] ?? now) > LOOP_WINDOW_MS) redirectTimes.shift();
+  return redirectTimes.length > LOOP_MAX;
+}
+
 interface UseAuthGuardOptions {
   requireAuth?: boolean;
   /**
@@ -57,6 +78,7 @@ export function useAuthGuard({
   const resolvedAuthPath = authPath ?? routes.auth;
   const router = useRouter();
   const [isRedirecting, setIsRedirecting] = useState(false);
+  const [looping, setLooping] = useState(false);
 
   // Auth state lives in the browser (storage), so the server always renders
   // unauthenticated → the preloader. Keep the first client render identical to
@@ -83,6 +105,12 @@ export function useAuthGuard({
   useEffect(() => {
     if (shouldRedirectToAuth(guardState)) {
       const currentUrl = window.location.pathname + window.location.search;
+      if (redirectLoopDetected(Date.now())) {
+        authTrace('guard.loop', { from: window.location.pathname, to: resolvedAuthPath, status });
+        setLooping(true);
+        setIsRedirecting(true);
+        return;
+      }
       authTrace('guard.redirect', { from: window.location.pathname, to: resolvedAuthPath });
       saveRedirectUrl(currentUrl);
       setIsRedirecting(true);
@@ -92,7 +120,11 @@ export function useAuthGuard({
   }, [mounted, requireAuth, isAuthenticated, authLoading, isRedirecting, router, saveRedirectUrl, resolvedAuthPath]);
 
   const isLoading = resolveGuardIsLoading(guardState);
-  const loadingText = isRedirecting ? 'Redirecting to login...' : 'Authenticating...';
+  const loadingText = looping
+    ? 'Sign-in loop stopped. Open the console and run __cfgAuth.dump()'
+    : isRedirecting
+      ? 'Redirecting to login...'
+      : 'Authenticating...';
 
   return {
     isLoading,