@authhero/react-admin 0.20.0 → 0.22.0

package/.env.example

@@ -0,0 +1,27 @@
+# AuthHero React Admin - Environment Configuration
+
+# Default domain configuration (automatically added to domain list if not present)
+# This is useful for development or single-instance deployments
+
+# Auth domain for production (e.g., login.sesamy.com)
+VITE_AUTH0_DOMAIN=login.sesamy.com
+
+# For local development, use localhost:3000
+# VITE_AUTH0_DOMAIN=localhost:3000
+
+# Client ID to use for authentication
+VITE_AUTH0_CLIENT_ID=auth-admin
+
+# API URL for management endpoints (e.g., https://auth2.sesamy.com)
+VITE_AUTH0_API_URL=https://auth2.sesamy.com
+
+# For local development API
+# VITE_AUTH0_API_URL=https://localhost:3000
+
+# Optional: Management API audience (defaults to urn:authhero:management)
+# VITE_AUTH0_AUDIENCE=urn:authhero:management
+
+# 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
+# - For HTTPS on localhost, ensure your local server has a valid certificate

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @authhero/react-admin
 
+## 0.22.0
+
+### Minor Changes
+
+- 00d2f83: Update versions to get latest build
+
+### Patch Changes
+
+- Updated dependencies [00d2f83]
+  - @authhero/adapter-interfaces@0.120.0
+  - @authhero/widget@0.6.3
+
+## 0.21.0
+
+### Minor Changes
+
+- 1423254: Fix casing in the ui for organizations
+
 ## 0.20.0
 
 ### Minor Changes

package/README.md

