@authhero/react-admin 0.21.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,17 @@
 # @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

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.21.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);
 

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",
     },
   });
 
@@ -143,9 +151,19 @@ 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
@@ -153,7 +171,7 @@ export const createAuth0ClientForOrg = (
     authorizationParams: {
       audience,
       redirect_uri: redirectUri,
-      scope: "openid profile email auth:read auth:write",
+      scope: "openid profile email",
       organization: normalizedOrgId,
     },
   });

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;