@djangocfg/layouts 2.1.455 → 2.1.457

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.455",
+  "version": "2.1.457",
   "description": "Simple, straightforward layout components for Next.js - import and use with props",
   "keywords": [
     "layouts",
@@ -89,12 +89,12 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.455",
-    "@djangocfg/centrifugo": "^2.1.455",
-    "@djangocfg/debuger": "^2.1.455",
-    "@djangocfg/i18n": "^2.1.455",
-    "@djangocfg/monitor": "^2.1.455",
-    "@djangocfg/ui-core": "^2.1.455",
+    "@djangocfg/api": "^2.1.457",
+    "@djangocfg/centrifugo": "^2.1.457",
+    "@djangocfg/debuger": "^2.1.457",
+    "@djangocfg/i18n": "^2.1.457",
+    "@djangocfg/monitor": "^2.1.457",
+    "@djangocfg/ui-core": "^2.1.457",
     "@hookform/resolvers": "^5.2.2",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
@@ -125,14 +125,14 @@
     "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "@djangocfg/api": "^2.1.455",
-    "@djangocfg/centrifugo": "^2.1.455",
-    "@djangocfg/debuger": "^2.1.455",
-    "@djangocfg/i18n": "^2.1.455",
-    "@djangocfg/monitor": "^2.1.455",
-    "@djangocfg/typescript-config": "^2.1.455",
-    "@djangocfg/ui-core": "^2.1.455",
-    "@djangocfg/ui-tools": "^2.1.455",
+    "@djangocfg/api": "^2.1.457",
+    "@djangocfg/centrifugo": "^2.1.457",
+    "@djangocfg/debuger": "^2.1.457",
+    "@djangocfg/i18n": "^2.1.457",
+    "@djangocfg/monitor": "^2.1.457",
+    "@djangocfg/typescript-config": "^2.1.457",
+    "@djangocfg/ui-core": "^2.1.457",
+    "@djangocfg/ui-tools": "^2.1.457",
     "@types/node": "^25.2.3",
     "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",

package/src/components/RedirectPage/RedirectPage.tsx

@@ -46,19 +46,20 @@ export interface RedirectPageProps {
  */
 export function RedirectPage({
   authenticatedPath = '/private',
-  unauthenticatedPath = '/auth',
+  unauthenticatedPath,
   loadingText = 'Loading...',
 }: RedirectPageProps) {
-  const { isAuthenticated } = useAuth();
+  const { isAuthenticated, routes } = useAuth();
   const router = useCfgRouter();
+  const resolvedUnauthPath = unauthenticatedPath ?? routes.auth;
 
   useEffect(() => {
     if (!isAuthenticated) {
-      router.hardPush(unauthenticatedPath);
+      router.hardPush(resolvedUnauthPath);
     } else {
       router.hardPush(authenticatedPath);
     }
-  }, [isAuthenticated, router, authenticatedPath, unauthenticatedPath]);
+  }, [isAuthenticated, router, authenticatedPath, resolvedUnauthPath]);
 
   return (
     <Preloader

package/src/layouts/AuthLayout/AuthLayout.tsx

@@ -12,7 +12,7 @@
 
 import React, { createContext, memo, useContext, useMemo } from 'react';
 
-import { useCfgRouter } from '@djangocfg/api/auth';
+import { consumeSavedRedirect, useAuth, useCfgRouter } from '@djangocfg/api/auth';
 import { useAppT } from '@djangocfg/i18n';
 
 import { Suspense } from '../../components';
@@ -49,7 +49,9 @@ export const AuthLayout: React.FC<AuthLayoutProps> = (props) => {
     background,
     sidebar,
     enableGithubAuth,
-    redirectUrl = AUTH.DEFAULT_REDIRECT,
+    // No default here — an unset prop falls through to the saved back-url /
+    // resolved routes.defaultCallback chain at navigation time (AuthSuccess).
+    redirectUrl,
     onOAuthSuccess,
     onError,
     className,
@@ -143,6 +145,7 @@ const AuthSuccess: React.FC<AuthSuccessInlineProps> = memo(({
   redirectDelay = AUTH.REDIRECT_DELAY,
 }) => {
   const router = useCfgRouter();
+  const { routes } = useAuth();
   const t = useAppT();
   const [isVisible, setIsVisible] = React.useState(false);
 
@@ -151,7 +154,9 @@ const AuthSuccess: React.FC<AuthSuccessInlineProps> = memo(({
   React.useEffect(() => {
     const animTimer = setTimeout(() => setIsVisible(true), AUTH.ANIMATION_START_DELAY);
     const redirectTimer = setTimeout(() => {
-      const finalUrl = redirectUrl || AUTH.DEFAULT_REDIRECT;
+      // Priority: saved back-url (where the guard bounced the user from,
+      // single-use) > the app's static redirectUrl prop > resolved default.
+      const finalUrl = consumeSavedRedirect() || redirectUrl || routes.defaultCallback;
       router.hardPush(finalUrl);
     }, redirectDelay);
 
@@ -159,7 +164,7 @@ const AuthSuccess: React.FC<AuthSuccessInlineProps> = memo(({
       clearTimeout(animTimer);
       clearTimeout(redirectTimer);
     };
-  }, [redirectUrl, redirectDelay, router]);
+  }, [redirectUrl, redirectDelay, router, routes.defaultCallback]);
 
   return (
     <div className="auth-success-overlay">

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

@@ -4,7 +4,7 @@ import { AlertCircle, Loader2 } from 'lucide-react';
 import { useSearchParams } from 'next/navigation';
 import React, { memo, useEffect, useState } from 'react';
 
-import { useGithubAuth } from '@djangocfg/api/auth';
+import { useAuth, useGithubAuth } from '@djangocfg/api/auth';
 import {
     Card, CardContent, CardDescription, CardHeader, CardTitle
 } from '@djangocfg/ui-core/components';
@@ -58,6 +58,7 @@ function OAuthCallbackRaw({
   redirectUrl,
 }: OAuthCallbackProps) {
   const searchParams = useSearchParams();
+  const { routes } = useAuth();
   const { setStep, setTwoFactorSessionId, setShouldPrompt2FA } = useAuthFormContext();
   const [status, setStatus] = useState<CallbackStatus | null>(null);
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
@@ -165,7 +166,7 @@ function OAuthCallbackRaw({
         {status === 'error' && (
           <CardContent className="text-center">
             <a
-              href="/auth"
+              href={routes.auth}
               className="text-primary hover:underline text-sm"
             >
               Try again

package/src/layouts/AuthLayout/constants.ts

@@ -2,8 +2,9 @@
  * AuthLayout Constants
  *
  * Code lengths come from the shared single source of truth in
- * `@djangocfg/api/auth` (AUTH_CONSTANTS). Layout-only values (timings, sizes,
- * routes) live here.
+ * `@djangocfg/api/auth` (AUTH_CONSTANTS). Layout-only values (timings, sizes)
+ * live here. Routes deliberately do NOT — they come resolved from
+ * `useAuth().routes` so an app's AuthConfig override is honored everywhere.
  */
 
 import { AUTH_CONSTANTS } from '@djangocfg/api/auth';
@@ -23,7 +24,4 @@ export const AUTH = {
 
   // Sizes (px)
   QR_CODE_SIZE: 160,
-
-  // Routes
-  DEFAULT_REDIRECT: '/dashboard',
 } as const;

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

@@ -18,6 +18,7 @@ import {
 
 interface UseAuthGuardOptions {
   requireAuth?: boolean;
+  /** 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
@@ -39,10 +40,11 @@ interface UseAuthGuardResult {
 
 export function useAuthGuard({
   requireAuth = true,
-  authPath = '/auth',
+  authPath,
   loadingTimeoutMs = 8000,
 }: UseAuthGuardOptions): UseAuthGuardResult {
-  const { isAuthenticated, isLoading: authLoading, saveRedirectUrl } = useAuth();
+  const { isAuthenticated, isLoading: authLoading, saveRedirectUrl, routes } = useAuth();
+  const resolvedAuthPath = authPath ?? routes.auth;
   const router = useRouter();
   const [isRedirecting, setIsRedirecting] = useState(false);
 
@@ -83,10 +85,10 @@ export function useAuthGuard({
       const currentUrl = window.location.pathname + window.location.search;
       saveRedirectUrl(currentUrl);
       setIsRedirecting(true);
-      router.push(authPath);
+      router.push(resolvedAuthPath);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [mounted, requireAuth, isAuthenticated, effectiveAuthLoading, isRedirecting, router, saveRedirectUrl, authPath]);
+  }, [mounted, requireAuth, isAuthenticated, effectiveAuthLoading, isRedirecting, router, saveRedirectUrl, resolvedAuthPath]);
 
   const isLoading = resolveGuardIsLoading(guardState);
   const loadingText = isRedirecting ? 'Redirecting to login...' : 'Authenticating...';

package/src/layouts/PublicLayout/components/UserMenu.tsx

@@ -69,11 +69,12 @@ export interface UserMenuProps {
 export function UserMenu({
   variant = 'desktop',
   groups,
-  authPath = '/auth',
+  authPath,
   disableAuth = false,
   i18n,
 }: UserMenuProps) {
-  const { user, isAuthenticated } = useAuth();
+  const { user, isAuthenticated, routes } = useAuth();
+  const resolvedAuthPath = authPath ?? routes.auth;
   const handleLogout = useLogout();
   const [mounted, setMounted] = React.useState(false);
   const t = useAppT();
@@ -128,7 +129,7 @@ export function UserMenu({
       return (
         <div className="pt-4 border-t border-border/50">
           <Link
-            href={authPath}
+            href={resolvedAuthPath}
             className="group flex items-center justify-between rounded-full px-4 py-2.5 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground hover:bg-accent/40"
           >
             <span>{labels.signIn}</span>
@@ -145,7 +146,7 @@ export function UserMenu({
       );
     }
     return (
-      <Link href={authPath}>
+      <Link href={resolvedAuthPath}>
         <Button variant="default" size="sm" className="rounded-full px-5">
           {labels.signIn}
         </Button>

package/src/layouts/PublicLayout/shared/MobileDrawerShell.tsx

@@ -47,7 +47,7 @@ export function MobileDrawerShell(props: MobileDrawerShellProps) {
   const navigation = props.navigation ?? [];
   const userMenu = props.userMenu;
 
-  const { isAuthenticated, user } = useAuth();
+  const { isAuthenticated, user, routes } = useAuth();
   const pathname = usePathnameWithoutLocale();
   const t = useAppT();
   const { mounted, visible } = useMobileNavPanel({
@@ -211,7 +211,7 @@ export function MobileDrawerShell(props: MobileDrawerShellProps) {
           {showSignInFooter && (
             <div className="shrink-0 border-t border-border/50 p-4">
               <Link
-                href={userMenu?.authPath || '/auth'}
+                href={userMenu?.authPath || routes.auth}
                 onClick={closeMobileMenu}
                 className="block"
               >

package/src/layouts/SettingsLayout/components/TwoFactorSection/TwoFactorSection.tsx

@@ -9,12 +9,6 @@ import {
   AlertDescription,
   Badge,
   Button,
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
   OTPInput,
   Preloader,
   SettingRow,
@@ -49,69 +43,62 @@ function StatusBadge({ enabled }: { enabled: boolean }) {
 }
 
 // ─────────────────────────────────────────────────────────────────────────────
-// Disable dialog
+// Disable confirmation — inline, not a dialog. Settings already lives in a
+// dialog; stacking a second modal on top fights its focus trap and dims the
+// context the user needs. Destructive confirmation expands in place instead
+// (progressive disclosure), so the device list stays visible while confirming.
 // ─────────────────────────────────────────────────────────────────────────────
 
-function DisableDialog({
-  open,
+function DisableConfirm({
   isLoading,
   error,
   onConfirm,
   onCancel,
 }: {
-  open: boolean;
   isLoading: boolean;
   error: string | null;
   onConfirm: (code: string) => void;
   onCancel: () => void;
 }) {
+  // Mounted fresh each time the confirmation opens — state starts clean.
   const [code, setCode] = useState('');
 
-  // Reset on open
-  useEffect(() => {
-    if (open) setCode('');
-  }, [open]);
-
   return (
-    <Dialog open={open} onOpenChange={(v) => !v && onCancel()}>
-      <DialogContent className="sm:max-w-sm">
-        <DialogHeader>
-          <DialogTitle className="flex items-center gap-2">
-            <ShieldOff className="w-5 h-5 text-destructive" />
-            Disable Two-Factor Authentication
-          </DialogTitle>
-          <DialogDescription>
+    <div className="mt-3 space-y-4 rounded-lg border border-destructive/30 bg-destructive/5 p-4">
+      <div className="flex gap-2.5">
+        <ShieldOff className="mt-0.5 h-4 w-4 flex-shrink-0 text-destructive" />
+        <div className="space-y-1">
+          <p className="text-sm font-medium">Disable two-factor authentication?</p>
+          <p className="text-[13px] leading-relaxed text-muted-foreground">
             Enter the 6-digit code from your authenticator app to confirm.
             This will make your account less secure.
-          </DialogDescription>
-        </DialogHeader>
-
-        <div className="py-2 space-y-4">
-          {error && (
-            <Alert variant="destructive">
-              <AlertDescription>{error}</AlertDescription>
-            </Alert>
-          )}
-          <div className="flex justify-center">
-            <OTPInput
-              length={6}
-              validationMode="numeric"
-              pasteBehavior="clean"
-              value={code}
-              onChange={setCode}
-              disabled={isLoading}
-              autoFocus
-              size="lg"
-            />
-          </div>
+          </p>
         </div>
+      </div>
+
+      {error && (
+        <Alert variant="destructive">
+          <AlertDescription>{error}</AlertDescription>
+        </Alert>
+      )}
 
-        <DialogFooter>
-          <Button variant="outline" onClick={onCancel} disabled={isLoading}>
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <OTPInput
+          length={6}
+          validationMode="numeric"
+          pasteBehavior="clean"
+          value={code}
+          onChange={setCode}
+          disabled={isLoading}
+          autoFocus
+        />
+        <div className="flex gap-2">
+          <Button variant="outline" size="sm" onClick={onCancel} disabled={isLoading}>
             Cancel
           </Button>
           <Button
             variant="destructive"
+            size="sm"
             onClick={() => onConfirm(code)}
             disabled={isLoading || code.length !== 6}
           >
@@ -121,9 +108,9 @@ function DisableDialog({
               'Disable 2FA'
             )}
           </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+        </div>
+      </div>
+    </div>
   );
 }
 
@@ -224,7 +211,7 @@ export const TwoFactorSection: React.FC = () => {
       variant="outline"
       size="sm"
       onClick={() => { clearError(); setShowDisable(true); }}
-      disabled={isLoading}
+      disabled={isLoading || showDisable}
       className="text-destructive hover:text-destructive hover:bg-destructive/10 border-destructive/30"
     >
       Disable
@@ -245,6 +232,16 @@ export const TwoFactorSection: React.FC = () => {
             action={statusAction}
           />
 
+          {/* Inline destructive confirmation (no nested dialog) */}
+          {showDisable && (
+            <DisableConfirm
+              isLoading={isLoading}
+              error={error}
+              onConfirm={handleDisableConfirm}
+              onCancel={handleDisableCancel}
+            />
+          )}
+
           {/* Fetch error */}
           {error && !showDisable && (
             <div className="py-3">
@@ -279,14 +276,6 @@ export const TwoFactorSection: React.FC = () => {
           </SettingsBlock>
         )}
       </div>
-
-      <DisableDialog
-        open={showDisable}
-        isLoading={isLoading}
-        error={error}
-        onConfirm={handleDisableConfirm}
-        onCancel={handleDisableCancel}
-      />
     </>
   );
 };

package/src/layouts/SettingsLayout/sections/builtins.tsx

@@ -25,13 +25,16 @@ interface BuildBuiltinArgs {
  * are left as plain strings here (the inner section bodies pull localized copy
  * from ProfileProvider); only the nav-level label/title live at this layer.
  *
- * Defaults: account on, security off (needs API support), apiKeys on.
+ * Defaults: everything on. Security (2FA management) is a built-in the user
+ * must be able to find without the app opting in — `/cfg/totp/*` ships with
+ * every django-cfg backend. Apps that truly lack it opt out explicitly via
+ * `builtins.security: false`.
  */
 export function buildBuiltinSections({
   builtins,
   enableDeleteAccount,
 }: BuildBuiltinArgs): SettingsSection[] {
-  const { account = true, security = false, apiKeys = true } = builtins;
+  const { account = true, security = true, apiKeys = true } = builtins;
   const sections: SettingsSection[] = [];
 
   if (account) {

package/src/snippets/AuthDialog/AuthDialog.tsx

@@ -3,7 +3,7 @@
 import { LogIn } from 'lucide-react';
 import React, { useMemo } from 'react';
 
-import { useCfgRouter } from '@djangocfg/api/auth';
+import { useAuth, useCfgRouter } from '@djangocfg/api/auth';
 import { useAppT } from '@djangocfg/i18n';
 import {
     Button, Dialog, DialogContent, DialogHeader, DialogTitle
@@ -17,7 +17,7 @@ interface AuthDialogProps {
 
 export const AuthDialog: React.FC<AuthDialogProps> = ({
   onAuthRequired,
-  authPath = '/auth'
+  authPath
 }) => {
   const open = useDialogStore((s) => s.authOpen);
   const authOptions = useDialogStore((s) => s.authOptions);
@@ -32,21 +32,24 @@ export const AuthDialog: React.FC<AuthDialogProps> = ({
 
   const message = authOptions?.message || labels.pleaseSignIn;
   const router = useCfgRouter();
+  const { saveRedirectUrl, routes } = useAuth();
 
   const handleClose = () => {
     resolveAuth(false);
   };
 
   const handleGoToAuth = () => {
+    // Canonical post-login redirect persistence (the same store the guard and
+    // verifyOTP read). The old private `redirectAfterAuth` sessionStorage key
+    // was write-only — nothing ever read it.
     if (typeof window !== 'undefined') {
-      const redirect = authOptions?.redirectUrl || window.location.pathname;
-      sessionStorage.setItem('redirectAfterAuth', redirect);
+      saveRedirectUrl(authOptions?.redirectUrl || window.location.pathname);
     }
 
     if (onAuthRequired) {
       onAuthRequired();
     } else {
-      router.push(authPath);
+      router.push(authPath ?? routes.auth);
     }
 
     resolveAuth(true);

package/src/testing/MockAuthProvider.tsx

@@ -62,6 +62,7 @@ export const MockAuthProvider: React.FC<MockAuthProviderProps> = ({
     isLoading,
     isAuthenticated: isAuthenticated ?? Boolean(user),
     isAdminUser,
+    routes: { auth: '/auth', defaultCallback: '/', defaultAuthCallback: '/auth' },
 
     loadCurrentProfile: noopAsync,
     checkAuthAndRedirect: noopAsync,