@urbackend/react 0.1.1 → 0.2.0

package/src/context.tsx

@@ -1,140 +0,0 @@
-import React, { createContext, useContext, useEffect, useState, useMemo } from 'react';
-import { UrBackendClient, AuthModule, DatabaseModule, StorageModule } from '@urbackend/sdk';
-import type { AuthUser } from '@urbackend/sdk';
-
-interface UrContextValue {
-  client: UrBackendClient | null;
-  auth: AuthModule | null;
-  db: DatabaseModule | null;
-  storage: StorageModule | null;
-  user: AuthUser | null;
-  setUser: React.Dispatch<React.SetStateAction<AuthUser | null>>;
-  isInitializing: boolean;
-  isLoading: boolean;
-  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>;
-  error: string | null;
-  setError: React.Dispatch<React.SetStateAction<string | null>>;
-}
-
-const UrContext = createContext<UrContextValue | undefined>(undefined);
-
-export interface UrProviderProps {
-  apiKey: string;
-  baseUrl?: string;
-  children: React.ReactNode;
-}
-
-export const UrProvider: React.FC<UrProviderProps> = ({ apiKey, baseUrl, children }) => {
-  const [user, setUser] = useState<AuthUser | null>(null);
-  const [isInitializing, setIsInitializing] = useState(true);
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const { client, auth, db, storage } = useMemo(() => {
-    const _client = new UrBackendClient({ apiKey, baseUrl });
-    return {
-      client: _client,
-      auth: new AuthModule(_client),
-      db: new DatabaseModule(_client),
-      storage: new StorageModule(_client),
-    };
-  }, [apiKey, baseUrl]);
-
-  useEffect(() => {
-    let mounted = true;
-
-    const initAuth = async () => {
-      try {
-        // Hydrate from localStorage first as a fallback for environments without cookies
-        if (typeof window !== 'undefined') {
-          const savedToken = localStorage.getItem('ur_auth_token');
-          if (savedToken) auth.setToken(savedToken);
-        }
-
-        // Check for social auth callback params
-        const urlParams = new URLSearchParams(window.location.search);
-        const hashParams = new URLSearchParams(window.location.hash.substring(1));
-        const token = hashParams.get('token');
-        const rtCode = urlParams.get('rtCode');
-        const error = urlParams.get('error');
-
-        if (error) {
-          console.error('Social Auth Error:', error);
-          if (mounted) setError(error);
-          window.history.replaceState({}, document.title, window.location.pathname);
-        } else if (token) {
-          // Social auth succeeded, establish session immediately
-          auth.setToken(token);
-          if (typeof window !== 'undefined') localStorage.setItem('ur_auth_token', token);
-          
-          if (rtCode) {
-            // Exchange for long-lived refresh token
-            try {
-              const exRes = await auth.socialExchange({ token, rtCode });
-              const exToken = (exRes as any).accessToken || (exRes as any).token;
-              if (exToken && typeof window !== 'undefined') localStorage.setItem('ur_auth_token', exToken);
-            } catch (err: any) {
-              console.error('Failed to exchange refresh token', err);
-              if (mounted) setError(err.message || 'Failed to complete social login');
-              throw err;
-            }
-          }
-          window.history.replaceState({}, document.title, window.location.pathname);
-        } else {
-          // Attempt to silently refresh session using the HTTP-only cookie
-          try {
-            const res = await auth.refreshToken();
-            const newToken = res.accessToken || (res as any).token;
-            if (newToken && typeof window !== 'undefined') localStorage.setItem('ur_auth_token', newToken);
-          } catch (e) {
-            // If refresh fails, me() will catch it
-          }
-        }
-        
-        const currentUser = await auth.me();
-        if (mounted) {
-          setUser(currentUser);
-        }
-      } catch (error: any) {
-        if (mounted) {
-          setUser(null);
-          // Don't set global error for initial me() check failure (usually just means not logged in)
-        }
-      } finally {
-        if (mounted) {
-          setIsInitializing(false);
-        }
-      }
-    };
-
-    initAuth();
-
-    return () => {
-      mounted = false;
-    };
-  }, [auth]);
-
-  const value: UrContextValue = {
-    client,
-    auth,
-    db,
-    storage,
-    user,
-    setUser,
-    isInitializing,
-    isLoading,
-    setIsLoading,
-    error,
-    setError,
-  };
-
-  return <UrContext.Provider value={value}>{children}</UrContext.Provider>;
-};
-
-export const useUrContext = () => {
-  const context = useContext(UrContext);
-  if (!context) {
-    throw new Error('useUrContext must be used within an UrProvider');
-  }
-  return context;
-};

