@simple-auth-kit/cli 1.0.0

package/registry/admin-apps/nextjs/shared/src/components/ui/table.tsx

@@ -0,0 +1,116 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("mt-4 text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

package/registry/admin-apps/nextjs/shared/src/components/ui/tooltip.tsx

@@ -0,0 +1,61 @@
+"use client"
+
+import * as React from "react"
+import { Tooltip as TooltipPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  )
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md bg-foreground px-2 py-1 text-xs text-balance text-background data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/registry/admin-apps/nextjs/shared/src/hooks/use-live-audit-feed.ts

@@ -0,0 +1,51 @@
+"use client";
+
+import type { AuditLogEntry } from "@simple-auth-kit/auth-client";
+import { useEffect, useRef, useState } from "react";
+import { io, type Socket } from "socket.io-client";
+import { AUTH_API_URL } from "@/lib/env";
+import { cookieTokenStorage } from "@/lib/token-storage";
+
+export type LiveFeedStatus = "connecting" | "connected" | "disconnected";
+
+/**
+ * Live tail of the backend's `/audit-logs` socket.io namespace. Entries arrive as
+ * `audit-log:created` in the same wire shape as the REST list, newest first, capped.
+ */
+export function useLiveAuditFeed(enabled: boolean, cap = 20) {
+  const [status, setStatus] = useState<LiveFeedStatus>("connecting");
+  const [entries, setEntries] = useState<AuditLogEntry[]>([]);
+  const socketRef = useRef<Socket | null>(null);
+
+  useEffect(() => {
+    if (!enabled) return;
+    let cancelled = false;
+
+    (async () => {
+      const tokens = await cookieTokenStorage.get();
+      if (cancelled || !tokens) {
+        setStatus("disconnected");
+        return;
+      }
+      const socket = io(`${AUTH_API_URL}/audit-logs`, {
+        auth: { token: tokens.accessToken },
+      });
+      socketRef.current = socket;
+
+      socket.on("connect", () => setStatus("connected"));
+      socket.on("disconnect", () => setStatus("disconnected"));
+      socket.on("connect_error", () => setStatus("disconnected"));
+      socket.on("audit-log:created", (entry: AuditLogEntry) => {
+        setEntries((prev) => [entry, ...prev].slice(0, cap));
+      });
+    })();
+
+    return () => {
+      cancelled = true;
+      socketRef.current?.disconnect();
+      socketRef.current = null;
+    };
+  }, [enabled, cap]);
+
+  return { status, entries };
+}

package/registry/admin-apps/nextjs/shared/src/hooks/use-mobile.ts

@@ -0,0 +1,17 @@
+import { useEffect, useState } from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile(): boolean {
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    mql.addEventListener("change", onChange);
+    onChange();
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+
+  return isMobile;
+}

package/registry/admin-apps/nextjs/shared/src/lib/error.ts

@@ -0,0 +1,23 @@
+import { AuthApiError } from "@simple-auth-kit/auth-client";
+
+export function errorMessage(err: unknown): string {
+  if (err instanceof AuthApiError) return err.message;
+  if (err instanceof Error) return err.message;
+  return "Something went wrong.";
+}
+
+/**
+ * For the destructive `Alert` block every form shows on submit error. `AuthApiError#message` is
+ * typed as a plain string, but backend validation errors are sometimes joined with newlines (or,
+ * on a shape this client doesn't guarantee, arrive as an actual array) — this normalizes either
+ * into one bullet list rather than a single run-on line.
+ */
+export function errorMessages(err: unknown): string[] {
+  const raw: unknown = err instanceof AuthApiError || err instanceof Error ? err.message : err;
+  if (Array.isArray(raw)) return raw.map(String).filter(Boolean);
+  if (typeof raw === "string") {
+    const lines = raw.split("\n").map((line) => line.trim()).filter(Boolean);
+    return lines.length > 0 ? lines : ["Something went wrong."];
+  }
+  return ["Something went wrong."];
+}

package/registry/admin-apps/nextjs/shared/src/lib/query-client.tsx

@@ -0,0 +1,10 @@
+"use client";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { useState, type ReactNode } from "react";
+
+/** One `QueryClient` per browser tab, created lazily so it survives Fast Refresh but never leaks across requests in an SSR context. */
+export function QueryProvider({ children }: { children: ReactNode }) {
+  const [client] = useState(() => new QueryClient({ defaultOptions: { queries: { staleTime: 5_000 } } }));
+  return <QueryClientProvider client={client}>{children}</QueryClientProvider>;
+}

package/registry/admin-apps/nextjs/shared/src/lib/token-storage.ts

@@ -0,0 +1,36 @@
+"use client";
+
+import { deleteCookie, getCookie, setCookie } from "cookies-next/client";
+import type { AuthTokens, TokenStorage } from "@simple-auth-kit/auth-client";
+
+// Per the project's resolved decision (see plan/README.md): frontend-managed cookies, not
+// backend-issued httpOnly ones. The backend's `Authorization: Bearer` contract is unchanged —
+// this is purely where the client caches the token pair between page loads. A plain (readable)
+// cookie is fine here since nothing server-side in this app ever needs to see it; the browser
+// attaches it to no request automatically, `AuthClient` reads it and sets the header itself.
+const COOKIE_NAME = "simple_auth_kit_tokens";
+const COOKIE_MAX_AGE_SECONDS = 60 * 60 * 24 * 30; // 30 days — well past the refresh token's own TTL, which is what actually gates session length
+
+export const cookieTokenStorage: TokenStorage = {
+  async get(): Promise<AuthTokens | null> {
+    const raw = getCookie(COOKIE_NAME);
+    if (!raw) return null;
+    try {
+      return JSON.parse(raw) as AuthTokens;
+    } catch {
+      return null;
+    }
+  },
+
+  async set(tokens: AuthTokens): Promise<void> {
+    setCookie(COOKIE_NAME, JSON.stringify(tokens), {
+      maxAge: COOKIE_MAX_AGE_SECONDS,
+      sameSite: "lax",
+      path: "/",
+    });
+  },
+
+  async clear(): Promise<void> {
+    deleteCookie(COOKIE_NAME, { path: "/" });
+  },
+};

package/registry/admin-apps/nextjs/shared/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/registry/admin-apps/nextjs/shared/tsconfig.json

@@ -0,0 +1,41 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "ES2022"
+    ],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

