@authhero/react-admin 0.10.0

package/src/components/users/index.ts

@@ -0,0 +1,3 @@
+export * from "./create";
+export * from "./list";
+export * from "./edit";

package/src/components/users/list.tsx

@@ -0,0 +1,35 @@
+import {
+  List,
+  Datagrid,
+  TextField,
+  EmailField,
+  TextInput,
+  FunctionField,
+} from "react-admin";
+import { PostListActions } from "../listActions/PostListActions";
+import { DateAgo } from "../common";
+
+export function UsersList() {
+  const postFilters = [
+    <TextInput key="search" label="Search" source="q" alwaysOn />,
+  ];
+
+  return (
+    <List
+      actions={<PostListActions />}
+      filters={postFilters}
+      sort={{ field: "user_id", order: "DESC" }}
+    >
+      <Datagrid rowClick="edit" bulkActionButtons={false}>
+        <EmailField source="email" />
+        <TextField source="phone_number" />
+        <TextField source="connection" />
+        <TextField source="login_count" />
+        <FunctionField
+          label="Last login"
+          render={(record: any) => <DateAgo date={record.last_login} />}
+        />
+      </Datagrid>
+    </List>
+  );
+}

package/src/data.json

@@ -0,0 +1,121 @@
+{
+    "posts": [
+        {
+            "id": 0,
+            "title": "Post 1",
+            "content": "Content 1"
+        },
+        {
+            "id": 1,
+            "title": "Post 2",
+            "content": "Content 2"
+        },
+        {
+            "id": 2,
+            "title": "Post 3",
+            "content": "Content 3"
+        },
+        {
+            "id": 3,
+            "title": "Post 4",
+            "content": "Content 4"
+        },
+        {
+            "id": 4,
+            "title": "Post 5",
+            "content": "Content 5"
+        },
+        {
+            "id": 5,
+            "title": "Post 6",
+            "content": "Content 6"
+        },
+        {
+            "id": 6,
+            "title": "Post 7",
+            "content": "Content 7"
+        },
+        {
+            "id": 7,
+            "title": "Post 8",
+            "content": "Content 8"
+        },
+        {
+            "id": 8,
+            "title": "Post 9",
+            "content": "Content 9"
+        },
+        {
+            "id": 9,
+            "title": "Post 10",
+            "content": "Content 10"
+        },
+        {
+            "id": 10,
+            "title": "Post 11",
+            "content": "Content 11"
+        },
+        {
+            "id": 11,
+            "title": "Post 12",
+            "content": "Content 12"
+        }
+    ],
+    "comments": [
+        {
+            "id": 0,
+            "postId": 0,
+            "content": "Comment 1"
+        },
+        {
+            "id": 1,
+            "postId": 0,
+            "content": "Comment 2"
+        },
+        {
+            "id": 2,
+            "postId": 1,
+            "content": "Comment 3"
+        },
+        {
+            "id": 3,
+            "postId": 1,
+            "content": "Comment 4"
+        },
+        {
+            "id": 4,
+            "postId": 2,
+            "content": "Comment 5"
+        },
+        {
+            "id": 5,
+            "postId": 2,
+            "content": "Comment 6"
+        },
+        {
+            "id": 6,
+            "postId": 3,
+            "content": "Comment 7"
+        },
+        {
+            "id": 7,
+            "postId": 3,
+            "content": "Comment 8"
+        },
+        {
+            "id": 8,
+            "postId": 3,
+            "content": "Comment 9"
+        },
+        {
+            "id": 9,
+            "postId": 4,
+            "content": "Comment 10"
+        },
+        {
+            "id": 10,
+            "postId": 4,
+            "content": "Comment 11"
+        }
+    ]
+}

package/src/dataProvider.ts

