@erikey/react 0.5.2 → 0.6.0

package/src/__tests__/utils/mock-auth-client.ts

@@ -0,0 +1,298 @@
+/**
+ * Mock auth client for testing
+ *
+ * Provides a fully-typed mock of the auth client that can be configured
+ * to return specific responses for testing different auth flows.
+ */
+import { vi } from "vitest"
+
+export interface MockUser {
+    id: string
+    email: string
+    name?: string | null
+    image?: string | null
+    emailVerified: boolean
+}
+
+export interface MockSession {
+    token?: string
+    user?: MockUser
+}
+
+export interface MockSignUpResponse {
+    user?: MockUser
+    session?: MockSession
+    token?: string
+    twoFactorRedirect?: boolean
+}
+
+export interface MockSignInResponse {
+    user?: MockUser
+    session?: MockSession
+    token?: string
+    twoFactorRedirect?: boolean
+}
+
+/**
+ * Create a mock auth client with configurable responses
+ */
+export function createMockAuthClient(overrides: Record<string, unknown> = {}) {
+    const mockClient = {
+        // Sign in methods
+        signIn: {
+            email: vi.fn().mockResolvedValue({
+                data: { user: null, session: null },
+                error: null,
+            }),
+            social: vi.fn().mockResolvedValue({
+                data: null,
+                error: null,
+            }),
+            emailOtp: vi.fn().mockResolvedValue({
+                data: { user: null, session: null },
+                error: null,
+            }),
+            magicLink: vi.fn().mockResolvedValue({
+                data: null,
+                error: null,
+            }),
+        },
+
+        // Sign up methods
+        signUp: {
+            email: vi.fn().mockResolvedValue({
+                data: { user: null, session: null },
+                error: null,
+            }),
+        },
+
+        // Sign out
+        signOut: vi.fn().mockResolvedValue({
+            data: null,
+            error: null,
+        }),
+
+        // Session
+        useSession: vi.fn(() => ({
+            data: null,
+            isPending: false,
+            error: null,
+        })),
+        getSession: vi.fn().mockResolvedValue({
+            data: null,
+            error: null,
+        }),
+
+        // Email OTP
+        emailOtp: {
+            sendVerificationOtp: vi.fn().mockResolvedValue({
+                data: null,
+                error: null,
+            }),
+            verifyEmail: vi.fn().mockResolvedValue({
+                data: { user: null, session: null },
+                error: null,
+            }),
+        },
+
+        // Password reset
+        forgetPassword: vi.fn().mockResolvedValue({
+            data: null,
+            error: null,
+        }),
+        resetPassword: vi.fn().mockResolvedValue({
+            data: null,
+            error: null,
+        }),
+
+        // Two-factor
+        twoFactor: {
+            verifyTotp: vi.fn().mockResolvedValue({
+                data: { user: null, session: null },
+                error: null,
+            }),
+        },
+
+        // Email verification
+        sendVerificationEmail: vi.fn().mockResolvedValue({
+            data: null,
+            error: null,
+        }),
+
+        // Apply overrides
+        ...overrides,
+    }
+
+    return mockClient
+}
+
+/**
+ * Create a mock user object
+ */
+export function createMockUser(overrides: Partial<MockUser> = {}): MockUser {
+    return {
+        id: "user_123",
+        email: "test@example.com",
+        name: "Test User",
+        image: null,
+        emailVerified: true,
+        ...overrides,
+    }
+}
+
+/**
+ * Create a mock session object
+ */
+export function createMockSession(
+    overrides: Partial<MockSession> = {}
+): MockSession {
+    return {
+        token: "mock_token_123",
+        user: createMockUser(),
+        ...overrides,
+    }
+}
+
+/**
+ * Configure mock client to return successful sign-up response
+ */
+export function mockSignUpSuccess(
+    client: ReturnType<typeof createMockAuthClient>,
+    response: MockSignUpResponse = {}
+) {
+    const user = response.user ?? createMockUser()
+    const session = response.session ?? createMockSession({ user })
+
+    client.signUp.email.mockResolvedValue({
+        data: {
+            user,
+            session,
+            token: response.token ?? session.token,
+        },
+        error: null,
+    })
+}
+
+/**
+ * Configure mock client to return sign-up requiring verification
+ */
+export function mockSignUpRequiresVerification(
+    client: ReturnType<typeof createMockAuthClient>,
+    email = "test@example.com"
+) {
+    client.signUp.email.mockResolvedValue({
+        data: {
+            user: createMockUser({ email, emailVerified: false }),
+            session: null,
+            token: null,
+        },
+        error: null,
+    })
+}
+
+/**
+ * Configure mock client to return sign-up error
+ */
+export function mockSignUpError(
+    client: ReturnType<typeof createMockAuthClient>,
+    errorCode: string,
+    errorMessage: string
+) {
+    client.signUp.email.mockRejectedValue({
+        error: {
+            code: errorCode,
+            message: errorMessage,
+        },
+    })
+}
+
+/**
+ * Configure mock client to return successful sign-in
+ */
+export function mockSignInSuccess(
+    client: ReturnType<typeof createMockAuthClient>,
+    response: MockSignInResponse = {}
+) {
+    const user = response.user ?? createMockUser()
+    const session = response.session ?? createMockSession({ user })
+
+    client.signIn.email.mockResolvedValue({
+        data: {
+            user,
+            session,
+            token: response.token ?? session.token,
+        },
+        error: null,
+    })
+}
+
+/**
+ * Configure mock client to return sign-in requiring 2FA
+ */
+export function mockSignInRequires2FA(
+    client: ReturnType<typeof createMockAuthClient>
+) {
+    client.signIn.email.mockResolvedValue({
+        data: {
+            twoFactorRedirect: true,
+            user: null,
+            session: null,
+        },
+        error: null,
+    })
+}
+
+/**
+ * Configure mock client to return sign-in requiring email verification
+ */
+export function mockSignInRequiresVerification(
+    client: ReturnType<typeof createMockAuthClient>,
+    email = "test@example.com"
+) {
+    client.signIn.email.mockResolvedValue({
+        data: {
+            user: createMockUser({ email, emailVerified: false }),
+            session: null,
+            token: null,
+        },
+        error: null,
+    })
+}
+
+/**
+ * Configure mock client to return successful email verification
+ */
+export function mockEmailVerificationSuccess(
+    client: ReturnType<typeof createMockAuthClient>,
+    response: { session?: MockSession } = {}
+) {
+    const session = response.session ?? createMockSession()
+
+    client.emailOtp.verifyEmail.mockResolvedValue({
+        data: {
+            user: session.user,
+            session,
+            token: session.token,
+        },
+        error: null,
+    })
+}
+
+/**
+ * Configure mock client to return successful 2FA verification
+ */
+export function mock2FASuccess(
+    client: ReturnType<typeof createMockAuthClient>,
+    response: { session?: MockSession } = {}
+) {
+    const session = response.session ?? createMockSession()
+
+    client.twoFactor.verifyTotp.mockResolvedValue({
+        data: {
+            user: session.user,
+            session,
+            token: session.token,
+        },
+        error: null,
+    })
+}