@@ -10,6 +10,31 @@ npm install
 yarn install
 ```
 
+## Configuration
+
+### Environment Variables
+
+You can configure the default domain connection using environment variables. Create a `.env` file in the `apps/react-admin` directory:
+
+```bash
+# Production
+VITE_AUTH0_DOMAIN=login.sesamy.com
+VITE_AUTH0_CLIENT_ID=auth-admin
+VITE_AUTH0_API_URL=https://auth2.sesamy.com
+
+# Or for local development
+VITE_AUTH0_DOMAIN=localhost:3000
+VITE_AUTH0_CLIENT_ID=auth-admin
+VITE_AUTH0_API_URL=https://localhost:3000
+```
+
+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
+
 ## Development
 
 Start the application in development mode by running:

package/package.json

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

package/src/auth0DataProvider.ts

@@ -124,6 +124,11 @@ export default (
   let managementClientPromise: Promise<ManagementClient> | null = null;
   const getManagementClient = async () => {
     if (!managementClientPromise) {
+      if (!apiUrl) {
+        throw new Error(
+          "API URL is not configured. Please set restApiUrl in domain configuration or VITE_SIMPLE_REST_URL environment variable.",
+        );
+      }
       // Extract API domain from apiUrl
       const apiDomain = apiUrl.replace(/^https?:\/\//, "").replace(/\/.*$/, "");
       // Pass both API domain and OAuth domain for authentication
@@ -233,6 +238,11 @@ export default (
           resourceKey: "custom_domains",
           idKey: "custom_domain_id",
         },
+        hooks: {
+          fetch: (client: any) => client.hooks.list(),
+          resourceKey: "hooks",
+          idKey: "hook_id",
+        },
       };
 
       // Handle SDK resources (only for top-level resources, not nested paths like users/{id}/roles)
@@ -317,6 +327,46 @@ export default (
         }
       }
 
+      // User organizations - when filtering by user_id
+      if (resource === "user-organizations" && params.filter?.user_id) {
+        const userId = params.filter.user_id;
+        const result = await managementClient.users.organizations.list(userId, {
+          page: page - 1,
+          per_page: perPage,
+        });
+        const response = (result as any).response || result;
+
+        let organizationsData: any[];
+        let total: number;
+
+        if (Array.isArray(response)) {
+          organizationsData = response;
+          total = response.length;
+        } else if (response.organizations) {
+          organizationsData = response.organizations;
+          total = response.total || organizationsData.length;
+        } else {
+          organizationsData = [];
+          total = 0;
+        }
+
+        return {
+          data: organizationsData.map((org: any) => ({
+            id: org.id || org.organization_id,
+            user_id: userId,
+            name: org.name,
+            display_name: org.display_name,
+            branding: org.branding,
+            metadata: org.metadata || {},
+            token_quota: org.token_quota,
+            created_at: org.created_at,
+            updated_at: org.updated_at,
+            ...org,
+          })),
+          total,
+        };
+      }
+
       // Use HTTP client for all other list operations
       const headers = createHeaders(tenantId);
 
@@ -340,7 +390,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 +401,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 +432,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 +991,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 +1142,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

@@ -50,15 +50,23 @@ export const createAuth0Client = (domain: string) => {
   const audience =
     import.meta.env.VITE_AUTH0_AUDIENCE || "urn:authhero:management";
 
+  const clientId = getClientIdFromStorage(domain);
+  console.log(
+    "[createAuth0Client] Creating client for domain:",
+    domain,
+    "with clientId:",
+    clientId,
+  );
+
   const auth0Client = new Auth0Client({
     domain: fullDomain,
-    clientId: getClientIdFromStorage(domain),
+    clientId,
     cacheLocation: "localstorage",
     useRefreshTokens: false,
     authorizationParams: {
       audience,
       redirect_uri: redirectUri,
-      scope: "openid profile email auth:read auth:write",
+      scope: "openid profile email",
     },
   });
 
@@ -122,7 +130,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)) {
@@ -141,18 +151,28 @@ export const createAuth0ClientForOrg = (
   const audience =
     import.meta.env.VITE_AUTH0_AUDIENCE || "urn:authhero:management";
 
+  const clientId = getClientIdFromStorage(domain);
+  console.log(
+    "[createAuth0ClientForOrg] Creating client for domain:",
+    domain,
+    "org:",
+    normalizedOrgId,
+    "with clientId:",
+    clientId,
+  );
+
   const auth0Client = new Auth0Client({
     domain: fullDomain,
-    clientId: getClientIdFromStorage(domain),
+    clientId,
     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,
+      scope: "openid profile email",
+      organization: normalizedOrgId,
     },
   });
 
@@ -167,7 +187,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 +217,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 +243,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 +252,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 +273,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 +719,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 +762,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 +802,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 +872,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 +885,7 @@ export const createOrganizationHttpClient = (organizationId: string) => {
         .getTokenSilently({
           authorizationParams: {
             audience,
-            organization: organizationId,
+            organization: normalizedOrgId,
           },
         })
         .catch(async (_error) => {
@@ -863,7 +897,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 +907,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/components/users/edit.tsx

@@ -1119,6 +1119,189 @@ const UserRolesTable = ({
   );
 };
 
+// Add organization management: add user to organizations
+const AddOrganizationButton = () => {
+  const [open, setOpen] = useState(false);
+  const [availableOrganizations, setAvailableOrganizations] = useState<any[]>(
+    [],
+  );
+  const [selectedOrganizations, setSelectedOrganizations] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [searchText, setSearchText] = useState("");
+  const dataProvider = useDataProvider();
+  const notify = useNotify();
+  const refresh = useRefresh();
+
+  const { id: userId } = useParams();
+
+  const handleOpen = async () => {
+    setOpen(true);
+    await loadAvailableOrganizations();
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+    setSelectedOrganizations([]);
+    setAvailableOrganizations([]);
+    setSearchText("");
+  };
+
+  const loadAvailableOrganizations = async () => {
+    if (!userId) return;
+    setLoading(true);
+    try {
+      // Load all organizations
+      const allOrgsRes = await dataProvider.getList("organizations", {
+        pagination: { page: 1, perPage: 1000 },
+        sort: { field: "name", order: "ASC" },
+        filter: {},
+      });
+
+      // Load organizations the user is already a member of
+      const userOrgsRes = await dataProvider.getList("user-organizations", {
+        pagination: { page: 1, perPage: 1000 },
+        sort: { field: "name", order: "ASC" },
+        filter: { user_id: userId },
+      });
+
+      const userOrgIds = new Set(userOrgsRes.data.map((org: any) => org.id));
+      const available = allOrgsRes.data.filter(
+        (org: any) => !userOrgIds.has(org.id),
+      );
+
+      setAvailableOrganizations(available);
+    } catch (error) {
+      console.error("Error loading organizations:", error);
+      notify("Error loading organizations", { type: "error" });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleAddOrganizations = async () => {
+    if (!userId || selectedOrganizations.length === 0) {
+      notify("Please select at least one organization", { type: "warning" });
+      return;
+    }
+
+    try {
+      // Add user to each selected organization
+      for (const org of selectedOrganizations) {
+        await dataProvider.create("organization-members", {
+          data: {
+            organization_id: org.id,
+            user_ids: [userId],
+          },
+        });
+      }
+
+      notify(
+        `Added user to ${selectedOrganizations.length} organization(s) successfully`,
+        { type: "success" },
+      );
+      handleClose();
+      refresh();
+    } catch (error) {
+      console.error("Error adding user to organizations:", error);
+      notify("Error adding user to organizations", { type: "error" });
+    }
+  };
+
+  if (!userId) return null;
+
+  const filteredOrganizations = availableOrganizations.filter(
+    (org) =>
+      !searchText ||
+      org.name?.toLowerCase().includes(searchText.toLowerCase()) ||
+      org.display_name?.toLowerCase().includes(searchText.toLowerCase()) ||
+      org.id?.toLowerCase().includes(searchText.toLowerCase()),
+  );
+
+  return (
+    <>
+      <Button
+        variant="contained"
+        color="primary"
+        startIcon={<AddIcon />}
+        onClick={handleOpen}
+        sx={{ mb: 2 }}
+      >
+        Add to Organization
+      </Button>
+
+      <Dialog open={open} onClose={handleClose} maxWidth="sm" fullWidth>
+        <DialogTitle>Add to Organizations</DialogTitle>
+        <DialogContent>
+          <Typography variant="body2" sx={{ mb: 3 }}>
+            Select one or more organizations to add this user to
+          </Typography>
+
+          <Autocomplete
+            multiple
+            options={filteredOrganizations}
+            getOptionLabel={(option) =>
+              option.display_name || option.name || option.id
+            }
+            value={selectedOrganizations}
+            onChange={(_, value) => setSelectedOrganizations(value)}
+            loading={loading}
+            isOptionEqualToValue={(option, value) => option?.id === value?.id}
+            onInputChange={(_, value) => setSearchText(value)}
+            renderInput={(params) => (
+              <MuiTextField
+                {...params}
+                label="Organizations"
+                variant="outlined"
+                fullWidth
+                InputProps={{
+                  ...params.InputProps,
+                  endAdornment: (
+                    <>
+                      {loading ? (
+                        <CircularProgress color="inherit" size={20} />
+                      ) : null}
+                      {params.InputProps.endAdornment}
+                    </>
+                  ),
+                }}
+              />
+            )}
+            renderOption={(props, option) => (
+              <li {...props} key={option.id}>
+                <Box>
+                  <Typography variant="body2" fontWeight="medium">
+                    {option.display_name || option.name || option.id}
+                  </Typography>
+                  <Typography variant="caption" color="text.secondary">
+                    ID: {option.id}
+                  </Typography>
+                </Box>
+              </li>
+            )}
+          />
+
+          {selectedOrganizations.length > 0 && (
+            <Typography variant="caption" sx={{ mt: 2, display: "block" }}>
+              {selectedOrganizations.length} organization(s) selected
+            </Typography>
+          )}
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleClose}>Cancel</Button>
+          <Button
+            onClick={handleAddOrganizations}
+            variant="contained"
+            color="primary"
+            disabled={selectedOrganizations.length === 0 || loading}
+          >
+            Add to Organizations
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  );
+};
+
 // Add roles management: add roles and remove roles for a user
 const AddRoleButton = ({ onRolesChanged }: { onRolesChanged?: () => void }) => {
   const [open, setOpen] = useState(false);
@@ -1672,6 +1855,7 @@ export function UserEdit() {
           <RolesManagement />
         </TabbedForm.Tab>
         <TabbedForm.Tab label="organizations">
+          <AddOrganizationButton />
           <ReferenceManyField
             reference="user-organizations"
             target="user_id"

package/src/utils/domainUtils.ts

@@ -22,46 +22,98 @@ export interface DomainConfig {
   clientSecret?: string;
 }
 
+/**
+ * Formats a domain string (removes protocol if present)
+ */
+export const formatDomain = (domain: string): string => {
+  return domain.trim().replace(/^https?:\/\//, "");
+};
+
+/**
+ * Gets default domain configuration from environment variables
+ */
+const getDefaultDomainFromEnv = (): DomainConfig | null => {
+  const domain = import.meta.env.VITE_AUTH0_DOMAIN;
+  const clientId = import.meta.env.VITE_AUTH0_CLIENT_ID;
+  const apiUrl = import.meta.env.VITE_AUTH0_API_URL;
+
+  if (!domain) {
+    return null;
+  }
+
+  return {
+    url: formatDomain(domain),
+    connectionMethod: "login",
+    clientId: clientId || undefined,
+    restApiUrl: apiUrl || undefined,
+  };
+};
+
 /**
  * Gets domains from localStorage
  * Handles both formats (array of objects or array of strings) for backward compatibility
+ * Includes default domain from environment variables if not already in storage
  */
 export const getDomainFromStorage = (): DomainConfig[] => {
   try {
     const storedValue = localStorage.getItem(DOMAINS_STORAGE_KEY);
-    if (!storedValue) return [];
-
-    const parsedData = JSON.parse(storedValue);
-
-    // Handle both formats: array of objects with url property or array of strings
-    if (Array.isArray(parsedData)) {
-      return parsedData
-        .filter((item) => item !== null && item !== undefined)
-        .map((item) => {
-          if (typeof item === "object" && item !== null && "url" in item) {
-            // Add connectionMethod if it doesn't exist (for backward compatibility)
-            if (!("connectionMethod" in item)) {
+    let domains: DomainConfig[] = [];
+
+    if (storedValue) {
+      const parsedData = JSON.parse(storedValue);
+
+      // Handle both formats: array of objects with url property or array of strings
+      if (Array.isArray(parsedData)) {
+        domains = parsedData
+          .filter((item) => item !== null && item !== undefined)
+          .map((item) => {
+            if (typeof item === "object" && item !== null && "url" in item) {
+              // Add connectionMethod if it doesn't exist (for backward compatibility)
+              if (!("connectionMethod" in item)) {
+                return {
+                  ...item,
+                  connectionMethod: "login" as ConnectionMethod, // Assume login for existing entries
+                } as DomainConfig;
+              }
+              return item as DomainConfig;
+            } else {
+              // Convert string domains to DomainConfig format (backward compatibility)
               return {
-                ...item,
-                connectionMethod: "login" as ConnectionMethod, // Assume login for existing entries
-              } as DomainConfig;
+                url: String(item),
+                connectionMethod: "login" as ConnectionMethod,
+                clientId: "", // Empty clientId for legacy entries
+              };
             }
-            return item as DomainConfig;
-          } else {
-            // Convert string domains to DomainConfig format (backward compatibility)
-            return {
-              url: String(item),
-              connectionMethod: "login" as ConnectionMethod,
-              clientId: "", // Empty clientId for legacy entries
-            };
-          }
-        })
-        .filter((domain) => domain.url.trim() !== ""); // Remove empty domains
+          })
+          .filter((domain) => domain.url.trim() !== ""); // Remove empty domains
+      }
     }
-    return [];
+
+    // Add or update default domain from environment if configured
+    const defaultDomain = getDefaultDomainFromEnv();
+    if (defaultDomain) {
+      const existingIndex = domains.findIndex(
+        (d) => formatDomain(d.url) === defaultDomain.url,
+      );
+
+      if (existingIndex >= 0) {
+        // Update existing domain with environment config (env takes precedence)
+        domains[existingIndex] = {
+          ...domains[existingIndex],
+          ...defaultDomain,
+        };
+      } else {
+        // Add new domain at the beginning
+        domains.unshift(defaultDomain);
+      }
+    }
+
+    return domains;
   } catch (e) {
     console.error("Failed to parse domains from localStorage", e);
-    return [];
+    // Return default domain from env if storage fails
+    const defaultDomain = getDefaultDomainFromEnv();
+    return defaultDomain ? [defaultDomain] : [];
   }
 };
 
@@ -70,7 +122,6 @@ export const getDomainFromStorage = (): DomainConfig[] => {
  */
 export const saveDomainToStorage = (domains: DomainConfig[]): void => {
   try {
-    console.log("Saving domains to localStorage:", domains);
     localStorage.setItem(DOMAINS_STORAGE_KEY, JSON.stringify(domains));
   } catch (e) {
     console.error("Failed to save domains to localStorage", e);
@@ -100,7 +151,6 @@ export const getSelectedDomainFromStorage = (): string => {
  */
 export const saveSelectedDomainToStorage = (domain: string): void => {
   try {
-    console.log("Saving selected domain to localStorage:", domain);
     localStorage.setItem(SELECTED_DOMAIN_STORAGE_KEY, domain);
   } catch (e) {
     console.error("Failed to save selected domain to localStorage", e);
@@ -129,16 +179,8 @@ export const getClientIdFromStorage = (domain: string): string => {
   return fallbackClientId;
 };
 
-/**
- * Formats a domain string (removes protocol if present)
- */
-export const formatDomain = (domain: string): string => {
-  return domain.trim().replace(/^https?:\/\//, "");
-};
-
 /**
  * Constructs a full URL with HTTPS protocol
- * - If domain starts with "local.", connects to https://localhost:3000
  * - Always uses https:// for all domains (including localhost with self-signed certs)
  * - Preserves existing https:// protocol if already present
  * - Converts http:// to https://
@@ -146,14 +188,6 @@ export const formatDomain = (domain: string): string => {
 export const buildUrlWithProtocol = (domain: string): string => {
   const trimmedDomain = domain.trim();
 
-  // Extract hostname without protocol for local. check
-  const hostnameOnly = trimmedDomain.replace(/^https?:\/\//, "");
-
-  // If hostname starts with "local.", redirect to local development server
-  if (hostnameOnly.startsWith("local.")) {
-    return "https://localhost:3000";
-  }
-
   // Check if it already has a protocol
   if (trimmedDomain.startsWith("https://")) {
     return trimmedDomain;

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`, {