@authhero/react-admin 0.29.0 → 0.31.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @authhero/react-admin
 
+## 0.31.0
+
+### Minor Changes
+
+- ac8af37: Add custom text support
+
+### Patch Changes
+
+- Updated dependencies [88a03cd]
+- Updated dependencies [ac8af37]
+  - @authhero/widget@0.9.0
+  - @authhero/adapter-interfaces@0.130.0
+
+## 0.30.0
+
+### Minor Changes
+
+- 6585906: Move universal login templates to separate adapter
+
+### Patch Changes
+
+- Updated dependencies [6585906]
+  - @authhero/adapter-interfaces@0.128.0
+  - @authhero/widget@0.8.5
+
 ## 0.29.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@authhero/react-admin",
-  "version": "0.29.0",
+  "version": "0.31.0",
   "packageManager": "pnpm@10.20.0",
   "private": false,
   "repository": {

package/src/App.tsx

@@ -25,6 +25,7 @@ import {
   DomainList,
 } from "./components/custom-domains";
 import { BrandingList, BrandingEdit } from "./components/branding";
+import { PromptsList, PromptsEdit } from "./components/prompts";
 import { LogsList, LogShow } from "./components/logs";
 import { HookEdit, HookList, HooksCreate } from "./components/hooks";
 import { SessionEdit } from "./components/sessions";
@@ -41,6 +42,7 @@ import {
 import WebhookIcon from "@mui/icons-material/Webhook";
 import DnsIcon from "@mui/icons-material/Dns";
 import PaletteIcon from "@mui/icons-material/Palette";
+import TextFieldsIcon from "@mui/icons-material/TextFields";
 import StorageIcon from "@mui/icons-material/Storage";
 import AccountTreeIcon from "@mui/icons-material/AccountTree";
 import { useMemo, useState, useEffect } from "react";
@@ -251,6 +253,14 @@ export function App(props: AppProps) {
           edit={BrandingEdit}
           show={ShowGuesser}
         />
+        <Resource
+          icon={TextFieldsIcon}
+          name="prompts"
+          options={{ hasSingle: true }}
+          list={PromptsList}
+          edit={PromptsEdit}
+          show={ShowGuesser}
+        />
         <Resource
           icon={StorageIcon}
           name="resource-servers"

package/src/auth0DataProvider.ts

@@ -346,6 +346,61 @@ export default (
         );
       }
 
+      // Handle prompts singleton resource
+      if (resource === "prompts") {
+        const headers = createHeaders(tenantId);
+        try {
+          const res = await httpClient(`${apiUrl}/api/v2/prompts`, { headers });
+          // Also fetch custom text entries list
+          let customTextEntries: Array<{ prompt: string; language: string }> =
+            [];
+          try {
+            const customTextRes = await httpClient(
+              `${apiUrl}/api/v2/prompts/custom-text`,
+              { headers },
+            );
+            customTextEntries = customTextRes.json || [];
+          } catch {
+            // Custom text list might not exist yet
+          }
+          return {
+            data: [{ ...res.json, customTextEntries, id: resource }],
+            total: 1,
+          };
+        } catch (error) {
+          console.error("Error fetching prompts:", error);
+          return {
+            data: [{ id: resource, customTextEntries: [] }],
+            total: 1,
+          };
+        }
+      }
+
+      // Handle custom-text resource (for individual custom text entries)
+      if (resource === "custom-text") {
+        const headers = createHeaders(tenantId);
+        try {
+          const res = await httpClient(
+            `${apiUrl}/api/v2/prompts/custom-text`,
+            { headers },
+          );
+          const entries = res.json || [];
+          return {
+            data: entries.map(
+              (e: { prompt: string; language: string }, idx: number) => ({
+                id: `${e.prompt}:${e.language}`,
+                prompt: e.prompt,
+                language: e.language,
+              }),
+            ),
+            total: entries.length,
+          };
+        } catch (error) {
+          console.error("Error fetching custom-text list:", error);
+          return { data: [], total: 0 };
+        }
+      }
+
       // Handle organizations with client-side paging and search (fetch 500, filter locally)
       if (resource === "organizations" && !resourcePath.includes("/")) {
         const result = await managementClient.organizations.list({
@@ -587,6 +642,62 @@ export default (
         };
       }
 
+      // Handle prompts singleton resource
+      if (resource === "prompts") {
+        const headers = createHeaders(tenantId);
+        try {
+          const res = await httpClient(`${apiUrl}/api/v2/prompts`, { headers });
+          // Also fetch custom text entries list
+          let customTextEntries: Array<{ prompt: string; language: string }> =
+            [];
+          try {
+            const customTextRes = await httpClient(
+              `${apiUrl}/api/v2/prompts/custom-text`,
+              { headers },
+            );
+            customTextEntries = customTextRes.json || [];
+          } catch {
+            // Custom text list might not exist yet
+          }
+          return {
+            data: { ...res.json, customTextEntries, id: resource },
+          };
+        } catch (error) {
+          console.error("Error fetching prompts:", error);
+          return {
+            data: { id: resource, customTextEntries: [] },
+          };
+        }
+      }
+
+      // Handle custom-text resource (individual entries)
+      if (resource === "custom-text") {
+        // ID format is "prompt:language"
+        const [prompt, language] = params.id.split(":");
+        if (!prompt || !language) {
+          throw new Error("Invalid custom-text ID format");
+        }
+        try {
+          const result = await managementClient.prompts.customText.get(
+            prompt as any,
+            language as any,
+          );
+          return {
+            data: {
+              id: params.id,
+              prompt,
+              language,
+              texts: result || {},
+            },
+          };
+        } catch (error) {
+          console.error("Error fetching custom-text:", error);
+          return {
+            data: { id: params.id, prompt, language, texts: {} },
+          };
+        }
+      }
+
       // Handle stats/active-users endpoint
       if (resource === "stats/active-users") {
         const headers = createHeaders(tenantId);
@@ -948,6 +1059,44 @@ export default (
         };
       }
 
+      // Handle prompts singleton resource
+      if (resource === "prompts") {
+        const headers = createHeaders(tenantId);
+        headers.set("Content-Type", "application/json");
+        // Don't send customTextEntries to the settings endpoint
+        const { customTextEntries, ...promptsData } = cleanParams.data;
+        const res = await httpClient(`${apiUrl}/api/v2/prompts`, {
+          method: "PATCH",
+          headers,
+          body: JSON.stringify(promptsData),
+        });
+        return {
+          data: { ...res.json, customTextEntries, id: resource },
+        };
+      }
+
+      // Handle custom-text resource
+      if (resource === "custom-text") {
+        // ID format is "prompt:language"
+        const [prompt, language] = params.id.split(":");
+        if (!prompt || !language) {
+          throw new Error("Invalid custom-text ID format");
+        }
+        await managementClient.prompts.customText.set(
+          prompt as any,
+          language as any,
+          cleanParams.data.texts || {},
+        );
+        return {
+          data: {
+            id: params.id,
+            prompt,
+            language,
+            texts: cleanParams.data.texts || {},
+          },
+        };
+      }
+
       // Special handling for branding to update theme data separately
       if (resource === "branding") {
         // Extract themes from the payload - it's updated via a separate endpoint
@@ -1123,6 +1272,27 @@ export default (
       if (tenantId) headers.set("tenant-id", tenantId);
       const managementClient = await getManagementClient();
 
+      // Handle custom-text resource
+      if (resource === "custom-text") {
+        const { prompt, language, texts } = params.data;
+        if (!prompt || !language) {
+          throw new Error("prompt and language are required");
+        }
+        await managementClient.prompts.customText.set(
+          prompt as any,
+          language as any,
+          texts || {},
+        );
+        return {
+          data: {
+            id: `${prompt}:${language}`,
+            prompt,
+            language,
+            texts: texts || {},
+          },
+        };
+      }
+
       // Helper for POST requests
       const post = async (endpoint: string, body: any) =>
         httpClient(`${apiUrl}/api/v2/${endpoint}`, {
@@ -1276,6 +1446,23 @@ export default (
       const headers = new Headers({ "content-type": "application/json" });
       if (tenantId) headers.set("tenant-id", tenantId);
 
+      // Handle custom-text resource
+      if (resource === "custom-text") {
+        // ID format is "prompt:language"
+        const [prompt, language] = String(params.id).split(":");
+        if (!prompt || !language) {
+          throw new Error("Invalid custom-text ID format");
+        }
+        // Auth0 SDK doesn't have delete, so we set to empty object
+        // Our backend also supports DELETE, but using set({}) is compatible with Auth0
+        await managementClient.prompts.customText.set(
+          prompt as any,
+          language as any,
+          {},
+        );
+        return { data: { id: params.id } };
+      }
+
       // Helper for DELETE requests
       const del = async (endpoint: string, body?: any) =>
         httpClient(`${apiUrl}/api/v2/${endpoint}`, {

package/src/authProvider.ts

@@ -51,12 +51,6 @@ export const createAuth0Client = (domain: string) => {
     import.meta.env.VITE_AUTH0_AUDIENCE || "urn:authhero:management";
 
   const clientId = getClientIdFromStorage(domain);
-  console.log(
-    "[createAuth0Client] Creating client for domain:",
-    domain,
-    "with clientId:",
-    clientId,
-  );
 
   const auth0Client = new Auth0Client({
     domain: fullDomain,
@@ -152,14 +146,6 @@ export const createAuth0ClientForOrg = (
     import.meta.env.VITE_AUTH0_AUDIENCE || "urn:authhero:management";
 
   const clientId = getClientIdFromStorage(domain);
-  console.log(
-    "[createAuth0ClientForOrg] Creating client for domain:",
-    domain,
-    "org:",
-    normalizedOrgId,
-    "with clientId:",
-    clientId,
-  );
 
   const auth0Client = new Auth0Client({
     domain: fullDomain,

package/src/components/branding/UniversalLoginTab.tsx

@@ -0,0 +1,357 @@
+import { useState, useEffect, useCallback } from "react";
+import {
+  Box,
+  Typography,
+  TextField,
+  Button,
+  Alert,
+  CircularProgress,
+  Paper,
+  Divider,
+  Link,
+} from "@mui/material";
+import { useNotify } from "react-admin";
+import {
+  authorizedHttpClient,
+  createOrganizationHttpClient,
+} from "../../authProvider";
+import {
+  getDomainFromStorage,
+  buildUrlWithProtocol,
+  formatDomain,
+  getSelectedDomainFromStorage,
+} from "../../utils/domainUtils";
+
+// Get tenantId from the URL path (e.g., /breakit/branding -> breakit)
+function getTenantIdFromPath(): string {
+  const pathSegments = window.location.pathname.split("/").filter(Boolean);
+  return pathSegments[0] || "";
+}
+
+// Default template with required Liquid tags
+const DEFAULT_TEMPLATE = `<!DOCTYPE html>
+<html>
+  <head>
+    {%- auth0:head -%}
+  </head>
+  <body>
+    {%- auth0:widget -%}
+  </body>
+</html>`;
+
+function getApiUrl(): string {
+  const domains = getDomainFromStorage();
+  const selectedDomain = getSelectedDomainFromStorage();
+  const formattedSelectedDomain = formatDomain(selectedDomain);
+  const domainConfig = domains.find(
+    (d) => formatDomain(d.url) === formattedSelectedDomain
+  );
+
+  let apiUrl: string;
+
+  if (domainConfig?.restApiUrl) {
+    apiUrl = buildUrlWithProtocol(domainConfig.restApiUrl);
+  } else if (selectedDomain) {
+    apiUrl = buildUrlWithProtocol(selectedDomain);
+  } else {
+    apiUrl = buildUrlWithProtocol(import.meta.env.VITE_AUTH0_API_URL || "");
+  }
+
+  return apiUrl.replace(/\/$/, "");
+}
+
+function getHttpClient(tenantId: string) {
+  // Check single-tenant mode at request time
+  const storedFlag = sessionStorage.getItem("isSingleTenant");
+  const isSingleTenant =
+    storedFlag?.endsWith("|true") || storedFlag === "true";
+
+  // In single-tenant mode, use the regular authorized client without organization scope
+  // In multi-tenant mode, use organization-scoped client for proper access control
+  if (isSingleTenant) {
+    return authorizedHttpClient;
+  } else {
+    return createOrganizationHttpClient(tenantId);
+  }
+}
+
+export function UniversalLoginTab() {
+  const notify = useNotify();
+  const tenantId = getTenantIdFromPath();
+
+  const [template, setTemplate] = useState<string>("");
+  const [originalTemplate, setOriginalTemplate] = useState<string>("");
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [hasTemplate, setHasTemplate] = useState(false);
+
+  const fetchTemplate = useCallback(async () => {
+    if (!tenantId) return;
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const apiUrl = getApiUrl();
+      const httpClient = getHttpClient(tenantId);
+      const url = `${apiUrl}/api/v2/branding/templates/universal-login`;
+      
+      const response = await httpClient(url, {
+        headers: new Headers({
+          "tenant-id": tenantId,
+        }),
+      });
+
+      if (response.json?.body) {
+        setTemplate(response.json.body);
+        setOriginalTemplate(response.json.body);
+        setHasTemplate(true);
+      }
+    } catch (err: any) {
+      if (err.status === 404) {
+        // No template exists yet, that's fine
+        setTemplate("");
+        setOriginalTemplate("");
+        setHasTemplate(false);
+      } else {
+        setError("Failed to load template");
+        console.error("Error fetching template:", err);
+      }
+    } finally {
+      setLoading(false);
+    }
+  }, [tenantId]);
+
+  useEffect(() => {
+    fetchTemplate();
+  }, [fetchTemplate]);
+
+  const handleSave = async () => {
+    if (!tenantId) return;
+
+    // Validate template
+    if (!template.includes("{%- auth0:head -%}")) {
+      notify("Template must contain {%- auth0:head -%} tag", { type: "error" });
+      return;
+    }
+    if (!template.includes("{%- auth0:widget -%}")) {
+      notify("Template must contain {%- auth0:widget -%} tag", {
+        type: "error",
+      });
+      return;
+    }
+
+    setSaving(true);
+    setError(null);
+
+    try {
+      const apiUrl = getApiUrl();
+      const httpClient = getHttpClient(tenantId);
+      await httpClient(
+        `${apiUrl}/api/v2/branding/templates/universal-login`,
+        {
+          method: "PUT",
+          headers: new Headers({
+            "tenant-id": tenantId,
+            "Content-Type": "application/json",
+          }),
+          body: JSON.stringify({ body: template }),
+        }
+      );
+
+      setOriginalTemplate(template);
+      setHasTemplate(true);
+      notify("Template saved successfully", { type: "success" });
+    } catch (err: any) {
+      setError(err.message || "Failed to save template");
+      notify("Failed to save template", { type: "error" });
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!tenantId) return;
+
+    if (
+      !window.confirm(
+        "Are you sure you want to delete the custom template? The default template will be used instead."
+      )
+    ) {
+      return;
+    }
+
+    setSaving(true);
+    setError(null);
+
+    try {
+      const apiUrl = getApiUrl();
+      const httpClient = getHttpClient(tenantId);
+      await httpClient(
+        `${apiUrl}/api/v2/branding/templates/universal-login`,
+        {
+          method: "DELETE",
+          headers: new Headers({
+            "tenant-id": tenantId,
+          }),
+        }
+      );
+
+      setTemplate("");
+      setOriginalTemplate("");
+      setHasTemplate(false);
+      notify("Template deleted successfully", { type: "success" });
+    } catch (err: any) {
+      setError(err.message || "Failed to delete template");
+      notify("Failed to delete template", { type: "error" });
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleUseDefault = () => {
+    setTemplate(DEFAULT_TEMPLATE);
+  };
+
+  const hasChanges = template !== originalTemplate;
+
+  if (loading) {
+    return (
+      <Box sx={{ display: "flex", justifyContent: "center", p: 4 }}>
+        <CircularProgress />
+      </Box>
+    );
+  }
+
+  return (
+    <Box sx={{ maxWidth: 1000, p: 2 }}>
+      <Typography variant="h6" sx={{ mb: 2 }}>
+        Universal Login Page Template
+      </Typography>
+
+      <Typography variant="body2" sx={{ mb: 3, color: "text.secondary" }}>
+        Customize the HTML template for your Universal Login page. The template
+        uses Liquid templating syntax and must include the required{" "}
+        <code>{"{%- auth0:head -%}"}</code> and{" "}
+        <code>{"{%- auth0:widget -%}"}</code> tags.
+      </Typography>
+
+      <Alert severity="info" sx={{ mb: 3 }}>
+        <Typography variant="body2">
+          <strong>Required tags:</strong>
+          <ul style={{ margin: "8px 0", paddingLeft: "20px" }}>
+            <li>
+              <code>{"{%- auth0:head -%}"}</code> - Must be placed in the{" "}
+              <code>&lt;head&gt;</code> section
+            </li>
+            <li>
+              <code>{"{%- auth0:widget -%}"}</code> - Must be placed in the{" "}
+              <code>&lt;body&gt;</code> section where you want the login widget
+            </li>
+          </ul>
+          <Link
+            href="https://auth0.com/docs/authenticate/login/auth0-universal-login/new-experience/universal-login-page-templates"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Learn more about page templates
+          </Link>
+        </Typography>
+      </Alert>
+
+      {error && (
+        <Alert severity="error" sx={{ mb: 2 }}>
+          {error}
+        </Alert>
+      )}
+
+      <Paper variant="outlined" sx={{ mb: 2 }}>
+        <TextField
+          multiline
+          fullWidth
+          minRows={15}
+          maxRows={30}
+          value={template}
+          onChange={(e) => setTemplate(e.target.value)}
+          placeholder="Enter your custom HTML template..."
+          sx={{
+            "& .MuiInputBase-root": {
+              fontFamily: "monospace",
+              fontSize: "13px",
+            },
+            "& .MuiOutlinedInput-notchedOutline": {
+              border: "none",
+            },
+          }}
+        />
+      </Paper>
+
+      <Box sx={{ display: "flex", gap: 2, flexWrap: "wrap" }}>
+        <Button
+          variant="contained"
+          onClick={handleSave}
+          disabled={saving || !template || !hasChanges}
+        >
+          {saving ? <CircularProgress size={20} /> : "Save Template"}
+        </Button>
+
+        {!template && (
+          <Button variant="outlined" onClick={handleUseDefault}>
+            Use Default Template
+          </Button>
+        )}
+
+        {hasTemplate && (
+          <Button
+            variant="outlined"
+            color="error"
+            onClick={handleDelete}
+            disabled={saving}
+          >
+            Delete Template
+          </Button>
+        )}
+
+        {hasChanges && (
+          <Button
+            variant="text"
+            onClick={() => setTemplate(originalTemplate)}
+            disabled={saving}
+          >
+            Discard Changes
+          </Button>
+        )}
+      </Box>
+
+      {hasChanges && (
+        <Typography
+          variant="caption"
+          sx={{ display: "block", mt: 1, color: "warning.main" }}
+        >
+          You have unsaved changes
+        </Typography>
+      )}
+
+      <Divider sx={{ my: 4 }} />
+
+      <Typography variant="subtitle2" sx={{ mb: 1, color: "text.secondary" }}>
+        Template Variables
+      </Typography>
+      <Typography variant="body2" sx={{ color: "text.secondary" }}>
+        You can use Liquid variables to customize your template:
+        <ul style={{ margin: "8px 0", paddingLeft: "20px" }}>
+          <li>
+            <code>{"{{ branding.logo_url }}"}</code> - Your logo URL
+          </li>
+          <li>
+            <code>{"{{ branding.colors.primary }}"}</code> - Primary color
+          </li>
+          <li>
+            <code>{"{{ prompt.screen.name }}"}</code> - Current screen name
+          </li>
+        </ul>
+      </Typography>
+    </Box>
+  );
+}

package/src/components/branding/edit.tsx

@@ -5,6 +5,7 @@ import { useState, useEffect } from "react";
 import { Box } from "@mui/material";
 import { ThemesTab } from "./ThemesTab";
 import { BrandingPreview } from "./BrandingPreview";
+import { UniversalLoginTab } from "./UniversalLoginTab";
 
 // Helper to recursively remove null values and empty objects from data
 // This is needed because react-admin sends null for empty form fields,
@@ -207,6 +208,9 @@ function BrandingFormContent() {
               <BrandingPreview />
             </Box>
           </TabbedForm.Tab>
+          <TabbedForm.Tab label="Universal Login">
+            <UniversalLoginTab />
+          </TabbedForm.Tab>
         </TabbedForm>
       </Box>
     </Box>

package/src/components/branding/index.ts

@@ -1,2 +1,3 @@
 export * from "./edit";
 export * from "./list";
+export * from "./UniversalLoginTab";

package/src/components/prompts/edit.tsx

@@ -0,0 +1,554 @@
+import {
+  Edit,
+  TabbedForm,
+  SelectInput,
+  BooleanInput,
+  useRecordContext,
+  useDataProvider,
+  useNotify,
+  useRefresh,
+} from "react-admin";
+import {
+  Stack,
+  Typography,
+  Box,
+  Button,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Paper,
+  IconButton,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  TextField,
+  MenuItem,
+} from "@mui/material";
+import EditIcon from "@mui/icons-material/Edit";
+import DeleteIcon from "@mui/icons-material/Delete";
+import AddIcon from "@mui/icons-material/Add";
+import { useState, useCallback } from "react";
+
+// Available prompt screens
+const PROMPT_SCREENS = [
+  { id: "login", name: "Login" },
+  { id: "login-id", name: "Login - Identifier" },
+  { id: "login-password", name: "Login - Password" },
+  { id: "signup", name: "Sign Up" },
+  { id: "signup-id", name: "Sign Up - Identifier" },
+  { id: "signup-password", name: "Sign Up - Password" },
+  { id: "reset-password", name: "Reset Password" },
+  { id: "consent", name: "Consent" },
+  { id: "mfa", name: "MFA" },
+  { id: "mfa-push", name: "MFA - Push" },
+  { id: "mfa-otp", name: "MFA - OTP" },
+  { id: "mfa-voice", name: "MFA - Voice" },
+  { id: "mfa-phone", name: "MFA - Phone" },
+  { id: "mfa-webauthn", name: "MFA - WebAuthn" },
+  { id: "mfa-sms", name: "MFA - SMS" },
+  { id: "mfa-email", name: "MFA - Email" },
+  { id: "mfa-recovery-code", name: "MFA - Recovery Code" },
+  { id: "status", name: "Status" },
+  { id: "device-flow", name: "Device Flow" },
+  { id: "email-verification", name: "Email Verification" },
+  { id: "email-otp-challenge", name: "Email OTP Challenge" },
+  { id: "organizations", name: "Organizations" },
+  { id: "invitation", name: "Invitation" },
+  { id: "common", name: "Common" },
+];
+
+// Common languages
+const LANGUAGES = [
+  { id: "en", name: "English" },
+  { id: "es", name: "Spanish" },
+  { id: "fr", name: "French" },
+  { id: "de", name: "German" },
+  { id: "it", name: "Italian" },
+  { id: "pt", name: "Portuguese" },
+  { id: "nl", name: "Dutch" },
+  { id: "ja", name: "Japanese" },
+  { id: "ko", name: "Korean" },
+  { id: "zh", name: "Chinese" },
+  { id: "sv", name: "Swedish" },
+  { id: "nb", name: "Norwegian" },
+  { id: "fi", name: "Finnish" },
+  { id: "da", name: "Danish" },
+  { id: "pl", name: "Polish" },
+  { id: "cs", name: "Czech" },
+];
+
+// Default text keys for each screen type
+const DEFAULT_TEXT_KEYS: Record<string, string[]> = {
+  login: [
+    "pageTitle",
+    "title",
+    "description",
+    "buttonText",
+    "signupActionLinkText",
+    "signupActionText",
+    "forgotPasswordText",
+    "usernameLabel",
+    "usernameOrEmailLabel",
+    "emailLabel",
+    "phoneLabel",
+    "passwordLabel",
+    "separatorText",
+    "continueWithText",
+    "invitationTitle",
+    "invitationDescription",
+    "alertListTitle",
+    "wrongEmailOrPasswordErrorText",
+    "invalidEmailErrorText",
+    "passwordRequiredErrorText",
+    "captchaErrorText",
+  ],
+  signup: [
+    "pageTitle",
+    "title",
+    "description",
+    "buttonText",
+    "loginActionLinkText",
+    "loginActionText",
+    "usernameLabel",
+    "emailLabel",
+    "phoneLabel",
+    "passwordLabel",
+    "confirmPasswordLabel",
+    "termsText",
+    "privacyPolicyText",
+    "separatorText",
+    "continueWithText",
+  ],
+  "reset-password": [
+    "pageTitle",
+    "title",
+    "description",
+    "buttonText",
+    "backToLoginText",
+    "emailLabel",
+    "successTitle",
+    "successDescription",
+  ],
+  common: [
+    "alertListTitle",
+    "showPasswordText",
+    "hidePasswordText",
+    "continueText",
+    "orText",
+    "termsOfServiceText",
+    "privacyPolicyText",
+    "contactSupportText",
+    "copyrightText",
+  ],
+};
+
+// Remove null/undefined values from an object
+function removeNullValues(
+  obj: Record<string, unknown>,
+): Record<string, unknown> {
+  const result: Record<string, unknown> = {};
+  for (const [key, value] of Object.entries(obj)) {
+    if (value === null || value === undefined) {
+      continue;
+    }
+    if (typeof value === "object" && !Array.isArray(value)) {
+      const cleaned = removeNullValues(value as Record<string, unknown>);
+      if (Object.keys(cleaned).length > 0) {
+        result[key] = cleaned;
+      }
+    } else {
+      result[key] = value;
+    }
+  }
+  return result;
+}
+
+interface CustomTextEntry {
+  prompt: string;
+  language: string;
+}
+
+function CustomTextTab() {
+  const record = useRecordContext();
+  const dataProvider = useDataProvider();
+  const notify = useNotify();
+  const refresh = useRefresh();
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [editDialogOpen, setEditDialogOpen] = useState(false);
+  const [selectedEntry, setSelectedEntry] = useState<CustomTextEntry | null>(
+    null,
+  );
+  const [editingTexts, setEditingTexts] = useState<Record<string, string>>({});
+  const [newPrompt, setNewPrompt] = useState("");
+  const [newLanguage, setNewLanguage] = useState("en");
+  const [loading, setLoading] = useState(false);
+
+  const customTextEntries: CustomTextEntry[] = record?.customTextEntries || [];
+
+  const handleAdd = useCallback(() => {
+    setNewPrompt("");
+    setNewLanguage("en");
+    setDialogOpen(true);
+  }, []);
+
+  const handleCreate = useCallback(async () => {
+    if (!newPrompt || !newLanguage) {
+      notify("Please select a screen and language", { type: "warning" });
+      return;
+    }
+
+    setLoading(true);
+    try {
+      // Get default text keys for this screen
+      const defaultKeys = DEFAULT_TEXT_KEYS[newPrompt] || [];
+      const initialTexts: Record<string, string> = {};
+      defaultKeys.forEach((key) => {
+        initialTexts[key] = "";
+      });
+
+      await dataProvider.create("custom-text", {
+        data: {
+          prompt: newPrompt,
+          language: newLanguage,
+          texts: initialTexts,
+        },
+      });
+      notify("Custom text created successfully", { type: "success" });
+      setDialogOpen(false);
+      refresh();
+    } catch (error) {
+      notify("Error creating custom text", { type: "error" });
+    } finally {
+      setLoading(false);
+    }
+  }, [dataProvider, newPrompt, newLanguage, notify, refresh]);
+
+  const handleEdit = useCallback(
+    async (entry: CustomTextEntry) => {
+      setLoading(true);
+      try {
+        const result = await dataProvider.getOne("custom-text", {
+          id: `${entry.prompt}:${entry.language}`,
+        });
+        setSelectedEntry(entry);
+        setEditingTexts(result.data.texts || {});
+        setEditDialogOpen(true);
+      } catch (error) {
+        notify("Error loading custom text", { type: "error" });
+      } finally {
+        setLoading(false);
+      }
+    },
+    [dataProvider, notify],
+  );
+
+  const handleSave = useCallback(async () => {
+    if (!selectedEntry) return;
+
+    setLoading(true);
+    try {
+      await dataProvider.update("custom-text", {
+        id: `${selectedEntry.prompt}:${selectedEntry.language}`,
+        data: { texts: editingTexts },
+        previousData: {},
+      });
+      notify("Custom text updated successfully", { type: "success" });
+      setEditDialogOpen(false);
+      refresh();
+    } catch (error) {
+      notify("Error updating custom text", { type: "error" });
+    } finally {
+      setLoading(false);
+    }
+  }, [dataProvider, selectedEntry, editingTexts, notify, refresh]);
+
+  const handleDelete = useCallback(
+    async (entry: CustomTextEntry) => {
+      if (
+        !window.confirm(
+          `Delete custom text for ${entry.prompt} (${entry.language})?`,
+        )
+      ) {
+        return;
+      }
+
+      setLoading(true);
+      try {
+        await dataProvider.delete("custom-text", {
+          id: `${entry.prompt}:${entry.language}`,
+        });
+        notify("Custom text deleted successfully", { type: "success" });
+        refresh();
+      } catch (error) {
+        notify("Error deleting custom text", { type: "error" });
+      } finally {
+        setLoading(false);
+      }
+    },
+    [dataProvider, notify, refresh],
+  );
+
+  const handleTextChange = useCallback((key: string, value: string) => {
+    setEditingTexts((prev) => ({ ...prev, [key]: value }));
+  }, []);
+
+  const handleAddTextKey = useCallback(() => {
+    const key = window.prompt("Enter new text key:");
+    if (key && !editingTexts[key]) {
+      setEditingTexts((prev) => ({ ...prev, [key]: "" }));
+    }
+  }, [editingTexts]);
+
+  const handleRemoveTextKey = useCallback((key: string) => {
+    setEditingTexts((prev) => {
+      const next = { ...prev };
+      delete next[key];
+      return next;
+    });
+  }, []);
+
+  const getScreenName = (prompt: string) => {
+    return PROMPT_SCREENS.find((s) => s.id === prompt)?.name || prompt;
+  };
+
+  const getLanguageName = (lang: string) => {
+    return LANGUAGES.find((l) => l.id === lang)?.name || lang;
+  };
+
+  return (
+    <Box>
+      <Box
+        display="flex"
+        justifyContent="space-between"
+        alignItems="center"
+        mb={2}
+      >
+        <Typography variant="h6">Custom Text</Typography>
+        <Button
+          variant="contained"
+          startIcon={<AddIcon />}
+          onClick={handleAdd}
+          disabled={loading}
+        >
+          Add Custom Text
+        </Button>
+      </Box>
+
+      <Typography variant="body2" color="textSecondary" paragraph>
+        Customize button labels, messages, and screen texts in different
+        languages. Custom text applies only to Universal Login screens.
+      </Typography>
+
+      {customTextEntries.length === 0 ? (
+        <Typography color="textSecondary">
+          No custom text configured yet. Click "Add Custom Text" to create your
+          first customization.
+        </Typography>
+      ) : (
+        <TableContainer component={Paper}>
+          <Table>
+            <TableHead>
+              <TableRow>
+                <TableCell>Screen</TableCell>
+                <TableCell>Language</TableCell>
+                <TableCell align="right">Actions</TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {customTextEntries.map((entry) => (
+                <TableRow key={`${entry.prompt}:${entry.language}`}>
+                  <TableCell>{getScreenName(entry.prompt)}</TableCell>
+                  <TableCell>{getLanguageName(entry.language)}</TableCell>
+                  <TableCell align="right">
+                    <IconButton
+                      onClick={() => handleEdit(entry)}
+                      disabled={loading}
+                      size="small"
+                    >
+                      <EditIcon />
+                    </IconButton>
+                    <IconButton
+                      onClick={() => handleDelete(entry)}
+                      disabled={loading}
+                      size="small"
+                      color="error"
+                    >
+                      <DeleteIcon />
+                    </IconButton>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </TableContainer>
+      )}
+
+      {/* Create Dialog */}
+      <Dialog
+        open={dialogOpen}
+        onClose={() => setDialogOpen(false)}
+        maxWidth="sm"
+        fullWidth
+      >
+        <DialogTitle>Add Custom Text</DialogTitle>
+        <DialogContent>
+          <Stack spacing={2} sx={{ mt: 1 }}>
+            <TextField
+              select
+              label="Screen"
+              value={newPrompt}
+              onChange={(e) => setNewPrompt(e.target.value)}
+              fullWidth
+            >
+              {PROMPT_SCREENS.map((screen) => (
+                <MenuItem key={screen.id} value={screen.id}>
+                  {screen.name}
+                </MenuItem>
+              ))}
+            </TextField>
+            <TextField
+              select
+              label="Language"
+              value={newLanguage}
+              onChange={(e) => setNewLanguage(e.target.value)}
+              fullWidth
+            >
+              {LANGUAGES.map((lang) => (
+                <MenuItem key={lang.id} value={lang.id}>
+                  {lang.name}
+                </MenuItem>
+              ))}
+            </TextField>
+          </Stack>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setDialogOpen(false)}>Cancel</Button>
+          <Button onClick={handleCreate} variant="contained" disabled={loading}>
+            Create
+          </Button>
+        </DialogActions>
+      </Dialog>
+
+      {/* Edit Dialog */}
+      <Dialog
+        open={editDialogOpen}
+        onClose={() => setEditDialogOpen(false)}
+        maxWidth="md"
+        fullWidth
+      >
+        <DialogTitle>
+          Edit Custom Text -{" "}
+          {selectedEntry && getScreenName(selectedEntry.prompt)} (
+          {selectedEntry && getLanguageName(selectedEntry.language)})
+        </DialogTitle>
+        <DialogContent>
+          <Box sx={{ mt: 1 }}>
+            <Box display="flex" justifyContent="flex-end" mb={2}>
+              <Button
+                size="small"
+                startIcon={<AddIcon />}
+                onClick={handleAddTextKey}
+              >
+                Add Text Key
+              </Button>
+            </Box>
+            <Stack spacing={2}>
+              {Object.entries(editingTexts).map(([key, value]) => (
+                <Box key={key} display="flex" alignItems="flex-start" gap={1}>
+                  <TextField
+                    label={key}
+                    value={value}
+                    onChange={(e) => handleTextChange(key, e.target.value)}
+                    fullWidth
+                    multiline
+                    minRows={1}
+                    maxRows={4}
+                  />
+                  <IconButton
+                    onClick={() => handleRemoveTextKey(key)}
+                    size="small"
+                    color="error"
+                  >
+                    <DeleteIcon />
+                  </IconButton>
+                </Box>
+              ))}
+              {Object.keys(editingTexts).length === 0 && (
+                <Typography color="textSecondary">
+                  No text keys configured. Click "Add Text Key" to add
+                  customizations.
+                </Typography>
+              )}
+            </Stack>
+          </Box>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setEditDialogOpen(false)}>Cancel</Button>
+          <Button onClick={handleSave} variant="contained" disabled={loading}>
+            Save
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </Box>
+  );
+}
+
+export function PromptsEdit() {
+  const transform = (data: Record<string, unknown>) => {
+    return removeNullValues(data);
+  };
+
+  return (
+    <Edit transform={transform}>
+      <TabbedForm>
+        <TabbedForm.Tab label="Settings">
+          <Typography variant="h6" gutterBottom>
+            Prompt Settings
+          </Typography>
+          <Typography variant="body2" color="textSecondary" paragraph>
+            Configure how the login prompts behave for your users.
+          </Typography>
+
+          <Stack spacing={2} sx={{ maxWidth: 600 }}>
+            <SelectInput
+              source="universal_login_experience"
+              label="Universal Login Experience"
+              choices={[
+                { id: "new", name: "New Universal Login" },
+                { id: "classic", name: "Classic Universal Login" },
+              ]}
+              helperText="Choose between the new or classic Universal Login experience"
+              fullWidth
+            />
+
+            <BooleanInput
+              source="identifier_first"
+              label="Identifier First"
+              helperText="Show identifier (email/username) field first, then password on a separate screen"
+            />
+
+            <BooleanInput
+              source="password_first"
+              label="Password First"
+              helperText="Show password field on the first screen along with the identifier"
+            />
+
+            <BooleanInput
+              source="webauthn_platform_first_factor"
+              label="WebAuthn Platform First Factor"
+              helperText="Enable WebAuthn (passkeys, biometrics) as a first factor authentication option"
+            />
+          </Stack>
+        </TabbedForm.Tab>
+
+        <TabbedForm.Tab label="Custom Text">
+          <CustomTextTab />
+        </TabbedForm.Tab>
+      </TabbedForm>
+    </Edit>
+  );
+}

package/src/components/prompts/index.ts

@@ -0,0 +1,2 @@
+export { PromptsList } from "./list";
+export { PromptsEdit } from "./edit";

package/src/components/prompts/list.tsx

@@ -0,0 +1,14 @@
+import { useEffect } from "react";
+import { useRedirect, useBasename } from "react-admin";
+
+export function PromptsList() {
+  const redirect = useRedirect();
+  const basename = useBasename();
+
+  useEffect(() => {
+    // For singleton resources, redirect to edit with "prompts" as the ID
+    redirect(`${basename}/prompts/prompts`);
+  }, [redirect, basename]);
+
+  return null;
+}

package/src/dataProvider.ts

@@ -30,8 +30,6 @@ export function getDataprovider(auth0Domain?: string) {
   // Create the complete base URL using the selected domain
   let baseUrl = import.meta.env.VITE_SIMPLE_REST_URL;
 
-  console.log("[getDataprovider] auth0Domain:", auth0Domain, "VITE_SIMPLE_REST_URL:", 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();
@@ -40,8 +38,6 @@ export function getDataprovider(auth0Domain?: string) {
       (d) => formatDomain(d.url) === formattedAuth0Domain,
     );
 
-    console.log("[getDataprovider] domains:", domains, "domainConfig:", domainConfig);
-
     if (domainConfig?.restApiUrl) {
       // Use the custom REST API URL if configured (ensure HTTPS)
       baseUrl = buildUrlWithProtocol(domainConfig.restApiUrl);
@@ -54,8 +50,6 @@ export function getDataprovider(auth0Domain?: string) {
     baseUrl = buildUrlWithProtocol(baseUrl);
   }
 
-  console.log("[getDataprovider] final baseUrl:", baseUrl);
-
   // TODO - duplicate auth0DataProvider to tenantsDataProvider
   // we are introducing non-auth0 endpoints AND we don't require the tenants-id header
   const provider = auth0DataProvider(
@@ -80,8 +74,6 @@ export function getDataproviderForTenant(
   // Start with a default API URL
   let apiUrl;
 
-  console.log("[getDataproviderForTenant] tenantId:", tenantId, "auth0Domain:", auth0Domain);
-
   if (auth0Domain) {
     // Check if there's a custom REST API URL configured for this domain
     const domains = getDomainFromStorage();
@@ -90,8 +82,6 @@ export function getDataproviderForTenant(
       (d) => formatDomain(d.url) === formattedAuth0Domain,
     );
 
-    console.log("[getDataproviderForTenant] domains:", domains, "domainConfig:", domainConfig);
-
     if (domainConfig?.restApiUrl) {
       // Use the custom REST API URL if configured (ensure HTTPS)
       apiUrl = buildUrlWithProtocol(domainConfig.restApiUrl);
@@ -107,8 +97,6 @@ export function getDataproviderForTenant(
   // Ensure apiUrl doesn't end with a slash
   apiUrl = apiUrl.replace(/\/$/, "");
 
-  console.log("[getDataproviderForTenant] final apiUrl:", apiUrl);
-
   // Create a dynamic httpClient that checks single-tenant mode at REQUEST TIME
   // This is important because the mode may not be known when the dataProvider is created
   const dynamicHttpClient = (url: string, options?: any) => {