@jmruthers/pace-core 0.6.9 → 0.6.11

package/src/components/PaceLoginPage/PaceLoginPage.test.tsx

@@ -14,7 +14,7 @@ import { PaceLoginPage } from './PaceLoginPage';
 import { renderWithProviders } from '../../__tests__/helpers/test-utils';
 import { Logger, LogLevel } from '../../utils/core/logger';
 import { clearPalette } from '../../theming/runtime';
-import { EventServiceContext } from '../../providers/services/EventServiceProvider';
+import { EventServiceContext } from '../../providers/services/EventServiceContext';
 import { UnifiedAuthContext } from '../../providers/services/UnifiedAuthProvider';
 
 // Mock React Router
@@ -113,9 +113,9 @@ vi.mock('../../theming/runtime', () => ({
   clearPalette: vi.fn(),
 }));
 
-// Mock isSuperAdmin from RBAC API
+// Mock isSuperAdmin from RBAC API (returns ApiResult<boolean>)
 vi.mock('../../rbac/api', () => ({
-  isSuperAdmin: vi.fn().mockResolvedValue(false)
+  isSuperAdmin: vi.fn().mockResolvedValue({ ok: true, data: false })
 }));
 
 import { isSuperAdmin } from '../../rbac/api';
@@ -318,7 +318,7 @@ describe('PaceLoginPage Component', () => {
       mockAuthContext.hasRole.mockReturnValue(true);
       mockAuthContext.getUserRole.mockReturnValue('super_admin');
       
-      vi.mocked(isSuperAdmin).mockResolvedValue(true);
+      vi.mocked(isSuperAdmin).mockResolvedValue({ ok: true, data: true });
       
       renderWithProviders(
         <UnifiedAuthContext.Provider value={mockAuthContext as any}>
@@ -354,7 +354,7 @@ describe('PaceLoginPage Component', () => {
       mockAuthContext.hasRole.mockReturnValue(true);
       mockAuthContext.getUserRole.mockReturnValue('super_admin');
       
-      vi.mocked(isSuperAdmin).mockResolvedValue(true);
+      vi.mocked(isSuperAdmin).mockResolvedValue({ ok: true, data: true });
       
       mockNavigate.mockImplementation(() => {
         throw new Error('Navigation failed');
@@ -385,7 +385,11 @@ describe('PaceLoginPage Component', () => {
   describe('Form Submission', () => {
     it('handles successful login submission', async () => {
       const user = userEvent.setup();
-      mockAuthContext.signIn.mockResolvedValue({ error: null });
+      mockAuthContext.signIn.mockImplementation(async () => {
+        mockAuthContext.isAuthenticated = true;
+        mockAuthContext.user = { id: '1', email: 'test@example.com' } as User;
+        return { error: null };
+      });
       
       renderWithAuthContext(
         <PaceLoginPage 
@@ -413,8 +417,8 @@ describe('PaceLoginPage Component', () => {
 
     it('handles failed login submission', async () => {
       const user = userEvent.setup();
-      const signInError = new Error('Invalid credentials');
-      mockAuthContext.signIn.mockResolvedValue({ error: signInError });
+      // signIn returns ApiResult; ok: false causes handleSubmit to throw, LoginForm catches and displays message
+      mockAuthContext.signIn.mockResolvedValue({ ok: false, error: { code: 'INVALID_CREDENTIALS', message: 'Invalid credentials' } });
       
       renderWithAuthContext(<PaceLoginPage appName="Test App" />, { withRouter: false });
       
@@ -439,15 +443,17 @@ describe('PaceLoginPage Component', () => {
 
     it('handles navigation error after successful login', async () => {
       const user = userEvent.setup();
-      mockAuthContext.signIn.mockResolvedValue({ error: null });
+      mockAuthContext.signIn.mockImplementation(async () => {
+        mockAuthContext.isAuthenticated = true;
+        mockAuthContext.user = { id: '1', email: 'test@example.com' } as User;
+        return { error: null };
+      });
       mockNavigate.mockImplementation(() => {
         throw new Error('Navigation failed');
       });
       
-      const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
-      
       renderWithAuthContext(
-        <PaceLoginPage appName="Test App" requireAppAccess={false} />, 
+        <PaceLoginPage appName="Test App" requireAppAccess={false} onSuccessRedirectPath="/" />, 
         { withRouter: false }
       );
       
@@ -459,14 +465,13 @@ describe('PaceLoginPage Component', () => {
       await user.type(passwordInput, 'password123');
       await user.click(submitButton);
       
-      // Wait for navigation to be attempted (which will throw)
+      await waitFor(() => {
+        expect(mockAuthContext.signIn).toHaveBeenCalledWith('test@example.com', 'password123');
+      });
+      
       await waitFor(() => {
         expect(mockNavigate).toHaveBeenCalled();
       }, { timeout: 3000 });
-      
-      // Check if error was logged (may or may not be called depending on timing)
-      // The important thing is that navigation was attempted and the error was handled gracefully
-      expect(mockNavigate).toHaveBeenCalled();
     });
 
     it('manages loading state during form submission', async () => {
@@ -523,7 +528,6 @@ describe('PaceLoginPage Component', () => {
       const networkError = new Error('Network error');
       mockAuthContext.signIn.mockRejectedValue(networkError);
       
-      const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
       
       renderWithAuthContext(<PaceLoginPage appName="Test App" />, { withRouter: false });
       
@@ -673,7 +677,7 @@ describe('PaceLoginPage Component', () => {
     });
 
     it('shows access error when required app configuration is missing', async () => {
-      vi.mocked(isSuperAdmin).mockResolvedValue(false);
+      vi.mocked(isSuperAdmin).mockResolvedValue({ ok: true, data: false });
       mockAuthContext.isAuthenticated = true;
       mockAuthContext.isLoading = false;
       mockAuthContext.user = { id: 'user-1' } as User;
@@ -715,7 +719,7 @@ describe('PaceLoginPage Component', () => {
     });
 
     it('shows organisation access error when user lacks active organisations', async () => {
-      vi.mocked(isSuperAdmin).mockResolvedValue(false);
+      vi.mocked(isSuperAdmin).mockResolvedValue({ ok: true, data: false });
       mockAuthContext.isAuthenticated = true;
       mockAuthContext.isLoading = false;
       mockAuthContext.user = { id: 'user-2' } as User;
@@ -788,5 +792,763 @@ describe('PaceLoginPage Component', () => {
         expect(screen.getByText(/not assigned to any organisation/i)).toBeInTheDocument();
       }, { timeout: 5000 });
     });
+
+    it('shows access error when user has no page permissions', async () => {
+      vi.mocked(isSuperAdmin).mockResolvedValue({ ok: true, data: false });
+      mockAuthContext.isAuthenticated = true;
+      mockAuthContext.isLoading = false;
+      mockAuthContext.user = { id: 'user-3' } as User;
+
+      const createOrganisationRolesQuery = (result: { data: unknown; error: unknown }) => {
+        const query = {
+          select: vi.fn(),
+          eq: vi.fn(),
+          is: vi.fn(),
+          limit: vi.fn(),
+        };
+
+        query.select.mockReturnValue(query);
+        query.eq.mockReturnValue(query);
+        query.is.mockReturnValue(query);
+        query.limit.mockImplementation(() => ({
+          maybeSingle: vi.fn(() => Promise.resolve(result)),
+        }));
+
+        return query;
+      };
+
+      const supabaseWithNoPermissions = {
+        from: vi.fn((table: string) => {
+          if (table === 'rbac_apps') {
+            return {
+              select: vi.fn(() => ({
+                eq: vi.fn(() => ({
+                  eq: vi.fn(() => ({
+                    single: vi.fn(() => Promise.resolve({ data: { id: 'app-1', name: 'Test App', is_active: true }, error: null })),
+                  })),
+                })),
+              })),
+            };
+          }
+
+          if (table === 'rbac_app_pages') {
+            return {
+              select: vi.fn(() => ({
+                eq: vi.fn(() => Promise.resolve({ data: [{ id: 'page-1', page_name: 'dashboard' }], error: null })),
+              })),
+            };
+          }
+
+          if (table === 'rbac_organisation_roles') {
+            return createOrganisationRolesQuery({ data: { organisation_id: 'org-1' }, error: null });
+          }
+
+          return {
+            select: vi.fn(() => ({
+              eq: vi.fn(() => ({
+                eq: vi.fn(() => ({
+                  single: vi.fn(() => Promise.resolve({ data: null, error: null })),
+                })),
+              })),
+            })),
+          };
+        }),
+        rpc: vi.fn(() => Promise.resolve({ data: false, error: null })),
+      };
+
+      mockAuthContext.supabase = supabaseWithNoPermissions as any;
+
+      renderWithAuthContext(
+        <PaceLoginPage appName="Test App" requireAppAccess />
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText(/restricted to authorized users only/i)).toBeInTheDocument();
+      }, { timeout: 5000 });
+    });
+
+    it('shows access error when app has no pages configured', async () => {
+      vi.mocked(isSuperAdmin).mockResolvedValue({ ok: true, data: false });
+      mockAuthContext.isAuthenticated = true;
+      mockAuthContext.isLoading = false;
+      mockAuthContext.user = { id: 'user-4' } as User;
+
+      const supabaseWithNoPages = {
+        from: vi.fn((table: string) => {
+          if (table === 'rbac_apps') {
+            return {
+              select: vi.fn(() => ({
+                eq: vi.fn(() => ({
+                  eq: vi.fn(() => ({
+                    single: vi.fn(() => Promise.resolve({ data: { id: 'app-1', name: 'Test App', is_active: true }, error: null })),
+                  })),
+                })),
+              })),
+            };
+          }
+
+          if (table === 'rbac_app_pages') {
+            return {
+              select: vi.fn(() => ({
+                eq: vi.fn(() => Promise.resolve({ data: [], error: null })),
+              })),
+            };
+          }
+
+          return {
+            select: vi.fn(() => ({
+              eq: vi.fn(() => ({
+                eq: vi.fn(() => ({
+                  single: vi.fn(() => Promise.resolve({ data: null, error: null })),
+                })),
+              })),
+            })),
+          };
+        }),
+        rpc: vi.fn(() => Promise.resolve({ data: false, error: null })),
+      };
+
+      mockAuthContext.supabase = supabaseWithNoPages as any;
+
+      renderWithAuthContext(
+        <PaceLoginPage appName="Test App" requireAppAccess />
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText(/currently unavailable/i)).toBeInTheDocument();
+      }, { timeout: 5000 });
+    });
+
+    it('handles app access check error gracefully', async () => {
+      vi.mocked(isSuperAdmin).mockResolvedValue({ ok: true, data: false });
+      mockAuthContext.isAuthenticated = true;
+      mockAuthContext.isLoading = false;
+      mockAuthContext.user = { id: 'user-5' } as User;
+
+      const supabaseWithError = {
+        from: vi.fn(() => {
+          throw new Error('Database connection failed');
+        }),
+        rpc: vi.fn(() => Promise.resolve({ data: false, error: null })),
+      };
+
+      mockAuthContext.supabase = supabaseWithError as any;
+
+      renderWithAuthContext(
+        <PaceLoginPage appName="Test App" requireAppAccess />
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText(/error occurred while checking your permissions/i)).toBeInTheDocument();
+      }, { timeout: 5000 });
+    });
+
+    it('grants access when user has permission on any page', async () => {
+      vi.mocked(isSuperAdmin).mockResolvedValue({ ok: true, data: false });
+      mockAuthContext.isAuthenticated = true;
+      mockAuthContext.isLoading = false;
+      mockAuthContext.user = { id: 'user-6' } as User;
+
+      const createOrganisationRolesQuery = (result: { data: unknown; error: unknown }) => {
+        const query = {
+          select: vi.fn(),
+          eq: vi.fn(),
+          is: vi.fn(),
+          limit: vi.fn(),
+        };
+
+        query.select.mockReturnValue(query);
+        query.eq.mockReturnValue(query);
+        query.is.mockReturnValue(query);
+        query.limit.mockImplementation(() => ({
+          maybeSingle: vi.fn(() => Promise.resolve(result)),
+        }));
+
+        return query;
+      };
+
+      const supabaseWithPermissions = {
+        from: vi.fn((table: string) => {
+          if (table === 'rbac_apps') {
+            return {
+              select: vi.fn(() => ({
+                eq: vi.fn(() => ({
+                  eq: vi.fn(() => ({
+                    single: vi.fn(() => Promise.resolve({ data: { id: 'app-1', name: 'Test App', is_active: true }, error: null })),
+                  })),
+                })),
+              })),
+            };
+          }
+
+          if (table === 'rbac_app_pages') {
+            return {
+              select: vi.fn(() => ({
+                eq: vi.fn(() => Promise.resolve({ data: [{ id: 'page-1', page_name: 'dashboard' }, { id: 'page-2', page_name: 'settings' }], error: null })),
+              })),
+            };
+          }
+
+          if (table === 'rbac_organisation_roles') {
+            return createOrganisationRolesQuery({ data: { organisation_id: 'org-1' }, error: null });
+          }
+
+          return {
+            select: vi.fn(() => ({
+              eq: vi.fn(() => ({
+                eq: vi.fn(() => ({
+                  single: vi.fn(() => Promise.resolve({ data: null, error: null })),
+                })),
+              })),
+            })),
+          };
+        }),
+        rpc: vi.fn((fnName: string, params: any) => {
+          // Grant permission for dashboard page
+          if (params.p_permission === 'read:page.dashboard') {
+            return Promise.resolve({ data: true, error: null });
+          }
+          return Promise.resolve({ data: false, error: null });
+        }),
+      };
+
+      mockAuthContext.supabase = supabaseWithPermissions as any;
+
+      renderWithAuthContext(
+        <PaceLoginPage appName="Test App" requireAppAccess onSuccessRedirectPath="/dashboard" />
+      );
+
+      await waitFor(() => {
+        expect(mockNavigate).toHaveBeenCalledWith('/dashboard', { replace: true });
+      }, { timeout: 5000 });
+    });
+  });
+
+  describe('Location and Theme Management', () => {
+    it('clears theme when location pathname changes to login route', () => {
+      const { rerender } = renderWithAuthContext(<PaceLoginPage appName="Test App" />, { withRouter: false });
+      
+      expect(clearPalette).toHaveBeenCalled();
+
+      // Simulate location change to login route
+      vi.mocked(clearPalette).mockClear();
+      (mockLocation as any).pathname = '/login';
+      
+      rerender(<PaceLoginPage appName="Test App" />);
+      
+      // clearPalette should be called again when pathname changes to login
+      expect(clearPalette).toHaveBeenCalled();
+    });
+
+    it('clears theme when location pathname starts with /login', () => {
+      (mockLocation as any).pathname = '/login/forgot-password';
+      
+      renderWithAuthContext(<PaceLoginPage appName="Test App" />, { withRouter: false });
+      
+      expect(clearPalette).toHaveBeenCalled();
+    });
+
+    it('does not clear theme when not on login route', () => {
+      (mockLocation as any).pathname = '/dashboard';
+      
+      renderWithAuthContext(<PaceLoginPage appName="Test App" />, { withRouter: false });
+      
+      // clearPalette is still called on mount, but not for pathname check
+      expect(clearPalette).toHaveBeenCalled();
+    });
+  });
+
+  describe('Event Service Integration', () => {
+    it('does not restore events when event service is not available', async () => {
+      window.history.pushState({}, '', '/login');
+
+      renderWithAuthContext(<PaceLoginPage appName="Test App" />, { withRouter: false });
+
+      // Should not crash when event service is not available
+      await waitFor(() => {
+        expect(screen.getByLabelText('Test App Login Page')).toBeInTheDocument();
+      });
+    });
+
+    it('handles event restoration errors gracefully', async () => {
+      const restorePersistedEvent = vi.fn().mockRejectedValue(new Error('Event restoration failed'));
+      window.history.pushState({}, '', '/login');
+
+      renderWithProviders(
+        <UnifiedAuthContext.Provider value={mockAuthContext as any}>
+          <EventServiceContext.Provider value={{ eventService: { restorePersistedEvent } as any }}>
+            <PaceLoginPage appName="Test App" />
+          </EventServiceContext.Provider>
+        </UnifiedAuthContext.Provider>
+      );
+
+      await waitFor(() => {
+        // Component should still render even if event restoration fails
+        expect(screen.getByLabelText('Test App Login Page')).toBeInTheDocument();
+      }, { timeout: 2000 });
+    });
+
+    it('does not restore events when not on login page', async () => {
+      const restorePersistedEvent = vi.fn().mockResolvedValue(undefined);
+      window.history.pushState({}, '', '/dashboard');
+
+      renderWithProviders(
+        <UnifiedAuthContext.Provider value={mockAuthContext as any}>
+          <EventServiceContext.Provider value={{ eventService: { restorePersistedEvent } as any }}>
+            <PaceLoginPage appName="Test App" />
+          </EventServiceContext.Provider>
+        </UnifiedAuthContext.Provider>
+      );
+
+      await waitFor(() => {
+        // Should not restore events when not on login page
+        expect(restorePersistedEvent).not.toHaveBeenCalled();
+      }, { timeout: 2000 });
+    });
+  });
+
+  describe('Missing Auth Context', () => {
+    it('shows loading state when auth context is missing', () => {
+      renderWithProviders(
+        <UnifiedAuthContext.Provider value={null as any}>
+          <PaceLoginPage appName="Test App" />
+        </UnifiedAuthContext.Provider>
+      );
+
+      expect(screen.getByText('Loading...')).toBeInTheDocument();
+    });
+
+    it('renders loading UI with correct structure when auth context is missing', () => {
+      renderWithProviders(
+        <UnifiedAuthContext.Provider value={null as any}>
+          <PaceLoginPage appName="Test App" />
+        </UnifiedAuthContext.Provider>
+      );
+
+      const main = screen.getByText('Loading...').closest('main');
+      expect(main).toBeInTheDocument();
+      expect(main).toHaveClass('min-h-screen', 'flex', 'items-center', 'justify-center');
+    });
+  });
+
+  describe('Form Submission Edge Cases', () => {
+    it('clears access error on new form submission', async () => {
+      const user = userEvent.setup();
+      vi.mocked(isSuperAdmin).mockResolvedValue({ ok: true, data: false });
+      mockAuthContext.isAuthenticated = true;
+      mockAuthContext.isLoading = false;
+      mockAuthContext.user = { id: 'user-7' } as User;
+      mockAuthContext.signIn.mockResolvedValue({ error: null });
+
+      const supabaseWithNoAccess = {
+        from: vi.fn((table: string) => {
+          if (table === 'rbac_apps') {
+            return {
+              select: vi.fn(() => ({
+                eq: vi.fn(() => ({
+                  eq: vi.fn(() => ({
+                    single: vi.fn(() => Promise.resolve({ data: null, error: new Error('missing') })),
+                  })),
+                })),
+              })),
+            };
+          }
+          return {
+            select: vi.fn(() => ({
+              eq: vi.fn(() => ({
+                eq: vi.fn(() => ({
+                  single: vi.fn(() => Promise.resolve({ data: null, error: null })),
+                })),
+              })),
+            })),
+          };
+        }),
+        rpc: vi.fn(() => Promise.resolve({ data: false, error: null })),
+      };
+      mockAuthContext.supabase = supabaseWithNoAccess as any;
+
+      renderWithAuthContext(
+        <PaceLoginPage appName="Test App" requireAppAccess />
+      );
+
+      // Wait for access error to appear
+      await waitFor(() => {
+        expect(screen.getByText(/is not configured/i)).toBeInTheDocument();
+      }, { timeout: 5000 });
+
+      // Submit form again
+      const emailInput = screen.getByLabelText('Email');
+      const passwordInput = screen.getByLabelText('Password');
+      const submitButton = screen.getByRole('button', { name: /sign in/i });
+
+      await user.type(emailInput, 'test@example.com');
+      await user.type(passwordInput, 'password123');
+      await user.click(submitButton);
+
+      // Access error should be cleared on new submission
+      await waitFor(() => {
+        expect(screen.queryByText(/is not configured/i)).not.toBeInTheDocument();
+      });
+    });
+
+    it('does not navigate when requireAppAccess is true and sign-in succeeds', async () => {
+      const user = userEvent.setup();
+      mockAuthContext.signIn.mockResolvedValue({ error: null });
+      mockAuthContext.isAuthenticated = true;
+      mockAuthContext.isLoading = false;
+      mockAuthContext.user = { id: 'user-8' } as User;
+
+      renderWithAuthContext(
+        <PaceLoginPage 
+          appName="Test App" 
+          requireAppAccess={true}
+          onSuccessRedirectPath="/dashboard"
+        />,
+        { withRouter: false }
+      );
+
+      const emailInput = screen.getByLabelText('Email');
+      const passwordInput = screen.getByLabelText('Password');
+      const submitButton = screen.getByRole('button', { name: /sign in/i });
+
+      await user.type(emailInput, 'test@example.com');
+      await user.type(passwordInput, 'password123');
+      await user.click(submitButton);
+
+      await waitFor(() => {
+        expect(mockAuthContext.signIn).toHaveBeenCalled();
+      });
+
+      // Should not navigate immediately - app access check will handle navigation
+      // The navigation will happen in the useEffect that checks app access
+      expect(mockNavigate).not.toHaveBeenCalledWith('/dashboard', { replace: true });
+    });
+  });
+
+  describe('Access Error Display', () => {
+    it('displays access error with correct styling', async () => {
+      vi.mocked(isSuperAdmin).mockResolvedValue({ ok: true, data: false });
+      mockAuthContext.isAuthenticated = true;
+      mockAuthContext.isLoading = false;
+      mockAuthContext.user = { id: 'user-9' } as User;
+
+      const supabaseWithError = {
+        from: vi.fn((table: string) => {
+          if (table === 'rbac_apps') {
+            return {
+              select: vi.fn(() => ({
+                eq: vi.fn(() => ({
+                  eq: vi.fn(() => ({
+                    single: vi.fn(() => Promise.resolve({ data: null, error: new Error('missing') })),
+                  })),
+                })),
+              })),
+            };
+          }
+          return {
+            select: vi.fn(() => ({
+              eq: vi.fn(() => ({
+                eq: vi.fn(() => ({
+                  single: vi.fn(() => Promise.resolve({ data: null, error: null })),
+                })),
+              })),
+            })),
+          };
+        }),
+        rpc: vi.fn(() => Promise.resolve({ data: false, error: null })),
+      };
+      mockAuthContext.supabase = supabaseWithError as any;
+
+      renderWithAuthContext(
+        <PaceLoginPage appName="Test App" requireAppAccess />
+      );
+
+      await waitFor(() => {
+        const errorElement = screen.getByText(/is not configured/i);
+        expect(errorElement).toBeInTheDocument();
+        expect(errorElement).toHaveClass('mt-4', 'text-destructive', 'text-center');
+        expect(errorElement.tagName).toBe('EM');
+      }, { timeout: 5000 });
+    });
+
+    it('displays checking permissions message during access check', async () => {
+      vi.mocked(isSuperAdmin).mockImplementation(() => new Promise(() => {})); // Never resolves
+      mockAuthContext.isAuthenticated = true;
+      mockAuthContext.isLoading = false;
+      mockAuthContext.user = { id: 'user-10' } as User;
+
+      const supabaseChecking = {
+        from: vi.fn((table: string) => {
+          if (table === 'rbac_apps') {
+            return {
+              select: vi.fn(() => ({
+                eq: vi.fn(() => ({
+                  eq: vi.fn(() => ({
+                    single: vi.fn(() => new Promise(() => {})), // Never resolves
+                  })),
+                })),
+              })),
+            };
+          }
+          return {
+            select: vi.fn(() => ({
+              eq: vi.fn(() => ({
+                eq: vi.fn(() => ({
+                  single: vi.fn(() => Promise.resolve({ data: null, error: null })),
+                })),
+              })),
+            })),
+          };
+        }),
+        rpc: vi.fn(() => Promise.resolve({ data: false, error: null })),
+      };
+      mockAuthContext.supabase = supabaseChecking as any;
+
+      renderWithAuthContext(
+        <PaceLoginPage appName="Test App" requireAppAccess />
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText('Checking permissions...')).toBeInTheDocument();
+      }, { timeout: 2000 });
+    });
+  });
+
+  describe('RBAC Permission Checking Details', () => {
+    it('checks all pages when user has no permission on first page', async () => {
+      vi.mocked(isSuperAdmin).mockResolvedValue({ ok: true, data: false });
+      mockAuthContext.isAuthenticated = true;
+      mockAuthContext.isLoading = false;
+      mockAuthContext.user = { id: 'user-11' } as User;
+
+      const createOrganisationRolesQuery = (result: { data: unknown; error: unknown }) => {
+        const query = {
+          select: vi.fn(),
+          eq: vi.fn(),
+          is: vi.fn(),
+          limit: vi.fn(),
+        };
+
+        query.select.mockReturnValue(query);
+        query.eq.mockReturnValue(query);
+        query.is.mockReturnValue(query);
+        query.limit.mockImplementation(() => ({
+          maybeSingle: vi.fn(() => Promise.resolve(result)),
+        }));
+
+        return query;
+      };
+
+      let rpcCallCount = 0;
+      const supabaseCheckingAllPages = {
+        from: vi.fn((table: string) => {
+          if (table === 'rbac_apps') {
+            return {
+              select: vi.fn(() => ({
+                eq: vi.fn(() => ({
+                  eq: vi.fn(() => ({
+                    single: vi.fn(() => Promise.resolve({ data: { id: 'app-1', name: 'Test App', is_active: true }, error: null })),
+                  })),
+                })),
+              })),
+            };
+          }
+
+          if (table === 'rbac_app_pages') {
+            return {
+              select: vi.fn(() => ({
+                eq: vi.fn(() => Promise.resolve({ data: [
+                  { id: 'page-1', page_name: 'dashboard' },
+                  { id: 'page-2', page_name: 'settings' },
+                  { id: 'page-3', page_name: 'reports' }
+                ], error: null })),
+              })),
+            };
+          }
+
+          if (table === 'rbac_organisation_roles') {
+            return createOrganisationRolesQuery({ data: { organisation_id: 'org-1' }, error: null });
+          }
+
+          return {
+            select: vi.fn(() => ({
+              eq: vi.fn(() => ({
+                eq: vi.fn(() => ({
+                  single: vi.fn(() => Promise.resolve({ data: null, error: null })),
+                })),
+              })),
+            })),
+          };
+        }),
+        rpc: vi.fn((fnName: string, params: any) => {
+          rpcCallCount++;
+          // Grant permission only on the third page
+          if (params.p_permission === 'read:page.reports') {
+            return Promise.resolve({ data: true, error: null });
+          }
+          return Promise.resolve({ data: false, error: null });
+        }),
+      };
+
+      mockAuthContext.supabase = supabaseCheckingAllPages as any;
+
+      renderWithAuthContext(
+        <PaceLoginPage appName="Test App" requireAppAccess onSuccessRedirectPath="/dashboard" />
+      );
+
+      await waitFor(() => {
+        expect(mockNavigate).toHaveBeenCalledWith('/dashboard', { replace: true });
+      }, { timeout: 5000 });
+
+      // Should have checked all three pages
+      expect(rpcCallCount).toBeGreaterThanOrEqual(3);
+    });
+
+    it('stops checking pages once permission is found', async () => {
+      vi.mocked(isSuperAdmin).mockResolvedValue({ ok: true, data: false });
+      mockAuthContext.isAuthenticated = true;
+      mockAuthContext.isLoading = false;
+      mockAuthContext.user = { id: 'user-12' } as User;
+
+      const createOrganisationRolesQuery = (result: { data: unknown; error: unknown }) => {
+        const query = {
+          select: vi.fn(),
+          eq: vi.fn(),
+          is: vi.fn(),
+          limit: vi.fn(),
+        };
+
+        query.select.mockReturnValue(query);
+        query.eq.mockReturnValue(query);
+        query.is.mockReturnValue(query);
+        query.limit.mockImplementation(() => ({
+          maybeSingle: vi.fn(() => Promise.resolve(result)),
+        }));
+
+        return query;
+      };
+
+      let rpcCallCount = 0;
+      const supabaseStoppingEarly = {
+        from: vi.fn((table: string) => {
+          if (table === 'rbac_apps') {
+            return {
+              select: vi.fn(() => ({
+                eq: vi.fn(() => ({
+                  eq: vi.fn(() => ({
+                    single: vi.fn(() => Promise.resolve({ data: { id: 'app-1', name: 'Test App', is_active: true }, error: null })),
+                  })),
+                })),
+              })),
+            };
+          }
+
+          if (table === 'rbac_app_pages') {
+            return {
+              select: vi.fn(() => ({
+                eq: vi.fn(() => Promise.resolve({ data: [
+                  { id: 'page-1', page_name: 'dashboard' },
+                  { id: 'page-2', page_name: 'settings' },
+                  { id: 'page-3', page_name: 'reports' }
+                ], error: null })),
+              })),
+            };
+          }
+
+          if (table === 'rbac_organisation_roles') {
+            return createOrganisationRolesQuery({ data: { organisation_id: 'org-1' }, error: null });
+          }
+
+          return {
+            select: vi.fn(() => ({
+              eq: vi.fn(() => ({
+                eq: vi.fn(() => ({
+                  single: vi.fn(() => Promise.resolve({ data: null, error: null })),
+                })),
+              })),
+            })),
+          };
+        }),
+        rpc: vi.fn((fnName: string, params: any) => {
+          rpcCallCount++;
+          // Grant permission on the first page - should stop checking
+          if (params.p_permission === 'read:page.dashboard') {
+            return Promise.resolve({ data: true, error: null });
+          }
+          return Promise.resolve({ data: false, error: null });
+        }),
+      };
+
+      mockAuthContext.supabase = supabaseStoppingEarly as any;
+
+      renderWithAuthContext(
+        <PaceLoginPage appName="Test App" requireAppAccess onSuccessRedirectPath="/dashboard" />
+      );
+
+      await waitFor(() => {
+        expect(mockNavigate).toHaveBeenCalledWith('/dashboard', { replace: true });
+      }, { timeout: 5000 });
+
+      // Should have stopped after finding permission on first page
+      expect(rpcCallCount).toBe(1);
+    });
+  });
+
+  describe('Loading States', () => {
+    it('shows checking permissions message during access check', async () => {
+      vi.mocked(isSuperAdmin).mockImplementation(() => new Promise(() => {})); // Never resolves
+      mockAuthContext.isAuthenticated = true;
+      mockAuthContext.isLoading = false;
+      mockAuthContext.user = { id: 'user-13' } as User;
+
+      const supabaseSlow = {
+        from: vi.fn((table: string) => {
+          if (table === 'rbac_apps') {
+            return {
+              select: vi.fn(() => ({
+                eq: vi.fn(() => ({
+                  eq: vi.fn(() => ({
+                    single: vi.fn(() => new Promise(() => {})), // Never resolves
+                  })),
+                })),
+              })),
+            };
+          }
+          return {
+            select: vi.fn(() => ({
+              eq: vi.fn(() => ({
+                eq: vi.fn(() => ({
+                  single: vi.fn(() => Promise.resolve({ data: null, error: null })),
+                })),
+              })),
+            })),
+          };
+        }),
+        rpc: vi.fn(() => Promise.resolve({ data: false, error: null })),
+      };
+      mockAuthContext.supabase = supabaseSlow as any;
+
+      renderWithAuthContext(
+        <PaceLoginPage appName="Test App" requireAppAccess />
+      );
+
+      await waitFor(() => {
+        const checkingMessage = screen.getByText('Checking permissions...');
+        expect(checkingMessage).toBeInTheDocument();
+        expect(checkingMessage).toHaveClass('mt-4', 'text-muted-foreground', 'text-center');
+        expect(checkingMessage.tagName).toBe('EM');
+      }, { timeout: 2000 });
+    });
+
+    it('does not show checking message when requireAppAccess is false', () => {
+      mockAuthContext.isAuthenticated = true;
+      mockAuthContext.isLoading = false;
+
+      renderWithAuthContext(
+        <PaceLoginPage appName="Test App" requireAppAccess={false} />
+      );
+
+      expect(screen.queryByText('Checking permissions...')).not.toBeInTheDocument();
+    });
   });
 });