@nocobase/portal-template-default 1.0.4 → 1.0.6

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

@@ -0,0 +1,29 @@
+import { useCallback, useMemo } from "react";
+import { useSearchParams } from "react-router";
+
+import type { Authenticator } from "@/components/auth/types";
+import { nocobaseClient } from "@/lib/nocobase/client";
+
+export function useCasSignIn(authenticator: Authenticator) {
+  const [searchParams] = useSearchParams();
+  const callbackError = useMemo(() => {
+    if (searchParams.get("authenticator") !== authenticator.name) {
+      return undefined;
+    }
+    const message = searchParams.get("error");
+    return message ? new Error(message) : undefined;
+  }, [authenticator.name, searchParams]);
+
+  const signIn = useCallback(() => {
+    const redirect =
+      searchParams.get("to") || searchParams.get("redirect") || "/";
+    const url = nocobaseClient.buildUrl("cas:login", {
+      authenticator: authenticator.name,
+      __appName: "main",
+      redirect,
+    });
+    window.location.replace(url.toString());
+  }, [authenticator.name, searchParams]);
+
+  return { signIn, error: callbackError };
+}

package/registry/nocobase-auth-dingtalk/README.md

@@ -0,0 +1,7 @@
+# NocoBase DingTalk authentication
+
+Adds DingTalk OAuth sign-in, callback errors, OAuth or micro-app automatic
+login, and `useDingtalkSignIn` for custom UI. The DingTalk JSAPI is loaded only
+inside a DingTalk browser during internal automatic login.
+
+Installing the Registry also adds a DingTalk component Demo under Authentication.

package/registry/nocobase-auth-dingtalk/auto-login-provider.tsx