package/registry/admin-apps/nextjs/variants/base/.env.example

@@ -0,0 +1,9 @@
+# The simple-auth-kit backend this console administers — the *plain* variant (`simple-auth-kit add <combo>`),
+# which has no workspace concept. For the workspace-aware console see apps/admin-nextjs-workspaces.
+#
+# Public by design: the browser talks to the backend directly with a Bearer token, so there is no
+# server-side secret in this app to protect.
+NEXT_PUBLIC_AUTH_API_URL=http://localhost:3001
+
+# NextAuth v5 session-JWT signing secret. Generate one with `npx auth secret` or `openssl rand -base64 32`.
+AUTH_SECRET=

package/registry/admin-apps/nextjs/variants/base/Dockerfile

@@ -0,0 +1,32 @@
+# Build context MUST be the repo root (not this directory) — this app is a pnpm workspace
+# member that depends on @simple-auth-kit/auth-client via `workspace:*`, which is compiled to
+# dist/ and must be built from source (it's not consumed as raw TS). That requires the
+# whole workspace (pnpm-workspace.yaml, the lockfile, packages/auth-client) in scope.
+#
+# Runs `next dev` (not a production build): a generic image can't sensibly bake
+# NEXT_PUBLIC_* values at build time (Next.js inlines them then), and this is a
+# convenience local/demo stack, not a production deploy.
+FROM node:26-bookworm-slim
+
+WORKDIR /repo
+
+# pnpm v11 per the repo's Prerequisites — resolved via corepack rather than hardcoding an
+# install method, pinned to an exact version for reproducible builds. Node 26 no longer
+# bundles corepack, so it's installed explicitly first.
+RUN npm install -g corepack@latest && corepack enable && corepack prepare pnpm@11.21.0 --activate
+
+COPY . .
+
+# Scoped to admin-nextjs + its workspace dependencies (auth-client) — avoids installing the
+# unrelated combos/mobile-app dependency trees (argon2, prisma, etc.). pnpm v10+ still
+# refuses to run even the remaining (harmless, platform-binary-linking) build scripts like
+# esbuild's without explicit approval; --config here only affects this image layer, not the
+# repo's own pnpm config.
+RUN pnpm install --frozen-lockfile --filter "admin-nextjs..." --config.dangerously-allow-all-builds=true
+RUN pnpm --filter @simple-auth-kit/auth-client run build
+
+WORKDIR /repo/apps/admin-nextjs
+EXPOSE 3000
+# `pnpm exec` (not `pnpm run dev -- ...`) so the -H flag actually reaches next's CLI parser
+# instead of being swallowed as a literal "--" argument.
+CMD ["pnpm", "exec", "next", "dev", "-H", "0.0.0.0"]

