@authhero/react-admin 0.18.0 → 0.19.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @authhero/react-admin
 
+## 0.19.0
+
+### Minor Changes
+
+- 47fe928: Refactor create authhero
+- f4b74e7: Add widget to react-admin
+
+### Patch Changes
+
+- Updated dependencies [f4b74e7]
+- Updated dependencies [b6d3411]
+  - @authhero/widget@0.5.0
+
 ## 0.18.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@authhero/react-admin",
-  "version": "0.18.0",
+  "version": "0.19.0",
+  "packageManager": "pnpm@10.20.0",
   "private": false,
   "repository": {
     "type": "git",
@@ -8,6 +9,8 @@
   },
   "dependencies": {
     "@auth0/auth0-spa-js": "^2.1.3",
+    "@authhero/adapter-interfaces": "^0.116.0",
+    "@authhero/widget": "^0.4.1",
     "@mui/icons-material": "^7.1.0",
     "@mui/material": "^7.1.0",
     "@tiptap/extension-link": "^3.13.0",
@@ -43,13 +46,11 @@
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
     "jsdom": "^26.1.0",
-    "pnpm": "^8.15.3",
     "prettier": "^3.5.3",
     "typescript": "^5.8.3",
     "vite": "^6.3.5",
     "vitest": "^3.1.3"
   },
