@authhero/react-admin 0.10.0 → 0.11.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @authhero/react-admin
 
+## 0.11.0
+
+### Minor Changes
+
+- 1c36752: Use org tokens for tenants in admin
+
 ## 0.10.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@authhero/react-admin",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "private": false,
   "repository": {
     "type": "git",

package/src/AuthCallback.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState, useRef } from "react";
 import { useNavigate, useLocation } from "react-router-dom";
 import { CircularProgress, Box, Typography, Alert } from "@mui/material";
 import { getSelectedDomainFromStorage } from "./utils/domainUtils";
-import { createAuth0Client } from "./authProvider";
+import { createAuth0Client, createAuth0ClientForOrg } from "./authProvider";
 
 interface AuthCallbackProps {
   onAuthComplete?: () => void;
@@ -55,19 +55,53 @@ export function AuthCallback({ onAuthComplete }: AuthCallbackProps) {
           return;
         }
 
-        // Get the auth0 client for the selected domain
-        const auth0 = createAuth0Client(selectedDomain);
-
         // Mark that we've processed this callback to prevent duplicate processing
         callbackProcessedRef.current = true;
 
+        // First, try with the non-org client to handle the callback
+        // The Auth0 SDK will extract the token, and we can then check if it has org_id
+        const auth0 = createAuth0Client(selectedDomain);
+
         // Process the redirect callback
         // This is critical - it extracts the auth info from the URL and stores it
-        await auth0.handleRedirectCallback();
+        const result = await auth0.handleRedirectCallback();
+
+        // Get the return URL from appState, defaulting to /tenants
+        const returnTo = result?.appState?.returnTo || "/tenants";
+
+        // Check if the token has an organization by decoding the ID token
+        // If returnTo is a tenant path (not /tenants), we need to also cache for that org
+        const pathSegments = returnTo.split("/").filter(Boolean);
+        const possibleOrgId = pathSegments[0];
+
+        // If it looks like a tenant path (not 'tenants' itself), create an org client
+        // to ensure the token is also cached in the org-specific cache
+        if (possibleOrgId && possibleOrgId !== "tenants") {
+          try {
+            // Get the token from the non-org client and check if it has org_id
+            const token = await auth0.getIdTokenClaims();
+            if (token?.org_id === possibleOrgId) {
+              // Create the org client - this will also cache the token in the org-specific cache
+              const orgAuth0 = createAuth0ClientForOrg(
+                selectedDomain,
+                possibleOrgId,
+              );
+              // Try to get a token to populate the org cache
+              await orgAuth0.getTokenSilently().catch(() => {
+                // It's ok if this fails - the main callback was processed
+                console.log(
+                  `[AuthCallback] Org token caching for ${possibleOrgId} deferred`,
+                );
+              });
+            }
+          } catch {
+            // Non-critical - continue with navigation
+          }
+        }
 
         // We're being redirected back from the authentication provider
-        // Force redirect to the main application
-        forceNavigate("/tenants");
+        // Navigate to the original URL or /tenants
+        forceNavigate(returnTo);
       } catch (err) {
         // Only set error for real errors, not for "already processed" errors
         if (err instanceof Error) {

package/src/authProvider.ts

@@ -1,4 +1,4 @@
-import { Auth0AuthProvider, httpClient } from "ra-auth-auth0";
+import { Auth0AuthProvider } from "ra-auth-auth0";
 import { Auth0Client } from "@auth0/auth0-spa-js";
 import { ManagementClient } from "auth0";
 import {
@@ -7,7 +7,10 @@ import {
   getDomainFromStorage,
   buildUrlWithProtocol,
 } from "./utils/domainUtils";
-import getToken from "./utils/tokenUtils";
+import getToken, {
+  clearOrganizationTokenCache,
+  OrgCache,
+} from "./utils/tokenUtils";
 
 // Track auth requests globally
 let authRequestInProgress = false;
@@ -17,13 +20,16 @@ const AUTH_REQUEST_DEBOUNCE_MS = 1000; // Debounce time between auth requests
 // Store active sessions by domain
 const activeSessions = new Map<string, boolean>();
 
-// Cache for auth0 clients
+// Cache for auth0 clients (domain only, no org)
 const auth0ClientCache = new Map<string, Auth0Client>();
 
+// Cache for organization-specific auth0 clients (domain:orgId)
+const auth0OrgClientCache = new Map<string, Auth0Client>();
+
 // Cache for management clients
 const managementClientCache = new Map<string, ManagementClient>();
 
-// Create a function to get Auth0Client with the specified domain
+// Create a function to get Auth0Client with the specified domain (no organization)
 export const createAuth0Client = (domain: string) => {
   // Check cache first to avoid creating multiple clients for the same domain
   if (auth0ClientCache.has(domain)) {
@@ -37,13 +43,17 @@ export const createAuth0Client = (domain: string) => {
   const currentUrl = new URL(window.location.href);
   const redirectUri = `${currentUrl.protocol}//${currentUrl.host}/auth-callback`;
 
+  // Use explicit audience or fallback to the domain's API
+  const audience =
+    import.meta.env.VITE_AUTH0_AUDIENCE || `https://${domain}/api/v2/`;
+
   const auth0Client = new Auth0Client({
     domain: fullDomain,
     clientId: getClientIdFromStorage(domain),
     cacheLocation: "localstorage",
     useRefreshTokens: true,
     authorizationParams: {
-      audience: import.meta.env.VITE_AUTH0_AUDIENCE,
+      audience,
       redirect_uri: redirectUri,
       scope: "openid profile email auth:read auth:write",
     },
@@ -101,6 +111,52 @@ export const createAuth0Client = (domain: string) => {
   return auth0Client;
 };
 
+/**
+ * Create an Auth0Client for a specific organization with isolated cache.
+ * This ensures tokens for different organizations don't interfere with each other.
+ */
+export const createAuth0ClientForOrg = (
+  domain: string,
+  organizationId: string,
+) => {
+  const cacheKey = `${domain}:${organizationId}`;
+
+  // Check cache first
+  if (auth0OrgClientCache.has(cacheKey)) {
+    return auth0OrgClientCache.get(cacheKey)!;
+  }
+
+  // Build full domain URL with HTTPS
+  const fullDomain = buildUrlWithProtocol(domain);
+
+  // Get redirect URI from current app URL
+  const currentUrl = new URL(window.location.href);
+  const redirectUri = `${currentUrl.protocol}//${currentUrl.host}/auth-callback`;
+
+  // Use explicit audience or fallback to the domain's API
+  const audience =
+    import.meta.env.VITE_AUTH0_AUDIENCE || `https://${domain}/api/v2/`;
+
+  const auth0Client = new Auth0Client({
+    domain: fullDomain,
+    clientId: getClientIdFromStorage(domain),
+    useRefreshTokens: true,
+    // Use organization-specific cache to isolate tokens
+    // Note: Don't use cacheLocation when providing a custom cache
+    cache: new OrgCache(organizationId),
+    authorizationParams: {
+      audience,
+      redirect_uri: redirectUri,
+      scope: "openid profile email auth:read auth:write offline_access",
+      organization: organizationId,
+    },
+  });
+
+  // Store in cache
+  auth0OrgClientCache.set(cacheKey, auth0Client);
+  return auth0Client;
+};
+
 // Create a Management API client
 export const createManagementClient = async (
   apiDomain: string,
@@ -149,6 +205,7 @@ export const createManagementClient = async (
 // but callers typically only have access to the OAuth domain
 export const clearManagementClientCache = () => {
   managementClientCache.clear();
+  clearOrganizationTokenCache();
 };
 
 // Create a function to get the auth provider with the specified domain
@@ -478,16 +535,62 @@ const authorizedHttpClient = (url: string, options: HttpOptions = {}) => {
         throw error;
       });
   } else {
-    // For Auth0 login method, create a client for the current domain
+    // For Auth0 login method, get a token WITHOUT organization scope
+    // This ensures we don't accidentally use an org-scoped token when listing tenants
     const currentAuth0Client = createAuth0Client(selectedDomain);
-    // Ensure headers is a Headers instance (ra-auth-auth0 expects this)
-    const normalizedOptions = {
-      ...options,
-      headers: new Headers(options.headers || {}),
-    };
-    request = httpClient(currentAuth0Client)(url, normalizedOptions).catch(
-      (error) => {
-        // Check for certificate errors
+    request = getToken(domainConfig, currentAuth0Client)
+      .catch((error) => {
+        throw new Error(
+          `Authentication failed: ${error.message}. Please log in again.`,
+        );
+      })
+      .then((token) => {
+        const headersObj = new Headers();
+        headersObj.set("Authorization", `Bearer ${token}`);
+        const method = (options.method || "GET").toUpperCase();
+        if (method === "POST" || method === "PATCH") {
+          headersObj.set("content-type", "application/json");
+        }
+        return fetch(url, { ...options, headers: headersObj });
+      })
+      .then(async (response) => {
+        if (response.status < 200 || response.status >= 300) {
+          const text = await response.text();
+
+          // Check for 401 with "Bad audience" message on /v2/tenants endpoint
+          if (
+            response.status === 401 &&
+            text.includes("Bad audience") &&
+            url.includes("/v2/tenants")
+          ) {
+            console.warn(
+              "Auth0 server detected without multi-tenant support. Navigating to Auth0 page",
+            );
+            pendingRequests.delete(requestKey);
+            window.history.pushState({}, "", "/auth0");
+            window.dispatchEvent(new PopStateEvent("popstate"));
+            throw new Error("Navigating to Auth0 configuration");
+          }
+
+          throw new Error(text || response.statusText);
+        }
+
+        const text = await response.text();
+        let json;
+        try {
+          json = JSON.parse(text);
+        } catch (e) {
+          json = text;
+        }
+
+        return {
+          json,
+          status: response.status,
+          headers: response.headers,
+          body: text,
+        };
+      })
+      .catch((error) => {
         if (error.message === "Failed to fetch" || error.name === "TypeError") {
           const urlObj = new URL(url);
           if (
@@ -495,8 +598,7 @@ const authorizedHttpClient = (url: string, options: HttpOptions = {}) => {
             urlObj.hostname === "127.0.0.1"
           ) {
             const certError = new Error(
-              `Unable to connect to ${urlObj.origin}. This may be due to an untrusted SSL certificate.\n\n` +
-                `Please visit ${urlObj.origin} in your browser and accept the security warning to trust the certificate, then refresh this page.`,
+              `Unable to connect to ${urlObj.origin}. This may be due to an untrusted SSL certificate.`,
             );
             (certError as any).isCertificateError = true;
             (certError as any).serverUrl = urlObj.origin;
@@ -504,8 +606,7 @@ const authorizedHttpClient = (url: string, options: HttpOptions = {}) => {
           }
         }
         throw error;
-      },
-    );
+      });
   }
 
   // Handle cleanup when request is done
@@ -518,4 +619,245 @@ const authorizedHttpClient = (url: string, options: HttpOptions = {}) => {
   return request;
 };
 
+/**
+ * Creates an HTTP client that uses organization-scoped tokens.
+ * This is used when accessing tenant-specific resources to ensure
+ * the user has the correct permissions for that tenant.
+ *
+ * @param organizationId - The organization/tenant ID to scope tokens to
+ * @returns An HTTP client function that uses organization-scoped tokens
+ */
+export const createOrganizationHttpClient = (organizationId: string) => {
+  return (url: string, options: HttpOptions = {}) => {
+    const requestKey = `${organizationId}:${url}-${JSON.stringify(options)}`;
+
+    // If there's already a pending request for this URL and options, return it
+    if (pendingRequests.has(requestKey)) {
+      return pendingRequests.get(requestKey)!;
+    }
+
+    // Prevent API calls while on the auth callback page
+    if (window.location.pathname === "/auth-callback") {
+      return Promise.reject({
+        json: {
+          message: "Authentication in progress. Please wait...",
+        },
+        status: 401,
+        headers: new Headers(),
+        body: JSON.stringify({ message: "Authentication in progress" }),
+      });
+    }
+
+    // Check if we're using token-based auth or client credentials
+    const domains = getDomainFromStorage();
+    const selectedDomain = getSelectedDomainFromStorage();
+    const domainConfig = domains.find((d) => d.url === selectedDomain);
+
+    // If using login method and auth request is in progress, delay the request
+    if (
+      domainConfig?.connectionMethod === "login" &&
+      (authRequestInProgress || activeSessions.has(selectedDomain))
+    ) {
+      const delayedRequest = new Promise((resolve, reject) => {
+        const checkInterval = setInterval(() => {
+          if (!authRequestInProgress && !activeSessions.has(selectedDomain)) {
+            clearInterval(checkInterval);
+            createOrganizationHttpClient(organizationId)(url, options)
+              .then(resolve)
+              .catch(reject);
+          }
+        }, 100);
+
+        setTimeout(() => {
+          clearInterval(checkInterval);
+          reject(new Error("Authentication timeout"));
+        }, 30000);
+      });
+
+      pendingRequests.set(requestKey, delayedRequest);
+      delayedRequest.finally(() => {
+        pendingRequests.delete(requestKey);
+      });
+
+      return delayedRequest;
+    }
+
+    if (!domainConfig) {
+      return Promise.reject({
+        json: {
+          message:
+            "No domain configuration found. Please select a domain and configure authentication.",
+        },
+        status: 401,
+        headers: new Headers(),
+        body: JSON.stringify({ message: "No domain configuration found" }),
+      });
+    }
+
+    let request;
+    if (
+      ["token", "client_credentials"].includes(
+        domainConfig.connectionMethod || "",
+      )
+    ) {
+      // For token/client_credentials, use the standard token (no org scoping)
+      request = getToken(domainConfig)
+        .catch((error) => {
+          throw new Error(
+            `Authentication failed: ${error.message}. Please configure your credentials in the domain selector.`,
+          );
+        })
+        .then((token) => {
+          const headersObj = new Headers();
+          headersObj.set("Authorization", `Bearer ${token}`);
+          const method = (options.method || "GET").toUpperCase();
+          if (method === "POST" || method === "PATCH") {
+            headersObj.set("content-type", "application/json");
+          }
+          return fetch(url, { ...options, headers: headersObj });
+        })
+        .then(async (response) => {
+          if (response.status < 200 || response.status >= 300) {
+            const text = await response.text();
+            throw new Error(text || response.statusText);
+          }
+
+          const text = await response.text();
+          let json;
+          try {
+            json = JSON.parse(text);
+          } catch (e) {
+            json = text;
+          }
+
+          return {
+            json,
+            status: response.status,
+            headers: response.headers,
+            body: text,
+          };
+        })
+        .catch((error) => {
+          if (
+            error.message === "Failed to fetch" ||
+            error.name === "TypeError"
+          ) {
+            const urlObj = new URL(url);
+            if (
+              urlObj.hostname === "localhost" ||
+              urlObj.hostname === "127.0.0.1"
+            ) {
+              const certError = new Error(
+                `Unable to connect to ${urlObj.origin}. This may be due to an untrusted SSL certificate.`,
+              );
+              (certError as any).isCertificateError = true;
+              (certError as any).serverUrl = urlObj.origin;
+              throw certError;
+            }
+          }
+          throw error;
+        });
+    } else {
+      // For OAuth login, use an organization-specific client with isolated cache
+      const orgAuth0Client = createAuth0ClientForOrg(
+        selectedDomain,
+        organizationId,
+      );
+
+      // Get the audience for token requests
+      const audience =
+        import.meta.env.VITE_AUTH0_AUDIENCE ||
+        `https://${selectedDomain}/api/v2/`;
+
+      // First, check if we have a valid session for this organization
+      request = orgAuth0Client
+        .getTokenSilently({
+          authorizationParams: {
+            audience,
+            organization: organizationId,
+          },
+        })
+        .catch(async (error) => {
+          // If silent token acquisition fails, we need to redirect to login with org
+          // Get the base auth0 client to get the user's email for login hint
+          const baseClient = createAuth0Client(selectedDomain);
+          const user = await baseClient.getUser().catch(() => null);
+
+          // Redirect to login with organization
+          await orgAuth0Client.loginWithRedirect({
+            authorizationParams: {
+              organization: organizationId,
+              login_hint: user?.email,
+            },
+            appState: {
+              returnTo: window.location.pathname,
+            },
+          });
+
+          // This won't be reached as loginWithRedirect redirects the page
+          throw new Error(
+            `Redirecting to login for organization ${organizationId}`,
+          );
+        })
+        .then((token) => {
+          const headersObj = new Headers();
+          headersObj.set("Authorization", `Bearer ${token}`);
+          const method = (options.method || "GET").toUpperCase();
+          if (method === "POST" || method === "PATCH") {
+            headersObj.set("content-type", "application/json");
+          }
+          return fetch(url, { ...options, headers: headersObj });
+        })
+        .then(async (response) => {
+          if (response.status < 200 || response.status >= 300) {
+            const text = await response.text();
+            throw new Error(text || response.statusText);
+          }
+
+          const text = await response.text();
+          let json;
+          try {
+            json = JSON.parse(text);
+          } catch (e) {
+            json = text;
+          }
+
+          return {
+            json,
+            status: response.status,
+            headers: response.headers,
+            body: text,
+          };
+        })
+        .catch((error) => {
+          if (
+            error.message === "Failed to fetch" ||
+            error.name === "TypeError"
+          ) {
+            const urlObj = new URL(url);
+            if (
+              urlObj.hostname === "localhost" ||
+              urlObj.hostname === "127.0.0.1"
+            ) {
+              const certError = new Error(
+                `Unable to connect to ${urlObj.origin}. This may be due to an untrusted SSL certificate.`,
+              );
+              (certError as any).isCertificateError = true;
+              (certError as any).serverUrl = urlObj.origin;
+              throw certError;
+            }
+          }
+          throw error;
+        });
+    }
+
+    request.finally(() => {
+      pendingRequests.delete(requestKey);
+    });
+
+    pendingRequests.set(requestKey, request);
+    return request;
+  };
+};
+
 export { authProvider, authorizedHttpClient };

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

@@ -746,7 +746,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;
@@ -1157,8 +1170,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>
   );
 }

package/src/dataProvider.ts

@@ -1,5 +1,8 @@
 import { UpdateParams, withLifecycleCallbacks } from "react-admin";
-import { authorizedHttpClient } from "./authProvider";
+import {
+  authorizedHttpClient,
+  createOrganizationHttpClient,
+} from "./authProvider";
 import auth0DataProvider from "./auth0DataProvider";
 import {
   getDomainFromStorage,
@@ -85,10 +88,14 @@ export function getDataproviderForTenant(
   // Ensure apiUrl doesn't end with a slash
   apiUrl = apiUrl.replace(/\/$/, "");
 
-  // Create the auth0Provider with the API URL, tenant ID, and domain
+  // Create an organization-scoped HTTP client for this tenant
+  // This ensures the user has the correct permissions for accessing tenant resources
+  const organizationHttpClient = createOrganizationHttpClient(tenantId);
+
+  // Create the auth0Provider with the API URL, tenant ID, domain, and org-scoped client
   const auth0Provider = auth0DataProvider(
     apiUrl,
-    authorizedHttpClient,
+    organizationHttpClient,
     tenantId,
     auth0Domain,
   );

package/src/utils/tokenUtils.ts

@@ -1,5 +1,57 @@
 import { DomainConfig } from "./domainUtils";
-import { Auth0Client } from "@auth0/auth0-spa-js";
+import {
+  Auth0Client,
+  ICache,
+  Cacheable,
+  MaybePromise,
+} from "@auth0/auth0-spa-js";
+
+// Import the CACHE_KEY_PREFIX constant for consistency with the Auth0 SDK
+const CACHE_KEY_PREFIX = "@@auth0spajs@@";
+
+/**
+ * Custom cache provider that wraps localStorage and adds organization isolation.
+ * This ensures that tokens and auth state are kept separate between organizations.
+ * Based on the original LocalStorageCache implementation from auth0-spa-js.
+ */
+export class OrgCache implements ICache {
+  private orgId: string;
+
+  constructor(orgId: string) {
+    this.orgId = orgId;
+  }
+
+  public set<T = Cacheable>(key: string, entry: T) {
+    const orgKey = `${key}:${this.orgId}`;
+    localStorage.setItem(orgKey, JSON.stringify(entry));
+  }
+
+  public get<T = Cacheable>(key: string): MaybePromise<T | undefined> {
+    const orgKey = `${key}:${this.orgId}`;
+    const json = window.localStorage.getItem(orgKey);
+
+    if (!json) return;
+
+    try {
+      const payload = JSON.parse(json) as T;
+      return payload;
+    } catch (e) {
+      return;
+    }
+  }
+
+  public remove(key: string) {
+    const orgKey = `${key}:${this.orgId}`;
+    localStorage.removeItem(orgKey);
+  }
+
+  public allKeys() {
+    const orgSuffix = `:${this.orgId}`;
+    return Object.keys(window.localStorage).filter(
+      (key) => key.startsWith(CACHE_KEY_PREFIX) && key.endsWith(orgSuffix),
+    );
+  }
+}
 
 async function fetchTokenWithClientCredentials(
   domain: string,
@@ -37,6 +89,24 @@ async function fetchTokenWithClientCredentials(
   return data.access_token;
 }
 
+/**
+ * Clear the organization token cache (e.g., on logout).
+ * This clears all organization-specific localStorage entries.
+ */
+export function clearOrganizationTokenCache(): void {
+  // Clear all org-cached tokens from localStorage
+  const keysToRemove = Object.keys(window.localStorage).filter(
+    (key) =>
+      key.startsWith(CACHE_KEY_PREFIX) && key.match(/:[^:]+$/),
+  );
+  keysToRemove.forEach((key) => localStorage.removeItem(key));
+}
+
+/**
+ * Get a token for the given domain configuration.
+ * For OAuth login, this gets a token WITHOUT organization scope.
+ * Use createAuth0ClientForOrg for organization-scoped tokens.
+ */
 export default async function getToken(
   domainConfig: DomainConfig,
   auth0Client?: Auth0Client,
@@ -57,7 +127,7 @@ export default async function getToken(
     );
     return token;
   } else if (domainConfig.connectionMethod === "login" && auth0Client) {
-    // If using OAuth login, get token from auth0Client
+    // Get a regular token WITHOUT organization scope
     try {
       const token = await auth0Client.getTokenSilently();
       return token;