@simple-auth-kit/cli 1.0.0

package/registry/admin-apps/react/variants/base/src/pages/country-schema.ts

@@ -0,0 +1,29 @@
+/**
+ * Shared between the add and edit country forms — mirrors admin-nextjs's `country-schema.ts`,
+ * minus zod (this app validates with native form attributes on controlled inputs, same as
+ * `user-schema.ts`). `CreateCountryInput` and `UpdateCountryInput` share every field, and all of
+ * them except the flag are required strings on create — so one set of fields serves both forms.
+ */
+export interface CountryFormFields {
+  code: string;
+  name: string;
+  emoji: string;
+  phoneCode: string;
+  currency: string;
+  currencyName: string;
+  isoCode: string;
+  flag: string | null;
+  isActive: boolean;
+}
+
+export const emptyCountryFields: CountryFormFields = {
+  code: "",
+  name: "",
+  emoji: "",
+  phoneCode: "",
+  currency: "",
+  currencyName: "",
+  isoCode: "",
+  flag: null,
+  isActive: true,
+};

package/registry/admin-apps/react/variants/base/src/pages/customer-schema.ts

@@ -0,0 +1,37 @@
+/**
+ * Shared between the add and edit customer forms — mirrors admin-nextjs's `customer-schema.ts`,
+ * minus zod (this app validates with native form attributes on controlled inputs, same as
+ * `user-schema.ts`). Dates live in the form as `Date | undefined` (what `DatePicker` emits) and
+ * are serialized to `yyyy-MM-dd` strings only at submit time — see the callers in
+ * `AddCustomerPage`/`EditCustomerPage`.
+ */
+export interface CustomerFormFields {
+  firstName: string;
+  lastName: string;
+  username: string;
+  email: string;
+  phone: string;
+  dob: Date | undefined;
+  gender: string;
+  joinedDate: Date | undefined;
+  photo: string | null;
+  isActive: boolean;
+}
+
+export const emptyCustomerFields: CustomerFormFields = {
+  firstName: "",
+  lastName: "",
+  username: "",
+  email: "",
+  phone: "",
+  dob: undefined,
+  gender: "",
+  joinedDate: undefined,
+  photo: null,
+  isActive: true,
+};
+
+export const GENDER_OPTIONS = [
+  { label: "Male", value: "male" },
+  { label: "Female", value: "female" },
+];

package/registry/admin-apps/react/variants/base/src/pages/language-schema.ts

@@ -0,0 +1,28 @@
+/**
+ * Shared between the add and edit language forms — mirrors admin-nextjs's `language-schema.ts`,
+ * minus zod (this app validates with native form attributes on controlled inputs, same as
+ * `user-schema.ts`). `CreateLanguageInput` and `UpdateLanguageInput` share every field, so one
+ * set of fields serves both forms.
+ */
+export interface LanguageFormFields {
+  code: string;
+  name: string;
+  nativeName: string;
+  direction: "ltr" | "rtl";
+  isDefault: boolean;
+  isActive: boolean;
+}
+
+export const emptyLanguageFields: LanguageFormFields = {
+  code: "",
+  name: "",
+  nativeName: "",
+  direction: "ltr",
+  isDefault: false,
+  isActive: true,
+};
+
+export const DIRECTION_OPTIONS = [
+  { label: "Left to right (LTR)", value: "ltr" },
+  { label: "Right to left (RTL)", value: "rtl" },
+];

package/registry/admin-apps/react/variants/base/src/pages/user-schema.ts

@@ -0,0 +1,36 @@
+/**
+ * Shared between the create and edit user forms — mirrors admin-nextjs's `user-schema.ts`, minus
+ * zod (this app validates with native form attributes on controlled inputs). Dates live in the
+ * form as native `<input type="date">` values, which are already `yyyy-MM-dd` strings.
+ */
+export interface UserFormFields {
+  firstName: string;
+  lastName: string;
+  displayName: string;
+  phone: string;
+  username: string;
+  dob: string;
+  gender: string;
+  joinedDate: string;
+}
+
+export const emptyUserFields: UserFormFields = {
+  firstName: "",
+  lastName: "",
+  displayName: "",
+  phone: "",
+  username: "",
+  dob: "",
+  gender: "",
+  joinedDate: "",
+};
+
+export const GENDER_OPTIONS = [
+  { label: "Male", value: "male" },
+  { label: "Female", value: "female" },
+];
+
+/** Backend date fields can arrive as full ISO datetimes — a date input only accepts `yyyy-MM-dd`. */
+export function toDateInputValue(value: string | null | undefined): string {
+  return value ? value.slice(0, 10) : "";
+}

