Function ProtectedRoute

frontend/src/components/auth/ProtectedRoute.tsx:20–218

({
  children,
  fallback,
  requireAuth = true,
  requireOrg = false,
  roles = [],
  redirectTo,
})

}

export const ProtectedRoute: React.FC<ProtectedRouteProps> = ({
  children,
  fallback,
  requireAuth = true,
  requireOrg = false,
  roles = [],
  redirectTo,
}) => {
  // All hooks must be called unconditionally at the top
  const { isAuthenticated, isLoading, user } = useAuth();
  const authProvider = useAuthProvider();
  const { openSignIn, isOpen, close } = useAuthModal();
  const adminUsername = useAuthStore((state) => state.adminUsername);
  const adminPassword = useAuthStore((state) => state.adminPassword);

  // Track whether we've attempted to open the sign-in dialog
  const [signInAttempted, setSignInAttempted] = useState(false);

  // Function to trigger sign-in (can be called manually)
  const triggerSignIn = useCallback(() => {
    if (authProvider.name === 'clerk') {
      setSignInAttempted(true);
      authProvider.signIn();
    }
  }, [authProvider]);

  // Automatically trigger sign-in for Clerk when not authenticated (only once on mount)
  useEffect(() => {
    if (
      !isLoading &&
      !isAuthenticated &&
      requireAuth &&
      authProvider.name === 'clerk' &&
      !signInAttempted
    ) {
      triggerSignIn();
    }
  }, [isLoading, isAuthenticated, requireAuth, authProvider, signInAttempted, triggerSignIn]);

  // Reset signInAttempted when user becomes authenticated (for future sign-outs)
  useEffect(() => {
    if (isAuthenticated) {
      setSignInAttempted(false);
    }
  }, [isAuthenticated]);

  // Compute derived values after hooks
  const isLocalAuth = authProvider.name === 'local';
  const hasLocalCredentials = !!(adminUsername && adminPassword);

  // Show loading state
  if (isLoading) {
    return (
      <div className="flex items-center justify-center min-h-96">
        <div className="flex items-center space-x-2 text-muted-foreground">
          <Shield className="w-6 h-6 animate-pulse" />
          <span>Checking authentication...</span>
        </div>