@authhero/react-admin 0.28.0 → 0.30.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @authhero/react-admin
 
+## 0.30.0
+
+### Minor Changes
+
+- 6585906: Move universal login templates to separate adapter
+
+### Patch Changes
+
+- Updated dependencies [6585906]
+  - @authhero/adapter-interfaces@0.128.0
+  - @authhero/widget@0.8.5
+
+## 0.29.0
+
+### Minor Changes
+
+- de7cb56: Use https for local dev
+- 154993d: Improve react-admin experience by clearing caches and setting cores
+
+### Patch Changes
+
+- Updated dependencies [154993d]
+  - @authhero/adapter-interfaces@0.126.0
+  - @authhero/widget@0.8.3
+
 ## 0.28.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@authhero/react-admin",
-  "version": "0.28.0",
+  "version": "0.30.0",
   "packageManager": "pnpm@10.20.0",
   "private": false,
   "repository": {
@@ -10,7 +10,7 @@
   "dependencies": {
     "@auth0/auth0-spa-js": "^2.1.3",
     "@authhero/adapter-interfaces": "^0.116.0",
-    "@authhero/widget": "^0.4.1",
+    "@authhero/widget": "^0.8.1",
     "@mui/icons-material": "^7.1.0",
     "@mui/material": "^7.1.0",
     "@tiptap/extension-link": "^3.13.0",
@@ -40,6 +40,7 @@
     "@types/react-dom": "^19.1.3",
     "@typescript-eslint/eslint-plugin": "^8.32.0",
     "@typescript-eslint/parser": "^8.32.0",
+    "@vitejs/plugin-basic-ssl": "^2.1.4",
     "@vitejs/plugin-react": "^4.4.1",
     "eslint": "^9.26.0",
     "eslint-config-prettier": "^10.1.5",

package/src/authProvider.ts

@@ -51,12 +51,6 @@ export const createAuth0Client = (domain: string) => {
     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,
@@ -152,14 +146,6 @@ export const createAuth0ClientForOrg = (
     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,
@@ -225,8 +211,10 @@ export const createManagementClient = async (
         domainForAuth,
         normalizedTenantId,
       );
+
       const audience =
         import.meta.env.VITE_AUTH0_AUDIENCE || "urn:authhero:management";
+
       try {
         token = await orgAuth0Client.getTokenSilently({
           authorizationParams: {

package/src/components/TenantAppBar.tsx

@@ -2,7 +2,7 @@ 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";
+import { getSelectedDomainFromStorage } from "../utils/domainUtils";
 
 type TenantResponse = {
   audience: string;
@@ -31,9 +31,8 @@ export function TenantAppBar(props: TenantAppBarProps) {
 
   // 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 || "";
+    const selected = getSelectedDomainFromStorage();
+    return selected || import.meta.env.VITE_AUTH0_DOMAIN || "";
   }, []);
 
   // Use the non-org data provider for fetching tenants list

package/src/components/branding/BrandingPreview.tsx

@@ -10,9 +10,11 @@ import {
 import { useState } from "react";
 import { defineCustomElements } from "@authhero/widget/loader";
 
-// Initialize the widget custom elements
+// Initialize the widget custom elements with CDN path for assets
 if (typeof window !== "undefined") {
-  defineCustomElements(window);
+  defineCustomElements(window, {
+    resourcesUrl: "https://unpkg.com/@authhero/widget@latest/dist/authhero-widget/",
+  });
 }
 
 // Types for the widget screen configuration

package/src/components/branding/UniversalLoginTab.tsx

@@ -0,0 +1,357 @@
+import { useState, useEffect, useCallback } from "react";
+import {
+  Box,
+  Typography,
+  TextField,
+  Button,
+  Alert,
+  CircularProgress,
+  Paper,
+  Divider,
+  Link,
+} from "@mui/material";
+import { useNotify } from "react-admin";
+import {
+  authorizedHttpClient,
+  createOrganizationHttpClient,
+} from "../../authProvider";
+import {
+  getDomainFromStorage,
+  buildUrlWithProtocol,
+  formatDomain,
+  getSelectedDomainFromStorage,
+} from "../../utils/domainUtils";
+
+// Get tenantId from the URL path (e.g., /breakit/branding -> breakit)
+function getTenantIdFromPath(): string {
+  const pathSegments = window.location.pathname.split("/").filter(Boolean);
+  return pathSegments[0] || "";
+}
+
+// Default template with required Liquid tags
+const DEFAULT_TEMPLATE = `<!DOCTYPE html>
+<html>
+  <head>
+    {%- auth0:head -%}
+  </head>
+  <body>
+    {%- auth0:widget -%}
+  </body>
+</html>`;
+
+function getApiUrl(): string {
+  const domains = getDomainFromStorage();
+  const selectedDomain = getSelectedDomainFromStorage();
+  const formattedSelectedDomain = formatDomain(selectedDomain);
+  const domainConfig = domains.find(
+    (d) => formatDomain(d.url) === formattedSelectedDomain
+  );
+
+  let apiUrl: string;
+
+  if (domainConfig?.restApiUrl) {
+    apiUrl = buildUrlWithProtocol(domainConfig.restApiUrl);
+  } else if (selectedDomain) {
+    apiUrl = buildUrlWithProtocol(selectedDomain);
+  } else {
+    apiUrl = buildUrlWithProtocol(import.meta.env.VITE_AUTH0_API_URL || "");
+  }
+
+  return apiUrl.replace(/\/$/, "");
+}
+
+function getHttpClient(tenantId: string) {
+  // Check single-tenant mode at request time
+  const storedFlag = sessionStorage.getItem("isSingleTenant");
+  const isSingleTenant =
+    storedFlag?.endsWith("|true") || storedFlag === "true";
+
+  // In single-tenant mode, use the regular authorized client without organization scope
+  // In multi-tenant mode, use organization-scoped client for proper access control
+  if (isSingleTenant) {
+    return authorizedHttpClient;
+  } else {
+    return createOrganizationHttpClient(tenantId);
+  }
+}
+
+export function UniversalLoginTab() {
+  const notify = useNotify();
+  const tenantId = getTenantIdFromPath();
+
+  const [template, setTemplate] = useState<string>("");
+  const [originalTemplate, setOriginalTemplate] = useState<string>("");
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [hasTemplate, setHasTemplate] = useState(false);
+
+  const fetchTemplate = useCallback(async () => {
+    if (!tenantId) return;
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const apiUrl = getApiUrl();
+      const httpClient = getHttpClient(tenantId);
+      const url = `${apiUrl}/api/v2/branding/templates/universal-login`;
+      
+      const response = await httpClient(url, {
+        headers: new Headers({
+          "tenant-id": tenantId,
+        }),
+      });
+
+      if (response.json?.body) {
+        setTemplate(response.json.body);
+        setOriginalTemplate(response.json.body);
+        setHasTemplate(true);
+      }
+    } catch (err: any) {
+      if (err.status === 404) {
+        // No template exists yet, that's fine
+        setTemplate("");
+        setOriginalTemplate("");
+        setHasTemplate(false);
+      } else {
+        setError("Failed to load template");
+        console.error("Error fetching template:", err);
+      }
+    } finally {
+      setLoading(false);
+    }
+  }, [tenantId]);
+
+  useEffect(() => {
+    fetchTemplate();
+  }, [fetchTemplate]);
+
+  const handleSave = async () => {
+    if (!tenantId) return;
+
+    // Validate template
+    if (!template.includes("{%- auth0:head -%}")) {
+      notify("Template must contain {%- auth0:head -%} tag", { type: "error" });
+      return;
+    }
+    if (!template.includes("{%- auth0:widget -%}")) {
+      notify("Template must contain {%- auth0:widget -%} tag", {
+        type: "error",
+      });
+      return;
+    }
+
+    setSaving(true);
+    setError(null);
+
+    try {
+      const apiUrl = getApiUrl();
+      const httpClient = getHttpClient(tenantId);
+      await httpClient(
+        `${apiUrl}/api/v2/branding/templates/universal-login`,
+        {
+          method: "PUT",
+          headers: new Headers({
+            "tenant-id": tenantId,
+            "Content-Type": "application/json",
+          }),
+          body: JSON.stringify({ body: template }),
+        }
+      );
+
+      setOriginalTemplate(template);
+      setHasTemplate(true);
+      notify("Template saved successfully", { type: "success" });
+    } catch (err: any) {
+      setError(err.message || "Failed to save template");
+      notify("Failed to save template", { type: "error" });
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!tenantId) return;
+
+    if (
+      !window.confirm(
+        "Are you sure you want to delete the custom template? The default template will be used instead."
+      )
+    ) {
+      return;
+    }
+
+    setSaving(true);
+    setError(null);
+
+    try {
+      const apiUrl = getApiUrl();
+      const httpClient = getHttpClient(tenantId);
+      await httpClient(
+        `${apiUrl}/api/v2/branding/templates/universal-login`,
+        {
+          method: "DELETE",
+          headers: new Headers({
+            "tenant-id": tenantId,
+          }),
+        }
+      );
+
+      setTemplate("");
+      setOriginalTemplate("");
+      setHasTemplate(false);
+      notify("Template deleted successfully", { type: "success" });
+    } catch (err: any) {
+      setError(err.message || "Failed to delete template");
+      notify("Failed to delete template", { type: "error" });
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleUseDefault = () => {
+    setTemplate(DEFAULT_TEMPLATE);
+  };
+
+  const hasChanges = template !== originalTemplate;
+
+  if (loading) {
+    return (
+      <Box sx={{ display: "flex", justifyContent: "center", p: 4 }}>
+        <CircularProgress />
+      </Box>
+    );
+  }
+
+  return (
+    <Box sx={{ maxWidth: 1000, p: 2 }}>
+      <Typography variant="h6" sx={{ mb: 2 }}>
+        Universal Login Page Template
+      </Typography>
+
+      <Typography variant="body2" sx={{ mb: 3, color: "text.secondary" }}>
+        Customize the HTML template for your Universal Login page. The template
+        uses Liquid templating syntax and must include the required{" "}
+        <code>{"{%- auth0:head -%}"}</code> and{" "}
+        <code>{"{%- auth0:widget -%}"}</code> tags.
+      </Typography>
+
+      <Alert severity="info" sx={{ mb: 3 }}>
+        <Typography variant="body2">
+          <strong>Required tags:</strong>
+          <ul style={{ margin: "8px 0", paddingLeft: "20px" }}>
+            <li>
+              <code>{"{%- auth0:head -%}"}</code> - Must be placed in the{" "}
+              <code>&lt;head&gt;</code> section
+            </li>
+            <li>
+              <code>{"{%- auth0:widget -%}"}</code> - Must be placed in the{" "}
+              <code>&lt;body&gt;</code> section where you want the login widget
+            </li>
+          </ul>
+          <Link
+            href="https://auth0.com/docs/authenticate/login/auth0-universal-login/new-experience/universal-login-page-templates"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Learn more about page templates
+          </Link>
+        </Typography>
+      </Alert>
+
+      {error && (
+        <Alert severity="error" sx={{ mb: 2 }}>
+          {error}
+        </Alert>
+      )}
+
+      <Paper variant="outlined" sx={{ mb: 2 }}>
+        <TextField
+          multiline
+          fullWidth
+          minRows={15}
+          maxRows={30}
+          value={template}
+          onChange={(e) => setTemplate(e.target.value)}
+          placeholder="Enter your custom HTML template..."
+          sx={{
+            "& .MuiInputBase-root": {
+              fontFamily: "monospace",
+              fontSize: "13px",
+            },
+            "& .MuiOutlinedInput-notchedOutline": {
+              border: "none",
+            },
+          }}
+        />
+      </Paper>
+
+      <Box sx={{ display: "flex", gap: 2, flexWrap: "wrap" }}>
+        <Button
+          variant="contained"
+          onClick={handleSave}
+          disabled={saving || !template || !hasChanges}
+        >
+          {saving ? <CircularProgress size={20} /> : "Save Template"}
+        </Button>
+
+        {!template && (
+          <Button variant="outlined" onClick={handleUseDefault}>
+            Use Default Template
+          </Button>
+        )}
+
+        {hasTemplate && (
+          <Button
+            variant="outlined"
+            color="error"
+            onClick={handleDelete}
+            disabled={saving}
+          >
+            Delete Template
+          </Button>
+        )}
+
+        {hasChanges && (
+          <Button
+            variant="text"
+            onClick={() => setTemplate(originalTemplate)}
+            disabled={saving}
+          >
+            Discard Changes
+          </Button>
+        )}
+      </Box>
+
+      {hasChanges && (
+        <Typography
+          variant="caption"
+          sx={{ display: "block", mt: 1, color: "warning.main" }}
+        >
+          You have unsaved changes
+        </Typography>
+      )}
+
+      <Divider sx={{ my: 4 }} />
+
+      <Typography variant="subtitle2" sx={{ mb: 1, color: "text.secondary" }}>
+        Template Variables
+      </Typography>
+      <Typography variant="body2" sx={{ color: "text.secondary" }}>
+        You can use Liquid variables to customize your template:
+        <ul style={{ margin: "8px 0", paddingLeft: "20px" }}>
+          <li>
+            <code>{"{{ branding.logo_url }}"}</code> - Your logo URL
+          </li>
+          <li>
+            <code>{"{{ branding.colors.primary }}"}</code> - Primary color
+          </li>
+          <li>
+            <code>{"{{ prompt.screen.name }}"}</code> - Current screen name
+          </li>
+        </ul>
+      </Typography>
+    </Box>
+  );
+}

package/src/components/branding/edit.tsx

@@ -5,6 +5,7 @@ import { useState, useEffect } from "react";
 import { Box } from "@mui/material";
 import { ThemesTab } from "./ThemesTab";
 import { BrandingPreview } from "./BrandingPreview";
+import { UniversalLoginTab } from "./UniversalLoginTab";
 
 // Helper to recursively remove null values and empty objects from data
 // This is needed because react-admin sends null for empty form fields,
@@ -207,6 +208,9 @@ function BrandingFormContent() {
               <BrandingPreview />
             </Box>
           </TabbedForm.Tab>
+          <TabbedForm.Tab label="Universal Login">
+            <UniversalLoginTab />
+          </TabbedForm.Tab>
         </TabbedForm>
       </Box>
     </Box>

package/src/components/branding/index.ts

@@ -1,2 +1,3 @@
 export * from "./edit";
 export * from "./list";
+export * from "./UniversalLoginTab";

package/src/components/clients/edit.tsx

@@ -1324,6 +1324,21 @@ export function ClientEdit() {
         <TabbedForm.Tab label="Connections">
           <ConnectionsTab />
         </TabbedForm.Tab>
+        <TabbedForm.Tab label="Advanced">
+          <Typography variant="body2" color="textSecondary" sx={{ mb: 2 }}>
+            These settings control OAuth/OIDC protocol conformance behavior.
+          </Typography>
+          <BooleanInput
+            source="oidc_conformant"
+            label="OIDC Conformant"
+            helperText="When enabled, the client will strictly follow the OIDC specification. This affects token claims, scopes, and other protocol behaviors."
+          />
+          <BooleanInput
+            source="is_first_party"
+            label="First Party Application"
+            helperText="First party applications are trusted applications that don't require user consent for standard scopes."
+          />
+        </TabbedForm.Tab>
         <TabbedForm.Tab label="Raw JSON">
           <FunctionField
             source="date"

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

@@ -9,9 +9,10 @@ import {
   FormDataConsumer,
   useRecordContext,
 } from "react-admin";
-import { Stack, Alert, Pagination, Box, Typography, Button, IconButton, TextField as MuiTextField } from "@mui/material";
+import { Stack, Alert, Box, Typography, Button, IconButton, TextField as MuiTextField, InputAdornment, TableContainer, Table, TableHead, TableBody, TableRow, TableCell, TableSortLabel, Paper, TablePagination } from "@mui/material";
 import DeleteIcon from "@mui/icons-material/Delete";
 import AddIcon from "@mui/icons-material/Add";
+import SearchIcon from "@mui/icons-material/Search";
 import { useState, useMemo, useCallback } from "react";
 import { useFormContext, useWatch } from "react-hook-form";
 
@@ -28,127 +29,216 @@ function SystemEntityAlert() {
   );
 }
 
-const SCOPES_PER_PAGE = 10;
-
 interface Scope {
   value: string;
   description?: string;
 }
 
-function PaginatedScopesInput({ disabled }: { disabled?: boolean }) {
+type SortField = "value" | "description";
+type SortOrder = "asc" | "desc";
+
+function ScopesListInput({ disabled }: { disabled?: boolean }) {
   const { setValue, getValues } = useFormContext();
   const scopes: Scope[] = useWatch({ name: "scopes" }) || [];
-  const [page, setPage] = useState(1);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [sortField, setSortField] = useState<SortField>("value");
+  const [sortOrder, setSortOrder] = useState<SortOrder>("asc");
+  const [page, setPage] = useState(0);
+  const [rowsPerPage, setRowsPerPage] = useState(25);
+
+  const filteredAndSortedScopes = useMemo(() => {
+    let result = scopes.map((scope, index) => ({ ...scope, originalIndex: index }));
+    
+    // Filter by search query
+    if (searchQuery) {
+      const query = searchQuery.toLowerCase();
+      result = result.filter(
+        (scope) =>
+          scope.value?.toLowerCase().includes(query) ||
+          scope.description?.toLowerCase().includes(query)
+      );
+    }
+    
+    // Sort
+    result.sort((a, b) => {
+      const aValue = (a[sortField] || "").toLowerCase();
+      const bValue = (b[sortField] || "").toLowerCase();
+      const comparison = aValue.localeCompare(bValue);
+      return sortOrder === "asc" ? comparison : -comparison;
+    });
+    
+    return result;
+  }, [scopes, searchQuery, sortField, sortOrder]);
 
-  const totalPages = Math.max(1, Math.ceil(scopes.length / SCOPES_PER_PAGE));
-  
   const paginatedScopes = useMemo(() => {
-    const start = (page - 1) * SCOPES_PER_PAGE;
-    const end = start + SCOPES_PER_PAGE;
-    return scopes.slice(start, end).map((scope, index) => ({
-      ...scope,
-      actualIndex: start + index,
-    }));
-  }, [scopes, page]);
+    const start = page * rowsPerPage;
+    return filteredAndSortedScopes.slice(start, start + rowsPerPage);
+  }, [filteredAndSortedScopes, page, rowsPerPage]);
 
-  const handlePageChange = (_event: React.ChangeEvent<unknown>, value: number) => {
-    setPage(value);
+  const handleSort = (field: SortField) => {
+    if (sortField === field) {
+      setSortOrder(sortOrder === "asc" ? "desc" : "asc");
+    } else {
+      setSortField(field);
+      setSortOrder("asc");
+    }
   };
 
   const handleAdd = useCallback(() => {
     const currentScopes = getValues("scopes") || [];
     setValue("scopes", [...currentScopes, { value: "", description: "" }], { shouldDirty: true });
-    // Navigate to the last page where the new item will be
-    const newTotalPages = Math.ceil((currentScopes.length + 1) / SCOPES_PER_PAGE);
-    setPage(newTotalPages);
-  }, [getValues, setValue]);
+    // Clear search and go to last page to show the new item
+    setSearchQuery("");
+    const newTotal = currentScopes.length + 1;
+    setPage(Math.floor(newTotal / rowsPerPage));
+  }, [getValues, setValue, rowsPerPage]);
 
-  const handleRemove = useCallback((actualIndex: number) => {
+  const handleRemove = useCallback((originalIndex: number) => {
     const currentScopes = getValues("scopes") || [];
-    const newScopes = currentScopes.filter((_: Scope, i: number) => i !== actualIndex);
+    const newScopes = currentScopes.filter((_: Scope, i: number) => i !== originalIndex);
     setValue("scopes", newScopes, { shouldDirty: true });
-    // Adjust page if we removed the last item on current page
-    const newTotalPages = Math.ceil(newScopes.length / SCOPES_PER_PAGE);
-    if (page > newTotalPages && newTotalPages > 0) {
-      setPage(newTotalPages);
-    }
-  }, [getValues, setValue, page]);
+  }, [getValues, setValue]);
 
-  const handleScopeChange = useCallback((actualIndex: number, field: "value" | "description", newValue: string) => {
+  const handleScopeChange = useCallback((originalIndex: number, field: "value" | "description", newValue: string) => {
     const currentScopes = getValues("scopes") || [];
     const newScopes = [...currentScopes];
-    newScopes[actualIndex] = { ...newScopes[actualIndex], [field]: newValue };
+    newScopes[originalIndex] = { ...newScopes[originalIndex], [field]: newValue };
     setValue("scopes", newScopes, { shouldDirty: true });
   }, [getValues, setValue]);
 
+  const handleChangePage = (_event: unknown, newPage: number) => {
+    setPage(newPage);
+  };
+
+  const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setRowsPerPage(parseInt(event.target.value, 10));
+    setPage(0);
+  };
+
   return (
     <Box>
-      <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2 }}>
-        <Typography variant="body2" color="text.secondary">
-          {scopes.length} scope{scopes.length !== 1 ? "s" : ""} total
-        </Typography>
-        {!disabled && (
-          <Button
-            startIcon={<AddIcon />}
-            onClick={handleAdd}
-            size="small"
-            variant="outlined"
-          >
-            Add Scope
-          </Button>
-        )}
-      </Box>
-
-      {paginatedScopes.map((scope) => (
-        <Stack
-          key={scope.actualIndex}
-          spacing={2}
-          direction="row"
-          sx={{ width: "100%", alignItems: "flex-start", mb: 2 }}
-        >
-          <MuiTextField
-            value={scope.value || ""}
-            onChange={(e) => handleScopeChange(scope.actualIndex, "value", e.target.value)}
-            label="Scope Name"
-            helperText="e.g., read:users, write:posts"
-            sx={{ flex: 1 }}
-            disabled={disabled}
-            size="small"
-            required
-          />
-          <MuiTextField
-            value={scope.description || ""}
-            onChange={(e) => handleScopeChange(scope.actualIndex, "description", e.target.value)}
-            label="Description"
-            helperText="What this scope allows"
-            sx={{ flex: 2 }}
-            disabled={disabled}
-            size="small"
-          />
+      <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2, gap: 2 }}>
+        <MuiTextField
+          placeholder="Search scopes..."
+          value={searchQuery}
+          onChange={(e) => {
+            setSearchQuery(e.target.value);
+            setPage(0);
+          }}
+          size="small"
+          sx={{ width: 300 }}
+          InputProps={{
+            startAdornment: (
+              <InputAdornment position="start">
+                <SearchIcon />
+              </InputAdornment>
+            ),
+          }}
+        />
+        <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
+          <Typography variant="body2" color="text.secondary">
+            {filteredAndSortedScopes.length} of {scopes.length} scope{scopes.length !== 1 ? "s" : ""}
+          </Typography>
           {!disabled && (
-            <IconButton
-              onClick={() => handleRemove(scope.actualIndex)}
-              color="error"
-              sx={{ mt: 1 }}
+            <Button
+              startIcon={<AddIcon />}
+              onClick={handleAdd}
+              size="small"
+              variant="contained"
             >
-              <DeleteIcon />
-            </IconButton>
+              Add Scope
+            </Button>
           )}
-        </Stack>
-      ))}
-
-      {totalPages > 1 && (
-        <Box sx={{ display: "flex", justifyContent: "center", mt: 2 }}>
-          <Pagination
-            count={totalPages}
-            page={page}
-            onChange={handlePageChange}
-            color="primary"
-            showFirstButton
-            showLastButton
-          />
         </Box>
-      )}
+      </Box>
+
+      <TableContainer component={Paper} variant="outlined">
+        <Table size="small">
+          <TableHead>
+            <TableRow>
+              <TableCell sx={{ width: "30%" }}>
+                <TableSortLabel
+                  active={sortField === "value"}
+                  direction={sortField === "value" ? sortOrder : "asc"}
+                  onClick={() => handleSort("value")}
+                >
+                  Scope Name
+                </TableSortLabel>
+              </TableCell>
+              <TableCell>
+                <TableSortLabel
+                  active={sortField === "description"}
+                  direction={sortField === "description" ? sortOrder : "asc"}
+                  onClick={() => handleSort("description")}
+                >
+                  Description
+                </TableSortLabel>
+              </TableCell>
+              {!disabled && <TableCell sx={{ width: 50 }} />}
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {paginatedScopes.length === 0 ? (
+              <TableRow>
+                <TableCell colSpan={disabled ? 2 : 3} align="center" sx={{ py: 4 }}>
+                  <Typography color="text.secondary">
+                    {searchQuery ? "No scopes match your search" : "No scopes defined"}
+                  </Typography>
+                </TableCell>
+              </TableRow>
+            ) : (
+              paginatedScopes.map((scope) => (
+                <TableRow key={scope.originalIndex} hover>
+                  <TableCell>
+                    <MuiTextField
+                      value={scope.value || ""}
+                      onChange={(e) => handleScopeChange(scope.originalIndex, "value", e.target.value)}
+                      size="small"
+                      fullWidth
+                      disabled={disabled}
+                      variant="standard"
+                      placeholder="e.g., read:users"
+                      InputProps={{ disableUnderline: disabled }}
+                    />
+                  </TableCell>
+                  <TableCell>
+                    <MuiTextField
+                      value={scope.description || ""}
+                      onChange={(e) => handleScopeChange(scope.originalIndex, "description", e.target.value)}
+                      size="small"
+                      fullWidth
+                      disabled={disabled}
+                      variant="standard"
+                      placeholder="What this scope allows"
+                      InputProps={{ disableUnderline: disabled }}
+                    />
+                  </TableCell>
+                  {!disabled && (
+                    <TableCell>
+                      <IconButton
+                        onClick={() => handleRemove(scope.originalIndex)}
+                        color="error"
+                        size="small"
+                      >
+                        <DeleteIcon fontSize="small" />
+                      </IconButton>
+                    </TableCell>
+                  )}
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+        <TablePagination
+          component="div"
+          count={filteredAndSortedScopes.length}
+          page={page}
+          onPageChange={handleChangePage}
+          rowsPerPage={rowsPerPage}
+          onRowsPerPageChange={handleChangeRowsPerPage}
+          rowsPerPageOptions={[10, 25, 50, 100]}
+        />
+      </TableContainer>
     </Box>
   );
 }
@@ -242,7 +332,7 @@ function ResourceServerForm() {
       </TabbedForm.Tab>
 
       <TabbedForm.Tab label="Scopes">
-        <PaginatedScopesInput disabled={isSystem} />
+        <ScopesListInput disabled={isSystem} />
       </TabbedForm.Tab>
     </TabbedForm>
   );

package/vite.config.ts

@@ -1,18 +1,47 @@
 /// <reference types="vitest" />
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
+import basicSsl from "@vitejs/plugin-basic-ssl";
+import http from "http";
+
+// Redirect HTTP to HTTPS
+const HTTPS_PORT = 5173;
+const HTTP_PORT = 5172;
+
+function startHttpRedirectServer() {
+  const server = http.createServer((req, res) => {
+    const host = req.headers.host?.replace(`:${HTTP_PORT}`, `:${HTTPS_PORT}`);
+    res.writeHead(301, { Location: `https://${host}${req.url}` });
+    res.end();
+  });
+  server.listen(HTTP_PORT, () => {
+    console.log(
+      `HTTP redirect server running on http://localhost:${HTTP_PORT} -> https://localhost:${HTTPS_PORT}`,
+    );
+  });
+}
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    react(),
+    basicSsl(),
+    {
+      name: "http-redirect",
+      configureServer() {
+        startHttpRedirectServer();
+      },
+    },
+  ],
   define: {
     "process.env": process.env,
   },
   server: {
     host: true,
+    https: {},
+    port: HTTPS_PORT,
   },
   base: "./",
-  // @ts-expect-error
   test: {
     environment: "jsdom", // Set JSDOM as the default test environment
     globals: true, // Make test globals available