@ulfblk/admin

React Admin DataProvider and AuthProvider for the ulfblk ecosystem.

Installation

pnpm add @ulfblk/admin react-admin

Quick Start

import { Admin, Resource, ListGuesser, EditGuesser } from "react-admin";
import { BloqueClient } from "@ulfblk/api-client";
import { createDataProvider, createAuthProvider } from "@ulfblk/admin";

const client = new BloqueClient({ baseUrl: "http://localhost:8000" });
const dataProvider = createDataProvider(client);
const authProvider = createAuthProvider(client);

function App() {
  return (
    <Admin dataProvider={dataProvider} authProvider={authProvider}>
      <Resource name="users" list={ListGuesser} edit={EditGuesser} />
      <Resource name="orders" list={ListGuesser} edit={EditGuesser} />
    </Admin>
  );
}

Features

DataProvider: CRUD operations via BloqueClient with FastAPI-compatible query serialization (qs with arrayFormat: 'repeat')
AuthProvider: JWT login/logout with client-side token validation via jwt-decode
Tenant-aware: BloqueClient's tenant interceptor handles tenant context automatically
Configurable: Custom basePath, query serializer, login path
Error handling: Maps HTTP errors to react-admin's HttpError (401 -> re-login, 403 -> access denied)
Batch operations: deleteMany/updateMany execute in batches of 5 to avoid overwhelming the backend

Options

// Custom base path
const dataProvider = createDataProvider(client, { basePath: "/v1" });

// Custom login endpoint
const authProvider = createAuthProvider(client, { loginPath: "/auth/login" });

// Multi-tenant: switch tenants dynamically
client.setTenantId("acme");
// All subsequent requests include tenant context via interceptor

Backend Requirements

The DataProvider expects standard REST endpoints:

Method	Endpoint	react-admin method
GET	`{basePath}/{resource}`	getList, getMany
GET	`{basePath}/{resource}/{id}`	getOne
POST	`{basePath}/{resource}`	create
PUT	`{basePath}/{resource}/{id}`	update
DELETE	`{basePath}/{resource}/{id}`	delete

List responses must match PaginatedResponse:

{ "items": [...], "total": 100 }