package/src/hooks.ts

@@ -1,163 +0,0 @@
-import { useCallback } from 'react';
-import { useUrContext } from './context';
-import type { 
-  LoginPayload, 
-  SignUpPayload, 
-  ChangePasswordPayload,
-  VerifyEmailPayload,
-  RequestPasswordResetPayload,
-  ResetPasswordPayload
-} from '@urbackend/sdk';
-
-export const useAuth = () => {
-  const { auth, user, setUser, isInitializing, isLoading, setIsLoading, error, setError } = useUrContext();
-
-  if (!auth) {
-    throw new Error('Auth module not initialized. Make sure you are inside UrProvider.');
-  }
-
-  const login = useCallback(async (payload: LoginPayload) => {
-    try {
-      setError(null);
-      setIsLoading(true);
-      const res = await auth.login(payload);
-      const token = res.accessToken || (res as any).token;
-      if (token && typeof window !== 'undefined') localStorage.setItem('ur_auth_token', token);
-      const currentUser = await auth.me();
-      setUser(currentUser);
-    } catch (err: any) {
-      setError(err.message || 'Login failed');
-      throw err;
-    } finally {
-      setIsLoading(false);
-    }
-  }, [auth, setUser, setIsLoading, setError]);
-
-  const signUp = useCallback(async (payload: SignUpPayload) => {
-    try {
-      setError(null);
-      setIsLoading(true);
-      const newUser = await auth.signUp(payload);
-      return newUser;
-    } catch (err: any) {
-      setError(err.message || 'Sign up failed');
-      throw err;
-    } finally {
-      setIsLoading(false);
-    }
-  }, [auth, setIsLoading, setError]);
-
-  const logout = useCallback(async () => {
-    try {
-      setError(null);
-      setIsLoading(true);
-      await auth.logout();
-      if (typeof window !== 'undefined') localStorage.removeItem('ur_auth_token');
-      setUser(null);
-    } catch (err: any) {
-      setError(err.message || 'Logout failed');
-      throw err;
-    } finally {
-      setIsLoading(false);
-    }
-  }, [auth, setUser, setIsLoading, setError]);
-
-  const socialLogin = useCallback((provider: 'google' | 'github') => {
-    setError(null);
-    const url = auth.socialStart(provider);
-    window.location.href = url;
-  }, [auth, setError]);
-  
-  const verifyEmail = useCallback(async (payload: VerifyEmailPayload) => {
-    try {
-      setError(null);
-      return await auth.verifyEmail(payload);
-    } catch (err: any) {
-      setError(err.message || 'Email verification failed');
-      throw err;
-    }
-  }, [auth, setError]);
-
-  const changePassword = useCallback(async (payload: ChangePasswordPayload) => {
-    try {
-      setError(null);
-      return await auth.changePassword(payload);
-    } catch (err: any) {
-      setError(err.message || 'Failed to change password');
-      throw err;
-    }
-  }, [auth, setError]);
-
-  const requestPasswordReset = useCallback(async (payload: RequestPasswordResetPayload) => {
-    try {
-      setError(null);
-      setIsLoading(true);
-      return await auth.requestPasswordReset(payload);
-    } catch (err: any) {
-      setError(err.message || 'Failed to request password reset');
-      throw err;
-    } finally {
-      setIsLoading(false);
-    }
-  }, [auth, setError, setIsLoading]);
-
-  const resetPassword = useCallback(async (payload: ResetPasswordPayload) => {
-    try {
-      setError(null);
-      setIsLoading(true);
-      return await auth.resetPassword(payload);
-    } catch (err: any) {
-      setError(err.message || 'Failed to reset password');
-      throw err;
-    } finally {
-      setIsLoading(false);
-    }
-  }, [auth, setError, setIsLoading]);
-
-  const clearError = useCallback(() => setError(null), [setError]);
-
-  return {
-    user,
-    isInitializing,
-    isLoading,
-    error,
-    isAuthenticated: !!user,
-    login,
-    signUp,
-    logout,
-    socialLogin,
-    verifyEmail,
-    changePassword,
-    requestPasswordReset,
-    resetPassword,
-    clearError,
-    authApi: auth // Escape hatch to underlying SDK
-  };
-};
-
-export const useUser = () => {
-  const { user, isInitializing, isLoading, error } = useUrContext();
-  return {
-    user,
-    isInitializing,
-    isLoading,
-    error,
-    isAuthenticated: !!user,
-  };
-};
-
-export const useDb = () => {
-  const { db } = useUrContext();
-  if (!db) {
-    throw new Error('Database module not initialized.');
-  }
-  return db;
-};
-
-export const useStorage = () => {
-  const { storage } = useUrContext();
-  if (!storage) {
-    throw new Error('Storage module not initialized.');
-  }
-  return storage;
-};

