@authhero/react-admin 0.10.0 → 0.12.0

package/src/components/TenantAppBar.tsx

@@ -1,6 +1,8 @@
-import { AppBar, TitlePortal, useDataProvider } from "react-admin";
-import { useEffect, useState } from "react";
+import { AppBar, TitlePortal } from "react-admin";
+import { useEffect, useState, useMemo } from "react";
 import { Link, Box } from "@mui/material";
+import { getDataprovider } from "../dataProvider";
+import { getDomainFromStorage } from "../utils/domainUtils";
 
 type TenantResponse = {
   audience: string;
@@ -26,12 +28,25 @@ export function TenantAppBar(props: TenantAppBarProps) {
   const pathSegments = location.pathname.split("/").filter(Boolean);
   const tenantId = pathSegments[0];
   const [tenant, setTenant] = useState<TenantResponse>();
-  const dataProvider = useDataProvider();
+
+  // Get the selected domain from storage or environment
+  const selectedDomain = useMemo(() => {
+    const domains = getDomainFromStorage();
+    const selected = domains.find((d) => d.isSelected);
+    return selected?.url || import.meta.env.VITE_AUTH0_DOMAIN || "";
+  }, []);
+
+  // Use the non-org data provider for fetching tenants list
+  // This is necessary because tenants list requires a non-org token
+  const tenantsDataProvider = useMemo(
+    () => getDataprovider(selectedDomain),
+    [selectedDomain],
+  );
 
   useEffect(() => {
-    // Use the dataProvider to fetch tenants list and find the matching one
-    // This ensures we use the correct API URL configured in the app
-    dataProvider
+    // Use the non-org dataProvider to fetch tenants list
+    // The tenants endpoint requires non-org scoped tokens
+    tenantsDataProvider
       .getList("tenants", {
         pagination: { page: 1, perPage: 100 },
         sort: { field: "id", order: "ASC" },
@@ -59,7 +74,7 @@ export function TenantAppBar(props: TenantAppBarProps) {
           name: tenantId,
         } as TenantResponse);
       });
-  }, [tenantId, dataProvider]);
+  }, [tenantId, tenantsDataProvider]);
 
   const isDefaultSettings = tenantId === "DEFAULT_SETTINGS";
 

package/src/components/clients/edit.tsx

