@authhero/react-admin 0.27.0 → 0.29.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @authhero/react-admin
 
+## 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
+
+- 2d0a7f4: Add a auth0-conformance flag
+
+### Patch Changes
+
+- Updated dependencies [2d0a7f4]
+  - @authhero/adapter-interfaces@0.123.0
+  - @authhero/widget@0.7.2
+
 ## 0.27.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@authhero/react-admin",
-  "version": "0.27.0",
+  "version": "0.29.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/App.spec.tsx

@@ -29,10 +29,14 @@ vi.mock("./utils/domainUtils", () => ({
   buildUrlWithProtocol: (url: string) => `https://${url}`,
 }));
 
-vi.mock("react-router-dom", () => ({
-  useNavigate: () => vi.fn(),
-  useLocation: () => ({ pathname: "/" }),
-}));
+vi.mock("react-router-dom", async (importOriginal) => {
+  const actual = (await importOriginal()) as any;
+  return {
+    ...actual,
+    useNavigate: () => vi.fn(),
+    useLocation: () => ({ pathname: "/" }),
+  };
+});
 
 // Mock color picker to avoid CSS import issues in tests
 vi.mock("react-admin-color-picker", () => ({

package/src/authProvider.ts

@@ -225,8 +225,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/clients/edit.tsx

@@ -1226,6 +1226,12 @@ export function ClientEdit() {
             format={(value) => value === "true" || value === true}
             parse={(value) => (value ? "true" : "false")}
           />
+          <BooleanInput
+            source="auth0_conformant"
+            label="Auth0 Conformant Mode"
+            helperText="Enable Auth0-compatible behavior. Disable for strict OIDC compliance."
+            defaultValue={true}
+          />
           <ClientMetadataInput source="client_metadata" />
           <GrantTypesInput source="grant_types" />
           <ArrayInput source="callbacks">
@@ -1318,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/src/dataProvider.ts

@@ -30,6 +30,8 @@ export function getDataprovider(auth0Domain?: string) {
   // Create the complete base URL using the selected domain
   let baseUrl = import.meta.env.VITE_SIMPLE_REST_URL;
 
+  console.log("[getDataprovider] auth0Domain:", auth0Domain, "VITE_SIMPLE_REST_URL:", import.meta.env.VITE_SIMPLE_REST_URL);
+
   if (auth0Domain) {
     // Check if there's a custom REST API URL configured for this domain
     const domains = getDomainFromStorage();
@@ -38,6 +40,8 @@ export function getDataprovider(auth0Domain?: string) {
       (d) => formatDomain(d.url) === formattedAuth0Domain,
     );
 
+    console.log("[getDataprovider] domains:", domains, "domainConfig:", domainConfig);
+
     if (domainConfig?.restApiUrl) {
       // Use the custom REST API URL if configured (ensure HTTPS)
       baseUrl = buildUrlWithProtocol(domainConfig.restApiUrl);
@@ -50,6 +54,8 @@ export function getDataprovider(auth0Domain?: string) {
     baseUrl = buildUrlWithProtocol(baseUrl);
   }
 
+  console.log("[getDataprovider] final baseUrl:", baseUrl);
+
   // TODO - duplicate auth0DataProvider to tenantsDataProvider
   // we are introducing non-auth0 endpoints AND we don't require the tenants-id header
   const provider = auth0DataProvider(
@@ -74,6 +80,8 @@ export function getDataproviderForTenant(
   // Start with a default API URL
   let apiUrl;
 
+  console.log("[getDataproviderForTenant] tenantId:", tenantId, "auth0Domain:", auth0Domain);
+
   if (auth0Domain) {
     // Check if there's a custom REST API URL configured for this domain
     const domains = getDomainFromStorage();
@@ -82,6 +90,8 @@ export function getDataproviderForTenant(
       (d) => formatDomain(d.url) === formattedAuth0Domain,
     );
 
+    console.log("[getDataproviderForTenant] domains:", domains, "domainConfig:", domainConfig);
+
     if (domainConfig?.restApiUrl) {
       // Use the custom REST API URL if configured (ensure HTTPS)
       apiUrl = buildUrlWithProtocol(domainConfig.restApiUrl);
@@ -97,6 +107,8 @@ export function getDataproviderForTenant(
   // Ensure apiUrl doesn't end with a slash
   apiUrl = apiUrl.replace(/\/$/, "");
 
+  console.log("[getDataproviderForTenant] final apiUrl:", apiUrl);
+
   // Create a dynamic httpClient that checks single-tenant mode at REQUEST TIME
   // This is important because the mode may not be known when the dataProvider is created
   const dynamicHttpClient = (url: string, options?: any) => {

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