@authhero/react-admin 0.11.0 → 0.13.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @authhero/react-admin
 
+## 0.13.0
+
+### Minor Changes
+
+- 0f8e4e8: Change from main to control plane
+- 3a180df: Fix organization names for main tenant
+
+## 0.12.0
+
+### Minor Changes
+
+- aba8ef9: Handle org tokens for the main tenant
+
 ## 0.11.0
 
 ### Minor Changes

package/package.json

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

package/src/authProvider.ts

@@ -6,9 +6,11 @@ import {
   getClientIdFromStorage,
   getDomainFromStorage,
   buildUrlWithProtocol,
+  formatDomain,
 } from "./utils/domainUtils";
 import getToken, {
   clearOrganizationTokenCache,
+  getOrganizationToken,
   OrgCache,
 } from "./utils/tokenUtils";
 
@@ -43,15 +45,16 @@ 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
+  // 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 || `https://${domain}/api/v2/`;
+    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,
       redirect_uri: redirectUri,
@@ -133,21 +136,22 @@ export const createAuth0ClientForOrg = (
   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
+  // 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 || `https://${domain}/api/v2/`;
+    import.meta.env.VITE_AUTH0_AUDIENCE || "urn:authhero:management";
 
   const auth0Client = new Auth0Client({
     domain: fullDomain,
     clientId: getClientIdFromStorage(domain),
-    useRefreshTokens: true,
+    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 offline_access",
+      scope: "openid profile email auth:read auth:write",
       organization: organizationId,
     },
   });
@@ -171,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(
@@ -181,13 +187,33 @@ export const createManagementClient = async (
     );
   }
 
-  // Get auth0Client if using login method
-  let auth0Client: Auth0Client | undefined;
-  if (domainConfig.connectionMethod === "login") {
-    auth0Client = createAuth0Client(domainForAuth);
-  }
+  let token: string;
 
