@authhero/react-admin 0.30.0 → 0.31.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@authhero/react-admin",
-  "version": "0.30.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/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;
+}