package/registry/admin-apps/nextjs/variants/base/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "admin-nextjs",
+  "description": "Next.js admin console for the plain (no-workspaces) simple-auth-kit backend, via @simple-auth-kit/auth-client. See admin-nextjs-workspaces for the workspace-aware counterpart.",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "next dev -p 3000",
+    "build": "next build",
+    "start": "next start -p 3000",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@casl/ability": "^7.0.1",
+    "@casl/react": "^7.0.1",
+    "@simple-auth-kit/auth-client": "^1.0.0",
+    "@hookform/resolvers": "^5.2.2",
+    "@tanstack/react-query": "^5.90.12",
+    "@tanstack/react-table": "^8.21.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "cookies-next": "^6.1.1",
+    "date-fns": "^4.1.0",
+    "embla-carousel-react": "^8.6.0",
+    "input-otp": "^1.4.2",
+    "lucide-react": "^1.30.0",
+    "mobx": "^7.0.0",
+    "mobx-react-lite": "^5.0.0",
+    "next": "^16.3.0",
+    "next-auth": "5.0.0-beta.30",
+    "next-themes": "^0.4.6",
+    "qrcode.react": "^4.2.0",
+    "radix-ui": "^1.6.7",
+    "react": "^19.2.8",
+    "react-day-picker": "^9.13.0",
+    "react-dom": "^19.2.8",
+    "react-dropzone": "^14.3.8",
+    "react-hook-form": "^7.69.0",
+    "react-resizable-panels": "4.0.13",
+    "shadcn": "^4.16.2",
+    "socket.io-client": "^4.8.1",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.4.0",
+    "tw-animate-css": "^1.4.0",
+    "use-debounce": "^10.0.6",
+    "vaul": "^1.1.2",
+    "zod": "^4.2.1"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.3.3",
+    "@types/node": "^26.2.0",
+    "@types/react": "^19.2.9",
+    "@types/react-dom": "^19.2.4",
+    "tailwindcss": "^4.3.3",
+    "typescript": "^7.0.2"
+  }
+}

package/registry/admin-apps/nextjs/variants/base/src/app/(console)/account/change-password/page.tsx

