@authhero/react-admin 0.10.0

package/src/AuthCallback.tsx

@@ -0,0 +1,138 @@
+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";
+
+interface AuthCallbackProps {
+  onAuthComplete?: () => void;
+}
+
+export function AuthCallback({ onAuthComplete }: AuthCallbackProps) {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [error, setError] = useState<string | null>(null);
+  const callbackProcessedRef = useRef(false);
+  const navigationAttemptedRef = useRef(false);
+
+  // Helper function to ensure navigation happens and prevent infinite loops
+  const forceNavigate = (path: string) => {
+    if (!navigationAttemptedRef.current) {
+      navigationAttemptedRef.current = true;
+
+      // Signal that auth flow is complete before navigation
+      if (onAuthComplete) onAuthComplete();
+
+      // Use window.location for a hard redirect instead of React Router's navigate
+      // This ensures we get a clean page load without any state issues
+      window.location.href = path;
+    }
+  };
+
+  useEffect(() => {
+    const handleCallback = async () => {
+      // Skip if we've already processed this callback
+      if (callbackProcessedRef.current) {
+        return;
+      }
+
+      try {
+        // Get the currently selected domain from cookies
+        const selectedDomain = getSelectedDomainFromStorage();
+
+        if (!selectedDomain) {
+          // If no domain is selected, redirect to the home page to select one
+          forceNavigate("/");
+          return;
+        }
+
+        // Check if we have the required query parameters
+        const hasAuthParams =
+          location.search.includes("code=") &&
+          location.search.includes("state=");
+        if (!hasAuthParams) {
+          forceNavigate("/tenants");
+          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;
+
+        // Process the redirect callback
+        // This is critical - it extracts the auth info from the URL and stores it
+        await auth0.handleRedirectCallback();
+
+        // We're being redirected back from the authentication provider
+        // Force redirect to the main application
+        forceNavigate("/tenants");
+      } catch (err) {
+        // Only set error for real errors, not for "already processed" errors
+        if (err instanceof Error) {
+          const errorMessage = err.message || "";
+
+          // Don't show errors about invalid state or missing query params
+          // as these are expected in subsequent renders
+          if (
+            errorMessage.includes("Invalid state") ||
+            errorMessage.includes("no query params")
+          ) {
+            forceNavigate("/tenants");
+          } else {
+            setError(err.message);
+            // Still try to navigate after a short delay even on error
+            setTimeout(() => forceNavigate("/tenants"), 3000);
+          }
+        } else {
+          setError("Unknown error during authentication");
+          // Still try to navigate after a short delay even on error
+          setTimeout(() => forceNavigate("/tenants"), 3000);
+        }
+      }
+    };
+
+    // Execute the callback handler
+    handleCallback();
+
+    // Failsafe - if we're still on this page after 5 seconds, force navigation
+    const timeoutId = setTimeout(() => {
+      if (!navigationAttemptedRef.current) {
+        forceNavigate("/tenants");
+      }
+    }, 5000);
+
+    return () => {
+      clearTimeout(timeoutId);
+    };
+  }, [navigate, onAuthComplete, location]);
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        height: "100vh",
+      }}
+    >
+      {error ? (
+        <Alert severity="error" sx={{ maxWidth: 600, mb: 2 }}>
+          {error}
+          <Typography variant="body2" sx={{ mt: 2 }}>
+            Redirecting to application...
+          </Typography>
+        </Alert>
+      ) : (
+        <>
+          <CircularProgress />
+          <Typography variant="h6" sx={{ mt: 2 }}>
+            Completing authentication...
+          </Typography>
+        </>
+      )}
+    </Box>
+  );
+}

package/src/Layout.tsx

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+import {
+  Layout as RALayout,
+  CheckForApplicationUpdate,
+} from "react-admin";
+
+export const Layout = ({ children }: { children: ReactNode }) => (
+  <RALayout>
+    {children}
+    <CheckForApplicationUpdate />
+  </RALayout>
+);

