@nocobase/portal-template-default 1.0.13 → 1.0.14

package/src/extensions/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/src/extensions/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/src/extensions/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/src/extensions/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/src/extensions/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/src/extensions/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,
+  dev: {
+    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/src/extensions/nocobase-auth-oidc/index.ts

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

package/src/extensions/nocobase-auth-oidc/oidc-sign-in-button.tsx

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

package/src/extensions/nocobase-auth-oidc/use-oidc-sign-in.ts

@@ -0,0 +1,60 @@
+import { useCallback, useMemo, useState } from "react";
+import { useSearchParams } from "react-router";
+
+import type { Authenticator } from "@/components/auth/types";
+import { nocobaseClient } from "@/lib/nocobase/client";
+import { resolvePortalUrl } from "@/providers/runtime-config";
+
+export function useOidcSignIn(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 = resolvePortalUrl(
+        searchParams.get("to") || searchParams.get("redirect") || "/"
+      );
+      const authUrl = await nocobaseClient.action<string>(
+        "oidc",
+        "getAuthUrl",
+        {
+          method: "POST",
+          authenticator: authenticator.name,
+          includeRole: false,
+          withAclMeta: false,
+          body: { redirect },
+        }
+      );
+
+      if (!authUrl) {
+        throw new Error("NocoBase did not return an OIDC authorization URL.");
+      }
+
+      window.location.replace(nocobaseClient.resolveUrl(authUrl));
+    } catch (cause) {
+      setError(
+        cause instanceof Error
+          ? cause
+          : new Error("Unable to start OIDC sign-in.")
+      );
+      setIsPending(false);
+    }
+  }, [authenticator.name, searchParams]);
+
+  return {
+    signIn,
+    isPending,
+    error: error ?? callbackError,
+  };
+}

package/src/extensions/nocobase-auth-saml/README.md

@@ -0,0 +1,6 @@
+# NocoBase SAML authentication
+
+Adds dynamic SAML sign-in, callback error handling, automatic redirect support,
+and the `useSamlSignIn` hook for custom login UI.
+
+Installing the Registry also adds a SAML component Demo under Authentication.

package/src/extensions/nocobase-auth-saml/auto-redirect-provider.tsx

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

package/src/extensions/nocobase-auth-saml/demo.tsx

@@ -0,0 +1,20 @@
+import { AuthMethodDemo } from "@/components/auth/demo";
+import SamlSignInButton from "./saml-sign-in-button";
+
+const authenticator = {
+  name: "company-saml",
+  authType: "SAML",
+  title: "Company SAML",
+};
+
+export function SamlAuthDemoPage() {
+  return (
+    <AuthMethodDemo
+      authType="SAML"
+      methodName="SAML"
+      description="Start an identity-provider redirect and return through the Starter's shared authentication callback."
+    >
+      <SamlSignInButton authenticator={authenticator} onSignIn={() => {}} />
+    </AuthMethodDemo>
+  );
+}

package/src/extensions/nocobase-auth-saml/extension.tsx

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

package/src/extensions/nocobase-auth-saml/index.ts

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

package/src/extensions/nocobase-auth-saml/saml-sign-in-button.tsx

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

package/src/extensions/nocobase-auth-saml/use-saml-sign-in.ts

@@ -0,0 +1,53 @@
+import { useCallback, useMemo, useState } from "react";
+import { useSearchParams } from "react-router";
+
+import type { Authenticator } from "@/components/auth/types";
+import { nocobaseClient } from "@/lib/nocobase/client";
+import { resolvePortalUrl } from "@/providers/runtime-config";
+
+export function useSamlSignIn(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 = resolvePortalUrl(
+        searchParams.get("to") || searchParams.get("redirect") || "/"
+      );
+      const authUrl = await nocobaseClient.action<string>(
+        "saml",
+        "getAuthUrl",
+        {
+          method: "POST",
+          authenticator: authenticator.name,
+          includeRole: false,
+          withAclMeta: false,
+          body: { redirect },
+        }
+      );
+      if (!authUrl) {
+        throw new Error("NocoBase did not return a SAML authorization URL.");
+      }
+      window.location.replace(nocobaseClient.resolveUrl(authUrl));
+    } catch (cause) {
+      setError(
+        cause instanceof Error
+          ? cause
+          : new Error("Unable to start SAML sign-in.")
+      );
+      setIsPending(false);
+    }
+  }, [authenticator.name, searchParams]);
+
+  return { signIn, isPending, error: error ?? callbackError };
+}

package/src/extensions/nocobase-auth-sms/README.md

@@ -0,0 +1,7 @@
+# NocoBase SMS authentication
+
+Adds phone and verification-code sign-in to the dynamic login page. The
+`useSmsSignIn` hook exposes code delivery, countdown state, and sign-in for
+custom UI.
+
+Installing the Registry also adds an SMS component Demo under Authentication.

package/src/extensions/nocobase-auth-sms/demo.tsx

