@authhero/react-admin 0.10.0

package/src/authProvider.ts

@@ -0,0 +1,521 @@
+import { Auth0AuthProvider, httpClient } from "ra-auth-auth0";
+import { Auth0Client } from "@auth0/auth0-spa-js";
+import { ManagementClient } from "auth0";
+import {
+  getSelectedDomainFromStorage,
+  getClientIdFromStorage,
+  getDomainFromStorage,
+  buildUrlWithProtocol,
+} from "./utils/domainUtils";
+import getToken from "./utils/tokenUtils";
+
+// Track auth requests globally
+let authRequestInProgress = false;
+let lastAuthRequestTime = 0;
+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
+const auth0ClientCache = new Map<string, Auth0Client>();
+
+// Cache for management clients
+const managementClientCache = new Map<string, ManagementClient>();
+
+// Create a function to get Auth0Client with the specified domain
+export const createAuth0Client = (domain: string) => {
+  // Check cache first to avoid creating multiple clients for the same domain
+  if (auth0ClientCache.has(domain)) {
+    return auth0ClientCache.get(domain)!;
+  }
+
+  // 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`;
+
+  const auth0Client = new Auth0Client({
+    domain: fullDomain,
+    clientId: getClientIdFromStorage(domain),
+    cacheLocation: "localstorage",
+    useRefreshTokens: true,
+    authorizationParams: {
+      audience: import.meta.env.VITE_AUTH0_AUDIENCE,
+      redirect_uri: redirectUri,
+      scope: "openid profile email auth:read auth:write",
+    },
+  });
+
+  // Patch the loginWithRedirect method to prevent multiple calls
+  const originalLoginWithRedirect =
+    auth0Client.loginWithRedirect.bind(auth0Client);
+  auth0Client.loginWithRedirect = async (options?: any) => {
+    const now = Date.now();
+
+    // Check if we already have an active session
+    const hasActiveSession = await auth0Client.isAuthenticated();
+    if (hasActiveSession) {
+      return Promise.resolve();
+    }
+
+    // Prevent multiple auth requests in parallel or in quick succession
+    if (
+      authRequestInProgress ||
+      now - lastAuthRequestTime < AUTH_REQUEST_DEBOUNCE_MS
+    ) {
+      return Promise.resolve();
+    }
+
+    try {
+      authRequestInProgress = true;
+      lastAuthRequestTime = now;
+      activeSessions.set(domain, true);
+      return await originalLoginWithRedirect(options);
+    } finally {
+      // Reset after redirect completes or fails
+      setTimeout(() => {
+        authRequestInProgress = false;
+      }, 1000); // Give a short delay to prevent immediate retries
+    }
+  };
+
+  // Also patch the handleRedirectCallback to signal when the auth flow is complete
+  const originalHandleRedirectCallback =
+    auth0Client.handleRedirectCallback.bind(auth0Client);
+  auth0Client.handleRedirectCallback = async (url?: string) => {
+    try {
+      const result = await originalHandleRedirectCallback(url);
+      return result;
+    } finally {
+      // Mark that this domain's auth flow is complete
+      activeSessions.delete(domain);
+      authRequestInProgress = false;
+    }
+  };
+
+  // Store in cache
+  auth0ClientCache.set(domain, auth0Client);
+  return auth0Client;
+};
+
+// Create a Management API client
+export const createManagementClient = async (
+  apiDomain: string,
+  tenantId?: string,
+  oauthDomain?: string,
+): Promise<ManagementClient> => {
+  const cacheKey = tenantId ? `${apiDomain}:${tenantId}` : apiDomain;
+
+  // Check cache first
+  if (managementClientCache.has(cacheKey)) {
+    return managementClientCache.get(cacheKey)!;
+  }
+
+  // Use oauthDomain for finding credentials, fallback to apiDomain
+  const domainForAuth = oauthDomain || apiDomain;
+  const domains = getDomainFromStorage();
+  const domainConfig = domains.find((d) => d.url === domainForAuth);
+
+  if (!domainConfig) {
+    throw new Error(
+      `No domain configuration found for domain: ${domainForAuth}`,
+    );
+  }
+
+  // Get auth0Client if using login method
+  let auth0Client: Auth0Client | undefined;
+  if (domainConfig.connectionMethod === "login") {
+    auth0Client = createAuth0Client(domainForAuth);
+  }
+
+  const token = await getToken(domainConfig, auth0Client);
+
+  // ManagementClient expects domain WITHOUT protocol (it adds https:// internally)
+  const managementClient = new ManagementClient({
+    domain: apiDomain,
+    token,
+    headers: tenantId ? { "tenant-id": tenantId } : undefined,
+  });
+
+  managementClientCache.set(cacheKey, managementClient);
+  return managementClient;
+};
+
+// Clear management client cache when token might be expired
+// Note: Clears the entire cache since cache keys use apiDomain[:tenantId]
+// but callers typically only have access to the OAuth domain
+export const clearManagementClientCache = () => {
+  managementClientCache.clear();
+};
+
+// Create a function to get the auth provider with the specified domain
+export const getAuthProvider = (
+  domain: string,
+  onAuthComplete?: () => void,
+) => {
+  // Get domain config to check connection method
+  const domains = getDomainFromStorage();
+  const domainConfig = domains.find((d) => d.url === domain);
+
+  // If using token auth or client credentials, create a simple auth provider that uses the token
+  if (
+    ["token", "client_credentials"].includes(
+      domainConfig?.connectionMethod || "",
+    )
+  ) {
+    return {
+      login: async () => {
+        // Token auth is already authenticated
+        return Promise.resolve();
+      },
+      logout: async () => {
+        // Clear management client cache on logout
+        clearManagementClientCache();
+        return Promise.resolve();
+      },
+      checkError: async (error: any) => {
+        if (error.status === 401 || error.statusCode === 401) {
+          clearManagementClientCache();
+          return Promise.reject();
+        }
+        return Promise.resolve();
+      },
+      checkAuth: async () => {
+        // Verify that credentials are actually available
+        if (!domainConfig) {
+          return Promise.reject(new Error("No domain configuration found"));
+        }
+
+        if (domainConfig.connectionMethod === "token" && !domainConfig.token) {
+          return Promise.reject(
+            new Error("Token authentication selected but no token provided"),
+          );
+        }
+
+        if (
+          domainConfig.connectionMethod === "client_credentials" &&
+          (!domainConfig.clientId || !domainConfig.clientSecret)
+        ) {
+          return Promise.reject(
+            new Error(
+              "Client credentials authentication selected but credentials missing",
+            ),
+          );
+        }
+
+        return Promise.resolve();
+      },
+      getIdentity: async () => {
+        // Return a dummy UserIdentity for token-based auth
+        return Promise.resolve({
+          id: "token-user",
+          fullName: "API Token User",
+          avatar: undefined,
+        });
+      },
+      getPermissions: async () => {
+        return Promise.resolve(["admin"]);
+      },
+    };
+  }
+
+  // For non-token auth, use Auth0
+  const auth0 = createAuth0Client(domain);
+
+  // Get the current app's URL for redirect
+  const currentUrl = new URL(window.location.href);
+  const redirectUri = `${currentUrl.protocol}//${currentUrl.host}`;
+
+  const baseAuthProvider = Auth0AuthProvider(auth0, {
+    // Use the current app's URL with the auth-callback path
+    loginRedirectUri: `${redirectUri}/auth-callback`,
+    // Use the current app's URL for logout
+    logoutRedirectUri: redirectUri,
+  });
+
+  // Enhance the auth provider to signal when auth operations complete
+  return {
+    ...baseAuthProvider,
+    login: async (params: any) => {
+      try {
+        const result = await baseAuthProvider.login(params);
+        if (onAuthComplete) onAuthComplete();
+        return result;
+      } catch (error) {
+        if (onAuthComplete) onAuthComplete();
+        activeSessions.delete(domain);
+        throw error;
+      }
+    },
+    logout: async (params: any) => {
+      try {
+        clearManagementClientCache();
+        const result = await baseAuthProvider.logout(params);
+        if (onAuthComplete) onAuthComplete();
+        return result;
+      } catch (error) {
+        if (onAuthComplete) onAuthComplete();
+        throw error;
+      }
+    },
+    checkAuth: async (params: any): Promise<void> => {
+      try {
+        // Don't check auth while on the callback page - we're in the middle of authenticating
+        if (window.location.pathname === "/auth-callback") {
+          // Return success to prevent redirect loops during callback processing
+          return Promise.resolve();
+        }
+
+        // If auth is in progress, wait for it to complete
+        if (authRequestInProgress || activeSessions.has(domain)) {
+          return new Promise<void>((resolve, reject) => {
+            const checkInterval = setInterval(() => {
+              if (!authRequestInProgress && !activeSessions.has(domain)) {
+                clearInterval(checkInterval);
+                // Re-check auth now that the redirect is complete
+                baseAuthProvider.checkAuth(params).then(resolve).catch(reject);
+              }
+            }, 100);
+
+            // Timeout after 30 seconds
+            setTimeout(() => {
+              clearInterval(checkInterval);
+              reject(new Error("Authentication timeout"));
+            }, 30000);
+          });
+        }
+
+        await baseAuthProvider.checkAuth(params);
+        return;
+      } catch (error) {
+        if (onAuthComplete) onAuthComplete();
+        activeSessions.delete(domain);
+        clearManagementClientCache();
+        throw error;
+      }
+    },
+  };
+};
+
+// Create auth provider for the selected domain
+const authProvider = getAuthProvider(getSelectedDomainFromStorage());
+
+// Create a debounced http client to prevent parallel token requests
+let pendingRequests = new Map<string, Promise<any>>();
+interface HttpOptions extends RequestInit {
+  headers?: HeadersInit;
+}
+
+const authorizedHttpClient = (url: string, options: HttpOptions = {}) => {
+  const requestKey = `${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))
+  ) {
+    // Return a promise that waits for auth to complete
+    const delayedRequest = new Promise((resolve, reject) => {
+      const checkInterval = setInterval(() => {
+        if (!authRequestInProgress && !activeSessions.has(selectedDomain)) {
+          clearInterval(checkInterval);
+          // Retry the request now that auth is complete
+          authorizedHttpClient(url, options).then(resolve).catch(reject);
+        }
+      }, 100);
+
+      // Timeout after 30 seconds
+      setTimeout(() => {
+        clearInterval(checkInterval);
+        reject(new Error("Authentication timeout"));
+      }, 30000);
+    });
+
+    pendingRequests.set(requestKey, delayedRequest);
+    delayedRequest.finally(() => {
+      pendingRequests.delete(requestKey);
+    });
+
+    return delayedRequest;
+  }
+
+  // If no domain config found, throw an error
+  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 auth or client credentials, use the getToken helper
+    request = getToken(domainConfig)
+      .catch((error) => {
+        // If we can't get a token, throw a more helpful error
+        throw new Error(
+          `Authentication failed: ${error.message}. Please configure your credentials in the domain selector.`,
+        );
+      })
+      .then((token) => {
+        let headersObj: Headers;
+        const method = (options.method || "GET").toUpperCase();
+        if (method === "GET") {
+          // Only send Authorization for GET to avoid CORS issues
+          headersObj = new Headers();
+          headersObj.set("Authorization", `Bearer ${token}`);
+        } else if (
+          method === "POST" ||
+          method === "DELETE" ||
+          method === "PATCH"
+        ) {
+          // For POST, DELETE, PATCH: only send Authorization and content-type (force application/json for POST/PATCH)
+          headersObj = new Headers();
+          headersObj.set("Authorization", `Bearer ${token}`);
+          if (method === "POST" || method === "PATCH") {
+            headersObj.set("content-type", "application/json");
+          }
+        } else {
+          // For other methods, merge all headers and set Authorization
+          headersObj = new Headers(options.headers || {});
+          headersObj.set("Authorization", `Bearer ${token}`);
+        }
+        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 - Auth0 doesn't support this 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",
+            );
+            // Clean up pending request to prevent deadlock
+            pendingRequests.delete(requestKey);
+            // Use history.pushState for a soft navigation instead of a hard redirect
+            window.history.pushState({}, "", "/auth0");
+            // Dispatch a navigation event so the app can respond to the URL change
+            window.dispatchEvent(new PopStateEvent("popstate"));
+            // Reject with a clear error message instead of hanging
+            throw new Error("Navigating to Auth0 configuration");
+          }
+
+          throw new Error(response.statusText);
+        }
+
+        const text = await response.text();
+        let json;
+        try {
+          json = JSON.parse(text);
+        } catch (e) {
+          json = text;
+        }
+
+        // Return in the format expected by react-admin's dataProvider
+        return {
+          json,
+          status: response.status,
+          headers: response.headers,
+          body: text,
+        };
+      })
+      .catch((error) => {
+        // Check for certificate errors (network failures when connecting to HTTPS with untrusted cert)
+        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.\n\n` +
+                `Please visit ${urlObj.origin} in your browser and accept the security warning to trust the certificate, then refresh this page.`,
+            );
+            (certError as any).isCertificateError = true;
+            (certError as any).serverUrl = urlObj.origin;
+            throw certError;
+          }
+        }
+        throw error;
+      });
+  } else {
+    // For Auth0 login method, create a client for the current domain
+    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
+        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.\n\n` +
+                `Please visit ${urlObj.origin} in your browser and accept the security warning to trust the certificate, then refresh this page.`,
+            );
+            (certError as any).isCertificateError = true;
+            (certError as any).serverUrl = urlObj.origin;
+            throw certError;
+          }
+        }
+        throw error;
+      },
+    );
+  }
+
+  // Handle cleanup when request is done
+  request.finally(() => {
+    pendingRequests.delete(requestKey);
+  });
+
+  // Cache the request
+  pendingRequests.set(requestKey, request);
+  return request;
+};
+
+export { authProvider, authorizedHttpClient };

package/src/components/CertificateErrorDialog.tsx

@@ -0,0 +1,116 @@
+import React from "react";
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Button,
+  Typography,
+  Alert,
+  Link,
+  Box,
+} from "@mui/material";
+import WarningAmberIcon from "@mui/icons-material/WarningAmber";
+
+interface CertificateErrorDialogProps {
+  open: boolean;
+  serverUrl: string;
+  onClose: () => void;
+}
+
+export const CertificateErrorDialog: React.FC<CertificateErrorDialogProps> = ({
+  open,
+  serverUrl,
+  onClose,
+}) => {
+  const handleVisitServer = () => {
+    window.open(serverUrl, "_blank", "noopener,noreferrer");
+  };
+
+  return (
+    <Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
+      <DialogTitle sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+        <WarningAmberIcon color="warning" />
+        SSL Certificate Not Trusted
+      </DialogTitle>
+      <DialogContent>
+        <Alert severity="warning" sx={{ mb: 2 }}>
+          Unable to connect to the AuthHero server due to an untrusted SSL
+          certificate.
+        </Alert>
+
+        <Typography variant="body1" paragraph>
+          Your local AuthHero server is using a self-signed SSL certificate that
+          your browser doesn't trust yet.
+        </Typography>
+
+        <Typography variant="body1" paragraph>
+          To fix this, please:
+        </Typography>
+
+        <Box component="ol" sx={{ pl: 2 }}>
+          <li>
+            <Typography variant="body2" paragraph>
+              Click the button below to visit{" "}
+              <Link href={serverUrl} target="_blank" rel="noopener">
+                {serverUrl}
+              </Link>
+            </Typography>
+          </li>
+          <li>
+            <Typography variant="body2" paragraph>
+              When you see the security warning, click{" "}
+              <strong>"Advanced"</strong> and then{" "}
+              <strong>"Proceed to localhost (unsafe)"</strong>
+            </Typography>
+          </li>
+          <li>
+            <Typography variant="body2" paragraph>
+              Return to this page and refresh
+            </Typography>
+          </li>
+        </Box>
+
+        <Alert severity="info" sx={{ mt: 2 }}>
+          <Typography variant="body2">
+            <strong>Tip:</strong> For a better experience, install{" "}
+            <Link
+              href="https://github.com/FiloSottile/mkcert"
+              target="_blank"
+              rel="noopener"
+            >
+              mkcert
+            </Link>{" "}
+            to create locally-trusted certificates:
+          </Typography>
+          <Box
+            component="pre"
+            sx={{
+              mt: 1,
+              p: 1,
+              bgcolor: "grey.100",
+              borderRadius: 1,
+              fontSize: "0.85em",
+              overflow: "auto",
+            }}
+          >
+            brew install mkcert{"\n"}
+            mkcert -install
+          </Box>
+          <Typography variant="body2" sx={{ mt: 1 }}>
+            Then delete the <code>.certs</code> folder in your auth-server
+            directory and restart the server.
+          </Typography>
+        </Alert>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose}>Cancel</Button>
+        <Button variant="contained" onClick={handleVisitServer}>
+          Visit {serverUrl}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default CertificateErrorDialog;