@@ -0,0 +1,97 @@
+import { UpdateParams, withLifecycleCallbacks } from "react-admin";
+import { authorizedHttpClient } from "./authProvider";
+import auth0DataProvider from "./auth0DataProvider";
+import {
+  getDomainFromStorage,
+  buildUrlWithProtocol,
+} from "./utils/domainUtils";
+
+async function removeExtraFields(params: UpdateParams) {
+  delete params.data?.id;
+  delete params.data?.tenant_id;
+  delete params.data?.updated_at;
+  delete params.data?.created_at;
+
+  // Remove empty properties
+  Object.keys(params.data).forEach((key) => {
+    if (params.data[key] === undefined) {
+      delete params.data[key];
+    }
+  });
+
+  return params;
+}
+
+export function getDataprovider(auth0Domain?: string) {
+  // Create the complete base URL using the selected domain
+  let baseUrl = import.meta.env.VITE_SIMPLE_REST_URL;
+
+  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);
+
+    if (domainConfig?.restApiUrl) {
+      // Use the custom REST API URL if configured
+      baseUrl = domainConfig.restApiUrl;
+    } else {
+      // Otherwise use the auth domain with HTTPS
+      baseUrl = buildUrlWithProtocol(auth0Domain);
+    }
+  }
+
+  // TODO - duplicate auth0DataProvider to tenantsDataProvider
+  // we are introducing non-auth0 endpoints AND we don't require the tenants-id header
+  const provider = auth0DataProvider(
+    baseUrl,
+    authorizedHttpClient,
+    undefined,
+    auth0Domain,
+  );
+
+  return withLifecycleCallbacks(provider, [
+    {
+      resource: "tenants",
+      beforeUpdate: removeExtraFields,
+    },
+  ]);
+}
+
+export function getDataproviderForTenant(
+  tenantId: string,
+  auth0Domain?: string,
+) {
+  // Start with a default API URL
+  let apiUrl;
+
+  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);
+
+    if (domainConfig?.restApiUrl) {
+      // Use the custom REST API URL if configured
+      apiUrl = domainConfig.restApiUrl;
+    } else {
+      // Otherwise construct an API URL using the auth0Domain with HTTPS
+      apiUrl = buildUrlWithProtocol(auth0Domain);
+    }
+  } else {
+    // Fallback to the environment variable
+    apiUrl = import.meta.env.VITE_AUTH0_API_URL;
+  }
+
+  // Ensure apiUrl doesn't end with a slash
+  apiUrl = apiUrl.replace(/\/$/, "");
+
+  // Create the auth0Provider with the API URL, tenant ID, and domain
+  const auth0Provider = auth0DataProvider(
+    apiUrl,
+    authorizedHttpClient,
+    tenantId,
+    auth0Domain,
+  );
+
+  return auth0Provider;
+}

package/src/index.tsx

