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.

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:

@BrowserCallable
@AnonymousAllowed
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.

<AuthProvider> <RouterProvider router={router} /> </AuthProvider>

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.

<properties>
  <hilla.version>2.3.1</hilla.version>
  <!-- ... -->
</properties>

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.