@djangocfg/api 2.1.102 → 2.1.104

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/api",
-  "version": "2.1.102",
+  "version": "2.1.104",
   "description": "Auto-generated TypeScript API client with React hooks, SWR integration, and Zod validation for Django REST Framework backends",
   "keywords": [
     "django",
@@ -74,7 +74,6 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/ui-nextjs": "^2.1.102",
     "consola": "^3.4.2",
     "next": ">=16.0.0",
     "p-retry": "^7.0.0",
@@ -85,7 +84,7 @@
   "devDependencies": {
     "@types/node": "^24.7.2",
     "@types/react": "^19.0.0",
-    "@djangocfg/typescript-config": "^2.1.102",
+    "@djangocfg/typescript-config": "^2.1.104",
     "next": "^16.0.0",
     "react": "^19.0.0",
     "tsup": "^8.5.0",

package/src/auth/context/AuthContext.tsx

@@ -6,7 +6,7 @@ import React, {
     createContext, ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState
 } from 'react';
 
-import { useCfgRouter, useLocalStorage, useQueryParams } from '@djangocfg/ui-nextjs/hooks';
+import { useCfgRouter, useLocalStorage, useQueryParams } from '../hooks';
 
 import { api as apiAccounts, Enums } from '../../';
 import { clearProfileCache, getCachedProfile } from '../hooks/useProfileCache';

package/src/auth/hooks/index.ts

@@ -1,5 +1,9 @@
 'use client';
 
+// Router hooks
+export { useCfgRouter } from './useCfgRouter';
+export { useQueryParams } from './useQueryParams';
+
 // Core form hooks (decomposed)
 export { useAuthFormState, type UseAuthFormStateReturn } from './useAuthFormState';
 export { useAuthValidation, detectChannelFromIdentifier, validateIdentifier } from './useAuthValidation';

package/src/auth/hooks/useAuthGuard.ts

@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from 'react';
 
-import { useCfgRouter } from '@djangocfg/ui-nextjs/hooks';
+import { useCfgRouter } from './useCfgRouter';
 
 import { useAuth } from '../context';
 

package/src/auth/hooks/useAutoAuth.ts

@@ -3,7 +3,8 @@
 import { usePathname } from 'next/navigation';
 import { useEffect } from 'react';
 
-import { useCfgRouter, useQueryParams } from '@djangocfg/ui-nextjs/hooks';
+import { useCfgRouter } from './useCfgRouter';
+import { useQueryParams } from './useQueryParams';
 
 import { authLogger } from '../utils/logger';
 

package/src/auth/hooks/useCfgRouter.ts

@@ -0,0 +1,153 @@
+/**
+ * Universal Router Hook with BasePath Support
+ *
+ * Wrapper around Next.js useRouter that automatically handles basePath
+ * for static builds served via iframe or subdirectory
+ * 
+ * IMPORTANT: In Next.js 15 App Router, router.push() does NOT automatically
+ * handle basePath (unlike Pages Router). This is a breaking change in App Router.
+ * 
+ * This hook ensures basePath is always included when navigating, especially
+ * important for static exports served via iframe where basePath is critical.
+ * 
+ * @see https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration
+ */
+
+'use client';
+
+import { useRouter as useNextRouter } from 'next/navigation';
+import { useCallback, useMemo } from 'react';
+
+/**
+ * Get base path from environment variable
+ */
+function getBasePath(): string {
+  if (typeof process === 'undefined') {
+    return '';
+  }
+  return process.env.NEXT_PUBLIC_BASE_PATH || '';
+}
+
+/**
+ * Add base path to a route path
+ */
+function withBasePath(path: string, basePath: string): string {
+  if (!basePath) {
+    return path;
+  }
+  // Ensure path starts with /
+  const normalizedPath = path.startsWith('/') ? path : `/${path}`;
+  // Remove trailing slash from basePath
+  const normalizedBasePath = basePath.replace(/\/$/, '');
+  return `${normalizedBasePath}${normalizedPath}`;
+}
+
+/**
+ * Router with basePath support
+ *
+ * Automatically adds basePath to all navigation methods when basePath is configured.
+ * In Next.js 15 App Router, router.push() doesn't handle basePath automatically,
+ * so this hook uses window.location to ensure basePath is always included.
+ *
+ * @example
+ * ```tsx
+ * const router = useCfgRouter();
+ *
+ * // With basePath='/cfg/admin':
+ * router.push('/dashboard');     // Client-side navigation to '/cfg/admin/dashboard'
+ * router.replace('/auth');       // Client-side replace with '/cfg/admin/auth'
+ * router.hardPush('/dashboard'); // Full page reload to '/cfg/admin/dashboard'
+ * router.hardReplace('/auth');   // Full page replace with '/cfg/admin/auth'
+ * ```
+ */
+export function useCfgRouter() {
+  const router = useNextRouter();
+
+  // Get basePath and check if we're in static build mode
+  const basePath = useMemo(() => getBasePath(), []);
+  const isStaticBuild = useMemo(() => {
+    return typeof process !== 'undefined' && process.env.NEXT_PUBLIC_STATIC_BUILD === 'true';
+  }, []);
+
+  const push = useCallback((href: string, options?: { scroll?: boolean }) => {
+    if (basePath) {
+      // App Router doesn't handle basePath automatically, use window.location
+      window.location.href = withBasePath(href, basePath);
+    } else {
+      // No basePath configured, use standard router
+      router.push(href, options);
+    }
+  }, [router, basePath]);
+
+  const replace = useCallback((href: string, options?: { scroll?: boolean }) => {
+    if (basePath) {
+      // App Router doesn't handle basePath automatically, use window.location
+      window.location.replace(withBasePath(href, basePath));
+    } else {
+      // No basePath configured, use standard router
+      router.replace(href, options);
+    }
+  }, [router, basePath]);
+
+  /**
+   * Hard push - always uses window.location.href for full page reload
+   *
+   * Use this for auth redirects where React contexts need to reinitialize.
+   * Unlike push(), this ALWAYS triggers a full page reload, ensuring all
+   * contexts are reinitialized with fresh state.
+   *
+   * @example
+   * ```tsx
+   * // After successful login - contexts need to reload with new auth state
+   * router.hardPush('/dashboard');
+   * ```
+   */
+  const hardPush = useCallback((href: string) => {
+    window.location.href = withBasePath(href, basePath);
+  }, [basePath]);
+
+  /**
+   * Hard replace - always uses window.location.replace for full page reload
+   *
+   * Same as hardPush but replaces current history entry.
+   * Use for auth redirects where you don't want back button to return to login.
+   *
+   * @example
+   * ```tsx
+   * // After logout - replace so back button doesn't go to protected page
+   * router.hardReplace('/auth');
+   * ```
+   */
+  const hardReplace = useCallback((href: string) => {
+    window.location.replace(withBasePath(href, basePath));
+  }, [basePath]);
+
+  const prefetch = useCallback((href: string) => {
+    // Prefetch doesn't need basePath handling, Next.js handles it
+    router.prefetch(href);
+  }, [router]);
+
+  const back = useCallback(() => {
+    router.back();
+  }, [router]);
+
+  const forward = useCallback(() => {
+    router.forward();
+  }, [router]);
+
+  const refresh = useCallback(() => {
+    router.refresh();
+  }, [router]);
+
+  return {
+    push,
+    replace,
+    hardPush,
+    hardReplace,
+    prefetch,
+    back,
+    forward,
+    refresh,
+  };
+}
+

package/src/auth/hooks/useGithubAuth.ts

@@ -2,7 +2,7 @@
 
 import { useCallback, useState } from 'react';
 
-import { useCfgRouter } from '@djangocfg/ui-nextjs/hooks';
+import { useCfgRouter } from './useCfgRouter';
 
 import { apiAccounts } from '../../clients';
 import { Analytics, AnalyticsCategory, AnalyticsEvent } from '../utils/analytics';

package/src/auth/hooks/useQueryParams.ts

@@ -0,0 +1,73 @@
+/**
+ * useQueryParams Hook
+ * 
+ * Safe hook to access URL query parameters without requiring Suspense boundary.
+ * Works on client-side only, returns empty URLSearchParams during SSR/prerendering.
+ * 
+ * @example
+ * ```tsx
+ * const params = useQueryParams();
+ * const flow = params.get('flow');
+ * const hasFlow = params.has('flow');
+ * const allTags = params.getAll('tags');
+ * ```
+ */
+
+'use client';
+
+import { usePathname } from 'next/navigation';
+import { useEffect, useRef, useState } from 'react';
+
+/**
+ * Hook to safely access URL query parameters without useSearchParams()
+ * 
+ * This hook reads query parameters directly from window.location.search,
+ * avoiding the need for Suspense boundaries that useSearchParams() requires.
+ * 
+ * Automatically updates when URL changes (navigation, back/forward, etc.)
+ * Uses pathname from Next.js to detect route changes and polls for query param changes.
+ * 
+ * Returns a URLSearchParams object with get(), getAll(), has(), etc.
+ * 
+ * @returns URLSearchParams object (empty during SSR)
+ */
+export function useQueryParams(): URLSearchParams {
+  const pathname = usePathname();
+  const [queryParams, setQueryParams] = useState<URLSearchParams>(() => {
+    if (typeof window === 'undefined') {
+      return new URLSearchParams();
+    }
+    return new URLSearchParams(window.location.search);
+  });
+  const lastSearchRef = useRef<string>('');
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    const updateQueryParams = () => {
+      const currentSearch = window.location.search;
+      if (currentSearch !== lastSearchRef.current) {
+        lastSearchRef.current = currentSearch;
+        setQueryParams(new URLSearchParams(currentSearch));
+      }
+    };
+
+    // Update when pathname changes (Next.js navigation)
+    updateQueryParams();
+
+    // Listen to popstate (back/forward navigation)
+    window.addEventListener('popstate', updateQueryParams);
+
+    // Poll for query param changes (for router.push with same pathname)
+    // This handles cases where Next.js router.push updates query params without changing pathname
+    const intervalId = setInterval(updateQueryParams, 100);
+
+    return () => {
+      window.removeEventListener('popstate', updateQueryParams);
+      clearInterval(intervalId);
+    };
+  }, [pathname]);
+
+  return queryParams;
+}
+

package/src/auth/hooks/useTwoFactor.ts

@@ -2,7 +2,7 @@
 
 import { useCallback, useState } from 'react';
 
-import { useCfgRouter } from '@djangocfg/ui-nextjs/hooks';
+import { useCfgRouter } from './useCfgRouter';
 
 import { apiAccounts, apiTotp } from '../../clients';
 import { Analytics, AnalyticsCategory, AnalyticsEvent } from '../utils/analytics';