@@ -0,0 +1,154 @@
+import { useEffect, useRef, useState } from "react";
+import { useLocation } from "react-router";
+
+import { LoadingState } from "@/components/app-shell/loading-state";
+import { clearAcl } from "@/lib/nocobase/acl";
+import { nocobaseClient } from "@/lib/nocobase/client";
+
+import { isDingtalkBrowser } from "./use-dingtalk-sign-in";
+
+type CheckLoginResponse = {
+  success?: boolean;
+  autoLoginType?: "oauth" | "internal";
+  authUrl?: string;
+  authenticator?: string;
+  corpId?: string;
+};
+
+type SignInResponse = {
+  token?: string;
+};
+
+const publicAuthPaths = new Set([
+  "/login",
+  "/signin",
+  "/register",
+  "/forgot-password",
+]);
+
+async function requestDingtalkAuthCode(corpId: string) {
+  const module = await import("dingtalk-jsapi");
+  const dd = ((module as { default?: unknown }).default ?? module) as any;
+
+  return new Promise<string>((resolve, reject) => {
+    const success = (result: { code?: string; authCode?: string }) => {
+      const code = result?.code ?? result?.authCode;
+      code
+        ? resolve(String(code))
+        : reject(new Error("DingTalk did not return an authorization code."));
+    };
+    const fail = (error: { errorMessage?: string; message?: string }) =>
+      reject(
+        new Error(
+          error?.errorMessage ||
+            error?.message ||
+            "Unable to request a DingTalk authorization code."
+        )
+      );
+    const run = () => {
+      const requestAuthCode = dd?.runtime?.permission?.requestAuthCode;
+      if (typeof requestAuthCode === "function") {
+        const result = requestAuthCode({ corpId, success, fail });
+        if (result?.then) result.then(success).catch(fail);
+        return;
+      }
+      if (typeof dd?.getAuthCode === "function") {
+        dd.getAuthCode({ corpId, success, fail });
+        return;
+      }
+      fail({ message: "DingTalk auth-code API is unavailable." });
+    };
+
+    try {
+      typeof dd?.ready === "function" ? dd.ready(run) : run();
+    } catch (error) {
+      fail(error as Error);
+    }
+  });
+}
+
+export default function DingtalkAutoLoginProvider({
+  children,
+}: React.PropsWithChildren) {
+  const { pathname, search } = useLocation();
+  const attemptedRef = useRef(false);
+  const insideDingtalk = isDingtalkBrowser();
+  const redirect = `${pathname}${search}`;
+  const shouldCheck =
+    insideDingtalk &&
+    !nocobaseClient.getToken() &&
+    !publicAuthPaths.has(pathname);
+  const [isChecking, setIsChecking] = useState(shouldCheck);
+
+  useEffect(() => {
+    if (!shouldCheck || attemptedRef.current) {
+      setIsChecking(false);
+      return;
+    }
+    attemptedRef.current = true;
+    setIsChecking(true);
+    const controller = new AbortController();
+
+    void (async () => {
+      try {
+        const result = await nocobaseClient.action<CheckLoginResponse>(
+          "dingtalk",
+          "checkLogin",
+          {
+            method: "GET",
+            query: { isDingTalkBrowser: true, redirect },
+            signal: controller.signal,
+            authenticator: null,
+            includeRole: false,
+            withAclMeta: false,
+          }
+        );
+
+        if (result?.success !== false) return;
+        if (result.autoLoginType === "oauth" && result.authUrl) {
+          window.location.replace(nocobaseClient.resolveUrl(result.authUrl));
+          return;
+        }
+        if (
+          result.autoLoginType !== "internal" ||
+          !result.authenticator ||
+          !result.corpId
+        ) {
+          return;
+        }
+
+        const authCode = await requestDingtalkAuthCode(result.corpId);
+        const signedIn = await nocobaseClient.action<SignInResponse>(
+          "auth",
+          "signIn",
+          {
+            method: "POST",
+            authenticator: result.authenticator,
+            body: { authCode, loginType: "internal" },
+          }
+        );
+        if (!signedIn.token) {
+          throw new Error("NocoBase did not return an access token.");
+        }
+        nocobaseClient.setAuthenticator(result.authenticator);
+        nocobaseClient.setToken(signedIn.token);
+        nocobaseClient.setRole(null);
+        clearAcl();
+        window.location.replace(redirect);
+      } catch (error) {
+        if (!(error instanceof DOMException && error.name === "AbortError")) {
+          console.warn("Unable to complete DingTalk automatic login", error);
+        }
+      } finally {
+        setIsChecking(false);
+      }
+    })();
+
+    return () => controller.abort();
+  }, [redirect, shouldCheck]);
+
+  if (isChecking) {
+    return <LoadingState className="min-h-svh" />;
+  }
+  return children;
+}

package/registry/nocobase-auth-dingtalk/demo.tsx

@@ -0,0 +1,23 @@
+import { AuthMethodDemo } from "@/components/auth/demo";
+import DingtalkSignInButton from "./dingtalk-sign-in-button";
+
+const authenticator = {
+  name: "company-dingtalk",
+  authType: "dingtalk",
+  title: "Sign in via DingTalk",
+};
+
+export function DingtalkAuthDemoPage() {
+  return (
+    <AuthMethodDemo
+      authType="dingtalk"
+      methodName="DingTalk"
+      description="Provide DingTalk OAuth login and support internal micro-app automatic login through DingTalk JSAPI."
+    >
+      <DingtalkSignInButton
+        authenticator={authenticator}
+        onSignIn={() => {}}
+      />
+    </AuthMethodDemo>
+  );
+}

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

@@ -0,0 +1,45 @@
+import { MessageSquare } 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 { resolveTranslatableText } from "@/lib/i18n";
+
+import { useDingtalkSignIn } from "./use-dingtalk-sign-in";
+
+export default function DingtalkSignInButton({
+  authenticator,
+  onSignIn,
+}: AuthenticatorComponentProps & { onSignIn?: () => void }) {
+  const { signIn, isPending, error } = useDingtalkSignIn(authenticator);
+  return (
+    <div className="space-y-3">
+      {error && (
+        <Alert variant="destructive">
+          <AlertTitle>DingTalk sign-in failed</AlertTitle>
+          <AlertDescription>{error.message}</AlertDescription>
+        </Alert>
+      )}
+      <Button
+        type="button"
+        variant="outline"
+        className="w-full"
+        disabled={!onSignIn && isPending}
+        onClick={onSignIn ?? signIn}
+      >
+        <MessageSquare />
+        {!onSignIn && isPending
+          ? "Redirecting…"
+          : resolveTranslatableText(
+              authenticator.title ||
+                authenticator.authTypeTitle ||
+                "Sign in via DingTalk"
+            )}
+      </Button>
+    </div>
+  );
+}