package/registry/admin-apps/react/variants/base/src/stores/auth-store.ts

@@ -0,0 +1,144 @@
+import { makeAutoObservable, runInAction } from "mobx";
+import type { AuthClient, CurrentUser, SessionSummary, TwoFactorChallenge } from "@simple-auth-kit/auth-client";
+import { AuthApiError } from "@simple-auth-kit/auth-client";
+
+/**
+ * Wraps the shared, framework-agnostic AuthClient with MobX-observable session state.
+ * Every screen that needs to know "who is logged in" (route guard, nav, My Account) reads
+ * `currentUser`/`isAuthenticated` off this store instead of re-fetching `me()` itself.
+ */
+export class AuthStore {
+  currentUser: CurrentUser | null = null;
+  /** True while the store is restoring a session from stored tokens on app boot. */
+  initializing = true;
+  sessions: SessionSummary[] = [];
+
+  // An ECMAScript-private field (not a TS `private` parameter property) so it falls outside
+  // `keyof this` entirely — makeAutoObservable's proxy-based auto-inference already skips it,
+  // with no annotation-map override needed.
+  #client: AuthClient;
+
+  constructor(client: AuthClient) {
+    this.#client = client;
+    makeAutoObservable(this, {}, { autoBind: true });
+  }
+
+  get isAuthenticated(): boolean {
+    return this.currentUser !== null;
+  }
+
+  /** Called once on app boot: if a token is already stored, restore the session; otherwise land on /login. */
+  async initialize(): Promise<void> {
+    try {
+      const isAuthenticated = await this.#client.isAuthenticated();
+      if (isAuthenticated) await this.refreshCurrentUser();
+    } catch {
+      runInAction(() => {
+        this.currentUser = null;
+      });
+    } finally {
+      runInAction(() => {
+        this.initializing = false;
+      });
+    }
+  }
+
+  async refreshCurrentUser(): Promise<void> {
+    const user = await this.#client.me();
+    runInAction(() => {
+      this.currentUser = user;
+    });
+  }
+
+  /**
+   * Re-verifies the session is still live server-side — `AuthClient.me()` already retries once
+   * via a token refresh on a bare 401 internally, so an `AuthApiError` reaching here means that
+   * recovery path is exhausted (a stale/revoked/blocked session), not a transient hiccup. A
+   * network/parse error instead means the backend is unreachable, not that the session is
+   * invalid — same distinction the base admin-nextjs app's `proxy.ts` makes — so it's treated as
+   * "still fine" rather than forcing a logout.
+   *
+   * Returns false only when the session is confirmed dead, so callers know to redirect.
+   */
+  async verifySession(): Promise<boolean> {
+    try {
+      const user = await this.#client.me();
+      runInAction(() => {
+        this.currentUser = user;
+      });
+      return true;
+    } catch (err) {
+      if (err instanceof AuthApiError) {
+        runInAction(() => {
+          this.currentUser = null;
+        });
+        return false;
+      }
+      return true;
+    }
+  }
+
+  async signup(input: { email: string; password: string }): Promise<void> {
+    await this.#client.signup(input);
+    await this.refreshCurrentUser();
+  }
+
+  /** Returns `{ twoFactorRequired: true, challengeToken }` when the account has 2FA enabled — caller shows the code-entry step. */
+  async login(input: { identifier: string; password: string }): Promise<TwoFactorChallenge | null> {
+    const result = await this.#client.login(input);
+    if ("twoFactorRequired" in result) return result;
+    await this.refreshCurrentUser();
+    return null;
+  }
+
+  async loginTwoFactor(input: { challengeToken: string; code: string }): Promise<void> {
+    await this.#client.loginTwoFactor(input);
+    await this.refreshCurrentUser();
+  }
+
+  async logout(): Promise<void> {
+    try {
+      await this.#client.logout();
+    } finally {
+      runInAction(() => {
+        this.currentUser = null;
+        this.sessions = [];
+      });
+    }
+  }
+
+  async logoutAll(): Promise<void> {
+    try {
+      await this.#client.logoutAll();
+    } finally {
+      runInAction(() => {
+        this.currentUser = null;
+        this.sessions = [];
+      });
+    }
+  }
+
+  async loadSessions(): Promise<void> {
+    const sessions = await this.#client.sessions();
+    runInAction(() => {
+      this.sessions = sessions;
+    });
+  }
+
+  async enrollTwoFactor(): Promise<{ secret: string; provisioningUri: string }> {
+    return this.#client.enrollTwoFactor();
+  }
+
+  async confirmTwoFactor(code: string): Promise<{ backupCodes: string[] }> {
+    const result = await this.#client.confirmTwoFactor(code);
+    await this.refreshCurrentUser();
+    return result;
+  }
+
+  async disableTwoFactor(code: string): Promise<void> {
+    await this.#client.disableTwoFactor(code);
+    await this.refreshCurrentUser();
+  }
+}
+
+export { AuthApiError };