@@ -0,0 +1,25 @@
+import { AuthMethodDemo } from "@/components/auth/demo/auth-method-demo";
+import SmsSignInForm from "./sms-sign-in-form";
+
+const authenticator = {
+  name: "company-sms",
+  authType: "SMS",
+  title: "SMS verification code",
+  options: { autoSignup: true, verifier: "login-sms" },
+};
+
+export function SmsAuthDemoPage() {
+  return (
+    <AuthMethodDemo
+      authType="SMS"
+      methodName="SMS verification code"
+      description="Collect a phone number and one-time code while keeping delivery and sign-in bound to the configured verifier."
+    >
+      <SmsSignInForm
+        authenticator={authenticator}
+        onSendCode={() => {}}
+        onSignIn={() => {}}
+      />
+    </AuthMethodDemo>
+  );
+}

package/src/extensions/nocobase-auth-sms/extension.tsx

@@ -0,0 +1,48 @@
+import { lazy } from "react";
+import { Smartphone } from "lucide-react";
+import { Route } from "react-router";
+
+import type { AppExtension } from "@/app/extensions";
+import { AuthDemoRoute } from "@/components/auth/demo/auth-demo-route";
+
+const SmsSignInForm = lazy(() => import("./sms-sign-in-form"));
+const SmsAuthDemoPage = lazy(() =>
+  import("./demo").then((module) => ({ default: module.SmsAuthDemoPage }))
+);
+
+const smsAuthExtension: AppExtension = {
+  id: "nocobase-auth-sms",
+  dev: {
+    resources: [
+      {
+        name: "auth-sms-demo",
+        list: "auth/sms",
+        meta: {
+          parent: "auth-components",
+          label: "SMS",
+          icon: <Smartphone />,
+          acl: { type: "authenticated" },
+        },
+      },
+    ],
+    routes: (
+      <Route
+        path="auth/sms"
+        element={
+          <AuthDemoRoute>
+            <SmsAuthDemoPage />
+          </AuthDemoRoute>
+        }
+      />
+    ),
+  },
+  authAdapters: [
+    {
+      authType: "SMS",
+      placement: "form",
+      Component: SmsSignInForm,
+    },
+  ],
+};
+
+export default smsAuthExtension;

package/src/extensions/nocobase-auth-sms/index.ts

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

package/src/extensions/nocobase-auth-sms/sms-sign-in-form.tsx

@@ -0,0 +1,107 @@
+import { useState } from "react";
+
+import type { AuthenticatorComponentProps } from "@/components/auth/types";
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+import { useSmsSignIn } from "./use-sms-sign-in";
+
+export default function SmsSignInForm({
+  authenticator,
+  onSendCode,
+  onSignIn,
+}: AuthenticatorComponentProps & {
+  onSendCode?: (phone: string) => void;
+  onSignIn?: (values: { phone: string; code: string }) => void;
+}) {
+  const [phone, setPhone] = useState("");
+  const [code, setCode] = useState("");
+  const sms = useSmsSignIn(authenticator);
+  const autoSignup = authenticator.options?.autoSignup === true;
+
+  return (
+    <form
+      className="space-y-5"
+      onSubmit={(event) => {
+        event.preventDefault();
+        if (onSignIn) {
+          onSignIn({ phone, code });
+          return;
+        }
+        void sms.signIn(phone, code);
+      }}
+    >
+      {sms.error && (
+        <Alert variant="destructive">
+          <AlertTitle>SMS sign-in failed</AlertTitle>
+          <AlertDescription>{sms.error.message}</AlertDescription>
+        </Alert>
+      )}
+      <div className="space-y-2">
+        <Label htmlFor={`${authenticator.name}-phone`}>Phone</Label>
+        <Input
+          id={`${authenticator.name}-phone`}
+          type="tel"
+          value={phone}
+          onChange={(event) => setPhone(event.target.value)}
+          autoComplete="tel"
+          required
+        />
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor={`${authenticator.name}-code`}>
+          Verification code
+        </Label>
+        <div className="grid grid-cols-[minmax(0,1fr)_auto] gap-2">
+          <Input
+            id={`${authenticator.name}-code`}
+            inputMode="numeric"
+            value={code}
+            onChange={(event) => setCode(event.target.value)}
+            autoComplete="one-time-code"
+            required
+          />
+          <Button
+            type="button"
+            variant="outline"
+            disabled={
+              (!onSendCode && (sms.isSendingCode || sms.retryAfter > 0)) ||
+              !phone
+            }
+            onClick={() => {
+              if (onSendCode) {
+                onSendCode(phone);
+                return;
+              }
+              void sms.sendCode(phone).catch(() => undefined);
+            }}
+          >
+            {!onSendCode && sms.isSendingCode
+              ? "Sending…"
+              : !onSendCode && sms.retryAfter > 0
+                ? `Retry in ${sms.retryAfter}s`
+                : "Send code"}
+          </Button>
+        </div>
+      </div>
+      <Button
+        type="submit"
+        className="w-full"
+        disabled={!onSignIn && sms.isSigningIn}
+      >
+        {!onSignIn && sms.isSigningIn ? "Signing in…" : "Sign in"}
+      </Button>
+      {autoSignup && (
+        <p className="text-xs leading-5 text-muted-foreground">
+          An account will be created automatically if this phone number is new.
+        </p>
+      )}
+    </form>
+  );
+}