@authhero/react-admin 0.10.0 → 0.12.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @authhero/react-admin
 
+## 0.12.0
+
+### Minor Changes
+
+- aba8ef9: Handle org tokens for the main tenant
+
+## 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.12.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 {
@@ -6,8 +6,13 @@ import {
   getClientIdFromStorage,
   getDomainFromStorage,
   buildUrlWithProtocol,
+  formatDomain,
 } from "./utils/domainUtils";
-import getToken from "./utils/tokenUtils";
+import getToken, {
+  clearOrganizationTokenCache,
+  getOrganizationToken,
+  OrgCache,
+} from "./utils/tokenUtils";
 
 // Track auth requests globally
 let authRequestInProgress = false;
@@ -17,13 +22,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 +45,18 @@ export const createAuth0Client = (domain: string) => {
   const currentUrl = new URL(window.location.href);
   const redirectUri = `${currentUrl.protocol}//${currentUrl.host}/auth-callback`;
 
+  // Use the management API audience for cross-tenant operations
+  // This allows the admin UI to manage tenants and their resources
+  const audience =
+    import.meta.env.VITE_AUTH0_AUDIENCE || "urn:authhero:management";
+
   const auth0Client = new Auth0Client({
     domain: fullDomain,
     clientId: getClientIdFromStorage(domain),
     cacheLocation: "localstorage",
-    useRefreshTokens: true,
+    useRefreshTokens: false,
     authorizationParams: {
-      audience: import.meta.env.VITE_AUTH0_AUDIENCE,
+      audience,
       redirect_uri: redirectUri,
       scope: "openid profile email auth:read auth:write",
     },
@@ -101,6 +114,53 @@ 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 the management API audience for cross-tenant operations
+  // The org_id claim in the token determines which tenant's resources are accessed
+  const audience =
+    import.meta.env.VITE_AUTH0_AUDIENCE || "urn:authhero:management";
+
+  const auth0Client = new Auth0Client({
+    domain: fullDomain,
+    clientId: getClientIdFromStorage(domain),
+    useRefreshTokens: false,
+    // 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",
+      organization: organizationId,
+    },
+  });
+
+  // Store in cache
+  auth0OrgClientCache.set(cacheKey, auth0Client);
+  return auth0Client;
+};
+
 // Create a Management API client
 export const createManagementClient = async (
   apiDomain: string,
@@ -115,9 +175,11 @@ export const createManagementClient = async (
   }
 
   // Use oauthDomain for finding credentials, fallback to apiDomain
-  const domainForAuth = oauthDomain || apiDomain;
+  const domainForAuth = formatDomain(oauthDomain || apiDomain);
   const domains = getDomainFromStorage();
-  const domainConfig = domains.find((d) => d.url === domainForAuth);
+  const domainConfig = domains.find(
+    (d) => formatDomain(d.url) === domainForAuth,
+  );
 
   if (!domainConfig) {
     throw new Error(
@@ -125,14 +187,34 @@ export const createManagementClient = async (
     );
   }
 
-  // Get auth0Client if using login method
-  let auth0Client: Auth0Client | undefined;
-  if (domainConfig.connectionMethod === "login") {
-    auth0Client = createAuth0Client(domainForAuth);
+  let token: string;
+
+  if (tenantId) {
+    // When accessing tenant-specific resources, use org-scoped token
+    if (domainConfig.connectionMethod === "login") {
+      // For OAuth login, use organization-scoped client
+      const orgAuth0Client = createAuth0ClientForOrg(domainForAuth, tenantId);
+      const audience =
+        import.meta.env.VITE_AUTH0_AUDIENCE || "urn:authhero:management";
+      token = await orgAuth0Client.getTokenSilently({
+        authorizationParams: {
+          audience,
+          organization: tenantId,
+        },
+      });
+    } else {
+      // For token/client_credentials, use getOrganizationToken
+      token = await getOrganizationToken(domainConfig, tenantId);
+    }
+  } else {
+    // No tenantId - get non-org-scoped token for tenant management endpoints
+    let auth0Client: Auth0Client | undefined;
+    if (domainConfig.connectionMethod === "login") {
+      auth0Client = createAuth0Client(domainForAuth);
+    }
+    token = await getToken(domainConfig, auth0Client);
   }
 
-  const token = await getToken(domainConfig, auth0Client);
-
   // ManagementClient expects domain WITHOUT protocol (it adds https:// internally)
   const managementClient = new ManagementClient({
     domain: apiDomain,
@@ -149,6 +231,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
@@ -158,7 +241,10 @@ export const getAuthProvider = (
 ) => {
   // Get domain config to check connection method
   const domains = getDomainFromStorage();
-  const domainConfig = domains.find((d) => d.url === domain);
+  const formattedDomain = formatDomain(domain);
+  const domainConfig = domains.find(
+    (d) => formatDomain(d.url) === formattedDomain,
+  );
 
   // If using token auth or client credentials, create a simple auth provider that uses the token
   if (
@@ -332,17 +418,23 @@ const authorizedHttpClient = (url: string, options: HttpOptions = {}) => {
   // 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);
+  const formattedSelectedDomain = formatDomain(selectedDomain);
+  const domainConfig = domains.find(
+    (d) => formatDomain(d.url) === formattedSelectedDomain,
+  );
 
   // If using login method and auth request is in progress, delay the request
   if (
     domainConfig?.connectionMethod === "login" &&
-    (authRequestInProgress || activeSessions.has(selectedDomain))
+    (authRequestInProgress || activeSessions.has(formattedSelectedDomain))
   ) {
     // Return a promise that waits for auth to complete
     const delayedRequest = new Promise((resolve, reject) => {
       const checkInterval = setInterval(() => {
-        if (!authRequestInProgress && !activeSessions.has(selectedDomain)) {
+        if (
+          !authRequestInProgress &&
+          !activeSessions.has(formattedSelectedDomain)
+        ) {
           clearInterval(checkInterval);
           // Retry the request now that auth is complete
           authorizedHttpClient(url, options).then(resolve).catch(reject);
@@ -478,16 +570,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 +633,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 +641,7 @@ const authorizedHttpClient = (url: string, options: HttpOptions = {}) => {
           }
         }
         throw error;
-      },
-    );
+      });
   }
 
   // Handle cleanup when request is done
@@ -518,4 +654,252 @@ 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 formattedSelectedDomain = formatDomain(selectedDomain);
+    const domainConfig = domains.find(
+      (d) => formatDomain(d.url) === formattedSelectedDomain,
+    );
+
+    // If using login method and auth request is in progress, delay the request
+    if (
+      domainConfig?.connectionMethod === "login" &&
+      (authRequestInProgress || activeSessions.has(formattedSelectedDomain))
+    ) {
+      const delayedRequest = new Promise((resolve, reject) => {
+        const checkInterval = setInterval(() => {
+          if (
+            !authRequestInProgress &&
+            !activeSessions.has(formattedSelectedDomain)
+          ) {
+            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 organization-scoped token
+      // This includes the org_id claim for accessing tenant-specific resources
+      request = getOrganizationToken(domainConfig, organizationId)
+        .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,
+      );
+
+      // Use the management API audience for cross-tenant operations
+      // The org_id in the token will determine which tenant's resources are being accessed
+      const audience =
+        import.meta.env.VITE_AUTH0_AUDIENCE || "urn:authhero:management";
+
+      // 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 };