@djangocfg/api 2.1.428 → 2.1.430

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/api",
-  "version": "2.1.428",
+  "version": "2.1.430",
   "description": "Auto-generated TypeScript API client with React hooks, SWR integration, and Zod validation for Django REST Framework backends",
   "keywords": [
     "django",
@@ -84,7 +84,7 @@
   "devDependencies": {
     "@types/node": "^25.2.3",
     "@types/react": "^19.2.15",
-    "@djangocfg/typescript-config": "^2.1.428",
+    "@djangocfg/typescript-config": "^2.1.430",
     "next": "^16.2.2",
     "react": "^19.2.4",
     "tsup": "^8.5.0",

package/src/auth/hooks/useAuthForm.ts

@@ -32,6 +32,11 @@ export const useAuthForm = (options: UseAuthFormOptions): AuthFormReturn => {
 
   // Ref to track auto-submit from URL
   const isAutoSubmitFromUrlRef = useRef(false);
+  // Remembers the exact `identifier:otp` we already attempted from a magic-link
+  // URL. We verify a given code at most ONCE — even if it turns out invalid or
+  // expired — so re-renders never re-fire the request. Without this, the auto
+  // submit loops and hammers /verify/ until the backend returns 429.
+  const processedOtpKeyRef = useRef<string | null>(null);
 
   // Auth context for API calls and storage
   const {
@@ -296,38 +301,46 @@ export const useAuthForm = (options: UseAuthFormOptions): AuthFormReturn => {
   // Auto-auth from URL
   // ─────────────────────────────────────────────────────────────────────────
 
-  useAutoAuth({
-    allowedPaths: [authPath],
-    onOTPDetected: (detectedOtp: string, detectedEmail?: string) => {
-      if (isAutoSubmitFromUrlRef.current || isLoading) return;
-      isAutoSubmitFromUrlRef.current = true;
+  const handleOTPFromUrl = useCallback((detectedOtp: string, detectedEmail?: string) => {
+    // Prefer the email from the magic-link URL (works on a fresh browser/device),
+    // fall back to the one saved from a previous request on this browser.
+    const autoIdentifier = detectedEmail || getSavedEmail() || '';
+
+    if (!autoIdentifier) {
+      authLogger.warn('No identifier found for auto-submit (no email in URL or storage)');
+      return;
+    }
+
+    // Verify each magic-link code at most once. A re-render must never re-fire
+    // the request — a failed/expired code that retried in a loop is exactly what
+    // drove the /verify/ spam and the backend's 429 lockout.
+    const otpKey = `${autoIdentifier}:${detectedOtp}`;
+    if (processedOtpKeyRef.current === otpKey) return;
+    if (isAutoSubmitFromUrlRef.current) return;
 
-      authLogger.info('OTP detected from URL, auto-submitting');
+    processedOtpKeyRef.current = otpKey;
+    isAutoSubmitFromUrlRef.current = true;
 
-      // Prefer the email from the magic-link URL (works on a fresh browser/device),
-      // fall back to the one saved from a previous request on this browser.
-      const autoIdentifier = detectedEmail || getSavedEmail() || '';
+    authLogger.info('OTP detected from URL, auto-submitting');
 
-      if (!autoIdentifier) {
-        authLogger.warn('No identifier found for auto-submit (no email in URL or storage)');
+    // Update UI state
+    setIdentifier(autoIdentifier);
+    setOtp(detectedOtp);
+    setStep('otp');
+
+    // Submit with explicit values
+    setTimeout(async () => {
+      try {
+        await submitOTP(autoIdentifier, detectedOtp);
+      } finally {
         isAutoSubmitFromUrlRef.current = false;
-        return;
       }
+    }, 100);
+  }, [getSavedEmail, setIdentifier, setOtp, setStep, submitOTP]);
 
-      // Update UI state
-      setIdentifier(autoIdentifier);
-      setOtp(detectedOtp);
-      setStep('otp');
-
-      // Submit with explicit values
-      setTimeout(async () => {
-        try {
-          await submitOTP(autoIdentifier, detectedOtp);
-        } finally {
-          isAutoSubmitFromUrlRef.current = false;
-        }
-      }, 100);
-    },
+  useAutoAuth({
+    allowedPaths: [authPath],
+    onOTPDetected: handleOTPFromUrl,
     cleanupUrl: true,
   });
 

package/src/auth/hooks/useAutoAuth.ts

@@ -1,7 +1,7 @@
 'use client';
 
 import { usePathname } from 'next/navigation';
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 
 import { AUTH_CONSTANTS } from '../constants';
 import { authLogger } from '../utils/logger';
@@ -45,36 +45,45 @@ export const useAutoAuth = (options: UseAutoAuthOptions = {}) => {
     path => normalizedPath === path || normalizedPath.startsWith(path + '/')
   );
 
-  const hasOTP = !!(queryParams.get('otp'));
+  const queryOtp = queryParams.get('otp') || '';
+  const queryEmail = queryParams.get('email') || undefined;
+  const hasOTP = !!queryOtp;
   const isReady = !!pathname && hasOTP && isAllowedPath;
+  const otpValid = queryOtp.length === AUTH_CONSTANTS.EMAIL_OTP_LENGTH;
 
-  useEffect(() => {
-    if (!isReady) return;
-
-    const queryOtp = queryParams.get('otp') as string;
-    const queryEmail = queryParams.get('email') || undefined;
+  // Keep the latest callback in a ref so its (unstable) identity never lands in
+  // the effect deps below. Otherwise a parent that passes an inline function
+  // re-runs this effect on every render and re-fires the OTP submission.
+  const onOTPDetectedRef = useRef(onOTPDetected);
+  onOTPDetectedRef.current = onOTPDetected;
 
-    // Handle OTP detection - only on allowed paths to avoid conflicts with other pages
+  // Detect OTP and notify the parent. Keyed on the OTP *value* (a string), not
+  // on the `queryParams` object reference — so the effect fires once per code,
+  // not on every poll tick / re-render.
+  useEffect(() => {
+    if (!isReady || !otpValid) return;
+    // Only on allowed paths to avoid conflicts with other pages
     // (e.g., /dashboard/device uses ?otp= for device authorization, not user auth)
-    if (queryOtp && typeof queryOtp === 'string' && queryOtp.length === AUTH_CONSTANTS.EMAIL_OTP_LENGTH) {
-      authLogger.info('OTP detected in URL on auth page:', queryOtp);
-      onOTPDetected?.(queryOtp, queryEmail);
-    }
+    authLogger.info('OTP detected in URL on auth page:', queryOtp);
+    onOTPDetectedRef.current?.(queryOtp, queryEmail);
+  }, [isReady, otpValid, queryOtp, queryEmail]);
 
-    // Clean up URL to remove sensitive params for security
-    // Use window.location.pathname to preserve the locale prefix (e.g. /ru/auth)
-    // because usePathname() strips the locale, and router.push('/auth') would cause
-    // next-intl middleware to redirect back to /ru/auth — triggering a full page reload
-    // that loses the in-flight OTP submission.
-    if (cleanupUrl && queryOtp) {
-      const cleanQuery = Object.fromEntries(queryParams.entries());
-      delete cleanQuery.otp;
-      delete cleanQuery.email;
-      const queryString = new URLSearchParams(cleanQuery).toString();
-      const realPathname = typeof window !== 'undefined' ? window.location.pathname : pathname;
-      router.replace(queryString ? `${realPathname}?${queryString}` : realPathname);
-    }
-  }, [pathname, queryParams, onOTPDetected, cleanupUrl, router, isReady]);
+  // Clean up URL to remove sensitive params for security. Separate effect so it
+  // does not depend on `onOTPDetected` and cannot re-trigger the submission.
+  // Use window.location.pathname to preserve the locale prefix (e.g. /ru/auth)
+  // because usePathname() strips the locale, and router.push('/auth') would cause
+  // next-intl middleware to redirect back to /ru/auth — triggering a full page reload
+  // that loses the in-flight OTP submission.
+  useEffect(() => {
+    if (!isReady || !cleanupUrl || !queryOtp) return;
+    const cleanQuery = Object.fromEntries(queryParams.entries());
+    delete cleanQuery.otp;
+    delete cleanQuery.email;
+    const queryString = new URLSearchParams(cleanQuery).toString();
+    const realPathname = typeof window !== 'undefined' ? window.location.pathname : pathname;
+    router.replace(queryString ? `${realPathname}?${queryString}` : realPathname);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isReady, cleanupUrl, queryOtp]);
 
   return {
     isReady,

package/src/auth/hooks/useQueryParams.ts

@@ -52,19 +52,33 @@ export function useQueryParams(): URLSearchParams {
       }
     };
 
-    // Update when pathname changes (Next.js navigation)
+    // Sync on mount / pathname change (Next.js navigation).
     updateQueryParams();
 
-    // Listen to popstate (back/forward navigation)
+    // back/forward navigation fires popstate natively.
     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);
+    // Next.js router.push/replace updates the URL via history.pushState/replaceState,
+    // which do NOT emit any event. Patch them to notify us, so we react to query-only
+    // changes (same pathname) without polling. This replaces the old setInterval(100ms),
+    // whose churning object reference helped drive the OTP auto-submit loop.
+    const origPush = window.history.pushState;
+    const origReplace = window.history.replaceState;
+    window.history.pushState = function (...args) {
+      const result = origPush.apply(this, args);
+      updateQueryParams();
+      return result;
+    };
+    window.history.replaceState = function (...args) {
+      const result = origReplace.apply(this, args);
+      updateQueryParams();
+      return result;
+    };
 
     return () => {
       window.removeEventListener('popstate', updateQueryParams);
-      clearInterval(intervalId);
+      window.history.pushState = origPush;
+      window.history.replaceState = origReplace;
     };
   }, [pathname]);