-  "packageManager": "pnpm@8.15.3",
   "scripts": {
     "dev": "vite",
     "build": "pnpm install --no-frozen-lockfile && vite build",

package/src/App.tsx

@@ -43,12 +43,13 @@ import DnsIcon from "@mui/icons-material/Dns";
 import PaletteIcon from "@mui/icons-material/Palette";
 import StorageIcon from "@mui/icons-material/Storage";
 import AccountTreeIcon from "@mui/icons-material/AccountTree";
-import { useMemo, useState } from "react";
+import { useMemo, useState, useEffect } from "react";
 import { RoleCreate, RoleEdit, RoleList } from "./components/roles";
 import SecurityIcon from "@mui/icons-material/Security";
 import { SettingsList, SettingsEdit } from "./components/settings";
 import { CertificateErrorDialog } from "./components/CertificateErrorDialog";
 import { ActivityDashboard } from "./components/activity";
+import { buildUrlWithProtocol } from "./utils/domainUtils";
 
 interface AppProps {
   tenantId: string;
@@ -58,11 +59,61 @@ interface AppProps {
 
 export function App(props: AppProps) {
   const [certErrorUrl, setCertErrorUrl] = useState<string | null>(null);
-
+  
   // Use a default domain for now - in the working project, domain selection might be handled differently
   const selectedDomain =
     props.initialDomain || import.meta.env.VITE_AUTH0_DOMAIN || "";
 
+  // Check if we've already verified single-tenant mode for THIS domain
+  // The flag is stored as "domain|true" or "domain|false" to ensure we re-check when domain changes
+  // Using | as separator since domains can contain : (e.g., localhost:3000)
+  const storedFlag = sessionStorage.getItem('isSingleTenant');
+  const separatorIndex = storedFlag?.lastIndexOf('|') ?? -1;
+  const [storedDomain, storedValue] = separatorIndex > -1
+    ? [storedFlag!.substring(0, separatorIndex), storedFlag!.substring(separatorIndex + 1)]
+    : [null, storedFlag];
+  
+  const [isSingleTenantChecked, setIsSingleTenantChecked] = useState<boolean>(
+    // Only skip check if we have a flag for the SAME domain
+    storedDomain === selectedDomain && storedValue !== null
+  );
+
+  // Check for single-tenant mode on mount if not already checked
+  // This handles the case where user navigates directly to /{tenantId} without going through /tenants
+  useEffect(() => {
+    if (isSingleTenantChecked || !selectedDomain) {
+      return;
+    }
+
+    const checkSingleTenant = async () => {
+      const apiUrl = buildUrlWithProtocol(selectedDomain);
+      try {
+        // Try to fetch the tenants endpoint - if it exists, we're in multi-tenant mode
+        const response = await fetch(`${apiUrl}/api/v2/tenants?per_page=1`, {
+          method: 'GET',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+        });
+        
+        // If we get a 401/403 (auth required) or 200, the endpoint exists -> multi-tenant
+        // If we get a 404, the endpoint doesn't exist -> single-tenant
+        if (response.status === 404) {
+          // Store domain|value so we know which domain was checked (using | since domain can contain :)
+          sessionStorage.setItem('isSingleTenant', `${selectedDomain}|true`);
+        } else {
+          sessionStorage.setItem('isSingleTenant', `${selectedDomain}|false`);
+        }
+      } catch {
+        // Network error or endpoint doesn't exist -> assume single-tenant
+        sessionStorage.setItem('isSingleTenant', `${selectedDomain}|true`);
+      }
+      setIsSingleTenantChecked(true);
+    };
+
+    checkSingleTenant();
+  }, [selectedDomain, isSingleTenantChecked]);
+
   // Use memoization for creating the auth provider to prevent re-authentication
   const authProvider = useMemo(() => {
     if (!selectedDomain) return null;
@@ -71,6 +122,7 @@ export function App(props: AppProps) {
 
   // Memoize the data provider to prevent unnecessary re-creations
   // Wrap it to catch certificate errors
+  // Re-create when isSingleTenantChecked changes to pick up the new sessionStorage value
   const dataProvider = useMemo(() => {
     const baseProvider = getDataproviderForTenant(
       props.tenantId,
@@ -97,12 +149,17 @@ export function App(props: AppProps) {
       }
     }
     return wrappedProvider;
-  }, [props.tenantId, selectedDomain]);
+  }, [props.tenantId, selectedDomain, isSingleTenantChecked]);
 
   const handleCloseCertError = () => {
     setCertErrorUrl(null);
   };
 
+  // If not done checking single-tenant mode, show loading
+  if (!isSingleTenantChecked) {
+    return <div>Checking tenant mode...</div>;
+  }
+
   // If no domain is selected, show a loading state
   if (!authProvider || !selectedDomain) {
     return <div>Loading...</div>;

package/src/TenantsApp.tsx

@@ -1,9 +1,9 @@
 import { Admin, Resource } from "react-admin";
 import { getDataprovider } from "./dataProvider";
-import { getAuthProvider } from "./authProvider";
+import { getAuthProvider, createAuth0Client } from "./authProvider";
 import { TenantsList } from "./components/tenants/list";
 import { TenantsCreate } from "./components/tenants/create";
-import { useMemo, useState } from "react";
+import { useMemo, useState, useEffect } from "react";
 import { Button } from "@mui/material";
 import { DomainSelector } from "./components/DomainSelector";
 import { saveSelectedDomainToStorage } from "./utils/domainUtils";
@@ -24,6 +24,8 @@ export function TenantsApp(props: TenantsAppProps = {}) {
   );
   const [showDomainDialog, setShowDomainDialog] = useState<boolean>(false);
   const [certErrorUrl, setCertErrorUrl] = useState<string | null>(null);
+  const [isCheckingSingleTenant, setIsCheckingSingleTenant] =
+    useState<boolean>(true);
 
   // Use useMemo to prevent recreating the auth provider on every render
   const authProvider = useMemo(
@@ -60,6 +62,70 @@ export function TenantsApp(props: TenantsAppProps = {}) {
     return wrappedProvider;
   }, [selectedDomain]);
 
+  // Check for single tenant mode on mount
+  useEffect(() => {
+    if (!selectedDomain) {
+      setIsCheckingSingleTenant(false);
+      return;
+    }
+
+    // Try to fetch tenants list
+    dataProvider
+      .getList("tenants", {
+        pagination: { page: 1, perPage: 2 }, // Only need to know if there's 1 or more
+        sort: { field: "id", order: "ASC" },
+        filter: {},
+      })
+      .then((result) => {
+        // Multi-tenant mode - tenants endpoint exists
+        // Mark as multi-tenant and show the tenants list (don't auto-redirect)
+        sessionStorage.setItem("isSingleTenant", `${selectedDomain}|false`);
+        setIsCheckingSingleTenant(false);
+      })
+      .catch(async (error) => {
+        console.log("Tenants endpoint check:", error);
+        // If we get a 404 or any error, the tenants endpoint doesn't exist
+        // In single-tenant mode without multi-tenancy package, the endpoint won't exist
+
+        // Mark as single-tenant mode immediately (before trying to fetch settings)
+        // This ensures subsequent requests won't try to use organization tokens
+        sessionStorage.setItem("isSingleTenant", `${selectedDomain}|true`);
+
+        // Try to use the /tenants/settings endpoint which works in single-tenant mode
+        // We need to get a token and make a direct fetch to avoid organization logic
+        try {
+          const apiUrl = selectedDomain.startsWith("http")
+            ? selectedDomain
+            : `https://${selectedDomain}`;
+
+          // Get a non-org token
+          const auth0Client = createAuth0Client(selectedDomain);
+          const token = await auth0Client.getTokenSilently();
+
+          const response = await fetch(`${apiUrl}/api/v2/tenants/settings`, {
+            headers: {
+              "Content-Type": "application/json",
+              Authorization: `Bearer ${token}`,
+            },
+          });
+
+          if (response.ok) {
+            const settings = await response.json();
+            if (settings?.id) {
+              window.location.href = `/${settings.id}`;
+              return;
+            }
+          }
+        } catch (settingsError) {
+          console.log("Settings endpoint also failed:", settingsError);
+        }
+
+        // If both endpoints fail, clear the flag and show the tenants list (which will show an error)
+        sessionStorage.removeItem("isSingleTenant");
+        setIsCheckingSingleTenant(false);
+      });
+  }, [selectedDomain, dataProvider]);
+
   const openDomainManager = () => {
     setShowDomainDialog(true);
   };
@@ -74,6 +140,22 @@ export function TenantsApp(props: TenantsAppProps = {}) {
     setCertErrorUrl(null);
   };
 
+  // Show loading while checking for single tenant
+  if (isCheckingSingleTenant) {
+    return (
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          height: "100vh",
+        }}
+      >
+        Checking tenant configuration...
+      </div>
+    );
+  }
+
   // Create the domain selector button that will be passed to the AppBar
   const DomainSelectorButton = (
     <Button

package/src/authProvider.ts

@@ -189,8 +189,12 @@ export const createManagementClient = async (
 
   let token: string;
 
-  if (tenantId) {
-    // When accessing tenant-specific resources, use org-scoped token
+  // Check if we're in single-tenant mode
+  const storedFlag = sessionStorage.getItem("isSingleTenant");
+  const isSingleTenant = storedFlag?.endsWith("|true") || storedFlag === "true";
+
+  if (tenantId && !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);
@@ -221,9 +225,7 @@ 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 ${tenantId}`);
       }
     } else {
       // For token/client_credentials, use getOrganizationToken

package/src/components/TenantAppBar.tsx

@@ -66,8 +66,24 @@ export function TenantAppBar(props: TenantAppBarProps) {
           } as TenantResponse);
         }
       })
-      .catch((error) => {
-        console.error("Failed to fetch tenant:", error);
+      .catch(async (error) => {
+        console.error("Failed to fetch tenant list:", error);
+
+        // In single-tenant mode, the tenants list endpoint might not exist
+        // Try to fetch from the settings endpoint instead
+        try {
+          const settings = await tenantsDataProvider.getOne("tenants", {
+            id: "settings",
+          });
+
+          if (settings?.data && settings.data.id === tenantId) {
+            setTenant(settings.data as TenantResponse);
+            return;
+          }
+        } catch (settingsError) {
+          console.error("Failed to fetch tenant settings:", settingsError);
+        }
+
         // Set a minimal tenant object on error
         setTenant({
           id: tenantId,

package/src/components/branding/BrandingPreview.tsx

@@ -0,0 +1,421 @@
+import { useEffect, useRef } from "react";
+import { useWatch } from "react-hook-form";
+import {
+  Box,
+  Typography,
+  Paper,
+  ToggleButtonGroup,
+  ToggleButton,
+} from "@mui/material";
+import { useState } from "react";
+import { defineCustomElements } from "@authhero/widget/loader";
+
+// Initialize the widget custom elements
+if (typeof window !== "undefined") {
+  defineCustomElements(window);
+}
+
+// Types for the widget screen configuration
+interface FormComponent {
+  id: string;
+  type: string;
+  category: "FIELD" | "BLOCK" | "WIDGET";
+  visible: boolean;
+  label?: string;
+  config?: Record<string, unknown>;
+  required?: boolean;
+  sensitive?: boolean;
+  order: number;
+  messages?: Array<{ text: string; type: "error" | "success" }>;
+}
+
+interface ScreenLink {
+  id?: string;
+  text: string;
+  linkText?: string;
+  href: string;
+}
+
+interface UiScreen {
+  action: string;
+  method: string;
+  title?: string;
+  description?: string;
+  components: FormComponent[];
+  links?: ScreenLink[];
+  messages?: Array<{ text: string; type: "error" | "success" }>;
+}
+
+// Sample screen to preview
+const sampleScreen: UiScreen = {
+  action: "#",
+  method: "POST",
+  title: "Welcome",
+  description: "Sign in to continue",
+  components: [
+    {
+      id: "social-buttons",
+      type: "SOCIAL",
+      category: "FIELD",
+      visible: true,
+      config: {
+        providers: ["google-oauth2"],
+      },
+      order: 0,
+    },
+    {
+      id: "divider",
+      type: "DIVIDER",
+      category: "BLOCK",
+      visible: true,
+      order: 1,
+    },
+    {
+      id: "username",
+      type: "EMAIL",
+      category: "FIELD",
+      visible: true,
+      label: "Email address",
+      config: {
+        placeholder: "name@example.com",
+      },
+      required: true,
+      order: 2,
+    },
+    {
+      id: "submit",
+      type: "NEXT_BUTTON",
+      category: "BLOCK",
+      visible: true,
+      config: {
+        text: "Continue",
+      },
+      order: 3,
+    },
+  ],
+  links: [
+    {
+      id: "signup",
+      text: "Don't have an account?",
+      linkText: "Sign up",
+      href: "#",
+    },
+  ],
+};
+
+type PreviewScreen = "login" | "signup" | "password";
+
+const screenConfigs: Record<PreviewScreen, UiScreen> = {
+  login: sampleScreen,
+  signup: {
+    ...sampleScreen,
+    title: "Create account",
+    description: "Sign up to get started",
+    components: [
+      ...sampleScreen.components.slice(0, 3),
+      {
+        id: "password",
+        type: "PASSWORD",
+        category: "FIELD",
+        visible: true,
+        label: "Password",
+        config: {
+          placeholder: "Enter your password",
+        },
+        required: true,
+        sensitive: true,
+        order: 3,
+      },
+      {
+        id: "submit",
+        type: "NEXT_BUTTON",
+        category: "BLOCK",
+        visible: true,
+        config: {
+          text: "Sign up",
+        },
+        order: 4,
+      },
+    ],
+    links: [
+      {
+        id: "login",
+        text: "Already have an account?",
+        linkText: "Sign in",
+        href: "#",
+      },
+    ],
+  },
+  password: {
+    action: "#",
+    method: "POST",
+    title: "Enter your password",
+    components: [
+      {
+        id: "email-display",
+        type: "RICH_TEXT",
+        category: "BLOCK",
+        visible: true,
+        config: {
+          content: "Signing in as <strong>user@example.com</strong>",
+        },
+        order: 0,
+      },
+      {
+        id: "password",
+        type: "PASSWORD",
+        category: "FIELD",
+        visible: true,
+        label: "Password",
+        config: {
+          placeholder: "Enter your password",
+        },
+        required: true,
+        sensitive: true,
+        order: 1,
+      },
+      {
+        id: "submit",
+        type: "NEXT_BUTTON",
+        category: "BLOCK",
+        visible: true,
+        config: {
+          text: "Continue",
+        },
+        order: 2,
+      },
+    ],
+    links: [
+      {
+        id: "forgot",
+        text: "Forgot your password?",
+        linkText: "Reset it",
+        href: "#",
+      },
+    ],
+  },
+};
+
+interface WidgetBranding {
+  colors?: {
+    primary?: string;
+    page_background?:
+      | {
+          type?: string;
+          start?: string;
+          end?: string;
+          angle_deg?: number;
+        }
+      | string;
+  };
+  logo_url?: string;
+  favicon_url?: string;
+  font?: {
+    url?: string;
+  };
+}
+
+interface WidgetTheme {
+  borders?: {
+    button_border_radius?: number;
+    button_border_weight?: number;
+    buttons_style?: "pill" | "rounded" | "sharp";
+    input_border_radius?: number;
+    input_border_weight?: number;
+    inputs_style?: "pill" | "rounded" | "sharp";
+    show_widget_shadow?: boolean;
+    widget_border_weight?: number;
+    widget_corner_radius?: number;
+  };
+  colors?: {
+    base_focus_color?: string;
+    base_hover_color?: string;
+    body_text?: string;
+    error?: string;
+    header?: string;
+    icons?: string;
+    input_background?: string;
+    input_border?: string;
+    input_filled_text?: string;
+    input_labels_placeholders?: string;
+    links_focused_components?: string;
+    primary_button?: string;
+    primary_button_label?: string;
+    secondary_button_border?: string;
+    secondary_button_label?: string;
+    success?: string;
+    widget_background?: string;
+    widget_border?: string;
+  };
+  fonts?: {
+    body_text?: { bold?: boolean; size?: number };
+    buttons_text?: { bold?: boolean; size?: number };
+    font_url?: string;
+    input_labels?: { bold?: boolean; size?: number };
+    links?: { bold?: boolean; size?: number };
+    links_style?: "normal" | "underlined";
+    reference_text_size?: number;
+    subtitle?: { bold?: boolean; size?: number };
+    title?: { bold?: boolean; size?: number };
+  };
+  page_background?: {
+    background_color?: string;
+    background_image_url?: string;
+    page_layout?: "center" | "left" | "right";
+  };
+  widget?: {
+    header_text_alignment?: "center" | "left" | "right";
+    logo_height?: number;
+    logo_position?: "center" | "left" | "none" | "right";
+    logo_url?: string;
+    social_buttons_layout?: "bottom" | "top";
+  };
+}
+
+export function BrandingPreview() {
+  const widgetRef = useRef<HTMLElement>(null);
+  const [previewScreen, setPreviewScreen] = useState<PreviewScreen>("login");
+
+  // Watch for form changes
+  const colors = useWatch({ name: "colors" });
+  const logoUrl = useWatch({ name: "logo_url" });
+  const faviconUrl = useWatch({ name: "favicon_url" });
+  const font = useWatch({ name: "font" });
+  const themes = useWatch({ name: "themes" });
+
+  // Convert form values to widget branding format
+  const branding: WidgetBranding = {
+    colors: {
+      primary: colors?.primary,
+      page_background:
+        typeof colors?.page_background === "string"
+          ? { type: "solid", start: colors.page_background }
+          : colors?.page_background,
+    },
+    logo_url: logoUrl,
+    favicon_url: faviconUrl,
+    font: font,
+  };
+
+  // Convert themes to widget theme format
+  const theme: WidgetTheme | undefined = themes
+    ? {
+        borders: themes.borders,
+        colors: themes.colors,
+        fonts: themes.fonts,
+        page_background: themes.page_background,
+        widget: themes.widget,
+      }
+    : undefined;
+
+  // Get background style for the preview container
+  const getBackgroundStyle = () => {
+    // Check theme page_background first
+    if (theme?.page_background?.background_color) {
+      return { background: theme.page_background.background_color };
+    }
+
+    // Fall back to branding page_background
+    const bg = branding.colors?.page_background;
+    if (!bg) return { background: "#f5f5f5" };
+
+    if (typeof bg === "string") {
+      return { background: bg };
+    }
+
+    if (bg.type === "linear-gradient" && bg.start && bg.end) {
+      const angle = bg.angle_deg ?? 180;
+      return {
+        background: `linear-gradient(${angle}deg, ${bg.start}, ${bg.end})`,
+      };
+    }
+
+    if (bg.start) {
+      return { background: bg.start };
+    }
+
+    return { background: "#f5f5f5" };
+  };
+
+  // Update widget props when values change
+  useEffect(() => {
+    if (widgetRef.current) {
+      const widget = widgetRef.current.querySelector(
+        "authhero-widget",
+      ) as HTMLElement & {
+        screen?: UiScreen;
+        branding?: WidgetBranding;
+        theme?: WidgetTheme;
+      };
+      if (widget) {
+        widget.screen = screenConfigs[previewScreen];
+        widget.branding = branding;
+        if (theme) {
+          widget.theme = theme;
+        }
+      }
+    }
+  }, [branding, theme, previewScreen]);
+
+  return (
+    <Paper
+      elevation={0}
+      sx={{
+        p: 2,
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        bgcolor: "grey.100",
+        borderRadius: 2,
+      }}
+    >
+      <Box
+        sx={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          mb: 2,
+        }}
+      >
+        <Typography variant="subtitle2" color="text.secondary">
+          Preview
+        </Typography>
+        <ToggleButtonGroup
+          size="small"
+          value={previewScreen}
+          exclusive
+          onChange={(_, value) => value && setPreviewScreen(value)}
+        >
+          <ToggleButton value="login">Login</ToggleButton>
+          <ToggleButton value="password">Password</ToggleButton>
+          <ToggleButton value="signup">Signup</ToggleButton>
+        </ToggleButtonGroup>
+      </Box>
+
+      <Box
+        sx={{
+          flex: 1,
+          borderRadius: 1,
+          overflow: "hidden",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          minHeight: 500,
+          ...getBackgroundStyle(),
+        }}
+      >
+        {/* Using dangerouslySetInnerHTML to bypass JSX type issues with web components */}
+        <div
+          ref={widgetRef as React.RefObject<HTMLDivElement>}
+          dangerouslySetInnerHTML={{
+            __html: `<authhero-widget
+              screen='${JSON.stringify(screenConfigs[previewScreen]).replace(/'/g, "&apos;")}'
+              branding='${JSON.stringify(branding).replace(/'/g, "&apos;")}'
+              ${theme ? `theme='${JSON.stringify(theme).replace(/'/g, "&apos;")}'` : ""}
+            ></authhero-widget>`,
+          }}
+        />
+      </Box>
+    </Paper>
+  );
+}

package/src/components/branding/edit.tsx

@@ -9,7 +9,9 @@ import {
 import { ColorInput } from "react-admin-color-picker";
 import { useInput, useRecordContext } from "react-admin";
 import { useState, useEffect } from "react";
+import { Box } from "@mui/material";
 import { ThemesTab } from "./ThemesTab";
+import { BrandingPreview } from "./BrandingPreview";
 
 function PageBackgroundInput(props) {
   const { field } = useInput(props);
@@ -56,7 +58,7 @@ function PageBackgroundInput(props) {
       {mode === "color" ? (
         <>
           <ColorInput
-            key={color}
+            key="page-background-solid"
             source={props.source}
             label="Solid Color"
             // No value prop, uncontrolled
@@ -79,7 +81,7 @@ function PageBackgroundInput(props) {
             }
           />
           <ColorInput
-            key={gradient.start}
+            key="page-background-start"
             source="colors.page_background.start"
             label="Start Color"
           />
@@ -92,7 +94,7 @@ function PageBackgroundInput(props) {
             }
           />
           <ColorInput
-            key={gradient.end}
+            key="page-background-end"
             source="colors.page_background.end"
             label="End Color"
           />
@@ -119,31 +121,71 @@ function PageBackgroundInput(props) {
   );
 }
 
+// Wrapper component that provides the preview inside the form context
+function BrandingFormContent() {
+  return (
+    <Box sx={{ display: "flex", gap: 3, p: 0 }}>
+      {/* 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" />
+            <TextInput source="favicon_url" label="Favicon URL" />
+            <TextInput source="logo_url" label="Logo URL" />
+            <TextInput source="font.url" label="Font URL" />
+            {/* Preview inside the form context */}
+            <Box
+              sx={{
+                position: "fixed",
+                right: 24,
+                top: 80,
+                width: 400,
+                height: "calc(100vh - 120px)",
+                display: { xs: "none", lg: "block" },
+                zIndex: 1000,
+              }}
+            >
+              <BrandingPreview />
+            </Box>
+          </TabbedForm.Tab>
+          <TabbedForm.Tab label="Themes">
+            <ThemesTab />
+            {/* Preview inside the form context */}
+            <Box
+              sx={{
+                position: "fixed",
+                right: 24,
+                top: 80,
+                width: 400,
+                height: "calc(100vh - 120px)",
+                display: { xs: "none", lg: "block" },
+                zIndex: 1000,
+              }}
+            >
+              <BrandingPreview />
+            </Box>
+          </TabbedForm.Tab>
+        </TabbedForm>
+      </Box>
+    </Box>
+  );
+}
+
 export function BrandingEdit() {
   return (
     <Edit>
-      <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" />
-          <TextInput source="favicon_url" label="Favicon URL" />
-          <TextInput source="logo_url" label="Logo URL" />
-          <TextInput source="font.url" label="Font URL" />
-        </TabbedForm.Tab>
-        <TabbedForm.Tab label="Themes">
-          <ThemesTab />
-        </TabbedForm.Tab>
-      </TabbedForm>
+      <BrandingFormContent />
     </Edit>
   );
 }

package/src/dataProvider.ts

@@ -34,15 +34,20 @@ export function getDataprovider(auth0Domain?: string) {
     // Check if there's a custom REST API URL configured for this domain
     const domains = getDomainFromStorage();
     const formattedAuth0Domain = formatDomain(auth0Domain);
-    const domainConfig = domains.find((d) => formatDomain(d.url) === formattedAuth0Domain);
+    const domainConfig = domains.find(
+      (d) => formatDomain(d.url) === formattedAuth0Domain,
+    );
 
     if (domainConfig?.restApiUrl) {
-      // Use the custom REST API URL if configured
-      baseUrl = domainConfig.restApiUrl;
+      // Use the custom REST API URL if configured (ensure HTTPS)
+      baseUrl = buildUrlWithProtocol(domainConfig.restApiUrl);
     } else {
       // Otherwise use the auth domain with HTTPS
       baseUrl = buildUrlWithProtocol(auth0Domain);
     }
+  } else if (baseUrl) {
+    // Ensure env variable URL also uses HTTPS
+    baseUrl = buildUrlWithProtocol(baseUrl);
   }
 
   // TODO - duplicate auth0DataProvider to tenantsDataProvider
@@ -73,31 +78,46 @@ export function getDataproviderForTenant(
     // Check if there's a custom REST API URL configured for this domain
     const domains = getDomainFromStorage();
     const formattedAuth0Domain = formatDomain(auth0Domain);
-    const domainConfig = domains.find((d) => formatDomain(d.url) === formattedAuth0Domain);
+    const domainConfig = domains.find(
+      (d) => formatDomain(d.url) === formattedAuth0Domain,
+    );
 
     if (domainConfig?.restApiUrl) {
-      // Use the custom REST API URL if configured
-      apiUrl = domainConfig.restApiUrl;
+      // Use the custom REST API URL if configured (ensure HTTPS)
+      apiUrl = buildUrlWithProtocol(domainConfig.restApiUrl);
     } else {
       // Otherwise construct an API URL using the auth0Domain with HTTPS
       apiUrl = buildUrlWithProtocol(auth0Domain);
     }
   } else {
-    // Fallback to the environment variable
-    apiUrl = import.meta.env.VITE_AUTH0_API_URL;
+    // Fallback to the environment variable (ensure HTTPS)
+    apiUrl = buildUrlWithProtocol(import.meta.env.VITE_AUTH0_API_URL || "");
   }
 
   // Ensure apiUrl doesn't end with a slash
   apiUrl = apiUrl.replace(/\/$/, "");
 
-  // Create an organization-scoped HTTP client for this tenant
-  // This ensures the user has the correct permissions for accessing tenant resources
-  const organizationHttpClient = createOrganizationHttpClient(tenantId);
+  // Create a dynamic httpClient that checks single-tenant mode at REQUEST TIME
+  // This is important because the mode may not be known when the dataProvider is created
+  const dynamicHttpClient = (url: string, options?: any) => {
+    // Check single-tenant mode at request time, not at creation time
+    const storedFlag = sessionStorage.getItem("isSingleTenant");
+    const isSingleTenant =
+      storedFlag?.endsWith("|true") || storedFlag === "true";
 
-  // Create the auth0Provider with the API URL, tenant ID, domain, and org-scoped client
+    // In single-tenant mode, use the regular authorized client without organization scope
+    // In multi-tenant mode, use organization-scoped client for proper access control
+    if (isSingleTenant) {
+      return authorizedHttpClient(url, options);
+    } else {
+      return createOrganizationHttpClient(tenantId)(url, options);
+    }
+  };
+
+  // Create the auth0Provider with the API URL, tenant ID, domain, and dynamic client
   const auth0Provider = auth0DataProvider(
     apiUrl,
-    organizationHttpClient,
+    dynamicHttpClient,
     tenantId,
     auth0Domain,
   );

package/vercel.json

@@ -14,4 +14,4 @@
     }
   ],
   "installCommand": "pnpm install --no-frozen-lockfile"
-}
+}