@nocobase/portal-template-default 1.0.4 → 1.0.6

package/registry/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/registry/nocobase-auth-oidc/use-oidc-sign-in.ts

@@ -0,0 +1,58 @@
+import { useCallback, useMemo, useState } from "react";
+import { useSearchParams } from "react-router";
+
+import type { Authenticator } from "@/components/auth/types";
+import { nocobaseClient } from "@/lib/nocobase/client";
+
+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 =
+        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/registry/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/registry/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/registry/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/registry/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,
+  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/registry/nocobase-auth-saml/index.ts

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

package/registry/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/registry/nocobase-auth-saml/use-saml-sign-in.ts

@@ -0,0 +1,51 @@
+import { useCallback, useMemo, useState } from "react";
+import { useSearchParams } from "react-router";
+
+import type { Authenticator } from "@/components/auth/types";
+import { nocobaseClient } from "@/lib/nocobase/client";
+
+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 =
+        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/registry/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/registry/nocobase-auth-sms/demo.tsx

@@ -0,0 +1,25 @@
+import { AuthMethodDemo } from "@/components/auth/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/registry/nocobase-auth-sms/extension.tsx

@@ -0,0 +1,46 @@
+import { lazy } from "react";
+import { Smartphone } from "lucide-react";
+import { Route } from "react-router";
+
+import type { AppExtension } from "@/app/extension";
+import { AuthDemoRoute } from "@/components/auth/demo";
+
+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",
+  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/registry/nocobase-auth-sms/index.ts

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

package/registry/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>
+  );
+}

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

@@ -0,0 +1,88 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+
+import { useAuthenticatorSignIn } from "@/components/auth";
+import type { Authenticator } from "@/components/auth/types";
+import { nocobaseClient } from "@/lib/nocobase/client";
+
+type SmsCodeResponse = {
+  expiresAt?: string;
+};
+
+export function useSmsSignIn(authenticator: Authenticator) {
+  const auth = useAuthenticatorSignIn(authenticator.name);
+  const [isSendingCode, setIsSendingCode] = useState(false);
+  const [sendError, setSendError] = useState<Error>();
+  const [expiresAt, setExpiresAt] = useState<number>();
+  const [now, setNow] = useState(Date.now());
+  const verifier =
+    typeof authenticator.options?.verifier === "string"
+      ? authenticator.options.verifier
+      : "";
+
+  useEffect(() => {
+    if (!expiresAt || expiresAt <= Date.now()) return;
+    const timer = window.setInterval(() => setNow(Date.now()), 1_000);
+    return () => window.clearInterval(timer);
+  }, [expiresAt]);
+
+  const retryAfter = useMemo(
+    () =>
+      expiresAt ? Math.max(0, Math.ceil((expiresAt - now) / 1_000)) : 0,
+    [expiresAt, now]
+  );
+
+  const sendCode = useCallback(
+    async (phone: string) => {
+      if (!phone) throw new Error("Enter a phone number first.");
+      if (!verifier) {
+        throw new Error("The SMS verifier is not configured.");
+      }
+      if (retryAfter > 0) return;
+
+      setSendError(undefined);
+      setIsSendingCode(true);
+      try {
+        const result = await nocobaseClient.action<SmsCodeResponse>(
+          "smsOTP",
+          "publicCreate",
+          {
+            method: "POST",
+            authenticator: null,
+            includeRole: false,
+            withAclMeta: false,
+            body: {
+              action: "auth:signIn",
+              verifier,
+              uuid: phone,
+            },
+          }
+        );
+        const nextExpiry = result?.expiresAt
+          ? Date.parse(result.expiresAt)
+          : Date.now() + 60_000;
+        setNow(Date.now());
+        setExpiresAt(nextExpiry);
+      } catch (cause) {
+        const error =
+          cause instanceof Error
+            ? cause
+            : new Error("Unable to send the verification code.");
+        setSendError(error);
+        throw error;
+      } finally {
+        setIsSendingCode(false);
+      }
+    },
+    [retryAfter, verifier]
+  );
+
+  return {
+    sendCode,
+    signIn: (phone: string, code: string) =>
+      auth.signIn({ uuid: phone, code }),
+    isSendingCode,
+    isSigningIn: auth.isPending,
+    retryAfter,
+    error: sendError ?? auth.error,
+  };
+}

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

@@ -0,0 +1,6 @@
+# NocoBase WeCom authentication
+
+Adds the WeCom sign-in button, callback errors, WeCom-browser automatic login,
+and `useWecomSignIn` for custom UI.
+
+Installing the Registry also adds a WeCom component Demo under Authentication.

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

@@ -0,0 +1,21 @@
+import type { PropsWithChildren } from "react";
+
+import { AuthAutoRedirectProvider } from "@/components/auth";
+
+import { isWecomBrowser } from "./use-wecom-sign-in";
+
+export default function WecomAutoLoginProvider({
+  children,
+}: PropsWithChildren) {
+  const insideWecom = isWecomBrowser();
+  return (
+    <AuthAutoRedirectProvider
+      resource="wecom"
+      action="checkLogin"
+      enabled={insideWecom}
+      query={{ isWeComBrowser: insideWecom }}
+    >
+      {children}
+    </AuthAutoRedirectProvider>
+  );
+}

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

@@ -0,0 +1,23 @@
+import { AuthMethodDemo } from "@/components/auth/demo";
+import WecomSignInButton from "./wecom-sign-in-button";
+
+const authenticator = {
+  name: "company-wecom",
+  authType: "wecom",
+  title: "Sign in via WeCom",
+  options: {
+    btnTooltip: "Use the account associated with your company directory.",
+  },
+};
+
+export function WecomAuthDemoPage() {
+  return (
+    <AuthMethodDemo
+      authType="wecom"
+      methodName="WeCom"
+      description="Provide a WeCom sign-in button and support automatic login when the application is opened inside WeCom."
+    >
+      <WecomSignInButton authenticator={authenticator} onSignIn={() => {}} />
+    </AuthMethodDemo>
+  );
+}

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

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

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

@@ -0,0 +1 @@
+export { isWecomBrowser, useWecomSignIn } from "./use-wecom-sign-in";