@erikey/react 0.5.2 → 0.6.0

package/src/ui/components/auth/forms/email-otp-form.tsx

@@ -65,7 +65,8 @@ function EmailForm({
         authClient,
         localization: contextLocalization,
         toast,
-        localizeErrors
+        localizeErrors,
+        onAuthEvent
     } = useContext(AuthUIContext)
 
     localization = { ...contextLocalization, ...localization }
@@ -90,6 +91,9 @@ function EmailForm({
     }, [form.formState.isSubmitting, setIsSubmitting])
 
     async function sendEmailOTP({ email }: z.infer<typeof formSchema>) {
+        // Emit start event
+        onAuthEvent?.({ type: "SIGN_IN_START", email })
+
         const fetchOptions: BetterFetchOption = {
             throw: true,
             headers: await getCaptchaHeaders("/email-otp/send-verification-otp")
@@ -109,13 +113,22 @@ function EmailForm({
 
             setEmail(email)
         } catch (error) {
+            const errorMessage = getLocalizedError({
+                error,
+                localization,
+                localizeErrors
+            })
+            const errorCode = (error as { error?: { code?: string } })?.error
+                ?.code
+
+            onAuthEvent?.({
+                type: "SIGN_IN_ERROR",
+                error: { message: errorMessage, code: errorCode }
+            })
+
             toast({
                 variant: "error",
-                message: getLocalizedError({
-                    error,
-                    localization,
-                    localizeErrors
-                })
+                message: errorMessage
             })
         }
     }
@@ -193,7 +206,8 @@ export function OTPForm({
         authClient,
         localization: contextLocalization,
         toast,
-        localizeErrors
+        localizeErrors,
+        onAuthEvent
     } = useContext(AuthUIContext)
 
     localization = { ...contextLocalization, ...localization }
@@ -229,21 +243,47 @@ export function OTPForm({
 
     async function verifyCode({ code }: z.infer<typeof formSchema>) {
         try {
-            await authClient.signIn.emailOtp({
+            const data = await authClient.signIn.emailOtp({
                 email,
                 otp: code,
                 fetchOptions: { throw: true }
             })
 
+            // Build user and session for events
+            const user = (data as { user?: Record<string, unknown> }).user as {
+                id: string
+                email: string
+                name?: string | null
+                image?: string | null
+                emailVerified: boolean
+            }
+            const session = {
+                token: (data as { token?: string }).token,
+                user
+            }
+
+            // Emit success events
+            onAuthEvent?.({ type: "SIGN_IN_SUCCESS", user, session })
+            onAuthEvent?.({ type: "AUTH_SUCCESS", user, session })
+
             await onSuccess()
         } catch (error) {
+            const errorMessage = getLocalizedError({
+                error,
+                localization,
+                localizeErrors
+            })
+            const errorCode = (error as { error?: { code?: string } })?.error
+                ?.code
+
+            onAuthEvent?.({
+                type: "SIGN_IN_ERROR",
+                error: { message: errorMessage, code: errorCode }
+            })
+
             toast({
                 variant: "error",
-                message: getLocalizedError({
-                    error,
-                    localization,
-                    localizeErrors
-                })
+                message: errorMessage
             })
 
             form.reset()
@@ -273,7 +313,11 @@ export function OTPForm({
                                         field.onChange(value)
 
                                         if (value.length === 6) {
-                                            form.handleSubmit(verifyCode)()
+                                            form.handleSubmit(verifyCode)().catch(
+                                                () => {
+                                                    // Error already handled in verifyCode
+                                                }
+                                            )
                                         }
                                     }}
                                     containerClassName={

package/src/ui/components/auth/forms/email-verification-form.tsx

@@ -354,7 +354,11 @@ export function EmailVerificationForm({
                                         field.onChange(value)
 
                                         if (value.length === 6) {
-                                            form.handleSubmit(verifyCode)()
+                                            form.handleSubmit(verifyCode)().catch(
+                                                () => {
+                                                    // Error already handled in verifyCode
+                                                }
+                                            )
                                         }
                                     }}
                                     containerClassName={

package/src/ui/components/auth/forms/magic-link-form.tsx

@@ -58,7 +58,8 @@ export function MagicLinkForm({
         redirectTo: contextRedirectTo,
         viewPaths,
         toast,
-        localizeErrors
+        localizeErrors,
+        onAuthEvent
     } = useContext(AuthUIContext)
 
     localization = { ...contextLocalization, ...localization }
@@ -107,6 +108,9 @@ export function MagicLinkForm({
     }, [form.formState.isSubmitting, setIsSubmitting])
 
     async function sendMagicLink({ email }: z.infer<typeof formSchema>) {
+        // Emit start event
+        onAuthEvent?.({ type: "SIGN_IN_START", email })
+
         try {
             const fetchOptions: BetterFetchOption = {
                 throw: true,
@@ -126,13 +130,22 @@ export function MagicLinkForm({
 
             form.reset()
         } catch (error) {
+            const errorMessage = getLocalizedError({
+                error,
+                localization,
+                localizeErrors
+            })
+            const errorCode = (error as { error?: { code?: string } })?.error
+                ?.code
+
+            onAuthEvent?.({
+                type: "SIGN_IN_ERROR",
+                error: { message: errorMessage, code: errorCode }
+            })
+
             toast({
                 variant: "error",
-                message: getLocalizedError({
-                    error,
-                    localization,
-                    localizeErrors
-                })
+                message: errorMessage
             })
             resetCaptcha()
         }

package/src/ui/components/auth/forms/sign-up-form.tsx

@@ -268,11 +268,21 @@ export function SignUpForm({
     })
 
     isSubmitting =
-        isSubmitting || form.formState.isSubmitting || transitionPending
+        isSubmitting ||
+        form.formState.isSubmitting ||
+        transitionPending ||
+        uploadingAvatar
 
     useEffect(() => {
-        setIsSubmitting?.(form.formState.isSubmitting || transitionPending)
-    }, [form.formState.isSubmitting, transitionPending, setIsSubmitting])
+        setIsSubmitting?.(
+            form.formState.isSubmitting || transitionPending || uploadingAvatar
+        )
+    }, [
+        form.formState.isSubmitting,
+        transitionPending,
+        uploadingAvatar,
+        setIsSubmitting
+    ])
 
     const handleAvatarChange = async (file: File) => {
         if (!avatar) return

package/src/ui/components/auth/forms/two-factor-form.tsx

@@ -54,6 +54,7 @@ export function TwoFactorForm({
 
     const {
         authClient,
+        authFlowMode,
         basePath,
         hooks: { useSession },
         localization: contextLocalization,
@@ -156,7 +157,11 @@ export function TwoFactorForm({
                 (error as BetterFetchError).error.code ===
                 "INVALID_TWO_FACTOR_COOKIE"
             ) {
-                history.back()
+                // In internal mode, AuthFlow handles navigation via events
+                // In route mode, use browser history
+                if (authFlowMode !== "internal") {
+                    history.back()
+                }
             }
         }
 
@@ -291,7 +296,9 @@ export function TwoFactorForm({
                                                 if (value.length === 6) {
                                                     form.handleSubmit(
                                                         verifyCode
-                                                    )()
+                                                    )().catch(() => {
+                                                        // Error already handled in verifyCode
+                                                    })
                                                 }
                                             }}
                                             containerClassName={

package/src/ui/components/ui/form.tsx

@@ -43,14 +43,16 @@ const FormField = <
 const useFormField = () => {
   const fieldContext = React.useContext(FormFieldContext)
   const itemContext = React.useContext(FormItemContext)
-  const { getFieldState } = useFormContext()
-  const formState = useFormState({ name: fieldContext.name })
-  const fieldState = getFieldState(fieldContext.name, formState)
 
-  if (!fieldContext) {
+  // Check context before accessing its properties
+  if (!fieldContext?.name) {
     throw new Error("useFormField should be used within <FormField>")
   }
 
+  const { getFieldState } = useFormContext()
+  const formState = useFormState({ name: fieldContext.name })
+  const fieldState = getFieldState(fieldContext.name, formState)
+
   const { id } = itemContext
 
   return {

package/src/ui/hooks/use-auth-data.ts

@@ -55,6 +55,11 @@ export function useAuthData<T>({
     const previousUserId = useRef<string | undefined>(undefined)
     const [error, setError] = useState<FetchError | null>(null)
 
+    // Use ref to access cacheEntry in refetch without creating dependency
+    // This prevents infinite loops from cacheEntry changes triggering refetch recreation
+    const cacheEntryRef = useRef(cacheEntry)
+    cacheEntryRef.current = cacheEntry
+
     const refetch = useCallback(async () => {
         // Check if there's already an in-flight request for this key
         const existingRequest = authDataCache.getInFlightRequest<{
@@ -76,8 +81,8 @@ export function useAuthData<T>({
             return
         }
 
-        // Mark as refetching if we have cached data
-        if (cacheEntry?.data !== undefined) {
+        // Mark as refetching if we have cached data (use ref to avoid dependency)
+        if (cacheEntryRef.current?.data !== undefined) {
             authDataCache.setRefetching(stableCacheKey, true)
         }
 
@@ -121,7 +126,8 @@ export function useAuthData<T>({
             authDataCache.setRefetching(stableCacheKey, false)
             authDataCache.removeInFlightRequest(stableCacheKey)
         }
-    }, [stableCacheKey, toast, localization, localizeErrors, cacheEntry])
+        // Note: cacheEntry is accessed via ref to avoid infinite loop
+    }, [stableCacheKey, toast, localization, localizeErrors])
 
     useEffect(() => {
         const currentUserId = sessionData?.user?.id

package/src/ui/hooks/use-authenticate.ts

@@ -34,6 +34,8 @@ export function useAuthenticate<TAuthClient extends AnyAuthClient>(
         | undefined
 
     useEffect(() => {
+        // SSR guard - window not available on server
+        if (typeof window === "undefined") return
         if (!enabled || isPending || sessionData) return
 
         const searchParams = new URLSearchParams(window.location.search)

package/src/ui/hooks/use-captcha.tsx

@@ -60,28 +60,28 @@ export function useCaptcha({
             }
             case "google-recaptcha-v2-checkbox": {
                 const recaptchaRef = captchaRef as RefObject<ReCAPTCHA>
-                response = recaptchaRef.current.getValue()
+                response = recaptchaRef.current?.getValue?.()
                 break
             }
             case "google-recaptcha-v2-invisible": {
                 const recaptchaRef = captchaRef as RefObject<ReCAPTCHA>
-                response = await recaptchaRef.current.executeAsync()
+                response = await recaptchaRef.current?.executeAsync?.()
                 break
             }
             case "cloudflare-turnstile": {
                 const turnstileRef = captchaRef as RefObject<TurnstileInstance>
-                response = turnstileRef.current.getResponse()
+                response = turnstileRef.current?.getResponse?.()
                 break
             }
             case "hcaptcha": {
                 const hcaptchaRef = captchaRef as RefObject<HCaptcha>
-                response = hcaptchaRef.current.getResponse()
+                response = hcaptchaRef.current?.getResponse?.()
                 break
             }
             case "captchafox": {
                 const captchafoxRef =
                     captchaRef as RefObject<CaptchaFoxInstance>
-                response = captchafoxRef.current.getResponse()
+                response = captchafoxRef.current?.getResponse?.()
                 break
             }
         }

package/src/ui/lib/auth-ui-provider.tsx

@@ -48,11 +48,17 @@ const DefaultLink: Link = ({ href, className, children }) => (
 )
 
 const defaultNavigate = (href: string) => {
-    window.location.href = href
+    // SSR guard - window not available on server
+    if (typeof window !== "undefined") {
+        window.location.href = href
+    }
 }
 
 const defaultReplace = (href: string) => {
-    window.location.replace(href)
+    // SSR guard - window not available on server
+    if (typeof window !== "undefined") {
+        window.location.replace(href)
+    }
 }
 
 // Default toast is a no-op - users should provide their own via onError/onSuccess

package/src/ui/lib/image-utils.ts

@@ -4,6 +4,13 @@ export async function resizeAndCropImage(
     size: number,
     extension: string
 ): Promise<File> {
+    // SSR guard - image processing requires browser APIs
+    if (typeof window === "undefined" || typeof document === "undefined") {
+        throw new Error(
+            "resizeAndCropImage requires a browser environment (window and document must be defined)"
+        )
+    }
+
     const image = await loadImage(file)
 
     const canvas = document.createElement("canvas")