package/registry/nocobase-auth-dingtalk/extension.tsx

@@ -0,0 +1,55 @@
+import { lazy } from "react";
+import { MessageSquare } from "lucide-react";
+import { Route } from "react-router";
+
+import type { AppExtension } from "@/app/extension";
+import { AuthDemoRoute } from "@/components/auth/demo";
+
+const DingtalkSignInButton = lazy(
+  () => import("./dingtalk-sign-in-button")
+);
+const DingtalkAutoLoginProvider = lazy(
+  () => import("./auto-login-provider")
+);
+const DingtalkAuthDemoPage = lazy(() =>
+  import("./demo").then((module) => ({
+    default: module.DingtalkAuthDemoPage,
+  }))
+);
+
+const dingtalkAuthExtension: AppExtension = {
+  id: "nocobase-auth-dingtalk",
+  AuthRuntimeProvider: DingtalkAutoLoginProvider,
+  authRuntimePriority: 10,
+  resources: [
+    {
+      name: "auth-dingtalk-demo",
+      list: "/auth/dingtalk",
+      meta: {
+        parent: "auth-components",
+        label: "DingTalk",
+        icon: <MessageSquare />,
+        acl: { type: "authenticated" },
+      },
+    },
+  ],
+  routes: (
+    <Route
+      path="/auth/dingtalk"
+      element={
+        <AuthDemoRoute>
+          <DingtalkAuthDemoPage />
+        </AuthDemoRoute>
+      }
+    />
+  ),
+  authAdapters: [
+    {
+      authType: "dingtalk",
+      placement: "button",
+      Component: DingtalkSignInButton,
+    },
+  ],
+};
+
+export default dingtalkAuthExtension;

package/registry/nocobase-auth-dingtalk/index.ts

@@ -0,0 +1,4 @@
+export {
+  isDingtalkBrowser,
+  useDingtalkSignIn,
+} from "./use-dingtalk-sign-in";

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

@@ -0,0 +1,64 @@
+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 DingtalkAuthUrlResponse = {
+  url?: string;
+};
+
+export function isDingtalkBrowser() {
+  return (
+    typeof navigator !== "undefined" &&
+    navigator.userAgent.toLowerCase().includes("dingtalk")
+  );
+}
+
+export function useDingtalkSignIn(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("error");
+    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<DingtalkAuthUrlResponse>(
+        "dingtalk",
+        "getAuthUrl",
+        {
+          method: "POST",
+          authenticator: authenticator.name,
+          includeRole: false,
+          withAclMeta: false,
+          body: { redirect },
+        }
+      );
+      if (!result?.url) {
+        throw new Error(
+          "NocoBase did not return a DingTalk authorization URL."
+        );
+      }
+      window.location.replace(nocobaseClient.resolveUrl(result.url));
+    } catch (cause) {
+      setError(
+        cause instanceof Error
+          ? cause
+          : new Error("Unable to start DingTalk sign-in.")
+      );
+      setIsPending(false);
+    }
+  }, [authenticator.name, searchParams]);
+
+  return { signIn, isPending, error: error ?? callbackError };
+}

package/registry/nocobase-auth-ldap/README.md

@@ -0,0 +1,6 @@
+# NocoBase LDAP authentication
+
+Adds the LDAP account/password form to the Starter's dynamic sign-in page and
+exports `useLdapSignIn` for application-owned login UI.
+
+Installing the Registry also adds an LDAP component Demo under Authentication.

package/registry/nocobase-auth-ldap/demo.tsx

