@nimbleflux/fluxbase-sdk-react 2026.3.6-rc.1

package/src/test-utils.tsx

@@ -0,0 +1,215 @@
+/**
+ * Test utilities for Fluxbase React SDK
+ */
+
+import React, { ReactElement } from "react";
+import { render, RenderOptions, RenderResult } from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { FluxbaseProvider } from "./context";
+import type { FluxbaseClient } from "@nimbleflux/fluxbase-sdk";
+import { vi } from "vitest";
+
+/**
+ * Create a mock FluxbaseClient for testing
+ */
+export function createMockClient(
+  overrides: Partial<FluxbaseClient> = {},
+): FluxbaseClient {
+  return {
+    auth: {
+      getSession: vi.fn().mockResolvedValue({ data: null, error: null }),
+      getCurrentUser: vi.fn().mockResolvedValue({ data: null, error: null }),
+      signIn: vi.fn().mockResolvedValue({ user: null, session: null }),
+      signUp: vi.fn().mockResolvedValue({ data: null, error: null }),
+      signOut: vi.fn().mockResolvedValue(undefined),
+      updateUser: vi
+        .fn()
+        .mockResolvedValue({ id: "1", email: "test@example.com" }),
+      getAuthConfig: vi.fn().mockResolvedValue({ data: {}, error: null }),
+      getCaptchaConfig: vi.fn().mockResolvedValue({ data: {}, error: null }),
+      getSAMLProviders: vi
+        .fn()
+        .mockResolvedValue({ data: { providers: [] }, error: null }),
+      getSAMLLoginUrl: vi
+        .fn()
+        .mockResolvedValue({ data: { url: "" }, error: null }),
+      signInWithSAML: vi.fn().mockResolvedValue({ data: null, error: null }),
+      handleSAMLCallback: vi
+        .fn()
+        .mockResolvedValue({ data: null, error: null }),
+      getSAMLMetadataUrl: vi
+        .fn()
+        .mockReturnValue("http://localhost/saml/metadata"),
+      ...overrides.auth,
+    },
+    from: vi.fn().mockReturnValue({
+      select: vi.fn().mockReturnThis(),
+      insert: vi.fn().mockResolvedValue({ data: null, error: null }),
+      update: vi.fn().mockResolvedValue({ data: null, error: null }),
+      upsert: vi.fn().mockResolvedValue({ data: null, error: null }),
+      delete: vi.fn().mockResolvedValue({ data: null, error: null }),
+      execute: vi.fn().mockResolvedValue({ data: [], error: null }),
+      eq: vi.fn().mockReturnThis(),
+    }),
+    storage: {
+      from: vi.fn().mockReturnValue({
+        list: vi.fn().mockResolvedValue({ data: [], error: null }),
+        upload: vi
+          .fn()
+          .mockResolvedValue({ data: { path: "test.txt" }, error: null }),
+        download: vi.fn().mockResolvedValue({ data: new Blob(), error: null }),
+        remove: vi.fn().mockResolvedValue({ data: null, error: null }),
+        getPublicUrl: vi
+          .fn()
+          .mockReturnValue({ data: { publicUrl: "http://localhost/file" } }),
+        getTransformUrl: vi
+          .fn()
+          .mockReturnValue("http://localhost/transform/file"),
+        createSignedUrl: vi
+          .fn()
+          .mockResolvedValue({
+            data: { signedUrl: "http://localhost/signed" },
+            error: null,
+          }),
+        move: vi
+          .fn()
+          .mockResolvedValue({ data: { path: "new.txt" }, error: null }),
+        copy: vi
+          .fn()
+          .mockResolvedValue({ data: { path: "copy.txt" }, error: null }),
+      }),
+      listBuckets: vi.fn().mockResolvedValue({ data: [], error: null }),
+      createBucket: vi.fn().mockResolvedValue({ error: null }),
+      deleteBucket: vi.fn().mockResolvedValue({ error: null }),
+      ...overrides.storage,
+    },
+    realtime: {
+      channel: vi.fn().mockReturnValue({
+        on: vi.fn().mockReturnThis(),
+        subscribe: vi.fn().mockReturnThis(),
+        unsubscribe: vi.fn(),
+      }),
+      ...overrides.realtime,
+    },
+    graphql: {
+      execute: vi.fn().mockResolvedValue({ data: null, errors: null }),
+      query: vi.fn().mockResolvedValue({ data: null, errors: null }),
+      mutation: vi.fn().mockResolvedValue({ data: null, errors: null }),
+      introspect: vi
+        .fn()
+        .mockResolvedValue({ data: { __schema: {} }, errors: null }),
+      ...overrides.graphql,
+    },
+    admin: {
+      me: vi.fn().mockResolvedValue({ data: null, error: null }),
+      login: vi.fn().mockResolvedValue({ data: null, error: null }),
+      listUsers: vi
+        .fn()
+        .mockResolvedValue({ data: { users: [], total: 0 }, error: null }),
+      inviteUser: vi.fn().mockResolvedValue({ data: null, error: null }),
+      updateUserRole: vi.fn().mockResolvedValue({ data: null, error: null }),
+      deleteUser: vi.fn().mockResolvedValue({ data: null, error: null }),
+      resetUserPassword: vi
+        .fn()
+        .mockResolvedValue({
+          data: { message: "Password reset" },
+          error: null,
+        }),
+      settings: {
+        app: {
+          get: vi.fn().mockResolvedValue({}),
+          update: vi.fn().mockResolvedValue({}),
+        },
+        system: {
+          list: vi.fn().mockResolvedValue({ settings: [] }),
+          update: vi.fn().mockResolvedValue({}),
+          delete: vi.fn().mockResolvedValue({}),
+        },
+      },
+      management: {
+        clientKeys: {
+          list: vi.fn().mockResolvedValue({ client_keys: [] }),
+          create: vi.fn().mockResolvedValue({ key: "new-key", client_key: {} }),
+          update: vi.fn().mockResolvedValue({}),
+          revoke: vi.fn().mockResolvedValue({}),
+          delete: vi.fn().mockResolvedValue({}),
+        },
+        webhooks: {
+          list: vi.fn().mockResolvedValue({ webhooks: [] }),
+          create: vi.fn().mockResolvedValue({}),
+          update: vi.fn().mockResolvedValue({}),
+          delete: vi.fn().mockResolvedValue({}),
+          test: vi.fn().mockResolvedValue({}),
+        },
+      },
+      ...overrides.admin,
+    },
+    ...overrides,
+  } as unknown as FluxbaseClient;
+}
+
+/**
+ * Create a fresh QueryClient for testing
+ */
+export function createTestQueryClient(): QueryClient {
+  return new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+        gcTime: 0,
+      },
+      mutations: {
+        retry: false,
+      },
+    },
+  });
+}
+
+interface WrapperProps {
+  children: React.ReactNode;
+}
+
+/**
+ * Create a wrapper component with all providers
+ */
+export function createWrapper(
+  client: FluxbaseClient,
+  queryClient?: QueryClient,
+) {
+  const qc = queryClient || createTestQueryClient();
+
+  return function Wrapper({ children }: WrapperProps) {
+    return (
+      <QueryClientProvider client={qc}>
+        <FluxbaseProvider client={client}>{children}</FluxbaseProvider>
+      </QueryClientProvider>
+    );
+  };
+}
+
+/**
+ * Custom render function that includes all providers
+ */
+export function renderWithProviders(
+  ui: ReactElement,
+  options?: Omit<RenderOptions, "wrapper"> & {
+    client?: FluxbaseClient;
+    queryClient?: QueryClient;
+  },
+): RenderResult & { client: FluxbaseClient; queryClient: QueryClient } {
+  const {
+    client = createMockClient(),
+    queryClient,
+    ...renderOptions
+  } = options || {};
+  const wrapper = createWrapper(client, queryClient);
+
+  return {
+    ...render(ui, { wrapper, ...renderOptions }),
+    client,
+    queryClient: queryClient || createTestQueryClient(),
+  };
+}
+
+// Re-export testing library utilities
+export * from "@testing-library/react";

