@authhero/react-admin 0.23.0 → 0.25.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @authhero/react-admin
 
+## 0.25.0
+
+### Minor Changes
+
+- 7bf78f7: Add deploy buttons for react-admin
+
+## 0.24.0
+
+### Minor Changes
+
+- 9d6cfb8: Wrap adapters as part of the multi-tenant package
+
+### Patch Changes
+
+- Updated dependencies [9d6cfb8]
+  - @authhero/adapter-interfaces@0.122.0
+  - @authhero/widget@0.7.1
+
 ## 0.23.0
 
 ### Minor Changes

package/README.md

@@ -1,5 +1,10 @@
 # react-admin
 
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fauthhero%2Fauthhero&env=VITE_AUTH0_DOMAIN,VITE_AUTH0_CLIENT_ID,VITE_AUTH0_API_URL,VITE_SINGLE_DOMAIN_MODE&envDescription=Configure%20your%20AuthHero%20connection.%20Set%20VITE_SINGLE_DOMAIN_MODE%20to%20%22true%22%20to%20skip%20domain%20selector.&envLink=https%3A%2F%2Fgithub.com%2Fauthhero%2Fauthhero%2Fblob%2Fmain%2Fapps%2Freact-admin%2FREADME.md&project-name=authhero-admin&repository-name=authhero-admin&root-directory=apps%2Freact-admin&build-command=pnpm%20run%20build&output-directory=dist&install-command=corepack%20enable%20%26%26%20corepack%20prepare%20pnpm%4010.11.0%20--activate%20%26%26%20pnpm%20install%20--no-frozen-lockfile)
+[![Deploy to Cloudflare Pages](https://deploy.workers.cloudflare.com/button)](https://deploy.workers.cloudflare.com/?url=https://github.com/authhero/authhero)
+
+> **Cloudflare Pages Setup:** Select "Pages" during setup, set root directory to `apps/react-admin`, build command to `pnpm run build`, and output directory to `dist`. Add environment variables `VITE_AUTH0_DOMAIN`, `VITE_AUTH0_CLIENT_ID`, `VITE_AUTH0_API_URL`, and `VITE_SINGLE_DOMAIN_MODE`.
+
 ## Installation
 
 Install the application dependencies by running:
@@ -26,6 +31,9 @@ VITE_AUTH0_API_URL=https://auth2.sesamy.com
 VITE_AUTH0_DOMAIN=localhost:3000
 VITE_AUTH0_CLIENT_ID=auth-admin
 VITE_AUTH0_API_URL=https://localhost:3000
+
+# Optional: Skip domain selector and use configured domain directly
+VITE_SINGLE_DOMAIN_MODE=true
 ```
 
 See `.env.example` for more details.
@@ -33,7 +41,8 @@ See `.env.example` for more details.
 **Notes:**
 
 - If `VITE_AUTH0_DOMAIN` is set, it will be automatically added to the domain list
-- Users can still add additional domains through the UI
+- Users can still add additional domains through the UI (unless `VITE_SINGLE_DOMAIN_MODE=true`)
+- Set `VITE_SINGLE_DOMAIN_MODE=true` to skip the domain selector entirely
 
 ## Development
 
@@ -55,6 +64,12 @@ npm run build
 yarn build
 ```
 
+## Deployment
+
+The React Admin application can be deployed to Vercel. See the [Vercel deployment guide](../docs/deployment-targets/vercel.md) for detailed instructions.
+
+**Important:** When deploying to Vercel, you must set the environment variable `ENABLE_EXPERIMENTAL_COREPACK=1` to avoid build errors with pnpm.
+
 ## DataProvider
 
 The included data provider use [FakeREST](https://github.com/marmelab/fakerest) to simulate a backend.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@authhero/react-admin",
-  "version": "0.23.0",
+  "version": "0.25.0",
   "packageManager": "pnpm@10.20.0",
   "private": false,
   "repository": {

package/src/auth0DataProvider.ts

@@ -88,6 +88,65 @@ function createHeaders(tenantId?: string): Headers {
   return headers;
 }
 
+// Helper for client-side paging, sorting, and search on pre-fetched data
+interface ClientSideListParams {
+  data: any[];
+  page: number;
+  perPage: number;
+  sortField?: string;
+  sortOrder?: "ASC" | "DESC";
+  searchQuery?: string;
+  searchFields?: string[];
+  idKey?: string;
+}
+
+function clientSideListHandler({
+  data,
+  page,
+  perPage,
+  sortField,
+  sortOrder,
+  searchQuery,
+  searchFields = ["name"],
+  idKey = "id",
+}: ClientSideListParams): { data: any[]; total: number } {
+  let filtered = data;
+
+  // Apply client-side search filter
+  if (searchQuery) {
+    const query = searchQuery.toLowerCase();
+    filtered = data.filter((item: any) =>
+      searchFields.some((field) =>
+        item[field]?.toString().toLowerCase().includes(query),
+      ),
+    );
+  }
+
+  // Apply client-side sorting
+  if (sortField) {
+    filtered = [...filtered].sort((a: any, b: any) => {
+      const aVal = a[sortField] || "";
+      const bVal = b[sortField] || "";
+      const comparison = String(aVal).localeCompare(String(bVal));
+      return sortOrder === "DESC" ? -comparison : comparison;
+    });
+  }
+
+  // Apply client-side pagination
+  const total = filtered.length;
+  const startIndex = (page - 1) * perPage;
+  const endIndex = startIndex + perPage;
+  const paged = filtered.slice(startIndex, endIndex);
+
+  return {
+    data: paged.map((item: any) => ({
+      id: item[idKey] || item.id,
+      ...item,
+    })),
+    total,
+  };
+}
+
 // Helper to handle singleton resource fetching
 async function fetchSingleton(
   resource: string,
@@ -201,15 +260,7 @@ export default (
           resourceKey: "resource_servers",
           idKey: "id",
         },
-        organizations: {
-          fetch: (client) =>
-            client.organizations.list({
-              from: String((page - 1) * (perPage || 10)),
-              take: perPage || 10,
-            }),
-          resourceKey: "organizations",
-          idKey: "id",
-        },
+        // Organizations handled separately with client-side paging/search
         // Logs removed from SDK handlers - using HTTP directly for full control
         rules: {
           fetch: (client) => client.rules.list(),
@@ -273,6 +324,26 @@ export default (
         );
       }
 
+      // Handle organizations with client-side paging and search (fetch 500, filter locally)
+      if (resource === "organizations" && !resourcePath.includes("/")) {
+        const result = await managementClient.organizations.list({
+          from: "0",
+          take: 500,
+        });
+        const { data: allOrgs } = normalizeSDKResponse(result, "organizations");
+
+        return clientSideListHandler({
+          data: allOrgs,
+          page,
+          perPage: perPage || 10,
+          sortField: field,
+          sortOrder: order,
+          searchQuery: params.filter?.q,
+          searchFields: ["name", "display_name"],
+          idKey: "id",
+        });
+      }
+
       // Handle logs with direct HTTP for full control over query params
       if (resource === "logs") {
         const headers = createHeaders(tenantId);

package/src/index.tsx

@@ -11,9 +11,20 @@ import { getSelectedDomainFromStorage } from "./utils/domainUtils";
 const isLocalDevelopment = window.location.hostname.startsWith("local.");
 const LOCAL_DOMAIN = "localhost:3000";
 
+// Check if single domain mode is enabled - skips the domain selector entirely
+const isSingleDomainMode = import.meta.env.VITE_SINGLE_DOMAIN_MODE === "true";
+const envDomain = import.meta.env.VITE_AUTH0_DOMAIN;
+
 function Root() {
+  // In single domain mode, always use the configured domain from env
+  const getInitialDomain = () => {
+    if (isLocalDevelopment) return LOCAL_DOMAIN;
+    if (isSingleDomainMode && envDomain) return envDomain;
+    return null;
+  };
+
   const [selectedDomain, setSelectedDomain] = useState<string | null>(
-    isLocalDevelopment ? LOCAL_DOMAIN : null,
+    getInitialDomain(),
   );
   const currentPath = location.pathname;
   const isAuthCallback = currentPath === "/auth-callback";
@@ -24,10 +35,10 @@ function Root() {
     currentPath.startsWith("/tenants/create") ||
     currentPath === "/tenants/";
 
-  // Load domain from cookies on component mount (skip for local development)
+  // Load domain from cookies on component mount (skip for local development and single domain mode)
   useEffect(() => {
-    if (isLocalDevelopment) {
-      // For local development, always use localhost:3000
+    if (isLocalDevelopment || isSingleDomainMode) {
+      // For local development or single domain mode, always use the configured domain
       return;
     }
     const savedDomain = getSelectedDomainFromStorage();
@@ -48,8 +59,8 @@ function Root() {
   }
 
   // Show domain selector on root path or if no domain is selected
-  // Skip for local development - redirect to /tenants instead
-  if (!isLocalDevelopment && (isRootPath || !selectedDomain)) {
+  // Skip for local development and single domain mode - redirect to /tenants instead
+  if (!isLocalDevelopment && !isSingleDomainMode && (isRootPath || !selectedDomain)) {
     return (
       <DomainSelector
         onDomainSelected={(domain) => setSelectedDomain(domain)}
@@ -58,6 +69,12 @@ function Root() {
     );
   }
 
+  // For single domain mode on root path, redirect to /tenants
+  if (isSingleDomainMode && isRootPath) {
+    window.location.href = "/tenants";
+    return null;
+  }
+
   // For local development on root path, redirect to /tenants
   if (isLocalDevelopment && isRootPath) {
     window.location.href = "/tenants";

package/vercel.json

@@ -13,5 +13,5 @@
       "destination": "/index.html"
     }
   ],
-  "installCommand": "pnpm install --no-frozen-lockfile"
+  "installCommand": "corepack enable && corepack prepare pnpm@10.11.0 --activate && pnpm install --no-frozen-lockfile"
 }