@authhero/react-admin 0.25.0 → 0.27.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @authhero/react-admin
 
+## 0.27.0
+
+### Minor Changes
+
+- 76510cd: Fixes for branding page and endpoint
+
+## 0.26.0
+
+### Minor Changes
+
+- c89fb59: Skip dialog if there is a env varitable for environment
+
 ## 0.25.0
 
 ### Minor Changes

package/package.json

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

package/src/auth0DataProvider.ts

@@ -315,7 +315,29 @@ export default (
 
       // Handle singleton resources
       if (resource === "branding") {
-        return fetchSingleton(resource, () => managementClient.branding.get());
+        const branding = await managementClient.branding.get();
+        // Also fetch themes to include in branding data
+        const headers = createHeaders(tenantId);
+        let themes = null;
+        try {
+          const themesResponse = await httpClient(
+            `${apiUrl}/api/v2/branding/themes/default`,
+            { headers },
+          );
+          themes = themesResponse.json;
+        } catch (e) {
+          // Themes might not exist yet, that's ok
+        }
+        return {
+          data: [
+            {
+              ...branding,
+              themes,
+              id: resource,
+            },
+          ],
+          total: 1,
+        };
       }
 
       if (resource === "settings") {
@@ -534,9 +556,22 @@ export default (
       // Handle singleton resources
       if (resource === "branding") {
         const result = await managementClient.branding.get();
+        // Also fetch themes to include in branding data
+        const headers = createHeaders(tenantId);
+        let themes = null;
+        try {
+          const themesResponse = await httpClient(
+            `${apiUrl}/api/v2/branding/themes/default`,
+            { headers },
+          );
+          themes = themesResponse.json;
+        } catch (e) {
+          // Themes might not exist yet, that's ok
+        }
         return {
           data: {
             ...result,
+            themes,
             id: resource,
           },
         };
@@ -915,9 +950,12 @@ export default (
 
       // Special handling for branding to update theme data separately
       if (resource === "branding") {
-        // Update branding
+        // Extract themes from the payload - it's updated via a separate endpoint
+        const { themes, ...brandingData } = cleanParams.data;
+
+        // Update branding (without themes)
         const brandingResult = await managementClient.branding.update(
-          cleanParams.data,
+          brandingData,
         );
 
         // Update themes if provided
@@ -926,12 +964,17 @@ export default (
           ...brandingResult,
         };
 
-        if (cleanParams.data.themes) {
-          const themeUpdateResult = await (
-            managementClient.branding.themes as any
-          ).default.patch(cleanParams.data.themes);
-          result.themes =
-            (themeUpdateResult as any).response || themeUpdateResult;
+        if (themes) {
+          // Use HTTP directly since the SDK doesn't have this method
+          const themeResponse = await httpClient(
+            `${apiUrl}/api/v2/branding/themes/default`,
+            {
+              headers,
+              method: "PATCH",
+              body: JSON.stringify(themes),
+            },
+          );
+          result.themes = themeResponse.json;
         }
 
         return { data: result };

package/src/components/branding/edit.tsx

@@ -1,11 +1,4 @@
-import {
-  DateField,
-  Edit,
-  FieldTitle,
-  Labeled,
-  TextInput,
-  TabbedForm,
-} from "react-admin";
+import { Edit, TextInput, TabbedForm } from "react-admin";
 import { ColorInput } from "react-admin-color-picker";
 import { useInput, useRecordContext } from "react-admin";
 import { useState, useEffect } from "react";
@@ -13,6 +6,54 @@ import { Box } from "@mui/material";
 import { ThemesTab } from "./ThemesTab";
 import { BrandingPreview } from "./BrandingPreview";
 
+// Helper to recursively remove null values and empty objects from data
+// This is needed because react-admin sends null for empty form fields,
+// but the server schema expects fields to be omitted rather than null
+function cleanObject(obj: Record<string, unknown>): Record<string, unknown> {
+  const result: Record<string, unknown> = {};
+
+  for (const [key, value] of Object.entries(obj)) {
+    // Skip null and undefined values
+    if (value === null || value === undefined) {
+      continue;
+    }
+
+    // Recursively clean nested objects (but not arrays)
+    if (typeof value === "object" && !Array.isArray(value)) {
+      const cleaned = cleanObject(value as Record<string, unknown>);
+      // Only include non-empty objects
+      if (Object.keys(cleaned).length > 0) {
+        result[key] = cleaned;
+      }
+    } else {
+      result[key] = value;
+    }
+  }
+
+  return result;
+}
+
+// Transform function to clean up empty objects and null values before sending to server
+// The server schema has strict requirements:
+// - font.url is required if font object is present
+// - page_background must be an object or omitted, not null
+// - Many fields cannot be null, only omitted
+const transformBranding = (data: Record<string, unknown>) => {
+  // First, recursively clean all null values and empty objects
+  const result = cleanObject(data);
+
+  // Remove font object if url is not set (font.url is required if font exists)
+  if (
+    result.font &&
+    typeof result.font === "object" &&
+    !(result.font as Record<string, unknown>).url
+  ) {
+    delete result.font;
+  }
+
+  return result;
+};
+
 function PageBackgroundInput(props) {
   const { field } = useInput(props);
   const record = useRecordContext();
@@ -128,16 +169,6 @@ function BrandingFormContent() {
       {/* Form Section */}
       <Box sx={{ flex: "1 1 60%", minWidth: 0 }}>
         <TabbedForm>
-          <TabbedForm.Tab label="Info">
-            <TextInput source="id" />
-            <TextInput source="name" />
-            <Labeled label={<FieldTitle source="created_at" />}>
-              <DateField source="created_at" showTime={true} />
-            </Labeled>
-            <Labeled label={<FieldTitle source="updated_at" />}>
-              <DateField source="updated_at" showTime={true} />
-            </Labeled>
-          </TabbedForm.Tab>
           <TabbedForm.Tab label="Style">
             <ColorInput source="colors.primary" label="Primary Color" />
             <PageBackgroundInput source="colors.page_background" />
@@ -184,7 +215,7 @@ function BrandingFormContent() {
 
 export function BrandingEdit() {
   return (
-    <Edit>
+    <Edit transform={transformBranding}>
       <BrandingFormContent />
     </Edit>
   );

package/src/index.tsx

@@ -7,24 +7,12 @@ import { AuthCallback } from "./AuthCallback";
 import { DomainSelector } from "./components/DomainSelector";
 import { getSelectedDomainFromStorage } from "./utils/domainUtils";
 
-// Check if running on local.authhero.net - if so, auto-connect to localhost:3000
-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";
+// If a domain is configured via env, use single-domain mode automatically
 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>(
-    getInitialDomain(),
+    envDomain || null,
   );
   const currentPath = location.pathname;
   const isAuthCallback = currentPath === "/auth-callback";
@@ -35,10 +23,9 @@ function Root() {
     currentPath.startsWith("/tenants/create") ||
     currentPath === "/tenants/";
 
-  // Load domain from cookies on component mount (skip for local development and single domain mode)
+  // Load domain from cookies on component mount (only when no env domain configured)
   useEffect(() => {
-    if (isLocalDevelopment || isSingleDomainMode) {
-      // For local development or single domain mode, always use the configured domain
+    if (envDomain) {
       return;
     }
     const savedDomain = getSelectedDomainFromStorage();
@@ -58,9 +45,8 @@ function Root() {
     );
   }
 
-  // Show domain selector on root path or if no domain is selected
-  // Skip for local development and single domain mode - redirect to /tenants instead
-  if (!isLocalDevelopment && !isSingleDomainMode && (isRootPath || !selectedDomain)) {
+  // Show domain selector only if no domain is selected
+  if (!selectedDomain) {
     return (
       <DomainSelector
         onDomainSelected={(domain) => setSelectedDomain(domain)}
@@ -69,14 +55,8 @@ 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) {
+  // For env-configured domain on root path, redirect to /tenants
+  if (envDomain && isRootPath) {
     window.location.href = "/tenants";
     return null;
   }
@@ -106,12 +86,7 @@ function Root() {
     );
   }
 
-  // Fallback to domain selector (or redirect for local development)
-  if (isLocalDevelopment) {
-    window.location.href = "/tenants";
-    return null;
-  }
-
+  // Fallback to domain selector
   return (
     <DomainSelector
       onDomainSelected={(domain) => setSelectedDomain(domain)}