@urbackend/react 0.1.0

package/src/context.tsx

@@ -0,0 +1,140 @@
+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

@@ -0,0 +1,163 @@
+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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,90 @@
+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

@@ -0,0 +1,113 @@
+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

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

package/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "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

@@ -0,0 +1,11 @@
+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

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