@nocobase/portal-template-default 1.0.4 → 1.0.6

package/src/app/extensions.tsx

@@ -1,5 +1,6 @@
-import type { PropsWithChildren, ReactNode } from "react";
+import { Suspense, type PropsWithChildren, type ReactNode } from "react";
 import type { AppExtension } from "./extension";
+import { LoadingState } from "@/components/app-shell/loading-state";
 
 const extensionModules = import.meta.glob<{ default: AppExtension }>(
   "../extensions/*/extension.tsx",
@@ -25,6 +26,10 @@ export const extensionUserMenuItems = appExtensions
     Component: extension.UserMenuItems!,
   }));
 
+export const extensionAuthAdapters = appExtensions.flatMap(
+  (extension) => extension.authAdapters ?? []
+);
+
 export function AppExtensionProviders({ children }: PropsWithChildren) {
   return appExtensions.reduceRight<ReactNode>((content, extension) => {
     const Provider = extension.Provider;
@@ -32,4 +37,22 @@ export function AppExtensionProviders({ children }: PropsWithChildren) {
   }, children);
 }
 
+export function AppAuthRuntimeProviders({ children }: PropsWithChildren) {
+  return [...appExtensions]
+    .filter((extension) => extension.AuthRuntimeProvider)
+    .sort(
+      (left, right) =>
+        (left.authRuntimePriority ?? 100) -
+          (right.authRuntimePriority ?? 100) || left.id.localeCompare(right.id)
+    )
+    .reduceRight<ReactNode>((content, extension) => {
+      const Provider = extension.AuthRuntimeProvider!;
+      return (
+        <Suspense fallback={<LoadingState className="min-h-svh" />}>
+          <Provider>{content}</Provider>
+        </Suspense>
+      );
+    }, children);
+}
+
 export type { AppExtension } from "./extension";

package/src/components/auth/authenticator-adapters.ts

@@ -0,0 +1,20 @@
+import { extensionAuthAdapters } from "@/app/extensions";
+import { BasicSignInForm } from "@/components/auth/basic-sign-in-form";
+import type { AuthenticatorAdapter } from "@/components/auth/types";
+
+const coreAuthAdapters: AuthenticatorAdapter[] = [
+  {
+    authType: "Email/Password",
+    placement: "form",
+    Component: BasicSignInForm,
+  },
+];
+
+export const authenticatorAdapters = [
+  ...coreAuthAdapters,
+  ...extensionAuthAdapters,
+];
+
+export const authenticatorAdapterMap = new Map(
+  authenticatorAdapters.map((adapter) => [adapter.authType, adapter])
+);

package/src/components/auth/auto-redirect-provider.tsx

@@ -0,0 +1,84 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useLocation } from "react-router";
+
+import { LoadingState } from "@/components/app-shell/loading-state";
+import { nocobaseClient } from "@/lib/nocobase/client";
+
+type AutoRedirectResponse = {
+  success?: boolean;
+  authUrl?: string;
+};
+
+type AuthAutoRedirectProviderProps = React.PropsWithChildren<{
+  resource: string;
+  action: string;
+  enabled?: boolean;
+  query?: Record<string, string | number | boolean | null | undefined>;
+}>;
+
+const publicAuthPaths = new Set([
+  "/login",
+  "/signin",
+  "/register",
+  "/forgot-password",
+]);
+
+export function AuthAutoRedirectProvider({
+  resource,
+  action,
+  enabled = true,
+  query,
+  children,
+}: AuthAutoRedirectProviderProps) {
+  const { pathname, search } = useLocation();
+  const attemptedRef = useRef(false);
+  const redirect = `${pathname}${search}`;
+  const shouldCheck =
+    enabled &&
+    !nocobaseClient.getToken() &&
+    !publicAuthPaths.has(pathname);
+  const [isChecking, setIsChecking] = useState(shouldCheck);
+  const stableQuery = useMemo(() => query, [JSON.stringify(query)]);
+
+  useEffect(() => {
+    if (!shouldCheck || attemptedRef.current) {
+      setIsChecking(false);
+      return;
+    }
+
+    attemptedRef.current = true;
+    setIsChecking(true);
+    const controller = new AbortController();
+
+    void nocobaseClient
+      .action<AutoRedirectResponse>(resource, action, {
+        method: "GET",
+        query: { redirect, ...stableQuery },
+        signal: controller.signal,
+        authenticator: null,
+        includeRole: false,
+        withAclMeta: false,
+      })
+      .then((result) => {
+        if (result?.success === false && result.authUrl) {
+          window.location.replace(nocobaseClient.resolveUrl(result.authUrl));
+          return;
+        }
+        setIsChecking(false);
+      })
+      .catch((error) => {
+        if (error instanceof DOMException && error.name === "AbortError") {
+          return;
+        }
+        setIsChecking(false);
+      });
+
+    return () => controller.abort();
+  }, [action, redirect, resource, shouldCheck, stableQuery]);
+
+  if (isChecking) {
+    return <LoadingState className="min-h-svh" />;
+  }
+
+  return children;
+}