@@ -0,0 +1,21 @@
+import { AuthMethodDemo } from "@/components/auth/demo";
+import LdapSignInForm from "./ldap-sign-in-form";
+
+const authenticator = {
+  name: "company-ldap",
+  authType: "LDAP",
+  title: "Company directory",
+  options: { autoSignup: true },
+};
+
+export function LdapAuthDemoPage() {
+  return (
+    <AuthMethodDemo
+      authType="LDAP"
+      methodName="LDAP directory"
+      description="Use the familiar account and password form while sending credentials through the selected LDAP authenticator."
+    >
+      <LdapSignInForm authenticator={authenticator} onSignIn={() => {}} />
+    </AuthMethodDemo>
+  );
+}

package/registry/nocobase-auth-ldap/extension.tsx

@@ -0,0 +1,46 @@
+import { lazy } from "react";
+import { ContactRound } from "lucide-react";
+import { Route } from "react-router";
+
+import type { AppExtension } from "@/app/extension";
+import { AuthDemoRoute } from "@/components/auth/demo";
+
+const LdapSignInForm = lazy(() => import("./ldap-sign-in-form"));
+const LdapAuthDemoPage = lazy(() =>
+  import("./demo").then((module) => ({ default: module.LdapAuthDemoPage }))
+);
+
+const ldapAuthExtension: AppExtension = {
+  id: "nocobase-auth-ldap",
+  resources: [
+    {
+      name: "auth-ldap-demo",
+      list: "/auth/ldap",
+      meta: {
+        parent: "auth-components",
+        label: "LDAP",
+        icon: <ContactRound />,
+        acl: { type: "authenticated" },
+      },
+    },
+  ],
+  routes: (
+    <Route
+      path="/auth/ldap"
+      element={
+        <AuthDemoRoute>
+          <LdapAuthDemoPage />
+        </AuthDemoRoute>
+      }
+    />
+  ),
+  authAdapters: [
+    {
+      authType: "LDAP",
+      placement: "form",
+      Component: LdapSignInForm,
+    },
+  ],
+};
+
+export default ldapAuthExtension;

package/registry/nocobase-auth-ldap/index.ts

@@ -0,0 +1 @@
+export { useLdapSignIn } from "./use-ldap-sign-in";

package/registry/nocobase-auth-ldap/ldap-sign-in-form.tsx

@@ -0,0 +1,69 @@
+import { useState } from "react";
+
+import { InputPassword } from "@/components/auth/input-password";
+import type { AuthenticatorComponentProps } from "@/components/auth/types";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+import { useLdapSignIn } from "./use-ldap-sign-in";
+
+export default function LdapSignInForm({
+  authenticator,
+  onSignIn,
+}: AuthenticatorComponentProps & {
+  onSignIn?: (values: { account: string; password: string }) => void;
+}) {
+  const [account, setAccount] = useState("");
+  const [password, setPassword] = useState("");
+  const { signIn, isPending } = useLdapSignIn(authenticator.name);
+  const autoSignup = authenticator.options?.autoSignup === true;
+
+  return (
+    <form
+      className="space-y-5"
+      onSubmit={(event) => {
+        event.preventDefault();
+        if (onSignIn) {
+          onSignIn({ account, password });
+          return;
+        }
+        void signIn({ account, password });
+      }}
+    >
+      <div className="space-y-2">
+        <Label htmlFor={`${authenticator.name}-ldap-account`}>Account</Label>
+        <Input
+          id={`${authenticator.name}-ldap-account`}
+          value={account}
+          onChange={(event) => setAccount(event.target.value)}
+          autoComplete="username"
+          required
+        />
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor={`${authenticator.name}-ldap-password`}>Password</Label>
+        <InputPassword
+          id={`${authenticator.name}-ldap-password`}
+          value={password}
+          onChange={(event) => setPassword(event.target.value)}
+          autoComplete="current-password"
+          required
+        />
+      </div>
+      <Button
+        type="submit"
+        className="w-full"
+        disabled={!onSignIn && isPending}
+      >
+        {!onSignIn && isPending ? "Signing in…" : "Sign in"}
+      </Button>
+      {autoSignup && (
+        <p className="text-xs leading-5 text-muted-foreground">
+          An account will be created automatically after the first successful
+          LDAP sign-in.
+        </p>
+      )}
+    </form>
+  );
+}

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

