@erikey/react 0.4.30 → 0.4.32

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

@@ -61,7 +61,8 @@ export function TwoFactorForm({
         viewPaths,
         toast,
         Link,
-        localizeErrors
+        localizeErrors,
+        onAuthEvent
     } = useContext(AuthUIContext)
 
     localization = { ...contextLocalization, ...localization }
@@ -106,6 +107,11 @@ export function TwoFactorForm({
         setIsSubmitting?.(form.formState.isSubmitting || transitionPending)
     }, [form.formState.isSubmitting, transitionPending, setIsSubmitting])
 
+    // Emit two-factor start event on mount
+    useEffect(() => {
+        onAuthEvent?.({ type: "TWO_FACTOR_START" })
+    }, [onAuthEvent])
+
     // biome-ignore lint/correctness/useExhaustiveDependencies: ignore
     useEffect(() => {
         if (
@@ -162,18 +168,37 @@ export function TwoFactorForm({
         code,
         trustDevice
     }: z.infer<typeof formSchema>) {
+        // Emit submitted event
+        onAuthEvent?.({ type: "TWO_FACTOR_SUBMITTED" })
+
         try {
             const verifyMethod =
                 method === "totp"
                     ? authClient.twoFactor.verifyTotp
                     : authClient.twoFactor.verifyOtp
 
-            await verifyMethod({
+            const data = await verifyMethod({
                 code,
                 trustDevice,
                 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
+            }
+
+            onAuthEvent?.({ type: "TWO_FACTOR_SUCCESS", user, session })
+            onAuthEvent?.({ type: "AUTH_SUCCESS", user, session })
+
             await onSuccess()
 
             if (sessionData && !isTwoFactorEnabled) {
@@ -183,13 +208,24 @@ export function TwoFactorForm({
                 })
             }
         } catch (error) {
+            const errorMessage = getLocalizedError({
+                error,
+                localization,
+                localizeErrors
+            })
+
+            const errorCode = (
+                error as { error?: { code?: string; message?: string } }
+            )?.error?.code
+
+            onAuthEvent?.({
+                type: "TWO_FACTOR_ERROR",
+                error: { message: errorMessage, code: errorCode }
+            })
+
             toast({
                 variant: "error",
-                message: getLocalizedError({
-                    error,
-                    localization,
-                    localizeErrors
-                })
+                message: errorMessage
             })
 
             form.reset()

package/src/ui/components/auth/provider-button.tsx

@@ -45,7 +45,8 @@ export function ProviderButton({
         social,
         genericOAuth,
         toast,
-        localizeErrors
+        localizeErrors,
+        onAuthEvent
     } = useContext(AuthUIContext)
 
     const getRedirectTo = useCallback(
@@ -75,6 +76,9 @@ export function ProviderButton({
     const doSignInSocial = async () => {
         setIsSubmitting(true)
 
+        // Emit social auth start event
+        onAuthEvent?.({ type: "SOCIAL_AUTH_START", provider: provider.provider })
+
         try {
             if (other) {
                 const oauth2Params = {
@@ -116,6 +120,17 @@ export function ProviderButton({
                 localizeErrors
             })
 
+            const errorCode = (
+                error as { error?: { code?: string; message?: string } }
+            )?.error?.code
+
+            // Emit social auth error event
+            onAuthEvent?.({
+                type: "SOCIAL_AUTH_ERROR",
+                error: { message: errorMessage, code: errorCode },
+                provider: provider.provider
+            })
+
             // Call onError callback if provided (for inline display in parent)
             onError?.(errorMessage)
 

package/src/ui/index.ts

@@ -1,5 +1,6 @@
 // Auth forms (ALL connection types)
 export * from "./components/auth/auth-callback"
+export * from "./components/auth/auth-flow"
 export * from "./components/auth/auth-form"
 export * from "./components/auth/auth-view"
 export * from "./components/auth/forms/email-otp-form"
@@ -42,5 +43,6 @@ export * from "./lib/social-providers"
 export { getViewByPath } from "./lib/utils"
 export * from "./lib/view-paths"
 export * from "./localization/auth-localization"
+export * from "./types/auth-flow-events"
 export * from "./types/auth-hooks"
 export * from "./types/auth-mutators"

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

@@ -33,6 +33,7 @@ import type { RenderToast } from "../types/render-toast"
 import type { SignUpOptions } from "../types/sign-up-options"
 import type { SocialOptions } from "../types/social-options"
 import type { TeamOptions, TeamOptionsContext } from "../types/team-options"
+import type { AuthFlowEventHandler } from "../types/auth-flow-events"
 import type { AuthViewPaths } from "./view-paths"
 import {
     accountViewPaths,
@@ -219,6 +220,11 @@ export type AuthUIContextType = {
      * Called whenever the Session changes
      */
     onSessionChange?: () => void | Promise<void>
+    /**
+     * Event handler for auth flow events.
+     * Called with typed events during sign-in, sign-up, verification, etc.
+     */
+    onAuthEvent?: AuthFlowEventHandler
     /**
      * Replace the current URL
      * @default navigate

package/src/ui/types/auth-flow-events.ts

@@ -0,0 +1,125 @@
+/**
+ * Auth Flow Event Types
+ *
+ * Typed events emitted by auth forms during the authentication flow.
+ * Used by AuthFlow component and can be consumed via onEvent callback.
+ */
+
+/**
+ * Auth view states (subset of AuthViewPath for flow-relevant views)
+ */
+export type AuthFlowView =
+    | "SIGN_IN"
+    | "SIGN_UP"
+    | "EMAIL_VERIFICATION"
+    | "TWO_FACTOR"
+    | "FORGOT_PASSWORD"
+    | "RESET_PASSWORD"
+    | "MAGIC_LINK"
+
+/**
+ * Error information included in error events
+ */
+export interface AuthErrorInfo {
+    message: string
+    code?: string
+}
+
+/**
+ * User type for events (minimal)
+ */
+export interface AuthEventUser {
+    id: string
+    email: string
+    name?: string | null
+    image?: string | null
+    emailVerified: boolean
+}
+
+/**
+ * Session type for events (minimal)
+ */
+export interface AuthEventSession {
+    token?: string
+    user: AuthEventUser
+}
+
+/**
+ * All possible auth flow events
+ */
+export type AuthFlowEvent =
+    // Sign in events
+    | { type: "SIGN_IN_START"; email: string }
+    | {
+          type: "SIGN_IN_SUCCESS"
+          user: AuthEventUser
+          session: AuthEventSession
+      }
+    | { type: "SIGN_IN_ERROR"; error: AuthErrorInfo }
+    | { type: "SIGN_IN_REQUIRES_2FA"; email: string }
+    | { type: "SIGN_IN_REQUIRES_VERIFICATION"; email: string }
+
+    // Sign up events
+    | { type: "SIGN_UP_START"; email: string; name?: string }
+    | { type: "SIGN_UP_SUCCESS"; user: AuthEventUser }
+    | { type: "SIGN_UP_ERROR"; error: AuthErrorInfo }
+    | { type: "SIGN_UP_REQUIRES_VERIFICATION"; email: string }
+
+    // Email verification events
+    | {
+          type: "VERIFICATION_START"
+          email: string
+          method: "otp" | "link"
+      }
+    | { type: "VERIFICATION_CODE_SUBMITTED"; email: string }
+    | {
+          type: "VERIFICATION_SUCCESS"
+          user: AuthEventUser
+          session: AuthEventSession
+      }
+    | { type: "VERIFICATION_ERROR"; error: AuthErrorInfo }
+    | { type: "VERIFICATION_CODE_RESENT"; email: string }
+
+    // Two-factor authentication events
+    | { type: "TWO_FACTOR_START" }
+    | { type: "TWO_FACTOR_SUBMITTED" }
+    | {
+          type: "TWO_FACTOR_SUCCESS"
+          user: AuthEventUser
+          session: AuthEventSession
+      }
+    | { type: "TWO_FACTOR_ERROR"; error: AuthErrorInfo }
+
+    // Password reset events
+    | { type: "FORGOT_PASSWORD_START"; email: string }
+    | { type: "FORGOT_PASSWORD_EMAIL_SENT"; email: string }
+    | { type: "FORGOT_PASSWORD_ERROR"; error: AuthErrorInfo }
+    | { type: "PASSWORD_RESET_START" }
+    | { type: "PASSWORD_RESET_SUCCESS" }
+    | { type: "PASSWORD_RESET_ERROR"; error: AuthErrorInfo }
+
+    // Social/OAuth events
+    | { type: "SOCIAL_AUTH_START"; provider: string }
+    | {
+          type: "SOCIAL_AUTH_SUCCESS"
+          user: AuthEventUser
+          session: AuthEventSession
+          provider: string
+      }
+    | { type: "SOCIAL_AUTH_ERROR"; error: AuthErrorInfo; provider: string }
+
+    // View change events (internal navigation)
+    | { type: "VIEW_CHANGE"; view: AuthFlowView; email?: string }
+
+    // Final states
+    | {
+          type: "AUTH_SUCCESS"
+          user: AuthEventUser
+          session: AuthEventSession
+      }
+    | { type: "AUTH_CANCELLED" }
+
+/**
+ * Event handler function type
+ */
+export type AuthFlowEventHandler = (event: AuthFlowEvent) => void