@authhero/react-admin 0.13.0 → 0.15.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @authhero/react-admin
 
+## 0.15.0
+
+### Minor Changes
+
+- aaf0aa0: Fix paging issue for scopes
+
+## 0.14.0
+
+### Minor Changes
+
+- 63f9c89: Remove requirement for password users to have verified emails
+- 63f9c89: Fix the listing of logs for a user
+
 ## 0.13.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@authhero/react-admin",
-  "version": "0.13.0",
+  "version": "0.15.0",
   "private": false,
   "repository": {
     "type": "git",
@@ -26,6 +26,7 @@
     "react-admin": "^5.8.0",
     "react-admin-color-picker": "^1.0.3",
     "react-dom": "^19.1.0",
+    "react-hook-form": "^7.69.0",
     "react-router-dom": "^7.6.0",
     "recharts": "^2.15.0"
   },

package/src/auth0DataProvider.ts

@@ -205,29 +205,7 @@ export default (
           resourceKey: "organizations",
           idKey: "id",
         },
-        logs: {
-          fetch: (client) => {
-            // Build the query string, combining search query and IP filter
-            let query = params.filter?.q || "";
-            if (params.filter?.ip) {
-              const ipQuery = `ip:${params.filter.ip}`;
-              query = query ? `${query} AND ${ipQuery}` : ipQuery;
-            }
-
-            return client.logs.list({
-              page: page - 1,
-              per_page: perPage,
-              q: query || undefined,
-              sort:
-                field && order
-                  ? `${field}:${order === "DESC" ? "-1" : "1"}`
-                  : undefined,
-              include_totals: true,
-            });
-          },
-          resourceKey: "logs",
-          idKey: "log_id",
-        },
+        // Logs removed from SDK handlers - using HTTP directly for full control
         rules: {
           fetch: (client) => client.rules.list(),
           resourceKey: "rules",
@@ -257,9 +235,9 @@ export default (
         },
       };
 
-      // Handle SDK resources
+      // Handle SDK resources (only for top-level resources, not nested paths like users/{id}/roles)
       const handler = sdkHandlers[resource];