@@ -0,0 +1,106 @@
+import React, { useState, useEffect } from "react";
+import ReactDOM from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
+import { App } from "./App";
+import { TenantsApp } from "./TenantsApp";
+import { AuthCallback } from "./AuthCallback";
+import { DomainSelector } from "./components/DomainSelector";
+import { getSelectedDomainFromStorage } from "./utils/domainUtils";
+
+// Check if running on local.authhero.net - if so, auto-connect to localhost:3000
+const isLocalDevelopment = window.location.hostname.startsWith("local.");
+const LOCAL_DOMAIN = "localhost:3000";
+
+function Root() {
+  const [selectedDomain, setSelectedDomain] = useState<string | null>(
+    isLocalDevelopment ? LOCAL_DOMAIN : null,
+  );
+  const currentPath = location.pathname;
+  const isAuthCallback = currentPath === "/auth-callback";
+  const isRootPath = currentPath === "/";
+  // Only match /tenants exactly or /tenants/create (not /tenants/:id which would be a tenant admin route)
+  const isTenantsPath =
+    currentPath === "/tenants" ||
+    currentPath.startsWith("/tenants/create") ||
+    currentPath === "/tenants/";
+
+  // Load domain from cookies on component mount (skip for local development)
+  useEffect(() => {
+    if (isLocalDevelopment) {
+      // For local development, always use localhost:3000
+      return;
+    }
+    const savedDomain = getSelectedDomainFromStorage();
+    if (savedDomain) {
+      setSelectedDomain(savedDomain);
+    }
+  }, []);
+
+  // Handle auth callback separately without basename
+  if (isAuthCallback) {
+    return (
+      <React.StrictMode>
+        <BrowserRouter>
+          <AuthCallback onAuthComplete={() => {}} />
+        </BrowserRouter>
+      </React.StrictMode>
+    );
+  }
+
+  // Show domain selector on root path or if no domain is selected
+  // Skip for local development - redirect to /tenants instead
+  if (!isLocalDevelopment && (isRootPath || !selectedDomain)) {
+    return (
+      <DomainSelector
+        onDomainSelected={(domain) => setSelectedDomain(domain)}
+        disableCloseOnRootPath={isRootPath}
+      />
+    );
+  }
+
+  // For local development on root path, redirect to /tenants
+  if (isLocalDevelopment && isRootPath) {
+    window.location.href = "/tenants";
+    return null;
+  }
+
+  // Handle tenants management routes without basename
+  if (isTenantsPath) {
+    return (
+      <React.StrictMode>
+        <BrowserRouter>
+          <TenantsApp initialDomain={selectedDomain || ""} />
+        </BrowserRouter>
+      </React.StrictMode>
+    );
+  }
+
+  // Handle tenant-specific routes
+  const pathSegments = currentPath.split("/").filter(Boolean);
+  const tenantId = pathSegments[0];
+
+  if (tenantId) {
+    return (
+      <React.StrictMode>
+        <BrowserRouter basename={`/${tenantId}`}>
+          <App tenantId={tenantId} initialDomain={selectedDomain || ""} />
+        </BrowserRouter>
+      </React.StrictMode>
+    );
+  }
+
+  // Fallback to domain selector (or redirect for local development)
+  if (isLocalDevelopment) {
+    window.location.href = "/tenants";
+    return null;
+  }
+
+  return (
+    <DomainSelector
+      onDomainSelected={(domain) => setSelectedDomain(domain)}
+      disableCloseOnRootPath={false}
+    />
+  );
+}
+
+ReactDOM.createRoot(document.getElementById("root")!).render(<Root />);

package/src/lib/logs.ts

@@ -0,0 +1,21 @@
+// Subset of LogTypes used in react-admin app
+// Values match those defined in @authhero/adapter-interfaces
+export const LogTypes = {
+  SUCCESS_API_OPERATION: "sapi",
+  SUCCESS_SILENT_AUTH: "ssa",
+  FAILED_SILENT_AUTH: "fsa",
+  SUCCESS_SIGNUP: "ss",
+  FAILED_SIGNUP: "fs",
+  SUCCESS_LOGIN: "s",
+  FAILED_LOGIN_INCORRECT_PASSWORD: "fp",
+  FAILED_LOGIN_INVALID_EMAIL_USERNAME: "fu",
+  SUCCESS_LOGOUT: "slo",
+  SUCCESS_CROSS_ORIGIN_AUTHENTICATION: "scoa",
+  FAILED_CROSS_ORIGIN_AUTHENTICATION: "fcoa",
+  CODE_LINK_SENT: "cls", // Updated to match the main schema
+  FAILED_LOGIN: "f",
+  SUCCESS_EXCHANGE_AUTHORIZATION_CODE_FOR_ACCESS_TOKEN: "seacft",
+  FAILED_EXCHANGE_AUTHORIZATION_CODE_FOR_ACCESS_TOKEN: "feacft",
+} as const;
+
+export type LogTypes = (typeof LogTypes)[keyof typeof LogTypes];

package/src/types/reactflow.d.ts

