refactor(auth): simplify loading state to counter-based approach

Replace per-method Set<AuthMethod> with a simple pendingOps counter.
Each child reports busy state via onLoadingChange; counter handles
overlapping operations correctly (e.g., rapid double-click edge case).

- Rename onSuccess to onAuthComplete in MethodSelection for clarity
- Fix React.FormEvent to use imported FormEvent type
- Add no-redirect safety check in SocialLogin

Author: koistya

apps/app/components/auth/auth-form.tsx

@@ -1,11 +1,11 @@
 import { Button, Input, cn } from "@repo/ui";
 import { Link } from "@tanstack/react-router";
 import { ArrowLeft, Mail } from "lucide-react";
-import type { ComponentProps } from "react";
+import type { ComponentProps, FormEvent } from "react";
 import { OtpVerification } from "./otp-verification";
 import { PasskeyLogin } from "./passkey-login";
 import { SocialLogin } from "./social-login";
-import { useAuthForm, type AuthMethod } from "./use-auth-form";
+import { useAuthForm } from "./use-auth-form";
 
 const APP_NAME = import.meta.env.VITE_APP_NAME || "your account";
 
@@ -65,7 +65,7 @@ export function AuthForm({
     goToEmailStep,
     goToMethodStep,
     resetToEmail,
-    setMethodLoading,
+    setChildBusy,
     mode: formMode,
   } = useAuthForm({
     onSuccess,
@@ -112,9 +112,9 @@ export function AuthForm({
           isSignup={isSignup}
           isDisabled={isDisabled}
           onEmailClick={goToEmailStep}
-          onSuccess={completeAuth}
+          onAuthComplete={completeAuth}
           onError={handleError}
-          setMethodLoading={setMethodLoading}
+          onLoadingChange={setChildBusy}
           returnTo={returnTo}
         />
       )}
@@ -138,7 +138,7 @@ export function AuthForm({
           isDisabled={isDisabled}
           onSuccess={completeAuth}
           onError={handleError}
-          setMethodLoading={setMethodLoading}
+          onLoadingChange={setChildBusy}
           onBack={handleOtpBack}
           onCancel={resetToEmail}
         />
@@ -152,19 +152,19 @@ interface MethodSelectionProps {
   isSignup: boolean;
   isDisabled: boolean;
   onEmailClick: () => void;
-  onSuccess: () => void;
+  onAuthComplete: () => void;
   onError: (error: string | null) => void;
-  setMethodLoading: (method: AuthMethod, loading: boolean) => void;
+  onLoadingChange: (loading: boolean) => void;
   returnTo?: string;
 }
 
 function MethodSelection({
   isSignup,
   isDisabled,
   onEmailClick,
-  onSuccess,
+  onAuthComplete,
   onError,
-  setMethodLoading,
+  onLoadingChange,
   returnTo,
 }: MethodSelectionProps) {
   const heading = isSignup ? "Create your account" : `Log in to ${APP_NAME}`;
@@ -177,7 +177,7 @@ function MethodSelection({
         <SocialLogin
           onError={onError}
           isDisabled={isDisabled}
-          onLoadingChange={(loading) => setMethodLoading("social", loading)}
+          onLoadingChange={onLoadingChange}
           returnTo={returnTo}
         />
 
@@ -195,9 +195,9 @@ function MethodSelection({
         {/* Passkey only available for login (requires existing account) */}
         {!isSignup && (
           <PasskeyLogin
-            onSuccess={onSuccess}
+            onSuccess={onAuthComplete}
             onError={onError}
-            onLoadingChange={(loading) => setMethodLoading("passkey", loading)}
+            onLoadingChange={onLoadingChange}
             isDisabled={isDisabled}
           />
         )}
@@ -239,7 +239,7 @@ interface EmailInputProps {
   isSignup: boolean;
   isDisabled: boolean;
   onEmailChange: (email: string) => void;
-  onSubmit: (e?: React.FormEvent) => void;
+  onSubmit: (e?: FormEvent) => void;
   onBack: () => void;
 }
 
@@ -300,7 +300,7 @@ interface OtpStepProps {
   isDisabled: boolean;
   onSuccess: () => void;
   onError: (error: string | null) => void;
-  setMethodLoading: (method: AuthMethod, loading: boolean) => void;
+  onLoadingChange: (loading: boolean) => void;
   onBack: () => void;
   onCancel: () => void;
 }
@@ -310,7 +310,7 @@ function OtpStep({
   isDisabled,
   onSuccess,
   onError,
-  setMethodLoading,
+  onLoadingChange,
   onBack,
   onCancel,
 }: OtpStepProps) {
@@ -327,7 +327,7 @@ function OtpStep({
         email={email}
         onSuccess={onSuccess}
         onError={onError}
-        onLoadingChange={(loading) => setMethodLoading("otp", loading)}
+        onLoadingChange={onLoadingChange}
         onCancel={onCancel}
         isDisabled={isDisabled}
       />

apps/app/components/auth/otp-verification.tsx

@@ -16,18 +16,18 @@ interface OtpVerificationProps {
   email: string;
   onSuccess: () => void;
   onError: (error: string | null) => void;
+  onLoadingChange?: (loading: boolean) => void;
   onCancel: () => void;
   isDisabled?: boolean;
-  onLoadingChange?: (loading: boolean) => void;
 }
 
 export function OtpVerification({
   email,
   onSuccess,
   onError,
+  onLoadingChange,
   onCancel,
   isDisabled,
-  onLoadingChange,
 }: OtpVerificationProps) {
   const [otp, setOtp] = useState("");
   const [isLoading, setIsLoading] = useState(false);
@@ -85,7 +85,7 @@ export function OtpVerification({
     }
   };
 
-  const handleResendOtp = useCallback(async () => {
+  const handleResendOtp = async () => {
     if (resendCooldown > 0) return;
 
     setOtp("");
@@ -111,7 +111,7 @@ export function OtpVerification({
     } finally {
       setLoading(false);
     }
-  }, [email, onError, resendCooldown, setLoading]);
+  };
 
   const disabled = isDisabled || isLoading;
 

apps/app/components/auth/passkey-login.tsx

@@ -7,8 +7,8 @@ import { useCallback, useEffect, useRef, useState } from "react";
 interface PasskeyLoginProps {
   onSuccess: () => void;
   onError: (error: string | null) => void;
-  isDisabled?: boolean;
   onLoadingChange?: (loading: boolean) => void;
+  isDisabled?: boolean;
 }
 
 /**
@@ -20,8 +20,8 @@ interface PasskeyLoginProps {
 export function PasskeyLogin({
   onSuccess,
   onError,
-  isDisabled,
   onLoadingChange,
+  isDisabled,
 }: PasskeyLoginProps) {
   const [isLoading, setIsLoading] = useState(false);
 
@@ -32,6 +32,7 @@ export function PasskeyLogin({
     },
     [onLoadingChange],
   );
+
   const onSuccessRef = useRef(onSuccess);
   onSuccessRef.current = onSuccess;
 

apps/app/components/auth/social-login.tsx

@@ -7,16 +7,16 @@ import { useCallback, useState } from "react";
 interface SocialLoginProps {
   onError: (error: string | null) => void;
   isDisabled?: boolean;
+  onLoadingChange?: (loading: boolean) => void;
   /** Post-auth redirect destination (already validated by caller). */
   returnTo?: string;
-  onLoadingChange?: (loading: boolean) => void;
 }
 
 export function SocialLogin({
   onError,
   isDisabled,
-  returnTo,
   onLoadingChange,
+  returnTo,
 }: SocialLoginProps) {
   const queryClient = useQueryClient();
   const [isLoading, setIsLoading] = useState(false);
@@ -47,12 +47,14 @@ export function SocialLogin({
         callbackURL,
       });
 
-      // Handle error result (Better Auth returns { error } instead of throwing)
       if (result?.error) {
         onError(result.error.message || "Failed to sign in with Google");
         setLoading(false);
+      } else if (!result?.data?.redirect) {
+        // No redirect (popup blocked, misconfigured provider, etc.) - reset loading
+        setLoading(false);
       }
-      // On success, page redirects - component unmounts, no cleanup needed
+      // On redirect, page navigates away - component unmounts, no cleanup needed
     } catch (err) {
       console.error("Google login error:", err);
       onError("Failed to sign in with Google");

apps/app/components/auth/use-auth-form.ts

@@ -4,12 +4,8 @@ import { useCallback, useRef, useState } from "react";
 
 export type AuthStep = "method" | "email" | "otp";
 
-/** Authentication method identifiers for tracking concurrent loading states */
-export type AuthMethod = "social" | "passkey" | "otp";
-
 // Minimal state machine for passwordless OTP flow. Intentionally shallow:
 // - Errors are orthogonal to steps (can occur at any step)
-// - Loading states handled by isLoading/isChildLoading
 // - No terminal state (component unmounts on success)
 // Revisit if adding password fallback or MFA steps.
 const VALID_TRANSITIONS: Record<AuthStep, AuthStep[]> = {
@@ -40,37 +36,25 @@ export function useAuthForm({
   const [step, setStep] = useState<AuthStep>("method");
   const [email, setEmail] = useState("");
   const [isLoading, setIsLoading] = useState(false);
-  // Tracks loading state per auth method to handle concurrent attempts
-  const [loadingMethods, setLoadingMethods] = useState<Set<AuthMethod>>(
-    () => new Set(),
-  );
+  // Counter-based to handle overlapping child operations (e.g., rapid double-click)
+  const [pendingOps, setPendingOps] = useState(0);
   const [error, setError] = useState<string | null>(null);
 
-  const isMethodLoading = loadingMethods.size > 0;
-  // Guards against concurrent auth completion (e.g., passkey conditional UI + manual OTP).
+  // Guards against concurrent auth completion (e.g., passkey conditional UI + manual click).
+  // Conditional passkey autofill intentionally doesn't block UI - it's passive/background.
   // Reset when returning to method step to allow retry after navigation back.
   const hasSucceededRef = useRef(false);
   // Sync ref for checking current step in transitionTo without stale closure
   const stepRef = useRef(step);
   stepRef.current = step;
 
-  // Unified busy state: parent loading, method loading, or external loading
-  const isDisabled = isLoading || isMethodLoading || !!isExternallyLoading;
-
-  // Keyed loading tracker - idempotent to handle redundant calls
-  const setMethodLoading = useCallback(
-    (method: AuthMethod, loading: boolean) => {
-      setLoadingMethods((prev) => {
-        const has = prev.has(method);
-        if (loading ? has : !has) return prev; // No logical change
-        const next = new Set(prev);
-        if (loading) next.add(method);
-        else next.delete(method);
-        return next;
-      });
-    },
-    [],
-  );
+  // Track child loading via counter to correctly handle overlapping operations
+  const setChildBusy = useCallback((busy: boolean) => {
+    setPendingOps((c) => (busy ? c + 1 : Math.max(0, c - 1)));
+  }, []);
+
+  // Unified busy state: disables navigation and other auth methods while any flow is active
+  const isDisabled = isLoading || pendingOps > 0 || !!isExternallyLoading;
 
   const completeAuth = async () => {
     if (hasSucceededRef.current) return;
@@ -169,6 +153,6 @@ export function useAuthForm({
     goToEmailStep,
     goToMethodStep,
     resetToEmail,
-    setMethodLoading,
+    setChildBusy,
   };
 }