package/registry/admin-apps/react/variants/base/src/stores/store-context.tsx

@@ -0,0 +1,15 @@
+import { createContext, type ReactNode, useContext } from "react";
+import { authClient } from "@/lib/auth-client";
+import { AuthStore } from "./auth-store";
+
+export const authStore = new AuthStore(authClient);
+
+const StoreContext = createContext<AuthStore>(authStore);
+
+export function StoreProvider({ children }: { children: ReactNode }) {
+  return <StoreContext.Provider value={authStore}>{children}</StoreContext.Provider>;
+}
+
+export function useAuthStore(): AuthStore {
+  return useContext(StoreContext);
+}

package/registry/admin-apps/react/variants/base/vite.config.ts

@@ -0,0 +1,15 @@
+import { fileURLToPath, URL } from "node:url";
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      "@": fileURLToPath(new URL("./src", import.meta.url)),
+    },
+  },
+  server: {
+    port: 5173,
+  },
+});

package/registry/admin-apps/react/variants/workspaces/.env.example

@@ -0,0 +1,5 @@
+# Base URL of the running simple-auth-kit backend, built with the workspaces variant
+# (`simple-auth-kit add <combo> --workspaces`). Defaults to http://localhost:3005 when unset —
+# see src/lib/auth-client.ts. This app itself serves on port 5174, so it can run alongside
+# apps/admin-react (5173) against two different backends.
+VITE_AUTH_API_URL=http://localhost:3005

package/registry/admin-apps/react/variants/workspaces/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 `vite` dev server (not a production build): a generic image can't sensibly bake
+# VITE_* values at build time (Vite 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-react-workspaces + 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-react-workspaces..." --config.dangerously-allow-all-builds=true
+RUN pnpm --filter @simple-auth-kit/auth-client run build
+
+WORKDIR /repo/apps/admin-react-workspaces
+EXPOSE 5174
+# `pnpm exec` (not `pnpm run dev -- ...`) so --host actually reaches vite's CLI parser
+# instead of being swallowed as a literal "--" argument.
+CMD ["pnpm", "exec", "vite", "--host", "0.0.0.0"]