@@ -0,0 +1,86 @@
+declare module "reactflow" {
+  export interface NodeProps<T = Record<string, unknown>> {
+    id: string;
+    data: T;
+    position: { x: number; y: number };
+    type?: string;
+    className?: string;
+    style?: React.CSSProperties;
+  }
+
+  export interface Connection {
+    source: string;
+    target: string;
+    sourceHandle?: string;
+    targetHandle?: string;
+  }
+
+  export interface EdgeProps {
+    id: string;
+    source: string;
+    target: string;
+    type?: string;
+    label?: string;
+    animated?: boolean;
+    style?: React.CSSProperties;
+  }
+
+  export interface NodeChange {
+    id: string;
+    type: string;
+    position?: { x: number; y: number };
+    // Add other properties as needed
+  }
+
+  export interface EdgeChange {
+    id: string;
+    type: string;
+    // Add other properties as needed
+  }
+
+  export type Node = NodeProps;
+  export type Edge = EdgeProps;
+
+  export enum ConnectionLineType {
+    Bezier = "bezier",
+    Step = "step",
+    SmoothStep = "smoothstep",
+    Straight = "straight",
+  }
+
+  export function applyNodeChanges(
+    changes: NodeChange[],
+    nodes: Node[],
+  ): Node[];
+  export function applyEdgeChanges(
+    changes: EdgeChange[],
+    edges: Edge[],
+  ): Edge[];
+
+  // Define ReactFlow component
+  export interface ReactFlowProps {
+    nodes: Node[];
+    edges: Edge[];
+    onNodesChange?: (changes: NodeChange[]) => void;
+    onEdgesChange?: (changes: EdgeChange[]) => void;
+    onConnect?: (connection: Connection) => void;
+    nodeTypes?: Record<string, React.ComponentType<any>>;
+    edgeTypes?: Record<string, React.ComponentType<any>>;
+    connectionLineType?: ConnectionLineType;
+    fitView?: boolean;
+    children?: React.ReactNode;
+  }
+
+  // Export ReactFlowProvider component
+  export const ReactFlowProvider: React.FC<{ children: React.ReactNode }>;
+
+  // Export the Controls component
+  export const Controls: React.FC<any>;
+
+  // Export the Background component
+  export const Background: React.FC<any>;
+
+  // Default export
+  const ReactFlow: React.FC<ReactFlowProps>;
+  export default ReactFlow;
+}

package/src/utils/domainUtils.ts