package/src/TenantsApp.tsx

@@ -0,0 +1,115 @@
+import { Admin, Resource } from "react-admin";
+import { getDataprovider } from "./dataProvider";
+import { getAuthProvider } from "./authProvider";
+import { TenantsList } from "./components/tenants/list";
+import { TenantsCreate } from "./components/tenants/create";
+import { useMemo, useState } from "react";
+import { Button } from "@mui/material";
+import { DomainSelector } from "./components/DomainSelector";
+import { saveSelectedDomainToStorage } from "./utils/domainUtils";
+import { tenantsLayout } from "./components/TenantsLayout";
+import { CertificateErrorDialog } from "./components/CertificateErrorDialog";
+
+interface TenantsAppProps {
+  initialDomain?: string;
+  onAuthComplete?: () => void;
+}
+
+export function TenantsApp(props: TenantsAppProps = {}) {
+  const { initialDomain, onAuthComplete } = props;
+
+  // State for domains and domain selector dialog
+  const [selectedDomain, setSelectedDomain] = useState<string>(
+    initialDomain || "",
+  );
+  const [showDomainDialog, setShowDomainDialog] = useState<boolean>(false);
+  const [certErrorUrl, setCertErrorUrl] = useState<string | null>(null);
+
+  // Use useMemo to prevent recreating the auth provider on every render
+  const authProvider = useMemo(
+    () => getAuthProvider(selectedDomain, onAuthComplete),
+    [selectedDomain, onAuthComplete],
+  );
+
+  // Get the dataProvider with the selected domain - also memoize this
+  // Wrap it to catch certificate errors
+  const dataProvider = useMemo(() => {
+    const baseProvider = getDataprovider(
+      selectedDomain || import.meta.env.VITE_AUTH0_DOMAIN || "",
+    );
+
+    // Wrap all methods to catch certificate errors
+    const wrappedProvider: typeof baseProvider = {} as typeof baseProvider;
+    for (const method of Object.keys(baseProvider) as Array<
+      keyof typeof baseProvider
+    >) {
+      const original = baseProvider[method];
+      if (typeof original === "function") {
+        (wrappedProvider as any)[method] = async (...args: any[]) => {
+          try {
+            return await (original as Function).apply(baseProvider, args);
+          } catch (error: any) {
+            if (error?.isCertificateError && error?.serverUrl) {
+              setCertErrorUrl(error.serverUrl);
+            }
+            throw error;
+          }
+        };
+      }
+    }
+    return wrappedProvider;
+  }, [selectedDomain]);
+
+  const openDomainManager = () => {
+    setShowDomainDialog(true);
+  };
+
+  const handleDomainSelected = (domain: string) => {
+    setSelectedDomain(domain);
+    setShowDomainDialog(false);
+    saveSelectedDomainToStorage(domain);
+  };
+
+  const handleCloseCertError = () => {
+    setCertErrorUrl(null);
+  };
+
+  // Create the domain selector button that will be passed to the AppBar
+  const DomainSelectorButton = (
+    <Button
+      color="inherit"
+      onClick={openDomainManager}
+      sx={{ marginLeft: 1, textTransform: "none" }}
+    >
+      Domain: {selectedDomain}
+    </Button>
+  );
+
+  return (
+    <>
+      {showDomainDialog && (
+        <DomainSelector onDomainSelected={handleDomainSelected} />
+      )}
+
+      <CertificateErrorDialog
+        open={!!certErrorUrl}
+        serverUrl={certErrorUrl || ""}
+        onClose={handleCloseCertError}
+      />
+
+      <Admin
+        dataProvider={dataProvider}
+        authProvider={authProvider}
+        requireAuth={false}
+        layout={(props) =>
+          tenantsLayout({
+            ...props,
+            domainSelectorButton: DomainSelectorButton,
+          })
+        }
+      >
+        <Resource name="tenants" list={TenantsList} create={TenantsCreate} />
+      </Admin>
+    </>
+  );
+}