@authhero/react-admin 0.10.0

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

@@ -0,0 +1,87 @@
+import {
+  Create,
+  SimpleForm,
+  TextInput,
+  BooleanInput,
+  ArrayInput,
+  SimpleFormIterator,
+  required,
+  NumberInput,
+} from "react-admin";
+import { Stack } from "@mui/material";
+
+export function ResourceServerCreate() {
+  return (
+    <Create>
+      <SimpleForm>
+        <Stack spacing={2}>
+          <TextInput source="name" validate={[required()]} />
+          <TextInput
+            source="identifier"
+            validate={[required()]}
+            helperText="Unique identifier for this resource server"
+          />
+        </Stack>
+
+        <Stack spacing={2} direction="row" sx={{ mt: 2 }}>
+          <BooleanInput source="allow_offline_access" defaultValue={true} />
+          <BooleanInput
+            source="skip_consent_for_verifiable_first_party_clients"
+            defaultValue={true}
+          />
+          <BooleanInput source="options.enforce_policies" defaultValue={true} />
+        </Stack>
+
+        <Stack spacing={2} direction="row" sx={{ mt: 2 }}>
+          <TextInput
+            source="signing_alg"
+            defaultValue="RS256"
+            helperText="Signing algorithm for tokens"
+          />
+          <TextInput
+            source="options.token_dialect"
+            defaultValue="access_token_authz"
+            helperText="Token dialect format"
+          />
+        </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>
+
+        <ArrayInput source="scopes" label="Scopes">
+          <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>
+      </SimpleForm>
+    </Create>
+  );
+}

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

@@ -0,0 +1,121 @@
+import {
+  Edit,
+  TextInput,
+  BooleanInput,
+  ArrayInput,
+  SimpleFormIterator,
+  TextField,
+  TabbedForm,
+  required,
+  NumberInput,
+  FormDataConsumer,
+} from "react-admin";
+import { Stack } from "@mui/material";
+
+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>
+
+          <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"
+            />
+          </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>
+
+        <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={!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="">
+            <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>
+    </Edit>
+  );
+}

package/src/components/resource-servers/index.ts

@@ -0,0 +1,3 @@
+export { ResourceServerEdit } from "./edit";
+export { ResourceServerList } from "./list";
+export { ResourceServerCreate } from "./create";

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

@@ -0,0 +1,47 @@
+import {
+  List,
+  Datagrid,
+  TextField,
+  DateField,
+  FunctionField,
+  CreateButton,
+  TopToolbar,
+} from "react-admin";
+
+const ResourceServerActions = () => (
+  <TopToolbar>
+    <CreateButton />
+  </TopToolbar>
+);
+
+export function ResourceServerList() {
+  return (
+    <List actions={<ResourceServerActions />}>
+      <Datagrid rowClick="edit">
+        <TextField source="name" />
+        <TextField source="identifier" />
+        <FunctionField
+          source="scopes"
+          label="Scopes"
+          render={(record: any) => {
+            if (!record.scopes || record.scopes.length === 0) {
+              return "No scopes";
+            }
+            return `${record.scopes.length} scope${record.scopes.length === 1 ? "" : "s"}`;
+          }}
+        />
+        <FunctionField
+          source="allow_offline_access"
+          label="Offline Access"
+          render={(record: any) => (record.allow_offline_access ? "Yes" : "No")}
+        />
+        <FunctionField
+          source="token_lifetime"
+          label="Token Lifetime"
+          render={(record: any) => `${record.token_lifetime || 86400}s`}
+        />
+        <DateField source="created_at" showTime />
+      </Datagrid>
+    </List>
+  );
+}

package/src/components/roles/create.tsx

@@ -0,0 +1,12 @@
+import { Create, SimpleForm, TextInput, required } from "react-admin";
+
+export function RoleCreate() {
+  return (
+    <Create>
+      <SimpleForm>
+        <TextInput source="name" validate={[required()]} />
+        <TextInput source="description" multiline />
+      </SimpleForm>
+    </Create>
+  );
+}

package/src/components/roles/edit.tsx