package/src/components/auth/basic-sign-in-form.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+import { useState } from "react";
+import { useLink, useLogin } from "@refinedev/core";
+
+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";
+
+type LoginVariables = {
+  account: string;
+  password: string;
+  authenticator: string;
+};
+
+export function BasicSignInForm({
+  authenticator,
+}: AuthenticatorComponentProps) {
+  const [account, setAccount] = useState("");
+  const [password, setPassword] = useState("");
+  const Link = useLink();
+  const { mutate: login, isPending } = useLogin<LoginVariables>();
+  const allowSignUp = authenticator.options?.allowSignUp === true;
+  const enableResetPassword =
+    authenticator.options?.enableResetPassword === true;
+
+  const handleSignIn = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    login({ account, password, authenticator: authenticator.name });
+  };
+
+  return (
+    <form onSubmit={handleSignIn} className="space-y-5">
+      <div className="space-y-2">
+        <Label htmlFor={`${authenticator.name}-account`}>
+          Username or email
+        </Label>
+        <Input
+          id={`${authenticator.name}-account`}
+          type="text"
+          value={account}
+          onChange={(event) => setAccount(event.target.value)}
+          autoComplete="username"
+          autoFocus
+          required
+        />
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor={`${authenticator.name}-password`}>Password</Label>
+        <InputPassword
+          id={`${authenticator.name}-password`}
+          value={password}
+          onChange={(event) => setPassword(event.target.value)}
+          autoComplete="current-password"
+          required
+        />
+      </div>
+
+      <Button
+        type="submit"
+        className="w-full"
+        disabled={isPending}
+      >
+        {isPending ? "Signing in…" : "Sign in"}
+      </Button>
+
+      {(allowSignUp || enableResetPassword) && (
+        <div className="flex flex-wrap items-center justify-between gap-x-4 gap-y-2 text-sm text-muted-foreground">
+          {enableResetPassword ? (
+            <Link
+              to={`/forgot-password?name=${encodeURIComponent(
+                authenticator.name
+              )}`}
+              className="transition-colors hover:text-foreground hover:underline hover:underline-offset-4"
+            >
+              Forgot password?
+            </Link>
+          ) : (
+            <span />
+          )}
+          {allowSignUp && (
+            <span>
+              No account?{" "}
+              <Link
+                to={`/register?name=${encodeURIComponent(authenticator.name)}`}
+                className="font-semibold text-foreground underline underline-offset-4"
+              >
+                Sign up
+              </Link>
+            </span>
+          )}
+        </div>
+      )}
+    </form>
+  );
+}
+
+BasicSignInForm.displayName = "BasicSignInForm";

package/src/components/auth/default-sign-in-page.tsx

@@ -0,0 +1,20 @@
+import { AuthLayout } from "@/components/auth/auth-layout";
+import { DynamicSignIn } from "@/components/auth/dynamic-sign-in";
+import type { RenderAuthenticator } from "@/components/auth/types";
+
+type DefaultSignInPageProps = {
+  renderAuthenticator?: RenderAuthenticator;
+};
+
+export function DefaultSignInPage({
+  renderAuthenticator,
+}: DefaultSignInPageProps) {
+  return (
+    <AuthLayout
+      title="Welcome back"
+      description="Choose a sign-in method configured in NocoBase."
+    >
+      <DynamicSignIn renderAuthenticator={renderAuthenticator} />
+    </AuthLayout>
+  );
+}