-      if (handler) {
+      if (handler && !resourcePath.includes("/")) {
         const result = await handler.fetch(managementClient);
         const { data, total } = normalizeSDKResponse(
           result,
@@ -285,6 +263,35 @@ export default (
         );
       }
 
+      // Handle logs with direct HTTP for full control over query params
+      if (resource === "logs") {
+        const headers = createHeaders(tenantId);
+        const query: any = {
+          include_totals: true,
+          page: page - 1,
+          per_page: perPage,
+          sort:
+            field && order
+              ? `${field}:${order === "DESC" ? "-1" : "1"}`
+              : undefined,
+          ...params.filter, // Pass all filter params directly (q, from, etc.)
+        };
+        const url = `${apiUrl}/api/v2/logs?${stringify(query)}`;
+
+        const res = await httpClient(url, { headers });
+        const response = res.json;
+        const logsData = response.logs || response || [];
+        const logsArray = Array.isArray(logsData) ? logsData : [];
+
+        return {
+          data: logsArray.map((log: any) => ({
+            id: log.log_id || log.id,
+            ...log,
+          })),
+          total: response.total || logsArray.length,
+        };
+      }
+
       // Handle stats/daily endpoint
       if (resourcePath === "stats/daily") {
         const headers = createHeaders(tenantId);
@@ -704,9 +711,10 @@ export default (
         };
       }
 
-      // Logs filtered by user_id
+      // Logs filtered by user_id - use direct HTTP for full control
       if (resource === "logs" && params.target === "user_id") {
-        const result = await managementClient.logs.list({
+        const headers = createHeaders(tenantId);
+        const query = {
           page: page - 1,
           per_page: perPage,
           q: `user_id:${params.id}`,
@@ -715,12 +723,21 @@ export default (
               ? `${field}:${order === "DESC" ? "-1" : "1"}`
               : undefined,
           include_totals: true,
-        });
+          ...params.filter, // Allow additional filters to be passed through
+        };
+        const url = `${apiUrl}/api/v2/logs?${stringify(query)}`;
+
+        const res = await httpClient(url, { headers });
+        const response = res.json;
+        const logsData = response.logs || response || [];
+        const logsArray = Array.isArray(logsData) ? logsData : [];
 
-        const normalized = normalizeSDKResponse(result, "logs");
         return {
-          data: normalized.data.map((log: any) => ({ id: log.log_id, ...log })),
-          total: normalized.total,
+          data: logsArray.map((log: any) => ({
+            id: log.log_id || log.id,
+            ...log,
+          })),
+          total: response.total || logsArray.length,
         };
       }
 

package/src/authProvider.ts

@@ -196,12 +196,35 @@ export const createManagementClient = async (
       const orgAuth0Client = createAuth0ClientForOrg(domainForAuth, tenantId);
       const audience =
         import.meta.env.VITE_AUTH0_AUDIENCE || "urn:authhero:management";
-      token = await orgAuth0Client.getTokenSilently({
-        authorizationParams: {
-          audience,
-          organization: tenantId,
-        },
-      });
+      try {
+        token = await orgAuth0Client.getTokenSilently({
+          authorizationParams: {
+            audience,
+            organization: tenantId,
+          },
+        });
+      } catch (error) {
+        // If silent token acquisition fails, redirect to login with org
+        // Get the base auth0 client to get the user's email for login hint
+        const baseClient = createAuth0Client(domainForAuth);
+        const user = await baseClient.getUser().catch(() => null);
+
+        // Redirect to login with organization
+        await orgAuth0Client.loginWithRedirect({
+          authorizationParams: {
+            organization: tenantId,
+            login_hint: user?.email,
+          },
+          appState: {
+            returnTo: window.location.pathname,
+          },
+        });
+
+        // This won't be reached as loginWithRedirect redirects the page
+        throw new Error(
+          `Redirecting to login for organization ${tenantId}`,
+        );
+      }
     } else {
       // For token/client_credentials, use getOrganizationToken
       token = await getOrganizationToken(domainConfig, tenantId);
@@ -829,7 +852,7 @@ export const createOrganizationHttpClient = (organizationId: string) => {
             organization: organizationId,
           },
         })
-        .catch(async (error) => {
+        .catch(async (_error) => {
           // If silent token acquisition fails, we need to redirect to login with org
           // Get the base auth0 client to get the user's email for login hint
           const baseClient = createAuth0Client(selectedDomain);

package/src/components/clients/edit.tsx

@@ -55,7 +55,7 @@ import EditIcon from "@mui/icons-material/Edit";
 import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
 import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
 import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
-import { authorizedHttpClient } from "../../authProvider";
+import { createOrganizationHttpClient } from "../../authProvider";
 import {
   getDomainFromStorage,
   getSelectedDomainFromStorage,
@@ -864,8 +864,10 @@ const ConnectionsTab = () => {
     setLoading(true);
     try {
       // Fetch enabled connections from the new API endpoint
+      // Use organization-scoped HTTP client to ensure proper org_id in token
       const baseUrl = getApiBaseUrl();
-      const response = await authorizedHttpClient(
+      const orgHttpClient = createOrganizationHttpClient(tenantId);
+      const response = await orgHttpClient(
         `${baseUrl}/api/v2/clients/${clientId}/connections`,
         {
           method: "GET",
@@ -926,8 +928,10 @@ const ConnectionsTab = () => {
 
     setSaving(true);
     try {
+      // Use organization-scoped HTTP client to ensure proper org_id in token
       const baseUrl = getApiBaseUrl();
-      await authorizedHttpClient(
+      const orgHttpClient = createOrganizationHttpClient(tenantId);
+      await orgHttpClient(
         `${baseUrl}/api/v2/clients/${clientId}/connections`,
         {
           method: "PATCH",

package/src/components/resource-servers/edit.tsx

@@ -2,8 +2,6 @@ import {
   Edit,
   TextInput,
   BooleanInput,
-  ArrayInput,
-  SimpleFormIterator,
   TextField,
   TabbedForm,
   required,
@@ -11,7 +9,11 @@ import {
   FormDataConsumer,
   useRecordContext,
 } from "react-admin";
-import { Stack, Alert } from "@mui/material";
+import { Stack, Alert, Pagination, Box, Typography, Button, IconButton, TextField as MuiTextField } from "@mui/material";
+import DeleteIcon from "@mui/icons-material/Delete";
+import AddIcon from "@mui/icons-material/Add";
+import { useState, useMemo, useCallback } from "react";
+import { useFormContext, useWatch } from "react-hook-form";
 
 function SystemEntityAlert() {
   const record = useRecordContext();
@@ -26,6 +28,131 @@ function SystemEntityAlert() {
   );
 }
 
+const SCOPES_PER_PAGE = 10;
+
+interface Scope {
+  value: string;
+  description?: string;
+}
+
+function PaginatedScopesInput({ disabled }: { disabled?: boolean }) {
+  const { setValue, getValues } = useFormContext();
+  const scopes: Scope[] = useWatch({ name: "scopes" }) || [];
+  const [page, setPage] = useState(1);
+
+  const totalPages = Math.max(1, Math.ceil(scopes.length / SCOPES_PER_PAGE));
+  
+  const paginatedScopes = useMemo(() => {
+    const start = (page - 1) * SCOPES_PER_PAGE;
+    const end = start + SCOPES_PER_PAGE;
+    return scopes.slice(start, end).map((scope, index) => ({
+      ...scope,
+      actualIndex: start + index,
+    }));
+  }, [scopes, page]);
+
+  const handlePageChange = (_event: React.ChangeEvent<unknown>, value: number) => {
+    setPage(value);
+  };
+
+  const handleAdd = useCallback(() => {
+    const currentScopes = getValues("scopes") || [];
+    setValue("scopes", [...currentScopes, { value: "", description: "" }], { shouldDirty: true });
+    // Navigate to the last page where the new item will be
+    const newTotalPages = Math.ceil((currentScopes.length + 1) / SCOPES_PER_PAGE);
+    setPage(newTotalPages);
+  }, [getValues, setValue]);
+
+  const handleRemove = useCallback((actualIndex: number) => {
+    const currentScopes = getValues("scopes") || [];
+    const newScopes = currentScopes.filter((_: Scope, i: number) => i !== actualIndex);
+    setValue("scopes", newScopes, { shouldDirty: true });
+    // Adjust page if we removed the last item on current page
+    const newTotalPages = Math.ceil(newScopes.length / SCOPES_PER_PAGE);
+    if (page > newTotalPages && newTotalPages > 0) {
+      setPage(newTotalPages);
+    }
+  }, [getValues, setValue, page]);
+
+  const handleScopeChange = useCallback((actualIndex: number, field: "value" | "description", newValue: string) => {
+    const currentScopes = getValues("scopes") || [];
+    const newScopes = [...currentScopes];
+    newScopes[actualIndex] = { ...newScopes[actualIndex], [field]: newValue };
+    setValue("scopes", newScopes, { shouldDirty: true });
+  }, [getValues, setValue]);
+
+  return (
+    <Box>
+      <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2 }}>
+        <Typography variant="body2" color="text.secondary">
+          {scopes.length} scope{scopes.length !== 1 ? "s" : ""} total
+        </Typography>
+        {!disabled && (
+          <Button
+            startIcon={<AddIcon />}
+            onClick={handleAdd}
+            size="small"
+            variant="outlined"
+          >
+            Add Scope
+          </Button>
+        )}
+      </Box>
+
+      {paginatedScopes.map((scope) => (
+        <Stack
+          key={scope.actualIndex}
+          spacing={2}
+          direction="row"
+          sx={{ width: "100%", alignItems: "flex-start", mb: 2 }}
+        >
+          <MuiTextField
+            value={scope.value || ""}
+            onChange={(e) => handleScopeChange(scope.actualIndex, "value", e.target.value)}
+            label="Scope Name"
+            helperText="e.g., read:users, write:posts"
+            sx={{ flex: 1 }}
+            disabled={disabled}
+            size="small"
+            required
+          />
+          <MuiTextField
+            value={scope.description || ""}
+            onChange={(e) => handleScopeChange(scope.actualIndex, "description", e.target.value)}
+            label="Description"
+            helperText="What this scope allows"
+            sx={{ flex: 2 }}
+            disabled={disabled}
+            size="small"
+          />
+          {!disabled && (
+            <IconButton
+              onClick={() => handleRemove(scope.actualIndex)}
+              color="error"
+              sx={{ mt: 1 }}
+            >
+              <DeleteIcon />
+            </IconButton>
+          )}
+        </Stack>
+      ))}
+
+      {totalPages > 1 && (
+        <Box sx={{ display: "flex", justifyContent: "center", mt: 2 }}>
+          <Pagination
+            count={totalPages}
+            page={page}
+            onChange={handlePageChange}
+            color="primary"
+            showFirstButton
+            showLastButton
+          />
+        </Box>
+      )}
+    </Box>
+  );
+}
+
 function ResourceServerForm() {
   const record = useRecordContext();
   const isSystem = record?.is_system;
@@ -115,31 +242,7 @@ function ResourceServerForm() {
       </TabbedForm.Tab>
 
       <TabbedForm.Tab label="Scopes">
-        <ArrayInput source="scopes" label="" disabled={isSystem}>
-          <SimpleFormIterator disableAdd={isSystem} disableRemove={isSystem} disableReordering={isSystem}>
-            <Stack
-              spacing={2}
-              direction="row"
-              sx={{ width: "100%", alignItems: "flex-start" }}
-            >
-              <TextInput
-                source="value"
-                validate={[required()]}
-                label="Scope Name"
-                helperText="e.g., read:users, write:posts"
-                sx={{ flex: 1 }}
-                disabled={isSystem}
-              />
-              <TextInput
-                source="description"
-                label="Description"
-                helperText="What this scope allows"
-                sx={{ flex: 2 }}
-                disabled={isSystem}
-              />
-            </Stack>
-          </SimpleFormIterator>
-        </ArrayInput>
+        <PaginatedScopesInput disabled={isSystem} />
       </TabbedForm.Tab>
     </TabbedForm>
   );

package/src/components/users/create.tsx

@@ -6,6 +6,7 @@ import {
   SelectInput,
   useGetList,
   FormDataConsumer,
+  BooleanInput,
 } from "react-admin";
 import { useState } from "react";
 
@@ -101,6 +102,11 @@ export function UserCreate() {
                       validate={[required()]}
                       helperText="Password for the user account"
                     />
+                    <BooleanInput
+                      source="email_verified"
+                      label="Email Verified"
+                      defaultValue={false}
+                    />
                   </>
                 );
               }

package/src/components/users/edit.tsx

@@ -12,6 +12,7 @@ import {
   TextInput,
   FunctionField,
   BooleanField,
+  BooleanInput,
   ArrayField,
   SimpleShowLayout,
   useNotify,
@@ -1444,6 +1445,7 @@ export function UserEdit() {
             >
               <TextField source="connection" />
             </Labeled>
+            <BooleanInput source="email_verified" label="Email Verified" />
           </Stack>
           <TextInput source="picture" />
           <ArrayField source="identities">