@authhero/react-admin 0.20.0 → 0.21.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @authhero/react-admin
 
+## 0.21.0
+
+### Minor Changes
+
+- 1423254: Fix casing in the ui for organizations
+
 ## 0.20.0
 
 ### Minor Changes

package/package.json

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

package/src/auth0DataProvider.ts

@@ -340,7 +340,7 @@ export default (
         if (Array.isArray(res.json)) {
           return {
             data: res.json.map((item) => ({
-              id: item.custom_domain_id || item.id,
+              id: item.id,
               ...item,
             })),
             total: res.json.length,
@@ -351,7 +351,7 @@ export default (
         return {
           data:
             res.json[resource]?.map((item: any) => ({
-              id: item.custom_domain_id || item.id,
+              id: item.id,
               ...item,
             })) || [],
           total: res.json.total || res.json.length || 0,
@@ -382,15 +382,30 @@ export default (
           fetch: (id) => (managementClient as any).customDomains.get(id),
           idKey: "custom_domain_id",
         },
+        flows: {
+          fetch: (id) => (managementClient as any).flows.get(id),
+          idKey: "id",
+        },
+        hooks: {
+          fetch: (id) => (managementClient as any).hooks.get(id),
+          idKey: "hook_id",
+        },
+        forms: {
+          fetch: (id) => managementClient.forms.get(id),
+          idKey: "id",
+        },
       };
 
       const handler = sdkGetHandlers[resource];
       if (handler) {
         const result = await handler.fetch(params.id as string);
+        // Unwrap SDK response wrapper if present
+        const data = (result as any).response || result;
+
         return {
           data: {
-            id: result[handler.idKey] || result.id,
-            ...result,
+            id: data[handler.idKey] || data.id,
+            ...data,
           },
         };
       }
@@ -926,8 +941,12 @@ export default (
         body: JSON.stringify(cleanParams.data),
       }).then(({ json }) => {
         if (!json.id) {
-          json.id = json[`${resource}_id`];
-          delete json[`${resource}_id`];
+          // Try singular form of resource name (e.g., hooks -> hook_id)
+          const singularResource = resource.endsWith("s")
+            ? resource.slice(0, -1)
+            : resource;
+          json.id =
+            json[`${singularResource}_id`] || json[`${resource}_id`] || json.id;
         }
         return { data: json };
       });
@@ -1073,10 +1092,17 @@ export default (
 
       // Default create (for endpoints not in SDK)
       const res = await post(resource, params.data);
+      // Try singular form of resource name (e.g., hooks -> hook_id)
+      const singularResource = resource.endsWith("s")
+        ? resource.slice(0, -1)
+        : resource;
       return {
         data: {
           ...res.json,
-          id: res.json.id,
+          id:
+            res.json[`${singularResource}_id`] ||
+            res.json[`${resource}_id`] ||
+            res.json.id,
         },
       };
     },

package/src/authProvider.ts

@@ -122,7 +122,9 @@ export const createAuth0ClientForOrg = (
   domain: string,
   organizationId: string,
 ) => {
-  const cacheKey = `${domain}:${organizationId}`;
+  // Normalize organization ID to lowercase to avoid casing mismatches
+  const normalizedOrgId = organizationId.toLowerCase();
+  const cacheKey = `${domain}:${normalizedOrgId}`;
 
   // Check cache first
   if (auth0OrgClientCache.has(cacheKey)) {
@@ -147,12 +149,12 @@ export const createAuth0ClientForOrg = (
     useRefreshTokens: false,
     // Use organization-specific cache to isolate tokens
     // Note: Don't use cacheLocation when providing a custom cache
-    cache: new OrgCache(organizationId),
+    cache: new OrgCache(normalizedOrgId),
     authorizationParams: {
       audience,
       redirect_uri: redirectUri,
       scope: "openid profile email auth:read auth:write",
-      organization: organizationId,
+      organization: normalizedOrgId,
     },
   });
 
@@ -167,7 +169,11 @@ export const createManagementClient = async (
   tenantId?: string,
   oauthDomain?: string,
 ): Promise<ManagementClient> => {
-  const cacheKey = tenantId ? `${apiDomain}:${tenantId}` : apiDomain;
+  // Normalize tenant ID to lowercase to avoid casing mismatches
+  const normalizedTenantId = tenantId?.toLowerCase();
+  const cacheKey = normalizedTenantId
+    ? `${apiDomain}:${normalizedTenantId}`
+    : apiDomain;
 
   // Check cache first
   if (managementClientCache.has(cacheKey)) {
@@ -193,18 +199,21 @@ export const createManagementClient = async (
   const storedFlag = sessionStorage.getItem("isSingleTenant");
   const isSingleTenant = storedFlag?.endsWith("|true") || storedFlag === "true";
 
-  if (tenantId && !isSingleTenant) {
+  if (normalizedTenantId && !isSingleTenant) {
     // When accessing tenant-specific resources in MULTI-TENANT mode, use org-scoped token
     if (domainConfig.connectionMethod === "login") {
       // For OAuth login, use organization-scoped client
-      const orgAuth0Client = createAuth0ClientForOrg(domainForAuth, tenantId);
+      const orgAuth0Client = createAuth0ClientForOrg(
+        domainForAuth,
+        normalizedTenantId,
+      );
       const audience =
         import.meta.env.VITE_AUTH0_AUDIENCE || "urn:authhero:management";
       try {
         token = await orgAuth0Client.getTokenSilently({
           authorizationParams: {
             audience,
-            organization: tenantId,
+            organization: normalizedTenantId,
           },
         });
       } catch (error) {
@@ -216,7 +225,7 @@ export const createManagementClient = async (
         // Redirect to login with organization
         await orgAuth0Client.loginWithRedirect({
           authorizationParams: {
-            organization: tenantId,
+            organization: normalizedTenantId,
             login_hint: user?.email,
           },
           appState: {
@@ -225,11 +234,13 @@ export const createManagementClient = async (
         });
 
         // This won't be reached as loginWithRedirect redirects the page
-        throw new Error(`Redirecting to login for organization ${tenantId}`);
+        throw new Error(
+          `Redirecting to login for organization ${normalizedTenantId}`,
+        );
       }
     } else {
       // For token/client_credentials, use getOrganizationToken
-      token = await getOrganizationToken(domainConfig, tenantId);
+      token = await getOrganizationToken(domainConfig, normalizedTenantId);
     }
   } else {
     // No tenantId - get non-org-scoped token for tenant management endpoints
@@ -244,7 +255,9 @@ export const createManagementClient = async (
   const managementClient = new ManagementClient({
     domain: apiDomain,
     token,
-    headers: tenantId ? { "tenant-id": tenantId } : undefined,
+    headers: normalizedTenantId
+      ? { "tenant-id": normalizedTenantId }
+      : undefined,
   });
 
   managementClientCache.set(cacheKey, managementClient);
@@ -688,8 +701,11 @@ const authorizedHttpClient = (url: string, options: HttpOptions = {}) => {
  * @returns An HTTP client function that uses organization-scoped tokens
  */
 export const createOrganizationHttpClient = (organizationId: string) => {
+  // Normalize organization ID to lowercase to avoid casing mismatches
+  const normalizedOrgId = organizationId.toLowerCase();
+
   return (url: string, options: HttpOptions = {}) => {
-    const requestKey = `${organizationId}:${url}-${JSON.stringify(options)}`;
+    const requestKey = `${normalizedOrgId}:${url}-${JSON.stringify(options)}`;
 
     // If there's already a pending request for this URL and options, return it
     if (pendingRequests.has(requestKey)) {
@@ -728,7 +744,7 @@ export const createOrganizationHttpClient = (organizationId: string) => {
             !activeSessions.has(formattedSelectedDomain)
           ) {
             clearInterval(checkInterval);
-            createOrganizationHttpClient(organizationId)(url, options)
+            createOrganizationHttpClient(normalizedOrgId)(url, options)
               .then(resolve)
               .catch(reject);
           }
@@ -768,7 +784,7 @@ export const createOrganizationHttpClient = (organizationId: string) => {
     ) {
       // For token/client_credentials, use organization-scoped token
       // This includes the org_id claim for accessing tenant-specific resources
-      request = getOrganizationToken(domainConfig, organizationId)
+      request = getOrganizationToken(domainConfig, normalizedOrgId)
         .catch((error) => {
           throw new Error(
             `Authentication failed: ${error.message}. Please configure your credentials in the domain selector.`,
@@ -838,7 +854,7 @@ export const createOrganizationHttpClient = (organizationId: string) => {
       // For OAuth login, use an organization-specific client with isolated cache
       const orgAuth0Client = createAuth0ClientForOrg(
         selectedDomain,
-        organizationId,
+        normalizedOrgId,
       );
 
       // Use the management API audience for cross-tenant operations
@@ -851,7 +867,7 @@ export const createOrganizationHttpClient = (organizationId: string) => {
         .getTokenSilently({
           authorizationParams: {
             audience,
-            organization: organizationId,
+            organization: normalizedOrgId,
           },
         })
         .catch(async (_error) => {
@@ -863,7 +879,7 @@ export const createOrganizationHttpClient = (organizationId: string) => {
           // Redirect to login with organization
           await orgAuth0Client.loginWithRedirect({
             authorizationParams: {
-              organization: organizationId,
+              organization: normalizedOrgId,
               login_hint: user?.email,
             },
             appState: {
@@ -873,7 +889,7 @@ export const createOrganizationHttpClient = (organizationId: string) => {
 
           // This won't be reached as loginWithRedirect redirects the page
           throw new Error(
-            `Redirecting to login for organization ${organizationId}`,
+            `Redirecting to login for organization ${normalizedOrgId}`,
           );
         })
         .then((token) => {

package/src/components/flows/edit.tsx

@@ -89,9 +89,16 @@ export const FlowEdit = () => {
   return (
     <Edit
       queryOptions={{
-        select: (data) => ({
-          data: parseFlowData(data.data as Record<string, unknown>),
-        }),
+        select: (response) => {
+          const data = response?.data as Record<string, unknown>;
+          if (!data) {
+            console.error("FlowEdit: No data in response", response);
+            return response;
+          }
+          return {
+            data: parseFlowData(data),
+          };
+        },
       }}
       transform={(data: Record<string, unknown>) => {
         // Transform actions to include required fields

package/src/components/hooks/list.tsx

@@ -5,7 +5,7 @@ export function HookList() {
   return (
     <List actions={<PostListActions />}>
       <Datagrid rowClick="edit" bulkActionButtons={false}>
-        <TextField source="id" />
+        <TextField source="hook_id" />
         <TextField source="trigger_id" />
         <TextField source="url" />
         <TextField source="form_id" label="Form" />

package/src/utils/tokenUtils.ts

@@ -18,7 +18,8 @@ export class OrgCache implements ICache {
   private orgId: string;
 
   constructor(orgId: string) {
-    this.orgId = orgId;
+    // Normalize organization ID to lowercase to avoid casing mismatches
+    this.orgId = orgId.toLowerCase();
   }
 
   public set<T = Cacheable>(key: string, entry: T) {
@@ -77,8 +78,9 @@ async function fetchTokenWithClientCredentials(
   };
 
   // Add organization if specified - this will include org_id in the token
+  // Normalize to lowercase to avoid casing mismatches
   if (organizationId) {
-    body.organization = organizationId;
+    body.organization = organizationId.toLowerCase();
   }
 
   const response = await fetch(`https://proxy.authhe.ro/oauth/token`, {