@@ -0,0 +1,426 @@
+import {
+  Edit,
+  TextInput,
+  required,
+  TabbedForm,
+  ReferenceManyField,
+  Datagrid,
+  Pagination,
+  TextField,
+  FunctionField,
+  useDataProvider,
+  useNotify,
+  useRefresh,
+  useRecordContext,
+} from "react-admin";
+import { useState } from "react";
+import {
+  Box,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  Typography,
+  Autocomplete,
+  CircularProgress,
+  IconButton,
+  TextField as MuiTextField,
+} from "@mui/material";
+import AddIcon from "@mui/icons-material/Add";
+import DeleteIcon from "@mui/icons-material/Delete";
+import { DateAgo } from "../common";
+import { useParams } from "react-router-dom";
+
+const AddRolePermissionButton = () => {
+  const [open, setOpen] = useState(false);
+  const [resourceServers, setResourceServers] = useState<any[]>([]);
+  const [selectedResourceServer, setSelectedResourceServer] =
+    useState<any>(null);
+  const [availablePermissions, setAvailablePermissions] = useState<any[]>([]);
+  const [selectedPermissions, setSelectedPermissions] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [loadingPermissions, setLoadingPermissions] = useState(false);
+  const dataProvider = useDataProvider();
+  const notify = useNotify();
+  const refresh = useRefresh();
+
+  // Get role id from the route params (/:tenantId/roles/:id)
+  const { id: roleId } = useParams();
+
+  const handleOpen = async () => {
+    setOpen(true);
+    await loadResourceServers();
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+    setSelectedResourceServer(null);
+    setAvailablePermissions([]);
+    setSelectedPermissions([]);
+  };
+
+  const loadResourceServers = async () => {
+    setLoading(true);
+    try {
+      const { data } = await dataProvider.getList("resource-servers", {
+        pagination: { page: 1, perPage: 100 },
+        sort: { field: "name", order: "ASC" },
+        filter: {},
+      });
+      setResourceServers(data);
+    } catch (error) {
+      console.error("Error loading resource servers:", error);
+      notify("Error loading resource servers", { type: "error" });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const loadPermissions = async (resourceServer: any) => {
+    setLoadingPermissions(true);
+    try {
+      // Build available scopes from the selected resource server's property
+      const allScopes = (resourceServer?.scopes || []).map((s: any) => ({
+        permission_name: s?.permission_name ?? s?.value ?? s,
+        description: s?.description ?? "",
+      }));
+
+      // Fetch the role's existing permissions from /roles/:id/permissions
+      const existingRes = await dataProvider.getList(
+        `roles/${roleId}/permissions`,
+        {
+          pagination: { page: 1, perPage: 200 },
+          sort: { field: "permission_name", order: "ASC" },
+          filter: {},
+        },
+      );
+
+      const existingAll = existingRes.data ?? [];
+      // Narrow to the selected resource server
+      const existingForServer = existingAll.filter((p: any) => {
+        const identifier =
+          p.resource_server_identifier ?? p.resource_server_id ?? p.audience;
+        return identifier === resourceServer?.identifier;
+      });
+
+      const existingSet = new Set(
+        existingForServer.map((p: any) => p.permission_name),
+      );
+
+      // Filter out scopes the role already has
+      const filtered = allScopes.filter(
+        (p: any) => p.permission_name && !existingSet.has(p.permission_name),
+      );
+
+      setAvailablePermissions(filtered);
+    } catch (error) {
+      console.error("Error loading permissions:", error);
+      notify("Error loading permissions", { type: "error" });
+    } finally {
+      setLoadingPermissions(false);
+    }
+  };
+
+  const handleResourceServerChange = (resourceServer: any) => {
+    setSelectedResourceServer(resourceServer);
+    setSelectedPermissions([]);
+    if (resourceServer) {
+      loadPermissions(resourceServer);
+    } else {
+      setAvailablePermissions([]);
+    }
+  };
+
+  const handleAddPermissions = async () => {
+    if (!roleId || selectedPermissions.length === 0) {
+      notify("Please select at least one permission", { type: "warning" });
+      return;
+    }
+
+    try {
+      const payload = {
+        permissions: selectedPermissions.map((permission: any) => ({
+          permission_name: permission.permission_name,
+          resource_server_identifier: selectedResourceServer.identifier,
+        })),
+      };
+
+      await dataProvider.create(`roles/${roleId}/permissions`, {
+        data: payload,
+      });
+
+      notify(`${selectedPermissions.length} permission(s) added successfully`, {
+        type: "success",
+      });
+      handleClose();
+      refresh();
+    } catch (error) {
+      console.error("Error adding permissions:", error);
+      notify("Error adding permissions", { type: "error" });
+    }
+  };
+
+  if (!roleId) return null;
+
+  return (
+    <>
+      <Button
+        variant="contained"
+        color="primary"
+        startIcon={<AddIcon />}
+        onClick={handleOpen}
+        sx={{ mb: 2 }}
+      >
+        Add Permission
+      </Button>
+
+      <Dialog open={open} onClose={handleClose} maxWidth="md" fullWidth>
+        <DialogTitle>Add Permissions</DialogTitle>
+        <DialogContent>
+          <Typography variant="body2" sx={{ mb: 3 }}>
+            Select a resource server and permissions to assign to this role
+          </Typography>
+
+          <Box sx={{ mb: 3 }}>
+            <Autocomplete
+              options={resourceServers}
+              getOptionLabel={(option) => option.name || option.identifier}
+              value={selectedResourceServer}
+              onChange={(_, value) => handleResourceServerChange(value)}
+              loading={loading}
+              isOptionEqualToValue={(option, value) =>
+                !!option &&
+                !!value &&
+                (option.id === value.id ||
+                  option.identifier === value.identifier ||
+                  option.audience === value.audience)
+              }
+              renderInput={(params) => (
+                <MuiTextField
+                  {...params}
+                  label="Resource Server"
+                  variant="outlined"
+                  fullWidth
+                  InputProps={{
+                    ...params.InputProps,
+                    endAdornment: (
+                      <>
+                        {loading ? (
+                          <CircularProgress color="inherit" size={20} />
+                        ) : null}
+                        {params.InputProps.endAdornment}
+                      </>
+                    ),
+                  }}
+                />
+              )}
+            />
+          </Box>
+
+          {selectedResourceServer && (
+            <>
+              <Box sx={{ mb: 3 }}>
+                <Autocomplete
+                  multiple
+                  options={availablePermissions}
+                  getOptionLabel={(option) =>
+                    `${option.permission_name} - ${option.description || "No description"}`
+                  }
+                  value={selectedPermissions}
+                  onChange={(_, value) => setSelectedPermissions(value)}
+                  loading={loadingPermissions}
+                  isOptionEqualToValue={(option, value) =>
+                    option?.permission_name === value?.permission_name
+                  }
+                  renderInput={(params) => (
+                    <MuiTextField
+                      {...params}
+                      label="Permissions"
+                      variant="outlined"
+                      fullWidth
+                      InputProps={{
+                        ...params.InputProps,
+                        endAdornment: (
+                          <>
+                            {loadingPermissions ? (
+                              <CircularProgress color="inherit" size={20} />
+                            ) : null}
+                            {params.InputProps.endAdornment}
+                          </>
+                        ),
+                      }}
+                    />
+                  )}
+                  renderOption={(props, option) => (
+                    <li {...props} key={option.permission_name}>
+                      <Box>
+                        <Typography variant="body2" fontWeight="medium">
+                          {option.permission_name}
+                        </Typography>
+                        {option.description && (
+                          <Typography variant="caption" color="text.secondary">
+                            {option.description}
+                          </Typography>
+                        )}
+                      </Box>
+                    </li>
+                  )}
+                />
+              </Box>
+
+              {!loadingPermissions && availablePermissions.length === 0 && (
+                <Typography
+                  variant="body2"
+                  color="text.secondary"
+                  sx={{ mb: 2 }}
+                >
+                  This role already has all available scopes for the selected
+                  resource server.
+                </Typography>
+              )}
+
+              {selectedPermissions.length > 0 && (
+                <Box sx={{ mt: 2 }}>
+                  <Typography variant="subtitle2" sx={{ mb: 1 }}>
+                    Selected Permissions ({selectedPermissions.length}):
+                  </Typography>
+                  <Box sx={{ maxHeight: 200, overflow: "auto" }}>
+                    {selectedPermissions.map((permission, index) => (
+                      <Typography key={index} variant="body2" sx={{ ml: 2 }}>
+                        • {permission.permission_name}
+                      </Typography>
+                    ))}
+                  </Box>
+                </Box>
+              )}
+            </>
+          )}
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleClose}>Cancel</Button>
+          <Button
+            onClick={handleAddPermissions}
+            variant="contained"
+            disabled={selectedPermissions.length === 0}
+          >
+            Add {selectedPermissions.length} Permission(s)
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  );
+};
+
+const RemoveRolePermissionButton = () => {
+  const [open, setOpen] = useState(false);
+  const permission = useRecordContext();
+  const dataProvider = useDataProvider();
+  const notify = useNotify();
+  const refresh = useRefresh();
+  const { id: roleId } = useParams();
+
+  if (!permission || !roleId) return null;
+
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+
+  const handleRemove = async () => {
+    try {
+      const permissionId = encodeURIComponent(
+        `${permission.resource_server_identifier}:${permission.permission_name}`,
+      );
+
+      await dataProvider.delete(`roles/${roleId}/permissions`, {
+        id: permissionId,
+        previousData: permission,
+      });
+      notify("Permission removed successfully", { type: "success" });
+      handleClose();
+      refresh();
+    } catch (error) {
+      console.error("Error removing permission:", error);
+      notify("Error removing permission", { type: "error" });
+    }
+  };
+
+  return (
+    <>
+      <IconButton onClick={handleOpen} color="error" size="small">
+        <DeleteIcon />
+      </IconButton>
+
+      <Dialog open={open} onClose={handleClose}>
+        <DialogTitle>Remove Permission</DialogTitle>
+        <DialogContent>
+          <DialogContentText>
+            Are you sure you want to remove the permission "
+            {permission.permission_name}" from resource server "
+            {permission.resource_server_name ||
+              permission.resource_server_identifier}
+            "? This action cannot be undone.
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleClose}>Cancel</Button>
+          <Button onClick={handleRemove} color="error" autoFocus>
+            Remove
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  );
+};
+
+export function RoleEdit() {
+  return (
+    <Edit>
+      <TabbedForm>
+        <TabbedForm.Tab label="details">
+          <Box
+            sx={{
+              display: "grid",
+              gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" },
+              gap: 2,
+              width: "100%",
+            }}
+          >
+            <TextInput source="id" disabled fullWidth />
+            <TextInput source="name" validate={[required()]} fullWidth />
+            <Box sx={{ gridColumn: "1 / -1" }}>
+              <TextInput source="description" multiline minRows={6} fullWidth />
+            </Box>
+          </Box>
+        </TabbedForm.Tab>
+        <TabbedForm.Tab label="permissions">
+          <AddRolePermissionButton />
+          <ReferenceManyField
+            reference="permissions"
+            target="role_id"
+            pagination={<Pagination />}
+            sort={{ field: "permission_name", order: "ASC" }}
+          >
+            <Datagrid rowClick="" bulkActionButtons={false}>
+              <TextField
+                source="resource_server_identifier"
+                label="Resource Server"
+              />
+              <TextField source="resource_server_name" label="Resource Name" />
+              <TextField source="permission_name" label="Permission" />
+              <TextField source="description" label="Description" />
+              <FunctionField
+                source="created_at"
+                render={(record: any) =>
+                  record.created_at ? <DateAgo date={record.created_at} /> : "-"
+                }
+                label="Assigned"
+              />
+              <RemoveRolePermissionButton />
+            </Datagrid>
+          </ReferenceManyField>
+        </TabbedForm.Tab>
+      </TabbedForm>
+    </Edit>
+  );
+}