October 18, 2023Marcus Hellberg

Hilla 2.3 introduces streamlined grid creation and security helpers

Hilla 2.3 is out! This release includes a new AutoGrid component and authentication helpers for React.

๐Ÿช„ AutoGrid: a fully-featured grid in one line of code

AutoGrid allows you to configure a Grid component to automatically fetch data from the backend. It supports pagination, sorting, and filtering out of the box.

<AutoGrid service={ProductService} model={ProductModel} />

An automatically created grid with filtering, sorting, and lazy loading.
An automatically created grid with filtering, sorting, and lazy loading.

To work with AutoGrid, your backend service needs to implement the ListService interface. If you are using Spring Data, you can also use the ListRepositoryService for convenience:

public class ProductService extends ListRepositoryService<Product, Long, ProductRepository> {

Read more about AutoGrid in the documentation.

๐Ÿ›ก๏ธ React authentication helpers

Hilla 2.3 also adds new authentication helpers for React frontends.

AuthProvider allows you to provide access to authentication information in your React components.

  <RouterProvider router={router} />

The protectRoutes helper lets you define which routes require authentication. You can define either a list of roles or require the user to be logged in.

export const routes: RouteObject[] = protectRoutes([
    path: "/products",
    element: <ProductsView />,
    handle: {
      rolesAllowed: ["ADMIN"],
    path: "/about",
    element: <AboutView />,
    handle: {
      requiresLogin: true,
    path: "/login",
    element: <LoginView />,

Finally, the useAuth hook allows you to access the authentication information and login/logout functionality in your components.

export default function HelloWorldView() {
  const {
    state: { user },
  } = useAuth();

  return <h1>Hello {user ? user.name : "stranger"}!</h1>;

๐Ÿ“ฆ How to upgrade

Upgrade your project by updating the Hilla version property in your pom.xml file.

  <!-- ... -->

If you don't already have a project, you can create one with the Hilla CLI:

npx @hilla/cli create my-app

๐Ÿ“š Full release notes

Read the full release notes on GitHub.

Marcus Hellberg

Marcus Hellberg

Marcus is the VP of Developer Relations at Vaadin. His daily work includes everything from writing blogs and tech demos to attending events and giving presentations on all things Vaadin and web-related.

ยฉ 2024 Vaadin. All rights reserved