package/src/index.ts

@@ -1,13 +0,0 @@
-export { UrProvider, useUrContext } from './context';
-export type { UrProviderProps } from './context';
-
-export { useAuth, useUser, useDb, useStorage } from './hooks';
-export { ProtectedRoute, GuestRoute } from './components';
-export type { ProtectedRouteProps, GuestRouteProps } from './components';
-
-export { UrAuth } from './components/UrAuth';
-export type { UrAuthProps } from './components/UrAuth';
-
-export * from './components/UrUserButton';
-
-export * from '@urbackend/sdk'; // re-export types so users don't need to import from sdk directly

package/tests/UrAuth.test.tsx

@@ -1,90 +0,0 @@
-import React from 'react';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { UrAuth } from '../src/components/UrAuth';
-
-// Mock the hooks module
-const mockLogin = vi.fn();
-const mockSignUp = vi.fn();
-const mockSocialLogin = vi.fn();
-const mockRequestPasswordReset = vi.fn();
-const mockResetPassword = vi.fn();
-const mockClearError = vi.fn();
-
-vi.mock('../src/hooks', () => ({
-  useAuth: () => ({
-    login: mockLogin,
-    signUp: mockSignUp,
-    socialLogin: mockSocialLogin,
-    requestPasswordReset: mockRequestPasswordReset,
-    resetPassword: mockResetPassword,
-    isLoading: false,
-    error: null,
-    clearError: mockClearError,
-  }),
-}));
-
-describe('UrAuth Component', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  it('renders login form by default', () => {
-    render(<UrAuth />);
-    
-    expect(screen.getByPlaceholderText('Enter your email address')).toBeInTheDocument();
-    expect(screen.getByPlaceholderText('Enter your password')).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Log In' })).toBeInTheDocument();
-  });
-
-  it('switches to signup form', () => {
-    render(<UrAuth />);
-    
-    const signupToggle = screen.getAllByText('Sign Up')[0]; // Top switcher
-    fireEvent.click(signupToggle);
-    
-    expect(screen.getByPlaceholderText('Enter your name')).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Create Account' })).toBeInTheDocument();
-  });
-
-  it('calls login on submit', async () => {
-    mockLogin.mockResolvedValueOnce(undefined);
-    render(<UrAuth onSuccess={() => {}} />);
-    
-    fireEvent.change(screen.getByPlaceholderText('Enter your email address'), { target: { value: 'test@example.com' } });
-    fireEvent.change(screen.getByPlaceholderText('Enter your password'), { target: { value: 'password123' } });
-    
-    fireEvent.click(screen.getByRole('button', { name: 'Log In' }));
-    
-    await waitFor(() => {
-      expect(mockLogin).toHaveBeenCalledWith({ email: 'test@example.com', password: 'password123' });
-    });
-  });
-
-  it('calls socialLogin when a provider button is clicked', () => {
-    render(<UrAuth providers={['google', 'github']} />);
-    
-    fireEvent.click(screen.getByText('Continue with Google'));
-    expect(mockSocialLogin).toHaveBeenCalledWith('google');
-    
-    fireEvent.click(screen.getByText('Continue with GitHub'));
-    expect(mockSocialLogin).toHaveBeenCalledWith('github');
-  });
-
-  it('switches to forgot password flow', async () => {
-    render(<UrAuth />);
-    
-    fireEvent.click(screen.getByText('Forgot password?'));
-    
-    expect(screen.getByText('Reset Password')).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Send Reset Code' })).toBeInTheDocument();
-    
-    mockRequestPasswordReset.mockResolvedValueOnce(undefined);
-    fireEvent.change(screen.getByPlaceholderText('Enter your email address'), { target: { value: 'test@example.com' } });
-    fireEvent.click(screen.getByRole('button', { name: 'Send Reset Code' }));
-    
-    await waitFor(() => {
-      expect(mockRequestPasswordReset).toHaveBeenCalledWith({ email: 'test@example.com' });
-    });
-  });
-});

package/tests/context.test.tsx