@@ -60,6 +60,7 @@ import {
   getDomainFromStorage,
   getSelectedDomainFromStorage,
   buildUrlWithProtocol,
+  formatDomain,
 } from "../../utils/domainUtils";
 
 const AddClientGrantButton = () => {
@@ -746,7 +747,20 @@ const ClientMetadataInput = ({ source }: { source: string }) => {
   };
 
   const updateFormData = (array: Array<{ key: string; value: string }>) => {
+    // Fields managed by other inputs (BooleanInput, SelectInput, etc.)
+    const preservedFields = ["disable_sign_ups", "email_validation"];
+
+    // Start with preserved fields from current value
     const newObject: Record<string, any> = {};
+    if (value && typeof value === "object") {
+      preservedFields.forEach((field) => {
+        if (field in value) {
+          newObject[field] = value[field];
+        }
+      });
+    }
+
+    // Add the metadata array values
     array.forEach((item) => {
       if (item.key && item.key.trim()) {
         newObject[item.key.trim()] = item.value;
@@ -808,7 +822,8 @@ interface Connection {
 const getApiBaseUrl = (): string => {
   const selectedDomain = getSelectedDomainFromStorage();
   const domains = getDomainFromStorage();
-  const domainConfig = domains.find((d) => d.url === selectedDomain);
+  const formattedDomain = formatDomain(selectedDomain);
+  const domainConfig = domains.find((d) => formatDomain(d.url) === formattedDomain);
 
   if (domainConfig?.restApiUrl) {
     return domainConfig.restApiUrl.replace(/\/$/, "");
@@ -1157,8 +1172,34 @@ const ConnectionsTab = () => {
 };
 
 export function ClientEdit() {
+  // Transform data before submission to ensure client_metadata values are strings
+  const transformClientData = (data: Record<string, unknown>) => {
+    const transformed = { ...data };
+
+    // Ensure client_metadata values are strings (Auth0 requirement)
+    if (
+      transformed.client_metadata &&
+      typeof transformed.client_metadata === "object"
+    ) {
+      const metadata = transformed.client_metadata as Record<string, unknown>;
+      const stringifiedMetadata: Record<string, string> = {};
+
+      for (const [key, value] of Object.entries(metadata)) {
+        if (typeof value === "boolean") {
+          stringifiedMetadata[key] = value ? "true" : "false";
+        } else if (value !== null && value !== undefined) {
+          stringifiedMetadata[key] = String(value);
+        }
+      }
+
+      transformed.client_metadata = stringifiedMetadata;
+    }
+
+    return transformed;
+  };
+
   return (
-    <Edit>
+    <Edit transform={transformClientData}>
       <SimpleShowLayout>
         <TextField source="name" />
         <TextField source="id" />

package/src/components/organizations/edit.tsx

@@ -14,7 +14,7 @@ import {
   useRecordContext,
   useRedirect,
 } from "react-admin";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import {
   Box,
   Button,
@@ -34,9 +34,15 @@ import {
   Checkbox,
   Chip,
   Stack,
+  FormControl,
+  InputLabel,
+  Select,
+  MenuItem,
+  OutlinedInput,
 } from "@mui/material";
 import AddIcon from "@mui/icons-material/Add";
 import DeleteIcon from "@mui/icons-material/Delete";
+import EditIcon from "@mui/icons-material/Edit";
 import { useParams } from "react-router-dom";
 
 const AddOrganizationMemberButton = () => {
@@ -401,6 +407,227 @@ const RemoveMemberButton = ({ record }: { record: any }) => {
   );
 };
 
+const ManageMemberRolesButton = ({ record }: { record: any }) => {
+  const [open, setOpen] = useState(false);
+  const [roles, setRoles] = useState<any[]>([]);
+  const [memberRoles, setMemberRoles] = useState<string[]>([]);
+  const [loading, setLoading] = useState(false);
+  const dataProvider = useDataProvider();
+  const notify = useNotify();
+  const refresh = useRefresh();
+  const { id: organizationId } = useParams();
+
+  const handleOpen = async () => {
+    setOpen(true);
+    setLoading(true);
+    try {
+      // Fetch all available roles
+      const { data: allRoles } = await dataProvider.getList("roles", {
+        pagination: { page: 1, perPage: 100 },
+        sort: { field: "name", order: "ASC" },
+        filter: {},
+      });
+      setRoles(allRoles);
+
+      // Fetch member's current roles in this organization
+      if (organizationId && record?.user_id) {
+        const response = await dataProvider.getList(
+          `organizations/${organizationId}/members/${record.user_id}/roles`,
+          {
+            pagination: { page: 1, perPage: 100 },
+            sort: { field: "name", order: "ASC" },
+            filter: {},
+          },
+        );
+        setMemberRoles(response.data.map((r: any) => r.id));
+      }
+    } catch (error) {
+      notify("Error loading roles", { type: "error" });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+    setMemberRoles([]);
+    setRoles([]);
+  };
+
+  const handleSaveRoles = async () => {
+    if (!organizationId || !record?.user_id) return;
+
+    setLoading(true);
+    try {
+      // Get current roles to determine what to add/remove
+      const currentResponse = await dataProvider.getList(
+        `organizations/${organizationId}/members/${record.user_id}/roles`,
+        {
+          pagination: { page: 1, perPage: 100 },
+          sort: { field: "name", order: "ASC" },
+          filter: {},
+        },
+      );
+      const currentRoleIds = currentResponse.data.map((r: any) => r.id);
+
+      const rolesToAdd = memberRoles.filter((r) => !currentRoleIds.includes(r));
+      const rolesToRemove = currentRoleIds.filter(
+        (r: string) => !memberRoles.includes(r),
+      );
+
+      // Add new roles
+      if (rolesToAdd.length > 0) {
+        await dataProvider.create(
+          `organizations/${organizationId}/members/${record.user_id}/roles`,
+          {
+            data: { roles: rolesToAdd },
+          },
+        );
+      }
+
+      // Remove old roles
+      if (rolesToRemove.length > 0) {
+        await dataProvider.delete(
+          `organizations/${organizationId}/members/${record.user_id}/roles`,
+          {
+            id: "",
+            previousData: { roles: rolesToRemove },
+          },
+        );
+      }
+
+      notify("Member roles updated successfully", { type: "success" });
+      refresh();
+      handleClose();
+    } catch (error) {
+      notify("Error updating member roles", { type: "error" });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <IconButton
+        onClick={handleOpen}
+        color="primary"
+        size="small"
+        title="Manage roles"
+      >
+        <EditIcon />
+      </IconButton>
+
+      <Dialog open={open} onClose={handleClose} maxWidth="sm" fullWidth>
+        <DialogTitle>
+          Manage Roles for {record?.email || record?.user_id}
+        </DialogTitle>
+        <DialogContent>
+          {loading ? (
+            <Box display="flex" justifyContent="center" p={3}>
+              <CircularProgress />
+            </Box>
+          ) : (
+            <>
+              <DialogContentText sx={{ mb: 2 }}>
+                Select roles to assign to this member in this organization.
+              </DialogContentText>
+
+              <FormControl fullWidth>
+                <InputLabel id="member-roles-label">Roles</InputLabel>
+                <Select
+                  labelId="member-roles-label"
+                  multiple
+                  value={memberRoles}
+                  onChange={(e) => setMemberRoles(e.target.value as string[])}
+                  input={<OutlinedInput label="Roles" />}
+                  renderValue={(selected) => (
+                    <Stack direction="row" spacing={0.5} flexWrap="wrap">
+                      {selected.map((roleId) => {
+                        const role = roles.find((r) => r.id === roleId);
+                        return (
+                          <Chip
+                            key={roleId}
+                            label={role?.name || roleId}
+                            size="small"
+                          />
+                        );
+                      })}
+                    </Stack>
+                  )}
+                >
+                  {roles.map((role) => (
+                    <MenuItem key={role.id} value={role.id}>
+                      <Checkbox checked={memberRoles.includes(role.id)} />
+                      <ListItemText
+                        primary={role.name}
+                        secondary={role.description}
+                      />
+                    </MenuItem>
+                  ))}
+                </Select>
+              </FormControl>
+            </>
+          )}
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleClose}>Cancel</Button>
+          <Button onClick={handleSaveRoles} variant="contained" disabled={loading}>
+            Save Roles
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  );
+};
+
+const MemberRolesDisplay = ({ record }: { record: any }) => {
+  const [roles, setRoles] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+  const dataProvider = useDataProvider();
+  const { id: organizationId } = useParams();
+
+  useEffect(() => {
+    const fetchRoles = async () => {
+      if (!organizationId || !record?.user_id) {
+        setLoading(false);
+        return;
+      }
+      try {
+        const response = await dataProvider.getList(
+          `organizations/${organizationId}/members/${record.user_id}/roles`,
+          {
+            pagination: { page: 1, perPage: 100 },
+            sort: { field: "name", order: "ASC" },
+            filter: {},
+          },
+        );
+        setRoles(response.data);
+      } catch (error) {
+        console.error("Error fetching member roles:", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchRoles();
+  }, [dataProvider, organizationId, record?.user_id]);
+
+  if (loading) {
+    return <CircularProgress size={16} />;
+  }
+
+  if (roles.length === 0) {
+    return <Typography color="text.secondary">No roles</Typography>;
+  }
+
+  return (
+    <Stack direction="row" spacing={0.5} flexWrap="wrap">
+      {roles.map((role) => (
+        <Chip key={role.id} label={role.name} size="small" variant="outlined" />
+      ))}
+    </Stack>
+  );
+};
+
 const OrganizationGeneralTab = () => (
   <Box>
     <TextInput source="name" validate={[required()]} fullWidth />
@@ -456,9 +683,18 @@ const OrganizationMembersTab = () => {
             )}
           />
           <TextField source="email" label="Email" />
+          <FunctionField
+            label="Roles"
+            render={(record) => <MemberRolesDisplay record={record} />}
+          />
           <FunctionField
             label="Actions"
-            render={(record) => <RemoveMemberButton record={record} />}
+            render={(record) => (
+              <Box sx={{ display: "flex", gap: 0.5 }}>
+                <ManageMemberRolesButton record={record} />
+                <RemoveMemberButton record={record} />
+              </Box>
+            )}
           />
         </Datagrid>
       </ReferenceManyField>

package/src/components/resource-servers/edit.tsx

@@ -9,113 +9,146 @@ import {
   required,
   NumberInput,
   FormDataConsumer,
+  useRecordContext,
 } from "react-admin";
-import { Stack } from "@mui/material";
+import { Stack, Alert } from "@mui/material";
+
+function SystemEntityAlert() {
+  const record = useRecordContext();
+  if (!record?.is_system) return null;
 
-export function ResourceServerEdit() {
   return (
-    <Edit>
-      <TabbedForm>
-        <TabbedForm.Tab label="Details">
-          <Stack spacing={2}>
-            <TextInput source="name" validate={[required()]} />
-            <TextInput
-              source="identifier"
-              validate={[required()]}
-              helperText="Unique identifier for this resource server"
-            />
-          </Stack>
+    <Alert severity="info" sx={{ mb: 2 }}>
+      This Resource Server represents a system entity and cannot be modified or
+      deleted. You can still authorize applications to consume this resource
+      server.
+    </Alert>
+  );
+}
+
+function ResourceServerForm() {
+  const record = useRecordContext();
+  const isSystem = record?.is_system;
+
+  return (
+    <TabbedForm>
+      <TabbedForm.Tab label="Details">
+        <SystemEntityAlert />
+        <Stack spacing={2}>
+          <TextInput source="name" validate={[required()]} disabled={isSystem} />
+          <TextInput
+            source="identifier"
+            validate={[required()]}
+            helperText="Unique identifier for this resource server"
+            disabled={isSystem}
+          />
+        </Stack>
+
+        <Stack spacing={2} direction="row" sx={{ mt: 2 }}>
+          <BooleanInput
+            source="signing_alg_values_supported"
+            defaultValue={true}
+            disabled={isSystem}
+          />
+          <BooleanInput
+            source="skip_consent_for_verifiable_first_party_clients"
+            defaultValue={true}
+            disabled={isSystem}
+          />
+          <BooleanInput source="allow_offline_access" defaultValue={true} disabled={isSystem} />
+        </Stack>
 
-          <Stack spacing={2} direction="row" sx={{ mt: 2 }}>
-            <BooleanInput
-              source="signing_alg_values_supported"
-              defaultValue={true}
-            />
-            <BooleanInput
-              source="skip_consent_for_verifiable_first_party_clients"
-              defaultValue={true}
-            />
-            <BooleanInput source="allow_offline_access" defaultValue={true} />
-          </Stack>
+        <Stack spacing={2} direction="row" sx={{ mt: 2 }}>
+          <TextInput
+            source="signing_alg"
+            defaultValue="RS256"
+            helperText="Signing algorithm for tokens"
+            disabled={isSystem}
+          />
+        </Stack>
 
-          <Stack spacing={2} direction="row" sx={{ mt: 2 }}>
-            <TextInput
-              source="signing_alg"
-              defaultValue="RS256"
-              helperText="Signing algorithm for tokens"
-            />
-          </Stack>
+        <Stack spacing={2} direction="row" sx={{ mt: 2 }}>
+          <NumberInput
+            source="token_lifetime"
+            defaultValue={1209600}
+            helperText="Token lifetime in seconds (default: 14 days)"
+            disabled={isSystem}
+          />
+          <NumberInput
+            source="token_lifetime_for_web"
+            defaultValue={7200}
+            helperText="Web token lifetime in seconds (default: 2 hours)"
+            disabled={isSystem}
+          />
+        </Stack>
 
-          <Stack spacing={2} direction="row" sx={{ mt: 2 }}>
-            <NumberInput
-              source="token_lifetime"
-              defaultValue={1209600}
-              helperText="Token lifetime in seconds (default: 14 days)"
-            />
-            <NumberInput
-              source="token_lifetime_for_web"
-              defaultValue={7200}
-              helperText="Web token lifetime in seconds (default: 2 hours)"
-            />
-          </Stack>
+        <Stack spacing={2} direction="row" sx={{ mt: 4 }}>
+          <TextField source="created_at" />
+          <TextField source="updated_at" />
+        </Stack>
+      </TabbedForm.Tab>
 
-          <Stack spacing={2} direction="row" sx={{ mt: 4 }}>
-            <TextField source="created_at" />
-            <TextField source="updated_at" />
-          </Stack>
-        </TabbedForm.Tab>
+      <TabbedForm.Tab label="RBAC">
+        <Stack spacing={3}>
+          <BooleanInput
+            source="options.enforce_policies"
+            label="Enable RBAC"
+            helperText="Enable Role-Based Access Control for this resource server"
+            disabled={isSystem}
+          />
 
-        <TabbedForm.Tab label="RBAC">
-          <Stack spacing={3}>
-            <BooleanInput
-              source="options.enforce_policies"
-              label="Enable RBAC"
-              helperText="Enable Role-Based Access Control for this resource server"
-            />
+          <FormDataConsumer>
+            {({ formData }) => (
+              <BooleanInput
+                source="options.token_dialect"
+                label="Add permissions in token"
+                helperText="Include permissions directly in the access token"
+                disabled={isSystem || !formData?.options?.enforce_policies}
+                format={(value) => value === "access_token_authz"}
+                parse={(checked) =>
+                  checked ? "access_token_authz" : "access_token"
+                }
+              />
+            )}
+          </FormDataConsumer>
+        </Stack>
+      </TabbedForm.Tab>
 
-            <FormDataConsumer>
-              {({ formData }) => (
-                <BooleanInput
-                  source="options.token_dialect"
-                  label="Add permissions in token"
-                  helperText="Include permissions directly in the access token"
-                  disabled={!formData?.options?.enforce_policies}
-                  format={(value) => value === "access_token_authz"}
-                  parse={(checked) =>
-                    checked ? "access_token_authz" : "access_token"
-                  }
-                />
-              )}
-            </FormDataConsumer>
-          </Stack>
-        </TabbedForm.Tab>
+      <TabbedForm.Tab label="Scopes">
+        <ArrayInput source="scopes" label="" disabled={isSystem}>
+          <SimpleFormIterator disableAdd={isSystem} disableRemove={isSystem} disableReordering={isSystem}>
+            <Stack
+              spacing={2}
+              direction="row"
+              sx={{ width: "100%", alignItems: "flex-start" }}
+            >
+              <TextInput
+                source="value"
+                validate={[required()]}
+                label="Scope Name"
+                helperText="e.g., read:users, write:posts"
+                sx={{ flex: 1 }}
+                disabled={isSystem}
+              />
+              <TextInput
+                source="description"
+                label="Description"
+                helperText="What this scope allows"
+                sx={{ flex: 2 }}
+                disabled={isSystem}
+              />
+            </Stack>
+          </SimpleFormIterator>
+        </ArrayInput>
+      </TabbedForm.Tab>
+    </TabbedForm>
+  );
+}
 
-        <TabbedForm.Tab label="Scopes">
-          <ArrayInput source="scopes" label="">
-            <SimpleFormIterator>
-              <Stack
-                spacing={2}
-                direction="row"
-                sx={{ width: "100%", alignItems: "flex-start" }}
-              >
-                <TextInput
-                  source="value"
-                  validate={[required()]}
-                  label="Scope Name"
-                  helperText="e.g., read:users, write:posts"
-                  sx={{ flex: 1 }}
-                />
-                <TextInput
-                  source="description"
-                  label="Description"
-                  helperText="What this scope allows"
-                  sx={{ flex: 2 }}
-                />
-              </Stack>
-            </SimpleFormIterator>
-          </ArrayInput>
-        </TabbedForm.Tab>
-      </TabbedForm>
+export function ResourceServerEdit() {
+  return (
+    <Edit>
+      <ResourceServerForm />
     </Edit>
   );
 }