package/src/__tests__/utils/render-with-provider.tsx

@@ -0,0 +1,129 @@
+/**
+ * Test render utilities
+ *
+ * Provides helpers for rendering components with the AuthUIProvider context.
+ */
+import React, { type ReactElement, type ReactNode } from "react"
+import { render, type RenderOptions } from "@testing-library/react"
+import { vi } from "vitest"
+
+import { AuthUIProvider } from "../../ui/lib/auth-ui-provider"
+import type { AuthFlowEvent } from "../../ui/types/auth-flow-events"
+import { createMockAuthClient } from "./mock-auth-client"
+
+export interface TestProviderOptions {
+    authClient?: ReturnType<typeof createMockAuthClient>
+    basePath?: string
+    authFlowMode?: "internal" | "route"
+    navigate?: (href: string) => void
+    onAuthEvent?: (event: AuthFlowEvent) => void
+    redirectTo?: string
+}
+
+/**
+ * Create a wrapper component with AuthUIProvider
+ */
+function createWrapper(options: TestProviderOptions = {}) {
+    const {
+        authClient = createMockAuthClient(),
+        basePath = "/auth",
+        authFlowMode,
+        navigate = vi.fn(),
+        onAuthEvent,
+        redirectTo = "/",
+    } = options
+
+    return function Wrapper({ children }: { children: ReactNode }) {
+        return (
+            <AuthUIProvider
+                // biome-ignore lint/suspicious/noExplicitAny: Test mock client
+                authClient={authClient as any}
+                basePath={basePath}
+                authFlowMode={authFlowMode}
+                navigate={navigate}
+                onAuthEvent={onAuthEvent}
+                redirectTo={redirectTo}
+                credentials={true}
+                signUp={true}
+            >
+                {children}
+            </AuthUIProvider>
+        )
+    }
+}
+
+/**
+ * Render a component with AuthUIProvider context
+ */
+export function renderWithProvider(
+    ui: ReactElement,
+    options: TestProviderOptions & { renderOptions?: Omit<RenderOptions, "wrapper"> } = {}
+) {
+    const { renderOptions, ...providerOptions } = options
+
+    return {
+        ...render(ui, {
+            wrapper: createWrapper(providerOptions),
+            ...renderOptions,
+        }),
+        // Return the mocked functions for assertions
+        authClient: providerOptions.authClient ?? createMockAuthClient(),
+        navigate: providerOptions.navigate ?? vi.fn(),
+    }
+}
+
+/**
+ * Event collector for testing event emissions
+ */
+export function createEventCollector() {
+    const events: AuthFlowEvent[] = []
+
+    const onEvent = (event: AuthFlowEvent) => {
+        events.push(event)
+    }
+
+    const getEvents = () => [...events]
+
+    const getEventsByType = (type: AuthFlowEvent["type"]) =>
+        events.filter((e) => e.type === type)
+
+    const hasEvent = (type: AuthFlowEvent["type"]) =>
+        events.some((e) => e.type === type)
+
+    const clear = () => {
+        events.length = 0
+    }
+
+    const lastEvent = () => events[events.length - 1]
+
+    return {
+        onEvent,
+        getEvents,
+        getEventsByType,
+        hasEvent,
+        clear,
+        lastEvent,
+    }
+}
+
+/**
+ * Helper to wait for async state updates
+ */
+export async function waitForStateUpdate() {
+    await new Promise((resolve) => setTimeout(resolve, 0))
+}
+
+/**
+ * Helper to fill form fields by label
+ */
+export async function fillFormField(
+    getByLabelText: (text: string | RegExp) => HTMLElement,
+    label: string | RegExp,
+    value: string
+) {
+    const input = getByLabelText(label) as HTMLInputElement
+    input.focus()
+    input.value = value
+    input.dispatchEvent(new Event("input", { bubbles: true }))
+    input.dispatchEvent(new Event("change", { bubbles: true }))
+}