@@ -1,113 +0,0 @@
-import React from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { UrProvider, useUrContext } from '../src/context';
-import { AuthModule } from '@urbackend/sdk';
-
-// Mock the SDK modules
-vi.mock('@urbackend/sdk', () => {
-  const MockAuthModule = vi.fn().mockImplementation(() => ({
-    setToken: vi.fn(),
-    refreshToken: vi.fn().mockResolvedValue(undefined),
-    me: vi.fn().mockResolvedValue({ id: 'user123', email: 'test@example.com' }),
-    socialExchange: vi.fn().mockResolvedValue({ refreshToken: 'fake-rt' }),
-  }));
-
-  return {
-    UrBackendClient: vi.fn(),
-    AuthModule: MockAuthModule,
-    DatabaseModule: vi.fn(),
-    StorageModule: vi.fn(),
-  };
-});
-
-describe('UrProvider & useUrContext', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  it('throws an error if useUrContext is used outside UrProvider', () => {
-    const TestComponent = () => {
-      useUrContext();
-      return <div>Test</div>;
-    };
-
-    // React Error Boundary catch
-    const consoleError = vi.spyOn(console, 'error').mockImplementation(() => {});
-    
-    expect(() => render(<TestComponent />)).toThrow('useUrContext must be used within an UrProvider');
-    
-    consoleError.mockRestore();
-  });
-
-  it('initializes context and fetches user', async () => {
-    const TestComponent = () => {
-      const { user, isInitializing } = useUrContext();
-      if (isInitializing) return <div>Loading...</div>;
-      return <div>User: {user?.email}</div>;
-    };
-
-    render(
-      <UrProvider apiKey="test-key" baseUrl="http://localhost:3000">
-        <TestComponent />
-      </UrProvider>
-    );
-
-    expect(screen.getByText('Loading...')).toBeInTheDocument();
-
-    await waitFor(() => {
-      expect(screen.getByText('User: test@example.com')).toBeInTheDocument();
-    });
-  });
-
-  it('exchanges social token and rtCode if present in URL', async () => {
-    // Mock window.location
-    const originalLocation = window.location;
-    // @ts-ignore
-    delete window.location;
-    window.location = {
-      ...originalLocation,
-      search: '?rtCode=test-rt-code',
-      hash: '#token=test-temp-token',
-      pathname: '/auth/callback',
-    } as any;
-
-    const originalHistory = window.history;
-    // @ts-ignore
-    delete window.history;
-    window.history = {
-      ...originalHistory,
-      replaceState: vi.fn(),
-    } as any;
-
-    const TestComponent = () => {
-      const { isInitializing } = useUrContext();
-      if (isInitializing) return <div>Loading...</div>;
-      return <div>Ready</div>;
-    };
-
-    render(
-      <UrProvider apiKey="test-key" baseUrl="http://localhost:3000">
-        <TestComponent />
-      </UrProvider>
-    );
-
-    await waitFor(() => {
-      expect(screen.getByText('Ready')).toBeInTheDocument();
-    });
-
-    // We can't access the specific instance directly, but we can check if the methods on the mock prototype were called
-    // Since AuthModule is mocked to return the object above, we can check its methods.
-    // However, vitest module mocking returns the factory. Let's just verify it using a spy on a global or check the logic.
-    // Actually, since we redefined AuthModule mock above, we need to inspect the instances.
-    const mockAuthInstance = vi.mocked(AuthModule).mock.results[0]?.value;
-    if (mockAuthInstance) {
-      expect(mockAuthInstance.setToken).toHaveBeenCalledWith('test-temp-token');
-      expect(mockAuthInstance.socialExchange).toHaveBeenCalledWith({ token: 'test-temp-token', rtCode: 'test-rt-code' });
-    }
-
-    // Restore window.location and window.history
-    window.location = originalLocation;
-    window.history = originalHistory;
-  });
-});

package/tests/setupTests.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/tsconfig.json

@@ -1,24 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
-  },
-  "include": ["src"]
-}

package/tsup.config.ts

@@ -1,11 +0,0 @@
-import { defineConfig } from 'tsup';
-
-export default defineConfig({
-  entry: ['src/index.ts'],
-  format: ['cjs', 'esm'],
-  dts: true,
-  splitting: false,
-  sourcemap: true,
-  clean: true,
-  external: ['react', 'react-dom'],
-});

package/vitest.config.ts

@@ -1,9 +0,0 @@
-import { defineConfig } from 'vitest/config';
-
-export default defineConfig({
-  test: {
-    environment: 'jsdom',
-    globals: true,
-    setupFiles: ['./tests/setupTests.ts'],
-  },
-});