@@ -0,0 +1,5 @@
+import { useAuthenticatorSignIn } from "@/components/auth";
+
+export function useLdapSignIn(authenticator: string) {
+  return useAuthenticatorSignIn(authenticator);
+}

package/registry/nocobase-auth-oidc/README.md

@@ -0,0 +1,11 @@
+# NocoBase OIDC authentication
+
+This Registry adds the default OIDC sign-in button to the Starter's dynamic
+authentication page. It also exports `useOidcSignIn` so applications can keep
+the NocoBase OIDC protocol while replacing the button UI.
+
+Installing the Registry also adds an OIDC component Demo under Authentication.
+
+The authenticator instance must be enabled in the connected NocoBase app. SSO
+callbacks currently require the Portal and NocoBase public endpoints to share
+an origin or use a compatible reverse proxy.

package/registry/nocobase-auth-oidc/auto-redirect-provider.tsx

@@ -0,0 +1,13 @@
+import type { PropsWithChildren } from "react";
+
+import { AuthAutoRedirectProvider } from "@/components/auth";
+
+export default function OidcAutoRedirectProvider({
+  children,
+}: PropsWithChildren) {
+  return (
+    <AuthAutoRedirectProvider resource="oidc" action="checkRedirect">
+      {children}
+    </AuthAutoRedirectProvider>
+  );
+}

package/registry/nocobase-auth-oidc/demo.tsx

@@ -0,0 +1,20 @@
+import { AuthMethodDemo } from "@/components/auth/demo";
+import OidcSignInButton from "./oidc-sign-in-button";
+
+const authenticator = {
+  name: "company-oidc",
+  authType: "OIDC",
+  title: "Company OIDC",
+};
+
+export function OidcAuthDemoPage() {
+  return (
+    <AuthMethodDemo
+      authType="OIDC"
+      methodName="OpenID Connect"
+      description="Redirect users to an OpenID Connect provider while the Starter handles callback tokens and the active authenticator."
+    >
+      <OidcSignInButton authenticator={authenticator} onSignIn={() => {}} />
+    </AuthMethodDemo>
+  );
+}

package/registry/nocobase-auth-oidc/extension.tsx

@@ -0,0 +1,51 @@
+import { lazy } from "react";
+import { LogIn } from "lucide-react";
+import { Route } from "react-router";
+
+import type { AppExtension } from "@/app/extension";
+import { AuthDemoRoute } from "@/components/auth/demo";
+
+const OidcSignInButton = lazy(() => import("./oidc-sign-in-button"));
+const OidcAutoRedirectProvider = lazy(
+  () => import("./auto-redirect-provider")
+);
+const OidcAuthDemoPage = lazy(() =>
+  import("./demo").then((module) => ({ default: module.OidcAuthDemoPage }))
+);
+
+const oidcAuthExtension: AppExtension = {
+  id: "nocobase-auth-oidc",
+  AuthRuntimeProvider: OidcAutoRedirectProvider,
+  authRuntimePriority: 20,
+  resources: [
+    {
+      name: "auth-oidc-demo",
+      list: "/auth/oidc",
+      meta: {
+        parent: "auth-components",
+        label: "OIDC",
+        icon: <LogIn />,
+        acl: { type: "authenticated" },
+      },
+    },
+  ],
+  routes: (
+    <Route
+      path="/auth/oidc"
+      element={
+        <AuthDemoRoute>
+          <OidcAuthDemoPage />
+        </AuthDemoRoute>
+      }
+    />
+  ),
+  authAdapters: [
+    {
+      authType: "OIDC",
+      placement: "button",
+      Component: OidcSignInButton,
+    },
+  ],
+};
+
+export default oidcAuthExtension;

package/registry/nocobase-auth-oidc/index.ts

@@ -0,0 +1 @@
+export { useOidcSignIn } from "./use-oidc-sign-in";