@@ -0,0 +1,163 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { EyeIcon, EyeOffIcon } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { useForm, type Control } from "react-hook-form";
+import { z } from "zod";
+import { Breadcrumb } from "@/components/breadcrumb";
+import { FormErrorAlert } from "@/components/form-error-alert";
+import { Alert } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import { Heading } from "@/components/ui/heading";
+import { Input } from "@/components/ui/input";
+import { Separator } from "@/components/ui/separator";
+import { authClient } from "@/lib/auth-client";
+import { errorMessages } from "@/lib/error";
+
+const changePasswordSchema = z
+  .object({
+    currentPassword: z.string().min(1, "Current password is required"),
+    newPassword: z.string().min(8, "Must be at least 8 characters"),
+    confirmPassword: z.string(),
+  })
+  .refine((data) => data.newPassword === data.confirmPassword, {
+    message: "Passwords don't match",
+    path: ["confirmPassword"],
+  });
+
+type ChangePasswordValues = z.infer<typeof changePasswordSchema>;
+
+const emptyValues: ChangePasswordValues = { currentPassword: "", newPassword: "", confirmPassword: "" };
+
+function PasswordField({
+  control,
+  name,
+  label,
+  placeholder,
+  disabled,
+}: {
+  control: Control<ChangePasswordValues>;
+  name: keyof ChangePasswordValues;
+  label: string;
+  placeholder: string;
+  disabled?: boolean;
+}) {
+  const [visible, setVisible] = useState(false);
+  return (
+    <FormField
+      control={control}
+      name={name}
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel>{label}</FormLabel>
+          <FormControl>
+            <div className="relative">
+              <Input
+                type={visible ? "text" : "password"}
+                placeholder={placeholder}
+                disabled={disabled}
+                className="pr-9 bg-background border-2 focus:border-purple-500 transition-colors"
+                {...field}
+              />
+              <button
+                type="button"
+                onClick={() => setVisible((v) => !v)}
+                className="absolute inset-y-0 right-2 flex items-center text-muted-foreground hover:text-foreground"
+                tabIndex={-1}
+              >
+                {visible ? <EyeOffIcon className="size-4" /> : <EyeIcon className="size-4" />}
+              </button>
+            </div>
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+}
+
+export default function ChangePasswordPage() {
+  const router = useRouter();
+  const [notice, setNotice] = useState<string | null>(null);
+  const [submitError, setSubmitError] = useState<unknown>(null);
+  const [submitting, setSubmitting] = useState(false);
+
+  const form = useForm<ChangePasswordValues>({
+    resolver: zodResolver(changePasswordSchema),
+    defaultValues: emptyValues,
+  });
+
+  async function handleSubmit(values: ChangePasswordValues) {
+    setSubmitError(null);
+    setNotice(null);
+    setSubmitting(true);
+    try {
+      await authClient.changePassword({ currentPassword: values.currentPassword, newPassword: values.newPassword });
+      setNotice("Password changed. Every other session was signed out.");
+      form.reset(emptyValues);
+    } catch (err) {
+      setSubmitError(err);
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <div className="flex-1 space-y-4">
+      <Breadcrumb items={[{ title: "Profile", href: "/account" }, { title: "Change Password", href: "/account/change-password" }]} />
+      <div className="flex items-start justify-between">
+        <Heading title="Change Password" description="Update your account password" />
+      </div>
+      <Separator />
+
+      <Card className="mx-auto w-full max-w-2xl">
+        <CardHeader>
+          <CardTitle className="text-left text-2xl font-bold">Change Password</CardTitle>
+          <CardDescription>Enter your current password and choose a new password</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-6">
+              <FormErrorAlert messages={submitError ? errorMessages(submitError) : null} />
+              {notice && <Alert variant="success">{notice}</Alert>}
+              <PasswordField
+                control={form.control}
+                name="currentPassword"
+                label="Current Password"
+                placeholder="Enter your current password"
+                disabled={submitting}
+              />
+              <PasswordField
+                control={form.control}
+                name="newPassword"
+                label="New Password"
+                placeholder="Enter your new password (min. 8 characters)"
+                disabled={submitting}
+              />
+              <PasswordField
+                control={form.control}
+                name="confirmPassword"
+                label="Confirm New Password"
+                placeholder="Confirm your new password"
+                disabled={submitting}
+              />
+
+              <div className="flex gap-4 pt-4">
+                <Button type="submit" disabled={submitting} className="bg-purple-600 hover:bg-purple-700 dark:bg-purple-600 dark:hover:bg-purple-700 min-w-32">
+                  {submitting ? "Changing Password..." : "Change Password"}
+                </Button>
+                <Button type="button" variant="outline" disabled={submitting} onClick={() => router.push("/account")}>
+                  Cancel
+                </Button>
+              </div>
+            </form>
+          </Form>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}