package/registry/admin-apps/react/variants/workspaces/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Admin Console — Workspaces</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/registry/admin-apps/react/variants/workspaces/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "admin-react-workspaces",
+  "private": true,
+  "version": "0.0.0",
+  "description": "Workspace-aware bare React + Vite admin console for the simple-auth-kit backend (--workspaces variant) \u2014 workspace switcher, member management, and the full user/RBAC/audit-log/2FA UI scoped to the active workspace.",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc --noEmit && vite build",
+    "preview": "vite preview",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@casl/ability": "^6.7.3",
+    "@casl/react": "^4.0.0",
+    "@simple-auth-kit/auth-client": "^1.0.0",
+    "@fontsource-variable/bricolage-grotesque": "^5.3.0",
+    "@radix-ui/react-label": "^2.1.15",
+    "@radix-ui/react-slot": "^1.3.3",
+    "@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": "^5.1.0",
+    "date-fns": "^4.1.0",
+    "embla-carousel-react": "^8.6.0",
+    "input-otp": "^1.4.2",
+    "lucide-react": "^1.30.0",
+    "mobx": "^6.13.7",
+    "mobx-react-lite": "^4.1.0",
+    "next-themes": "^0.4.6",
+    "qrcode.react": "^4.2.0",
+    "radix-ui": "^1.6.7",
+    "react": "^19.2.0",
+    "react-day-picker": "^9.13.0",
+    "react-dom": "^19.2.0",
+    "react-hook-form": "^7.69.0",
+    "react-resizable-panels": "4.0.13",
+    "react-router-dom": "^7.9.5",
+    "shadcn": "^4.16.2",
+    "socket.io-client": "^4.8.1",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.6.0",
+    "tailwindcss-animate": "^1.0.7",
+    "tw-animate-css": "^1.4.0",
+    "use-debounce": "^10.0.6",
+    "vaul": "^1.1.2"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.3.3",
+    "@types/node": "^26.2.0",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.4",
+    "@vitejs/plugin-react": "^5.0.4",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.3.3",
+    "typescript": "^7.0.2",
+    "vite": "^7.1.14"
+  }
+}

package/registry/admin-apps/react/variants/workspaces/src/App.tsx