package/src/use-admin-auth.test.ts

@@ -0,0 +1,175 @@
+/**
+ * Tests for admin authentication hook
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { renderHook, waitFor, act } from '@testing-library/react';
+import { useAdminAuth } from './use-admin-auth';
+import { createMockClient, createWrapper } from './test-utils';
+
+describe('useAdminAuth', () => {
+  it('should check auth status on mount when autoCheck is true', async () => {
+    const mockUser = { id: '1', email: 'admin@example.com', role: 'admin' };
+    const meMock = vi.fn().mockResolvedValue({ data: { user: mockUser }, error: null });
+
+    const client = createMockClient({
+      admin: { me: meMock },
+    } as any);
+
+    const { result } = renderHook(
+      () => useAdminAuth({ autoCheck: true }),
+      { wrapper: createWrapper(client) }
+    );
+
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+    expect(result.current.user).toEqual(mockUser);
+    expect(result.current.isAuthenticated).toBe(true);
+    expect(meMock).toHaveBeenCalled();
+  });
+
+  it('should not check auth status when autoCheck is false', async () => {
+    const meMock = vi.fn();
+
+    const client = createMockClient({
+      admin: { me: meMock },
+    } as any);
+
+    const { result } = renderHook(
+      () => useAdminAuth({ autoCheck: false }),
+      { wrapper: createWrapper(client) }
+    );
+
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+    expect(meMock).not.toHaveBeenCalled();
+    expect(result.current.isAuthenticated).toBe(false);
+  });
+
+  it('should handle auth check error', async () => {
+    const error = new Error('Not authenticated');
+    const meMock = vi.fn().mockResolvedValue({ data: null, error });
+
+    const client = createMockClient({
+      admin: { me: meMock },
+    } as any);
+
+    const { result } = renderHook(
+      () => useAdminAuth({ autoCheck: true }),
+      { wrapper: createWrapper(client) }
+    );
+
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+    expect(result.current.user).toBeNull();
+    expect(result.current.isAuthenticated).toBe(false);
+    expect(result.current.error).toBe(error);
+  });
+
+  it('should login successfully', async () => {
+    const mockUser = { id: '1', email: 'admin@example.com', role: 'admin' };
+    const loginMock = vi.fn().mockResolvedValue({
+      data: { user: mockUser, token: 'token' },
+      error: null,
+    });
+
+    const client = createMockClient({
+      admin: { login: loginMock, me: vi.fn().mockResolvedValue({ data: null, error: null }) },
+    } as any);
+
+    const { result } = renderHook(
+      () => useAdminAuth({ autoCheck: false }),
+      { wrapper: createWrapper(client) }
+    );
+
+    await act(async () => {
+      await result.current.login('admin@example.com', 'password');
+    });
+
+    expect(loginMock).toHaveBeenCalledWith({ email: 'admin@example.com', password: 'password' });
+    expect(result.current.user).toEqual(mockUser);
+    expect(result.current.isAuthenticated).toBe(true);
+  });
+
+  it('should handle login error', async () => {
+    const error = new Error('Invalid credentials');
+    const loginMock = vi.fn().mockResolvedValue({ data: null, error });
+
+    const client = createMockClient({
+      admin: { login: loginMock, me: vi.fn().mockResolvedValue({ data: null, error: null }) },
+    } as any);
+
+    const { result } = renderHook(
+      () => useAdminAuth({ autoCheck: false }),
+      { wrapper: createWrapper(client) }
+    );
+
+    await expect(act(async () => {
+      await result.current.login('admin@example.com', 'wrong-password');
+    })).rejects.toThrow();
+
+    // User should remain null after failed login
+    expect(result.current.user).toBeNull();
+    expect(result.current.isAuthenticated).toBe(false);
+  });
+
+  it('should logout', async () => {
+    const mockUser = { id: '1', email: 'admin@example.com', role: 'admin' };
+    const meMock = vi.fn().mockResolvedValue({ data: { user: mockUser }, error: null });
+
+    const client = createMockClient({
+      admin: { me: meMock },
+    } as any);
+
+    const { result } = renderHook(
+      () => useAdminAuth({ autoCheck: true }),
+      { wrapper: createWrapper(client) }
+    );
+
+    await waitFor(() => expect(result.current.isAuthenticated).toBe(true));
+
+    await act(async () => {
+      await result.current.logout();
+    });
+
+    expect(result.current.user).toBeNull();
+    expect(result.current.isAuthenticated).toBe(false);
+  });
+
+  it('should refresh user info', async () => {
+    const mockUser = { id: '1', email: 'admin@example.com', role: 'admin' };
+    const meMock = vi.fn().mockResolvedValue({ data: { user: mockUser }, error: null });
+
+    const client = createMockClient({
+      admin: { me: meMock },
+    } as any);
+
+    const { result } = renderHook(
+      () => useAdminAuth({ autoCheck: false }),
+      { wrapper: createWrapper(client) }
+    );
+
+    await act(async () => {
+      await result.current.refresh();
+    });
+
+    expect(meMock).toHaveBeenCalledTimes(1);
+    expect(result.current.user).toEqual(mockUser);
+  });
+
+  it('should show loading state during operations', async () => {
+    const meMock = vi.fn().mockImplementation(() => new Promise((resolve) => {
+      setTimeout(() => resolve({ data: { user: {} }, error: null }), 100);
+    }));
+
+    const client = createMockClient({
+      admin: { me: meMock },
+    } as any);
+
+    const { result } = renderHook(
+      () => useAdminAuth({ autoCheck: true }),
+      { wrapper: createWrapper(client) }
+    );
+
+    expect(result.current.isLoading).toBe(true);
+
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+  });
+});

package/src/use-admin-auth.ts

@@ -0,0 +1,187 @@
+import { useState, useEffect, useCallback } from "react";
+import { useFluxbaseClient } from "./context";
+import type { AdminAuthResponse, DataResponse } from "@fluxbase/sdk";
+
+/**
+ * Simplified admin user type returned by authentication
+ */
+export interface AdminUser {
+  id: string;
+  email: string;
+  role: string;
+}
+
+export interface UseAdminAuthOptions {
+  /**
+   * Automatically check authentication status on mount
+   * @default true
+   */
+  autoCheck?: boolean;
+}
+
+export interface UseAdminAuthReturn {
+  /**
+   * Current admin user if authenticated
+   */
+  user: AdminUser | null;
+
+  /**
+   * Whether the admin is authenticated
+   */
+  isAuthenticated: boolean;
+
+  /**
+   * Whether the authentication check is in progress
+   */
+  isLoading: boolean;
+
+  /**
+   * Any error that occurred during authentication
+   */
+  error: Error | null;
+
+  /**
+   * Login as admin
+   */
+  login: (email: string, password: string) => Promise<AdminAuthResponse>;
+
+  /**
+   * Logout admin
+   */
+  logout: () => Promise<void>;
+
+  /**
+   * Refresh admin user info
+   */
+  refresh: () => Promise<void>;
+}
+
+/**
+ * Hook for admin authentication
+ *
+ * Manages admin login state, authentication checks, and user info.
+ *
+ * @example
+ * ```tsx
+ * function AdminLogin() {
+ *   const { user, isAuthenticated, isLoading, login, logout } = useAdminAuth()
+ *
+ *   const handleLogin = async (e: React.FormEvent) => {
+ *     e.preventDefault()
+ *     await login(email, password)
+ *   }
+ *
+ *   if (isLoading) return <div>Loading...</div>
+ *   if (isAuthenticated) return <div>Welcome {user?.email}</div>
+ *
+ *   return <form onSubmit={handleLogin}>...</form>
+ * }
+ * ```
+ */
+export function useAdminAuth(
+  options: UseAdminAuthOptions = {},
+): UseAdminAuthReturn {
+  const { autoCheck = true } = options;
+  const client = useFluxbaseClient();
+
+  const [user, setUser] = useState<AdminUser | null>(null);
+  const [isLoading, setIsLoading] = useState(autoCheck);
+  const [error, setError] = useState<Error | null>(null);
+
+  /**
+   * Check current authentication status
+   */
+  const checkAuth = useCallback(async () => {
+    try {
+      setIsLoading(true);
+      setError(null);
+      const { data, error: apiError } = await client.admin.me();
+      if (apiError) {
+        throw apiError;
+      }
+      setUser(data!.user);
+    } catch (err) {
+      setUser(null);
+      setError(err as Error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [client]);
+
+  /**
+   * Login as admin
+   */
+  const login = useCallback(
+    async (email: string, password: string): Promise<AdminAuthResponse> => {
+      try {
+        setIsLoading(true);
+        setError(null);
+        const { data, error: apiError } = await client.admin.login({
+          email,
+          password,
+        });
+        if (apiError) {
+          throw apiError;
+        }
+        setUser(data!.user);
+        return data!;
+      } catch (err) {
+        setError(err as Error);
+        throw err;
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [client],
+  );
+
+  /**
+   * Logout admin
+   *
+   * WARNING: Currently only clears local state. The server-side session/token
+   * remains valid until it expires. This should call a logout endpoint to
+   * invalidate the session on the server for proper security.
+   */
+  const logout = useCallback(async (): Promise<void> => {
+    try {
+      setIsLoading(true);
+      setError(null);
+
+      // TODO: Call server-side logout endpoint when available
+      // This is a security concern - the token remains valid on the server
+      // await client.admin.logout();
+
+      // Clear local user state
+      setUser(null);
+    } catch (err) {
+      setError(err as Error);
+      throw err;
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  /**
+   * Refresh admin user info
+   */
+  const refresh = useCallback(async (): Promise<void> => {
+    await checkAuth();
+  }, [checkAuth]);
+
+  // Auto-check authentication on mount
+  useEffect(() => {
+    if (autoCheck) {
+      checkAuth();
+    }
+  }, [autoCheck, checkAuth]);
+
+  return {
+    user,
+    isAuthenticated: user !== null,
+    isLoading,
+    error,
+    login,
+    logout,
+    refresh,
+  };
+}