package/src/ui/components/auth/auth-flow.tsx

@@ -4,6 +4,7 @@ import {
     type ReactNode,
     type MouseEvent,
     useCallback,
+    useContext,
     useMemo,
     useState
 } from "react"
@@ -96,35 +97,56 @@ const flowViewToPathKey: Record<AuthFlowView, keyof AuthViewPaths> = {
  * Parse a path to determine the view
  */
 function parsePathToView(path: string): { view: AuthFlowView; email?: string } {
-    const url = new URL(path, "http://localhost")
-    const pathname = url.pathname
-    const email = url.searchParams.get("email") || undefined
+    try {
+        const url = new URL(path, "http://localhost")
+        const pathname = url.pathname
+        const email = url.searchParams.get("email") || undefined
 
-    if (pathname.includes("email-verification")) {
-        return { view: "EMAIL_VERIFICATION", email }
-    }
-    if (pathname.includes("two-factor")) {
-        return { view: "TWO_FACTOR", email }
-    }
-    if (pathname.includes("forgot-password")) {
-        return { view: "FORGOT_PASSWORD", email }
-    }
-    if (pathname.includes("reset-password")) {
-        return { view: "RESET_PASSWORD", email }
-    }
-    if (pathname.includes("sign-up")) {
-        return { view: "SIGN_UP", email }
-    }
-    if (pathname.includes("magic-link")) {
-        return { view: "MAGIC_LINK", email }
-    }
-    if (pathname.includes("email-otp")) {
-        return { view: "SIGN_IN", email } // EMAIL_OTP is a sign-in variant
-    }
-    if (pathname.includes("recover-account")) {
-        return { view: "TWO_FACTOR", email } // Recover account is part of 2FA flow
+        // Use path segment matching to avoid false positives like "/my-sign-in-page"
+        const segments = pathname.split("/").filter(Boolean)
+        const lastSegment = segments[segments.length - 1] || ""
+
+        if (
+            lastSegment === "email-verification" ||
+            pathname.includes("/email-verification")
+        ) {
+            return { view: "EMAIL_VERIFICATION", email }
+        }
+        if (lastSegment === "two-factor" || pathname.includes("/two-factor")) {
+            return { view: "TWO_FACTOR", email }
+        }
+        if (
+            lastSegment === "forgot-password" ||
+            pathname.includes("/forgot-password")
+        ) {
+            return { view: "FORGOT_PASSWORD", email }
+        }
+        if (
+            lastSegment === "reset-password" ||
+            pathname.includes("/reset-password")
+        ) {
+            return { view: "RESET_PASSWORD", email }
+        }
+        if (lastSegment === "sign-up" || pathname.includes("/sign-up")) {
+            return { view: "SIGN_UP", email }
+        }
+        if (lastSegment === "magic-link" || pathname.includes("/magic-link")) {
+            return { view: "MAGIC_LINK", email }
+        }
+        if (lastSegment === "email-otp" || pathname.includes("/email-otp")) {
+            return { view: "EMAIL_OTP", email }
+        }
+        if (
+            lastSegment === "recover-account" ||
+            pathname.includes("/recover-account")
+        ) {
+            return { view: "RECOVER_ACCOUNT", email }
+        }
+        return { view: "SIGN_IN", email }
+    } catch {
+        // Return default view if URL parsing fails
+        return { view: "SIGN_IN" }
     }
-    return { view: "SIGN_IN", email }
 }
 
 /**
@@ -162,19 +184,37 @@ function parsePathToView(path: string): { view: AuthFlowView; email?: string } {
 /**
  * Check if a path is an auth-related path that should be intercepted
  * These match the viewPaths defined in view-paths.ts
+ * Uses path segment matching to avoid false positives like "/my-sign-in-page"
  */
 function isAuthPath(href: string): boolean {
-    return (
-        href.includes("sign-in") ||
-        href.includes("sign-up") ||
-        href.includes("email-verification") ||
-        href.includes("two-factor") ||
-        href.includes("forgot-password") ||
-        href.includes("reset-password") ||
-        href.includes("magic-link") ||
-        href.includes("email-otp") ||
-        href.includes("recover-account")
-    )
+    // Auth path segments that should be intercepted
+    const authSegments = [
+        "sign-in",
+        "sign-up",
+        "email-verification",
+        "two-factor",
+        "forgot-password",
+        "reset-password",
+        "magic-link",
+        "email-otp",
+        "recover-account"
+    ]
+
+    try {
+        const url = new URL(href, "http://localhost")
+        const segments = url.pathname.split("/").filter(Boolean)
+
+        // Check if any segment exactly matches an auth path
+        return segments.some((segment) => authSegments.includes(segment))
+    } catch {
+        // Fallback for invalid URLs - check with path boundary
+        return authSegments.some(
+            (authPath) =>
+                href.includes(`/${authPath}`) ||
+                href.endsWith(authPath) ||
+                href === authPath
+        )
+    }
 }
 
 // Session storage key for persisting view state across remounts
@@ -190,8 +230,8 @@ function getPersistedState(): {
         if (stored) {
             return JSON.parse(stored)
         }
-    } catch {
-        // Ignore parse errors
+    } catch (error) {
+        console.warn("[AuthFlow] Failed to read persisted state:", error)
     }
     return null
 }
@@ -203,8 +243,8 @@ function persistState(view: AuthFlowView, email?: string) {
             AUTH_FLOW_STATE_KEY,
             JSON.stringify({ view, email })
         )
-    } catch {
-        // Ignore storage errors
+    } catch (error) {
+        console.warn("[AuthFlow] Failed to persist state:", error)
     }
 }
 
