@nocobase/portal-template-default 1.0.4 → 1.0.6

package/registry/nocobase-auth-wecom/use-wecom-sign-in.ts

@@ -0,0 +1,62 @@
+import { useCallback, useMemo, useState } from "react";
+import { useSearchParams } from "react-router";
+
+import type { Authenticator } from "@/components/auth/types";
+import { nocobaseClient } from "@/lib/nocobase/client";
+
+type WecomAuthUrlResponse = {
+  url?: string;
+};
+
+export function isWecomBrowser() {
+  return (
+    typeof navigator !== "undefined" &&
+    navigator.userAgent.toLowerCase().includes("wxwork")
+  );
+}
+
+export function useWecomSignIn(authenticator: Authenticator) {
+  const [searchParams] = useSearchParams();
+  const [isPending, setIsPending] = useState(false);
+  const [error, setError] = useState<Error>();
+  const callbackError = useMemo(() => {
+    if (searchParams.get("authenticator") !== authenticator.name) {
+      return undefined;
+    }
+    const message = searchParams.get("errorMsg");
+    return message ? new Error(message) : undefined;
+  }, [authenticator.name, searchParams]);
+
+  const signIn = useCallback(async () => {
+    setError(undefined);
+    setIsPending(true);
+    try {
+      const redirect =
+        searchParams.get("to") || searchParams.get("redirect") || "/";
+      const result = await nocobaseClient.action<WecomAuthUrlResponse>(
+        "wecom",
+        "getAuthUrl",
+        {
+          method: "POST",
+          authenticator: authenticator.name,
+          includeRole: false,
+          withAclMeta: false,
+          body: { redirect, isWeComBrowser: isWecomBrowser() },
+        }
+      );
+      if (!result?.url) {
+        throw new Error("NocoBase did not return a WeCom authorization URL.");
+      }
+      window.location.replace(nocobaseClient.resolveUrl(result.url));
+    } catch (cause) {
+      setError(
+        cause instanceof Error
+          ? cause
+          : new Error("Unable to start WeCom sign-in.")
+      );
+      setIsPending(false);
+    }
+  }, [authenticator.name, searchParams]);
+
+  return { signIn, isPending, error: error ?? callbackError };
+}

package/registry/nocobase-auth-wecom/wecom-sign-in-button.tsx

@@ -0,0 +1,70 @@
+import { Building2 } from "lucide-react";
+
+import type { AuthenticatorComponentProps } from "@/components/auth/types";
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { resolveTranslatableText } from "@/lib/i18n";
+
+import { useWecomSignIn } from "./use-wecom-sign-in";
+
+function plainText(value: unknown) {
+  return typeof value === "string"
+    ? value.replace(/<[^>]+>/g, " ").replace(/\s+/g, " ").trim()
+    : "";
+}
+
+export default function WecomSignInButton({
+  authenticator,
+  onSignIn,
+}: AuthenticatorComponentProps & { onSignIn?: () => void }) {
+  const { signIn, isPending, error } = useWecomSignIn(authenticator);
+  const tooltip = plainText(authenticator.options?.btnTooltip);
+  const button = (
+    <Button
+      type="button"
+      variant="outline"
+      className="w-full"
+      disabled={!onSignIn && isPending}
+      onClick={onSignIn ?? signIn}
+    >
+      <Building2 />
+      {!onSignIn && isPending
+        ? "Redirecting…"
+        : resolveTranslatableText(
+            authenticator.title ||
+              authenticator.authTypeTitle ||
+              "Sign in via WeCom"
+          )}
+    </Button>
+  );
+
+  return (
+    <div className="space-y-3">
+      {error && (
+        <Alert variant="destructive">
+          <AlertTitle>WeCom sign-in failed</AlertTitle>
+          <AlertDescription>{error.message}</AlertDescription>
+        </Alert>
+      )}
+      {tooltip ? (
+        <Tooltip>
+          <TooltipTrigger render={button} />
+          <TooltipContent side="right" className="max-w-xs">
+            {tooltip}
+          </TooltipContent>
+        </Tooltip>
+      ) : (
+        button
+      )}
+    </div>
+  );
+}