@@ -0,0 +1,118 @@
+import { useEffect } from "react";
+import { observer } from "mobx-react-lite";
+import { Navigate, Route, Routes } from "react-router-dom";
+import { AbilityContext, abilityFor, PERMISSIONS } from "@/lib/ability";
+import { useAuthStore } from "@/stores/store-context";
+import { AppShell } from "@/components/layout/AppShell";
+import { RequireAuth, RequirePermission, RequireWorkspace } from "@/components/layout/RequireAuth";
+import { LoginPage } from "@/pages/LoginPage";
+import { DashboardPage } from "@/pages/DashboardPage";
+import { UsersPage } from "@/pages/UsersPage";
+import { AddUserPage } from "@/pages/AddUserPage";
+import { UserDetailPage } from "@/pages/UserDetailPage";
+import { MembersPage } from "@/pages/MembersPage";
+import { RolesPage } from "@/pages/RolesPage";
+import { RoleDetailPage } from "@/pages/RoleDetailPage";
+import { PermissionsPage } from "@/pages/PermissionsPage";
+import { PermissionDetailPage } from "@/pages/PermissionDetailPage";
+import { AuditLogPage } from "@/pages/AuditLogPage";
+import { AccountPage } from "@/pages/AccountPage";
+import { CustomersPage } from "@/pages/CustomersPage";
+import { AddCustomerPage } from "@/pages/AddCustomerPage";
+import { CustomerDetailPage } from "@/pages/CustomerDetailPage";
+import { EditCustomerPage } from "@/pages/EditCustomerPage";
+import { CountriesPage } from "@/pages/CountriesPage";
+import { AddCountryPage } from "@/pages/AddCountryPage";
+import { CountryDetailPage } from "@/pages/CountryDetailPage";
+import { EditCountryPage } from "@/pages/EditCountryPage";
+import { LanguagesPage } from "@/pages/LanguagesPage";
+import { AddLanguagePage } from "@/pages/AddLanguagePage";
+import { LanguageDetailPage } from "@/pages/LanguageDetailPage";
+import { EditLanguagePage } from "@/pages/EditLanguagePage";
+
+export const App = observer(function App() {
+  const store = useAuthStore();
+
+  useEffect(() => {
+    void store.initialize();
+  }, [store]);
+
+  // Rebuilt whenever `currentUser` changes — which includes every workspace switch, since
+  // permissions are per membership and the store re-reads `/auth/me` on switching.
+  const ability = abilityFor(store.currentUser);
+
+  return (
+    <AbilityContext.Provider value={ability}>
+      <Routes>
+        <Route path="/login" element={<LoginPage />} />
+
+        <Route element={<RequireAuth />}>
+          <Route element={<AppShell />}>
+            {/* The console's front door. Dashboard needs no permission and handles having no
+                active workspace internally, so it's a safe landing spot for any authenticated
+                caller — no `RequirePermission`, and deliberately outside `RequireWorkspace`. */}
+            <Route path="/dashboard" element={<DashboardPage />} />
+
+            {/* Sessions and 2FA belong to the account, not to any workspace. */}
+            <Route path="/account" element={<AccountPage />} />
+
+            <Route element={<RequireWorkspace />}>
+              <Route element={<RequirePermission anyOf={[PERMISSIONS.usersRead]} />}>
+                <Route path="/users" element={<UsersPage />} />
+                <Route path="/users/:id" element={<UserDetailPage />} />
+              </Route>
+              <Route element={<RequirePermission anyOf={[PERMISSIONS.usersManage]} />}>
+                <Route path="/users/new" element={<AddUserPage />} />
+              </Route>
+              {/* Any member may see who else is in the workspace — only its buttons are gated. */}
+              <Route path="/members" element={<MembersPage />} />
+              <Route element={<RequirePermission anyOf={[PERMISSIONS.rolesManage, PERMISSIONS.rolesAssign, PERMISSIONS.permissionsGrant]} />}>
+                <Route path="/roles" element={<RolesPage />} />
+                <Route path="/roles/:id" element={<RoleDetailPage />} />
+              </Route>
+              <Route element={<RequirePermission anyOf={[PERMISSIONS.permissionsRead]} />}>
+                <Route path="/permissions" element={<PermissionsPage />} />
+                <Route path="/permissions/:id" element={<PermissionDetailPage />} />
+              </Route>
+              <Route element={<RequirePermission anyOf={[PERMISSIONS.auditLogRead]} />}>
+                <Route path="/audit-log" element={<AuditLogPage />} />
+              </Route>
+
+              <Route element={<RequirePermission anyOf={[PERMISSIONS.customersRead]} />}>
+                <Route path="/customers" element={<CustomersPage />} />
+                <Route path="/customers/:id" element={<CustomerDetailPage />} />
+              </Route>
+              <Route element={<RequirePermission anyOf={[PERMISSIONS.customersManage]} />}>
+                <Route path="/customers/new" element={<AddCustomerPage />} />
+                <Route path="/customers/:id/edit" element={<EditCustomerPage />} />
+              </Route>
+
+              <Route element={<RequirePermission anyOf={[PERMISSIONS.countriesRead]} />}>
+                <Route path="/countries" element={<CountriesPage />} />
+                <Route path="/countries/:id" element={<CountryDetailPage />} />
+              </Route>
+              <Route element={<RequirePermission anyOf={[PERMISSIONS.countriesManage]} />}>
+                <Route path="/countries/new" element={<AddCountryPage />} />
+                <Route path="/countries/:id/edit" element={<EditCountryPage />} />
+              </Route>
+
+              <Route element={<RequirePermission anyOf={[PERMISSIONS.languagesRead]} />}>
+                <Route path="/languages" element={<LanguagesPage />} />
+                <Route path="/languages/:id" element={<LanguageDetailPage />} />
+              </Route>
+              <Route element={<RequirePermission anyOf={[PERMISSIONS.languagesManage]} />}>
+                <Route path="/languages/new" element={<AddLanguagePage />} />
+                <Route path="/languages/:id/edit" element={<EditLanguagePage />} />
+              </Route>
+            </Route>
+          </Route>
+        </Route>
+
+        {/* Landing on the console's home: Dashboard is always a safe landing spot — its cards are
+            individually permission-gated and it shows its own offer to create a workspace when
+            there isn't one yet, so a low-privilege or brand-new account never hits a wall. */}
+        <Route path="*" element={<Navigate to="/dashboard" replace />} />
+      </Routes>
+    </AbilityContext.Provider>
+  );
+});