package/src/components/auth/demo/auth-demo-page.tsx

@@ -0,0 +1,236 @@
+import { useState } from "react";
+import { Building2, MessageSquare, ShieldCheck } from "lucide-react";
+
+import { BrandLogo } from "@/components/app-shell/brand";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Separator } from "@/components/ui/separator";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import {
+  AuthDemoPromptGenerator,
+  type AuthIntegrationPattern,
+} from "./auth-demo-prompt-generator";
+
+const scenarioCopy: Record<
+  AuthIntegrationPattern,
+  { title: string; description: string }
+> = {
+  dynamic: {
+    title: "Default dynamic login",
+    description:
+      "Enabled authenticators are discovered from NocoBase and arranged exactly as forms and buttons on the login page.",
+  },
+  method: {
+    title: "Replace one method",
+    description:
+      "The dynamic page remains intact while one authenticator receives application-owned branding and interaction.",
+  },
+  page: {
+    title: "Replace the complete page",
+    description:
+      "The application owns the whole visual composition while the Starter retains the authentication runtime.",
+  },
+};
+
+export function AuthDemoPage() {
+  const [pattern, setPattern] =
+    useState<AuthIntegrationPattern>("dynamic");
+
+  return (
+    <div className="space-y-8 pb-12">
+      <header className="space-y-2">
+        <Badge variant="secondary">Authentication</Badge>
+        <h1 className="font-heading text-3xl font-semibold tracking-tight">
+          Login composition
+        </h1>
+        <p className="max-w-3xl text-muted-foreground">
+          Compare the backend-driven default with the two application-owned
+          customization boundaries.
+        </p>
+      </header>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>{scenarioCopy[pattern].title}</CardTitle>
+          <CardDescription>{scenarioCopy[pattern].description}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Tabs
+            value={pattern}
+            onValueChange={(next) =>
+              setPattern(next as AuthIntegrationPattern)
+            }
+          >
+            <TabsList className="w-full">
+              <TabsTrigger value="dynamic">Dynamic</TabsTrigger>
+              <TabsTrigger value="method">Replace method</TabsTrigger>
+              <TabsTrigger value="page">Replace page</TabsTrigger>
+            </TabsList>
+            <TabsContent value="dynamic">
+              <DynamicLoginPreview />
+            </TabsContent>
+            <TabsContent value="method">
+              <DynamicLoginPreview replaceOidc />
+            </TabsContent>
+            <TabsContent value="page">
+              <CustomLoginPagePreview />
+            </TabsContent>
+          </Tabs>
+        </CardContent>
+      </Card>
+
+      {pattern !== "dynamic" ? (
+        <AuthDemoPromptGenerator
+          value={pattern}
+          onValueChange={setPattern}
+          patterns={["method", "page"]}
+        />
+      ) : null}
+    </div>
+  );
+}
+
+function DynamicLoginPreview({ replaceOidc = false }: { replaceOidc?: boolean }) {
+  return (
+    <div className="mx-auto max-w-sm space-y-5 pt-5">
+      <div className="space-y-1 text-center">
+        <h2 className="font-heading text-xl font-semibold">Welcome back</h2>
+        <p className="text-sm text-muted-foreground">
+          Choose a sign-in method configured in NocoBase.
+        </p>
+      </div>
+
+      <Tabs defaultValue="password">
+        <TabsList className="w-full">
+          <TabsTrigger value="password">Password</TabsTrigger>
+          <TabsTrigger value="sms">SMS</TabsTrigger>
+        </TabsList>
+        <TabsContent value="password">
+          <PasswordFields />
+        </TabsContent>
+        <TabsContent value="sms">
+          <SmsFields />
+        </TabsContent>
+      </Tabs>
+
+      <div className="flex items-center gap-4 py-1">
+        <Separator className="flex-1" />
+        <span className="text-xs text-muted-foreground">Or continue with</span>
+        <Separator className="flex-1" />
+      </div>
+
+      <div className="grid gap-3">
+        {replaceOidc ? (
+          <div className="space-y-2 rounded-xl border border-primary/25 bg-primary/5 p-3">
+            <Button className="w-full">
+              <ShieldCheck />
+              Continue with NocoBase SSO
+            </Button>
+            <p className="text-center text-xs text-muted-foreground">
+              Custom UI for the company-oidc authenticator only
+            </p>
+          </div>
+        ) : (
+          <Button variant="outline" className="w-full">
+            <Building2 />
+            Company OIDC
+          </Button>
+        )}
+        <Button variant="outline" className="w-full">
+          <MessageSquare />
+          DingTalk
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+function CustomLoginPagePreview() {
+  return (
+    <div className="mx-auto mt-5 grid max-w-4xl overflow-hidden rounded-xl border md:grid-cols-[1.1fr_1fr]">
+      <div className="hidden min-h-[460px] flex-col justify-between bg-foreground p-8 text-background md:flex">
+        <div className="flex items-center gap-3">
+          <div className="flex size-10 items-center justify-center rounded-lg bg-background text-foreground">
+            <BrandLogo className="size-7" />
+          </div>
+          <span className="font-heading text-lg font-semibold">
+            NocoBase
+          </span>
+        </div>
+        <div className="space-y-3">
+          <Badge variant="secondary">Application-owned page</Badge>
+          <p className="font-heading text-3xl font-semibold leading-tight">
+            Build freely. Keep the foundation reliable.
+          </p>
+          <p className="text-sm text-background/65">
+            This entire composition can change without replacing the Starter's
+            authentication runtime.
+          </p>
+        </div>
+      </div>
+
+      <div className="space-y-6 bg-card p-6 sm:p-8">
+        <div className="space-y-1">
+          <h2 className="font-heading text-2xl font-semibold">Sign in</h2>
+          <p className="text-sm text-muted-foreground">
+            Continue to your NocoBase application.
+          </p>
+        </div>
+        <PasswordFields />
+        <div className="flex items-center gap-4">
+          <Separator className="flex-1" />
+          <span className="text-xs text-muted-foreground">or</span>
+          <Separator className="flex-1" />
+        </div>
+        <Button variant="outline" className="w-full">
+          <ShieldCheck />
+          NocoBase SSO
+        </Button>
+        <p className="text-center text-xs text-muted-foreground">
+          By continuing, you agree to your organization's access policy.
+        </p>
+      </div>
+    </div>
+  );
+}
+
+function PasswordFields() {
+  return (
+    <div className="space-y-4 pt-3">
+      <div className="space-y-2">
+        <Label>Username or email</Label>
+        <Input placeholder="you@example.com" />
+      </div>
+      <div className="space-y-2">
+        <Label>Password</Label>
+        <Input type="password" value="password" readOnly />
+      </div>
+      <Button className="w-full">Sign in</Button>
+    </div>
+  );
+}
+
+function SmsFields() {
+  return (
+    <div className="space-y-4 pt-3">
+      <div className="space-y-2">
+        <Label>Phone</Label>
+        <Input placeholder="Phone number" />
+      </div>
+      <div className="grid grid-cols-[1fr_auto] gap-2">
+        <Input placeholder="Verification code" />
+        <Button variant="outline">Send code</Button>
+      </div>
+      <Button className="w-full">Sign in</Button>
+    </div>
+  );
+}

package/src/components/auth/demo/auth-demo-prompt-generator.tsx

@@ -0,0 +1,93 @@
+import { useMemo, useState } from "react";
+
+import { PromptOutput } from "@/components/demo/prompt-output";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+export type AuthIntegrationPattern = "dynamic" | "method" | "page";
+
+const patternLabels: Record<AuthIntegrationPattern, string> = {
+  dynamic: "Use the default dynamic login",
+  method: "Replace one authentication method",
+  page: "Replace the complete login page",
+};
+
+export function AuthDemoPromptGenerator({
+  value,
+  onValueChange,
+  patterns,
+}: {
+  value?: AuthIntegrationPattern;
+  onValueChange?: (value: AuthIntegrationPattern) => void;
+  patterns?: AuthIntegrationPattern[];
+}) {
+  const [localPattern, setLocalPattern] = useState<AuthIntegrationPattern>(
+    value ?? patterns?.[0] ?? "method"
+  );
+  const pattern = value ?? localPattern;
+  const availablePatterns =
+    patterns ?? (Object.keys(patternLabels) as AuthIntegrationPattern[]);
+  const setPattern = (next: AuthIntegrationPattern) => {
+    setLocalPattern(next);
+    onValueChange?.(next);
+  };
+  const prompt = useMemo(() => {
+    if (pattern === "method") {
+      return "Customize the Starter login page by replacing only one configured authenticator. Keep the default dynamic authenticator discovery and default UI for every other method. Reuse that Registry's headless sign-in hook so token callbacks, the X-Authenticator header, logout, and redirect behavior remain unchanged.";
+    }
+    if (pattern === "page") {
+      return "Create a fully custom login page for this Starter. Preserve the built-in authentication runtime, callback token capture, current authenticator storage, X-Authenticator request header, role reset, and SSO logout redirect. Keep installed authentication hooks available to the custom page.";
+    }
+    return "Keep the Starter's default dynamic login page unchanged.";
+  }, [pattern]);
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Prompt generator</CardTitle>
+        <CardDescription>
+          Generate an implementation prompt for an application-owned login UI.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="grid items-start gap-5 xl:grid-cols-[360px_minmax(0,1fr)]">
+        <div className="space-y-2">
+          <Label>Integration pattern</Label>
+          <Select
+            value={pattern}
+            onValueChange={(next) => setPattern(next as AuthIntegrationPattern)}
+          >
+            <SelectTrigger className="w-full">
+              <SelectValue>{patternLabels[pattern]}</SelectValue>
+            </SelectTrigger>
+            <SelectContent>
+              {availablePatterns.map((key) => (
+                <SelectItem key={key} value={key}>
+                  {patternLabels[key]}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <PromptOutput
+          title="Generated implementation prompt"
+          description="Updates when the customization boundary changes."
+          prompt={prompt}
+          promptClassName="min-h-36"
+        />
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/auth/demo/auth-demo-route.tsx

@@ -0,0 +1,11 @@
+import { Suspense } from "react";
+
+import { LoadingState } from "@/components/app-shell/loading-state";
+
+export function AuthDemoRoute({ children }: { children: React.ReactNode }) {
+  return (
+    <Suspense fallback={<LoadingState className="min-h-80" />}>
+      {children}
+    </Suspense>
+  );
+}

package/src/components/auth/demo/auth-method-demo.tsx

@@ -0,0 +1,48 @@
+import { Badge } from "@/components/ui/badge";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+
+export function AuthMethodDemo({
+  authType,
+  children,
+  description,
+  methodName,
+}: {
+  authType: string;
+  children: React.ReactNode;
+  description: string;
+  methodName: string;
+}) {
+  return (
+    <div className="space-y-8 pb-12">
+      <header className="space-y-2">
+        <div className="flex items-center gap-2">
+          <Badge variant="secondary">Authentication</Badge>
+          <Badge variant="outline">{authType}</Badge>
+        </div>
+        <h1 className="font-heading text-3xl font-semibold tracking-tight">
+          {methodName}
+        </h1>
+        <p className="max-w-3xl text-muted-foreground">{description}</p>
+      </header>
+
+      <Card className="max-w-2xl">
+        <CardHeader>
+          <CardTitle>Default component</CardTitle>
+          <CardDescription>
+            Installed Registries add this UI to the dynamic login page
+            automatically.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="max-w-sm">{children}</div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/src/components/auth/demo/index.ts

@@ -0,0 +1,4 @@
+export { AuthDemoPage } from "./auth-demo-page";
+export { AuthDemoPromptGenerator } from "./auth-demo-prompt-generator";
+export { AuthDemoRoute } from "./auth-demo-route";
+export { AuthMethodDemo } from "./auth-method-demo";