package/registry/nocobase-i18n/demo/prompt-generator.tsx

@@ -1,8 +1,8 @@
 import { useTranslate } from "@refinedev/core";
-import { Check, ChevronDown, Copy, Sparkles } from "lucide-react";
+import { ChevronDown, Sparkles } from "lucide-react";
 import { useMemo, useState } from "react";
 
-import { Button } from "@/components/ui/button";
+import { PromptOutput } from "@/components/demo/prompt-output";
 import {
   Card,
   CardContent,
@@ -18,8 +18,6 @@ export function I18nPromptGenerator() {
   const t = useTranslate();
   const [scene, setScene] = useState("A customer support workspace");
   const [languages, setLanguages] = useState("English and Simplified Chinese");
-  const [copied, setCopied] = useState(false);
-  const [copyError, setCopyError] = useState(false);
 
   const prompt = useMemo(
     () => `Build a complete multilingual scene in the NocoBase Admin Starter.
@@ -100,56 +98,34 @@ Implementation contract
             </div>
           </CardContent>
         </Card>
-        <Card className="min-w-0 gap-0 overflow-hidden py-0">
-          <div className="flex items-center justify-between gap-3 border-b px-4 py-3">
-            <div>
-              <div className="text-sm font-medium">
-                {t(
-                  "demo.prompt.output",
-                  { ns: "nocobase-i18n" },
-                  "Generated prompt"
-                )}
-              </div>
-              <div className="text-xs text-muted-foreground">
-                {t(
-                  "demo.prompt.outputDescription",
-                  { ns: "nocobase-i18n" },
-                  "Updates as you change the scene and language requirements."
-                )}
-              </div>
-            </div>
-            <Button
-              size="sm"
-              onClick={async () => {
-                try {
-                  await navigator.clipboard.writeText(prompt);
-                  setCopyError(false);
-                  setCopied(true);
-                  window.setTimeout(() => setCopied(false), 1500);
-                } catch {
-                  setCopyError(true);
-                }
-              }}
-            >
-              {copied ? <Check /> : <Copy />}
-              {copied
-                ? t("demo.prompt.copied", { ns: "nocobase-i18n" }, "Copied")
-                : t("demo.prompt.copy", { ns: "nocobase-i18n" }, "Copy prompt")}
-            </Button>
-          </div>
-          {copyError ? (
-            <p className="border-b px-4 py-2 text-xs text-destructive">
-              {t(
-                "demo.prompt.copyError",
-                { ns: "nocobase-i18n" },
-                "Clipboard access failed. Select the prompt and copy it manually."
-              )}
-            </p>
-          ) : null}
-          <pre className="max-h-[520px] overflow-auto whitespace-pre-wrap bg-muted/25 p-5 font-mono text-xs leading-5 text-muted-foreground">
-            {prompt}
-          </pre>
-        </Card>
+        <PromptOutput
+          title={t(
+            "demo.prompt.output",
+            { ns: "nocobase-i18n" },
+            "Generated prompt"
+          )}
+          description={t(
+            "demo.prompt.outputDescription",
+            { ns: "nocobase-i18n" },
+            "Updates as you change the scene and language requirements."
+          )}
+          prompt={prompt}
+          copyLabel={t(
+            "demo.prompt.copy",
+            { ns: "nocobase-i18n" },
+            "Copy prompt"
+          )}
+          copiedLabel={t(
+            "demo.prompt.copied",
+            { ns: "nocobase-i18n" },
+            "Copied"
+          )}
+          copyErrorLabel={t(
+            "demo.prompt.copyError",
+            { ns: "nocobase-i18n" },
+            "Clipboard access failed. Select the prompt and copy it manually."
+          )}
+        />
       </div>
     </details>
   );

package/registry/nocobase-route-surfaces/demo/prompt-generator.tsx

@@ -1,8 +1,13 @@
-import { Check, Copy } from "lucide-react";
 import { useMemo, useState } from "react";
 
-import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { PromptOutput } from "@/components/demo/prompt-output";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import {
@@ -12,7 +17,6 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { Textarea } from "@/components/ui/textarea";
 import {
   getRouteSurfacePrompt,
   routeSurfaceScenarios,
@@ -23,7 +27,6 @@ export function RouteSurfacePromptGenerator() {
   const [scenarioId, setScenarioId] =
     useState<RouteSurfaceScenarioId>("drawer");
   const [target, setTarget] = useState("a customer detail workflow");
-  const [copied, setCopied] = useState(false);
   const scenario =
     routeSurfaceScenarios.find((item) => item.id === scenarioId) ??
     routeSurfaceScenarios[0];
@@ -32,22 +35,17 @@ export function RouteSurfacePromptGenerator() {
     [scenario, target]
   );
 
-  const copyPrompt = async () => {
-    await navigator.clipboard.writeText(prompt);
-    setCopied(true);
-    window.setTimeout(() => setCopied(false), 1500);
-  };
-
   return (
     <Card>
       <CardHeader>
         <CardTitle>Prompt generator</CardTitle>
         <CardDescription>
-          Generate a complete routing scenario, not just an isolated overlay component.
+          Generate a complete routing scenario, not just an isolated overlay
+          component.
         </CardDescription>
       </CardHeader>
-      <CardContent className="space-y-4">
-        <div className="grid gap-4 md:grid-cols-2">
+      <CardContent className="grid items-start gap-5 xl:grid-cols-[360px_minmax(0,1fr)]">
+        <div className="space-y-4">
           <div className="space-y-2">
             <Label htmlFor="route-surface-scenario">Scenario</Label>
             <Select
@@ -77,13 +75,12 @@ export function RouteSurfacePromptGenerator() {
             />
           </div>
         </div>
-        <Textarea value={prompt} readOnly className="min-h-80 font-mono text-xs" />
-        <div className="flex justify-end">
-          <Button type="button" onClick={() => void copyPrompt()}>
-            {copied ? <Check /> : <Copy />}
-            {copied ? "Copied" : "Copy prompt"}
-          </Button>
-        </div>
+        <PromptOutput
+          title="Generated routing prompt"
+          description="Updates as you change the scenario and business target."
+          prompt={prompt}
+          promptClassName="min-h-80"
+        />
       </CardContent>
     </Card>
   );

package/registry.config.json

@@ -58,6 +58,118 @@
         "include": ["."]
       }
     },
+    {
+      "name": "auth-oidc",
+      "type": "registry:block",
+      "title": "NocoBase OIDC Authentication",
+      "description": "Dynamic OIDC sign-in adapter, headless sign-in hook, and integrated component demo.",
+      "dependencies": [
+        "lucide-react@^0.487.0",
+        "react-router@^7.0.2"
+      ],
+      "docs": "Requires the Starter authentication runtime and an enabled OIDC authenticator in NocoBase. The default UI is discovered automatically and can be replaced per authentication type or authenticator instance from the application login page.",
+      "source": {
+        "root": "registry/nocobase-auth-oidc",
+        "target": "src/extensions/nocobase-auth-oidc",
+        "install": false,
+        "include": ["."]
+      }
+    },
+    {
+      "name": "auth-saml",
+      "type": "registry:block",
+      "title": "NocoBase SAML Authentication",
+      "description": "Dynamic SAML sign-in adapter, automatic redirect provider, headless hook, and integrated demo.",
+      "dependencies": [
+        "lucide-react@^0.487.0",
+        "react-router@^7.0.2"
+      ],
+      "docs": "Requires the Starter authentication runtime and an enabled SAML authenticator in NocoBase.",
+      "source": {
+        "root": "registry/nocobase-auth-saml",
+        "target": "src/extensions/nocobase-auth-saml",
+        "install": false,
+        "include": ["."]
+      }
+    },
+    {
+      "name": "auth-cas",
+      "type": "registry:block",
+      "title": "NocoBase CAS Authentication",
+      "description": "Dynamic CAS sign-in adapter, headless sign-in hook, and integrated component demo.",
+      "dependencies": [
+        "lucide-react@^0.487.0",
+        "react-router@^7.0.2"
+      ],
+      "docs": "Requires the Starter authentication runtime and an enabled CAS authenticator in NocoBase.",
+      "source": {
+        "root": "registry/nocobase-auth-cas",
+        "target": "src/extensions/nocobase-auth-cas",
+        "install": false,
+        "include": ["."]
+      }
+    },
+    {
+      "name": "auth-ldap",
+      "type": "registry:block",
+      "title": "NocoBase LDAP Authentication",
+      "description": "Dynamic LDAP account/password form, headless sign-in hook, and integrated component demo.",
+      "docs": "Requires the Starter authentication runtime and an enabled LDAP authenticator in NocoBase.",
+      "source": {
+        "root": "registry/nocobase-auth-ldap",
+        "target": "src/extensions/nocobase-auth-ldap",
+        "install": false,
+        "include": ["."]
+      }
+    },
+    {
+      "name": "auth-sms",
+      "type": "registry:block",
+      "title": "NocoBase SMS Authentication",
+      "description": "Dynamic SMS verification-code form, delivery countdown, headless hook, and integrated demo.",
+      "docs": "Requires the Starter authentication runtime, an enabled SMS authenticator, and a configured public SMS verifier in NocoBase.",
+      "source": {
+        "root": "registry/nocobase-auth-sms",
+        "target": "src/extensions/nocobase-auth-sms",
+        "install": false,
+        "include": ["."]
+      }
+    },
+    {
+      "name": "auth-wecom",
+      "type": "registry:block",
+      "title": "NocoBase WeCom Authentication",
+      "description": "Dynamic WeCom sign-in adapter, browser automatic login, headless hook, and integrated demo.",
+      "dependencies": [
+        "lucide-react@^0.487.0",
+        "react-router@^7.0.2"
+      ],
+      "docs": "Requires the Starter authentication runtime and an enabled WeCom authenticator in NocoBase.",
+      "source": {
+        "root": "registry/nocobase-auth-wecom",
+        "target": "src/extensions/nocobase-auth-wecom",
+        "install": false,
+        "include": ["."]
+      }
+    },
+    {
+      "name": "auth-dingtalk",
+      "type": "registry:block",
+      "title": "NocoBase DingTalk Authentication",
+      "description": "Dynamic DingTalk sign-in adapter, automatic login, headless hook, and integrated demo.",
+      "dependencies": [
+        "dingtalk-jsapi@3.1.1",
+        "lucide-react@^0.487.0",
+        "react-router@^7.0.2"
+      ],
+      "docs": "Requires the Starter authentication runtime and an enabled DingTalk authenticator in NocoBase. DingTalk JSAPI is loaded lazily for internal micro-app login.",
+      "source": {
+        "root": "registry/nocobase-auth-dingtalk",
+        "target": "src/extensions/nocobase-auth-dingtalk",
+        "install": false,
+        "include": ["."]
+      }
+    },
     {
       "name": "ai-runtime",
       "type": "registry:lib",

package/scripts/build-html.mjs

@@ -0,0 +1,106 @@
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const rootDir = path.resolve(__dirname, "..");
+const distDir = path.join(rootDir, "dist");
+const rawIndexPath = path.join(distDir, "index.raw.html");
+const indexPath = path.join(distDir, "index.html");
+
+const startMarker = "<!-- nocobase-runtime-config:start -->";
+const endMarker = "<!-- nocobase-runtime-config:end -->";
+
+const normalizePortalBase = (base) => {
+  const normalized = String(base || "/").trim();
+  if (!normalized || normalized === "/") return "/";
+  return `/${normalized.replace(/^\/+|\/+$/g, "")}/`;
+};
+
+const getBasePrefix = (base) => base.replace(/\/$/, "");
+
+const getRawPortalBase = (html) => {
+  const moduleScriptPattern =
+    /<script\s+[^>]*type=["']module["'][^>]*\bsrc=(["'])([^"']+)\1[^>]*>/i;
+  const match = html.match(moduleScriptPattern);
+  const src = match?.[2];
+
+  if (!src?.startsWith("/")) return "/";
+
+  const assetsIndex = src.indexOf("/assets/");
+  if (assetsIndex === -1) return "/";
+
+  return normalizePortalBase(src.slice(0, assetsIndex) || "/");
+};
+
+const rewriteHtmlFilePaths = (html, portalBase, rawPortalBase) => {
+  const portalPrefix = getBasePrefix(portalBase);
+  const rawPrefix = getBasePrefix(rawPortalBase);
+  const attributePattern = /\b(src|href|content)=(["'])\/(?!\/)([^"']*)\2/g;
+
+  if (!portalPrefix && !rawPrefix) return html;
+
+  return html.replace(attributePattern, (match, attribute, quote, path) => {
+    let value = `/${path}`;
+
+    if (rawPrefix && value.startsWith(`${rawPrefix}/`)) {
+      value = value.slice(rawPrefix.length) || "/";
+    }
+
+    if (!portalPrefix || value.startsWith(`${portalPrefix}/`)) {
+      return `${attribute}=${quote}${value}${quote}`;
+    }
+
+    return `${attribute}=${quote}${portalPrefix}${value}${quote}`;
+  });
+};
+
+const stripExistingRuntimeConfig = (html) => {
+  const pattern = new RegExp(
+    `${startMarker}[\\s\\S]*?${endMarker}\\s*`,
+    "g"
+  );
+  return html.replace(pattern, "");
+};
+
+const portalBase = normalizePortalBase(process.env.NOCOBASE_PORTAL_BASE);
+const apiUrl = String(process.env.NOCOBASE_API_URL || "/api").trim() || "/api";
+
+if (!fs.existsSync(rawIndexPath)) {
+  throw new Error(
+    `Missing ${path.relative(rootDir, rawIndexPath)}. Run pnpm build first.`
+  );
+}
+
+const runtimeConfig = `${startMarker}
+<script>
+  window.NOCOBASE_PORTAL_BASE = ${JSON.stringify(portalBase)};
+  window.NOCOBASE_API_URL = ${JSON.stringify(apiUrl)};
+</script>
+${endMarker}
+`;
+
+const rawHtml = fs.readFileSync(rawIndexPath, "utf8");
+const html = rewriteHtmlFilePaths(
+  stripExistingRuntimeConfig(rawHtml),
+  portalBase,
+  getRawPortalBase(rawHtml)
+);
+
+const moduleScriptPattern = /<script\s+[^>]*type=["']module["'][^>]*>/i;
+const moduleScriptMatch = html.match(moduleScriptPattern);
+
+if (moduleScriptMatch?.index === undefined) {
+  throw new Error("Could not find the module script in dist/index.raw.html.");
+}
+
+const outputHtml = `${html.slice(0, moduleScriptMatch.index)}${runtimeConfig}${html.slice(moduleScriptMatch.index)}`;
+
+fs.writeFileSync(indexPath, outputHtml);
+
+console.log(
+  `Generated ${path.relative(rootDir, indexPath)} from ${path.relative(
+    rootDir,
+    rawIndexPath
+  )}`
+);

package/src/App.tsx

@@ -27,6 +27,7 @@ import { TooltipProvider } from "./components/ui/tooltip";
 import { BrandLogo } from "./components/app-shell/brand";
 import {
   AppExtensionProviders,
+  AppAuthRuntimeProviders,
   extensionResources,
   extensionRouteElements,
 } from "./app/extensions";
@@ -36,9 +37,11 @@ import { accessControlProvider } from "./providers/access-control";
 import { AclBootstrap } from "./components/access-control/acl-bootstrap";
 import { ResourceAccessGuard } from "./components/access-control/resource-access-guard";
 import { NavigateToAccessibleResource } from "./components/access-control/navigate-to-accessible-resource";
-import { UsersRound } from "lucide-react";
+import { KeyRound, PanelsTopLeft, UsersRound } from "lucide-react";
 import { i18nProvider } from "./providers/i18n";
 import { SystemSettingsProvider } from "./providers/system-settings";
+import { AuthDemoPage } from "./components/auth/demo";
+import { getPortalBase } from "./providers/runtime-config";
 
 const coreResources: ResourceProps[] = [
   {
@@ -64,16 +67,36 @@ const coreResources: ResourceProps[] = [
       },
     },
   },
+  {
+    name: "auth-components",
+    meta: {
+      label: "Authentication",
+      icon: <KeyRound />,
+      description: "NocoBase authentication UI and integration patterns.",
+      acl: { type: "authenticated" },
+    },
+  },
+  {
+    name: "auth-patterns",
+    list: "/auth",
+    meta: {
+      parent: "auth-components",
+      label: "Login composition",
+      icon: <PanelsTopLeft />,
+      acl: { type: "authenticated" },
+    },
+  },
 ];
 
-const basename = import.meta.env.BASE_URL.replace(/\/+$/, "");
+const basename = getPortalBase().replace(/\/+$/, "");
 
 function App() {
   return (
     <BrowserRouter basename={basename || undefined}>
-      <ThemeProvider>
-        <TooltipProvider>
-          <SystemSettingsProvider>
+      <AppAuthRuntimeProviders>
+        <ThemeProvider>
+          <TooltipProvider>
+            <SystemSettingsProvider>
             <Refine
               dataProvider={dataProvider}
               notificationProvider={useNotificationProvider()}
@@ -110,6 +133,7 @@ function App() {
                 }
               >
                 <Route index element={<NavigateToAccessibleResource />} />
+                <Route path="/auth" element={<AuthDemoPage />} />
                 <Route
                   path="/users"
                   element={<UserResourceLayout />}
@@ -180,6 +204,7 @@ function App() {
                 }
               >
                 <Route path="/login" element={<Login />} />
+                <Route path="/signin" element={<Login />} />
                 <Route path="/register" element={<Register />} />
                 <Route path="/forgot-password" element={<ForgotPassword />} />
               </Route>
@@ -189,9 +214,10 @@ function App() {
             <UnsavedChangesNotifier />
             <DocumentTitleHandler appName="NocoBase" />
             </Refine>
-          </SystemSettingsProvider>
-        </TooltipProvider>
-      </ThemeProvider>
+            </SystemSettingsProvider>
+          </TooltipProvider>
+        </ThemeProvider>
+      </AppAuthRuntimeProviders>
     </BrowserRouter>
   );
 }

package/src/app/extension.ts

@@ -1,10 +1,14 @@
 import type { ResourceProps } from "@refinedev/core";
 import type { ComponentType, PropsWithChildren, ReactElement } from "react";
+import type { AuthenticatorAdapter } from "@/components/auth/types";
 
 export type AppExtension = {
   id: string;
   resources?: ResourceProps[];
   routes?: ReactElement;
   Provider?: ComponentType<PropsWithChildren>;
+  AuthRuntimeProvider?: ComponentType<PropsWithChildren>;
+  authRuntimePriority?: number;
   UserMenuItems?: ComponentType;
+  authAdapters?: AuthenticatorAdapter[];
 };