-  const token = await getToken(domainConfig, auth0Client);
+  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);
+  }
 
   // ManagementClient expects domain WITHOUT protocol (it adds https:// internally)
   const managementClient = new ManagementClient({
@@ -215,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 (
@@ -389,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);
@@ -651,16 +686,22 @@ export const createOrganizationHttpClient = (organizationId: string) => {
     // 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))
     ) {
       const delayedRequest = new Promise((resolve, reject) => {
         const checkInterval = setInterval(() => {
-          if (!authRequestInProgress && !activeSessions.has(selectedDomain)) {
+          if (
+            !authRequestInProgress &&
+            !activeSessions.has(formattedSelectedDomain)
+          ) {
             clearInterval(checkInterval);
             createOrganizationHttpClient(organizationId)(url, options)
               .then(resolve)
@@ -700,8 +741,9 @@ export const createOrganizationHttpClient = (organizationId: string) => {
         domainConfig.connectionMethod || "",
       )
     ) {
-      // For token/client_credentials, use the standard token (no org scoping)
-      request = getToken(domainConfig)
+      // 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.`,
@@ -709,6 +751,16 @@ export const createOrganizationHttpClient = (organizationId: string) => {
         })
         .then((token) => {
           const headersObj = new Headers();
+          // Merge any headers passed in options
+          if (options.headers) {
+            const incomingHeaders =
+              options.headers instanceof Headers
+                ? options.headers
+                : new Headers(options.headers as HeadersInit);
+            incomingHeaders.forEach((value, key) => {
+              headersObj.set(key, value);
+            });
+          }
           headersObj.set("Authorization", `Bearer ${token}`);
           const method = (options.method || "GET").toUpperCase();
           if (method === "POST" || method === "PATCH") {
@@ -764,10 +816,10 @@ export const createOrganizationHttpClient = (organizationId: string) => {
         organizationId,
       );
 
-      // Get the audience for token requests
+      // 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 ||
-        `https://${selectedDomain}/api/v2/`;
+        import.meta.env.VITE_AUTH0_AUDIENCE || "urn:authhero:management";
 
       // First, check if we have a valid session for this organization
       request = orgAuth0Client
@@ -801,6 +853,16 @@ export const createOrganizationHttpClient = (organizationId: string) => {
         })
         .then((token) => {
           const headersObj = new Headers();
+          // Merge any headers passed in options
+          if (options.headers) {
+            const incomingHeaders =
+              options.headers instanceof Headers
+                ? options.headers
+                : new Headers(options.headers as HeadersInit);
+            incomingHeaders.forEach((value, key) => {
+              headersObj.set(key, value);
+            });
+          }
           headersObj.set("Authorization", `Bearer ${token}`);
           const method = (options.method || "GET").toUpperCase();
           if (method === "POST" || method === "PATCH") {

package/src/components/clients/edit.tsx

@@ -60,6 +60,7 @@ import {
   getDomainFromStorage,
   getSelectedDomainFromStorage,
   buildUrlWithProtocol,
+  formatDomain,
 } from "../../utils/domainUtils";
 
 const AddClientGrantButton = () => {
@@ -821,7 +822,8 @@ interface Connection {
 const getApiBaseUrl = (): string => {
   const selectedDomain = getSelectedDomainFromStorage();
   const domains = getDomainFromStorage();
-  const domainConfig = domains.find((d) => d.url === selectedDomain);
+  const formattedDomain = formatDomain(selectedDomain);
+  const domainConfig = domains.find((d) => formatDomain(d.url) === formattedDomain);
 
   if (domainConfig?.restApiUrl) {
     return domainConfig.restApiUrl.replace(/\/$/, "");

package/src/components/settings/edit.tsx

@@ -126,6 +126,11 @@ export function SettingsEdit() {
 
         <TabbedForm.Tab label="Feature Flags">
           <Stack spacing={2}>
+            <BooleanInput
+              source="allow_organization_name_in_authentication_api"
+              label="Allow Organization Name in Authentication API"
+              helperText="Allow using organization names (instead of IDs) in the /authorize endpoint and include org_name claim in tokens"
+            />
             <BooleanInput
               source="flags.allow_legacy_delegation_grant_types"
               label="Allow Legacy Delegation Grant Types"

package/src/dataProvider.ts

@@ -7,6 +7,7 @@ import auth0DataProvider from "./auth0DataProvider";
 import {
   getDomainFromStorage,
   buildUrlWithProtocol,
+  formatDomain,
 } from "./utils/domainUtils";
 
 async function removeExtraFields(params: UpdateParams) {
@@ -32,7 +33,8 @@ export function getDataprovider(auth0Domain?: string) {
   if (auth0Domain) {
     // Check if there's a custom REST API URL configured for this domain
     const domains = getDomainFromStorage();
-    const domainConfig = domains.find((d) => d.url === auth0Domain);
+    const formattedAuth0Domain = formatDomain(auth0Domain);
+    const domainConfig = domains.find((d) => formatDomain(d.url) === formattedAuth0Domain);
 
     if (domainConfig?.restApiUrl) {
       // Use the custom REST API URL if configured
@@ -70,8 +72,8 @@ export function getDataproviderForTenant(
   if (auth0Domain) {
     // Check if there's a custom REST API URL configured for this domain
     const domains = getDomainFromStorage();
-
-    const domainConfig = domains.find((d) => d.url === auth0Domain);
+    const formattedAuth0Domain = formatDomain(auth0Domain);
+    const domainConfig = domains.find((d) => formatDomain(d.url) === formattedAuth0Domain);
 
     if (domainConfig?.restApiUrl) {
       // Use the custom REST API URL if configured

package/src/utils/tokenUtils.ts

@@ -57,28 +57,37 @@ async function fetchTokenWithClientCredentials(
   domain: string,
   clientId: string,
   clientSecret: string,
+  organizationId?: string,
 ): Promise<string> {
+  const body: Record<string, string> = {
+    grant_type: "client_credentials",
+    client_id: clientId,
+    client_secret: clientSecret,
+    // Use the management API audience for cross-tenant operations
+    audience: "urn:authhero:management",
+    scope:
+      "read:users update:users create:users delete:users read:user_idp_tokens " +
+      "read:clients update:clients create:clients delete:clients " +
+      "read:connections update:connections create:connections delete:connections " +
+      "read:resource_servers update:resource_servers create:resource_servers delete:resource_servers " +
+      "read:rules update:rules create:rules delete:rules " +
+      "read:email_templates update:email_templates " +
+      "read:tenant_settings update:tenant_settings " +
+      "read:logs read:stats read:branding update:branding read:forms",
+  };
+
+  // Add organization if specified - this will include org_id in the token
+  if (organizationId) {
+    body.organization = organizationId;
+  }
+
   const response = await fetch(`https://proxy.authhe.ro/oauth/token`, {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
       "X-Auth0-Domain": domain,
     },
-    body: JSON.stringify({
-      grant_type: "client_credentials",
-      client_id: clientId,
-      client_secret: clientSecret,
-      audience: `https://${domain}/api/v2/`,
-      scope:
-        "read:users update:users create:users delete:users read:user_idp_tokens " +
-        "read:clients update:clients create:clients delete:clients " +
-        "read:connections update:connections create:connections delete:connections " +
-        "read:resource_servers update:resource_servers create:resource_servers delete:resource_servers " +
-        "read:rules update:rules create:rules delete:rules " +
-        "read:email_templates update:email_templates " +
-        "read:tenant_settings update:tenant_settings " +
-        "read:logs read:stats read:branding update:branding read:forms",
-    }),
+    body: JSON.stringify(body),
   });
 
   if (!response.ok) {
@@ -96,12 +105,52 @@ async function fetchTokenWithClientCredentials(
 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(/:[^:]+$/),
+    (key) => key.startsWith(CACHE_KEY_PREFIX) && key.match(/:[^:]+$/),
   );
   keysToRemove.forEach((key) => localStorage.removeItem(key));
 }
 
+/**
+ * Get an organization-scoped token for the given domain configuration.
+ * This token will have the org_id claim set to the specified organization.
+ * Used for accessing tenant-specific resources.
+ */
+export async function getOrganizationToken(
+  domainConfig: DomainConfig,
+  organizationId: string,
+): Promise<string> {
+  if (
+    domainConfig.connectionMethod === "client_credentials" &&
+    domainConfig.clientId &&
+    domainConfig.clientSecret
+  ) {
+    // For client credentials, fetch a token with organization parameter
+    const token = await fetchTokenWithClientCredentials(
+      domainConfig.url,
+      domainConfig.clientId,
+      domainConfig.clientSecret,
+      organizationId,
+    );
+    return token;
+  }
+
+  // For token-based auth, we can't add org_id dynamically
+  // The token must already have the correct org_id claim
+  if (domainConfig.connectionMethod === "token") {
+    // Static tokens cannot have dynamic org_id - this is a limitation
+    throw new Error(
+      "Token-based auth cannot provide organization-scoped tokens. " +
+        "Use client_credentials or login authentication method for multi-tenant access.",
+    );
+  }
+
+  // For login method, organization-scoped tokens are handled separately
+  // via OAuth with organization parameter in createOrganizationHttpClient
+  throw new Error(
+    "Organization-scoped tokens require client_credentials or login authentication method.",
+  );
+}
+
 /**
  * Get a token for the given domain configuration.
  * For OAuth login, this gets a token WITHOUT organization scope.
@@ -128,8 +177,13 @@ export default async function getToken(
     return token;
   } else if (domainConfig.connectionMethod === "login" && auth0Client) {
     // Get a regular token WITHOUT organization scope
+    // This is used for tenant management endpoints which require non-org-scoped tokens
     try {
-      const token = await auth0Client.getTokenSilently();
+      const token = await auth0Client.getTokenSilently({
+        authorizationParams: {
+          organization: undefined,
+        },
+      });
       return token;
     } catch (error) {
       throw new Error(