@@ -0,0 +1,169 @@
+/**
+ * Shared utility functions for domain management
+ */
+
+// Storage key constants
+export const DOMAINS_STORAGE_KEY = "authhero_domains";
+export const SELECTED_DOMAIN_STORAGE_KEY = "authhero_selected_domain";
+
+// Connection method types
+export type ConnectionMethod = "login" | "token" | "client_credentials";
+
+// Domain configuration interface
+export interface DomainConfig {
+  url: string;
+  connectionMethod: ConnectionMethod;
+  // Login method fields
+  clientId?: string;
+  restApiUrl?: string;
+  // Token method field
+  token?: string;
+  // Client credentials method fields
+  clientSecret?: string;
+}
+
+/**
+ * Gets domains from localStorage
+ * Handles both formats (array of objects or array of strings) for backward compatibility
+ */
+export const getDomainFromStorage = (): DomainConfig[] => {
+  try {
+    const storedValue = localStorage.getItem(DOMAINS_STORAGE_KEY);
+    if (!storedValue) return [];
+
+    const parsedData = JSON.parse(storedValue);
+
+    // Handle both formats: array of objects with url property or array of strings
+    if (Array.isArray(parsedData)) {
+      return parsedData
+        .filter((item) => item !== null && item !== undefined)
+        .map((item) => {
+          if (typeof item === "object" && item !== null && "url" in item) {
+            // Add connectionMethod if it doesn't exist (for backward compatibility)
+            if (!("connectionMethod" in item)) {
+              return {
+                ...item,
+                connectionMethod: "login" as ConnectionMethod, // Assume login for existing entries
+              } as DomainConfig;
+            }
+            return item as DomainConfig;
+          } else {
+            // Convert string domains to DomainConfig format (backward compatibility)
+            return {
+              url: String(item),
+              connectionMethod: "login" as ConnectionMethod,
+              clientId: "", // Empty clientId for legacy entries
+            };
+          }
+        })
+        .filter((domain) => domain.url.trim() !== ""); // Remove empty domains
+    }
+    return [];
+  } catch (e) {
+    console.error("Failed to parse domains from localStorage", e);
+    return [];
+  }
+};
+
+/**
+ * Saves domains to localStorage
+ */
+export const saveDomainToStorage = (domains: DomainConfig[]): void => {
+  try {
+    console.log("Saving domains to localStorage:", domains);
+    localStorage.setItem(DOMAINS_STORAGE_KEY, JSON.stringify(domains));
+  } catch (e) {
+    console.error("Failed to save domains to localStorage", e);
+  }
+};
+
+/**
+ * Gets the selected domain from localStorage
+ * Falls back to first domain in storage if no selected domain is set
+ */
+export const getSelectedDomainFromStorage = (): string => {
+  try {
+    const selectedDomain = localStorage.getItem(SELECTED_DOMAIN_STORAGE_KEY);
+    if (selectedDomain) return selectedDomain;
+
+    // Fallback to first domain in storage if no selected domain
+    const domains = getDomainFromStorage();
+    return domains[0]?.url || "";
+  } catch (e) {
+    console.error("Failed to get selected domain from localStorage", e);
+    return "";
+  }
+};
+
+/**
+ * Saves the selected domain to localStorage
+ */
+export const saveSelectedDomainToStorage = (domain: string): void => {
+  try {
+    console.log("Saving selected domain to localStorage:", domain);
+    localStorage.setItem(SELECTED_DOMAIN_STORAGE_KEY, domain);
+  } catch (e) {
+    console.error("Failed to save selected domain to localStorage", e);
+  }
+};
+
+/**
+ * Gets client ID for a specific domain
+ * Falls back to environment variable if not found
+ */
+export const getClientIdFromStorage = (domain: string): string => {
+  // Ensure domain is properly formatted for comparison
+  const formattedDomain = formatDomain(domain);
+
+  const domains = getDomainFromStorage();
+
+  // Look for matching domain in the array
+  for (const d of domains) {
+    if (d.url === formattedDomain && d.clientId) {
+      return d.clientId;
+    }
+  }
+
+  // Fallback to environment variable
+  const fallbackClientId = import.meta.env.VITE_AUTH0_CLIENT_ID;
+  return fallbackClientId;
+};
+
+/**
+ * Formats a domain string (removes protocol if present)
+ */
+export const formatDomain = (domain: string): string => {
+  return domain.trim().replace(/^https?:\/\//, "");
+};
+
+/**
+ * Constructs a full URL with HTTPS protocol
+ * - If domain starts with "local.", connects to https://localhost:3000
+ * - Always uses https:// for all domains (including localhost with self-signed certs)
+ * - Preserves existing https:// protocol if already present
+ * - Converts http:// to https://
+ */
+export const buildUrlWithProtocol = (domain: string): string => {
+  const trimmedDomain = domain.trim();
+
+  // Extract hostname without protocol for local. check
+  const hostnameOnly = trimmedDomain.replace(/^https?:\/\//, "");
+
+  // If hostname starts with "local.", redirect to local development server
+  if (hostnameOnly.startsWith("local.")) {
+    return "https://localhost:3000";
+  }
+
+  // Check if it already has a protocol
+  if (trimmedDomain.startsWith("https://")) {
+    return trimmedDomain;
+  }
+
+  // Convert http:// to https://
+  if (trimmedDomain.startsWith("http://")) {
+    return trimmedDomain.replace("http://", "https://");
+  }
+
+  // No protocol specified - add https://
+  return `https://${trimmedDomain}`;
+};