@@ -212,8 +252,8 @@ function clearPersistedState() {
     if (typeof window === "undefined") return
     try {
         sessionStorage.removeItem(AUTH_FLOW_STATE_KEY)
-    } catch {
-        // Ignore storage errors
+    } catch (error) {
+        console.warn("[AuthFlow] Failed to clear persisted state:", error)
     }
 }
 
@@ -365,7 +405,7 @@ export function AuthFlow({
                     // Sign-in flow
                     case "SIGN_IN_REQUIRES_2FA":
                         setCurrentView("TWO_FACTOR")
-                        persistState("TWO_FACTOR")
+                        persistState("TWO_FACTOR", event.email)
                         break
                     case "SIGN_IN_REQUIRES_VERIFICATION":
                         setCurrentView("EMAIL_VERIFICATION")
@@ -450,11 +490,14 @@ export function AuthFlow({
 /**
  * Hook to emit auth events from within the auth flow.
  * Can be used by custom components within AuthFlow.
+ *
+ * @returns The onAuthEvent function from context, or undefined if not in provider
+ *
+ * @example
+ * const emitEvent = useAuthFlowEvent()
+ * emitEvent?.({ type: 'AUTH_SUCCESS', user, session })
  */
 export function useAuthFlowEvent() {
-    const context = AuthUIContext
-    // This hook allows custom components to emit events
-    // Usage: const emitEvent = useAuthFlowEvent()
-    // emitEvent({ type: 'CUSTOM_EVENT', ... })
-    return context
+    const { onAuthEvent } = useContext(AuthUIContext)
+    return onAuthEvent
 }

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

@@ -101,6 +101,9 @@ export function AuthForm({
     localization = { ...contextLocalization, ...localization }
 
     useEffect(() => {
+        // SSR guard and viewPaths null check
+        if (typeof window === "undefined" || !viewPaths) return
+
         if (pathname && !getViewByPath(viewPaths, pathname)) {
             console.error(`Invalid auth view: ${pathname}`)
             replace(`${basePath}/${viewPaths.SIGN_IN}${window.location.search}`)

package/src/ui/components/auth/auth-view.tsx

@@ -118,6 +118,9 @@ export function AuthView({
     }
 
     useEffect(() => {
+        // SSR guard - window not available on server
+        if (typeof window === "undefined") return
+
         const handlePageHide = () => setIsSubmitting(false)
         window.addEventListener("pagehide", handlePageHide)
         return () => {