@simple-auth-kit/cli 1.0.0

package/registry/admin-apps/nextjs/variants/workspaces/src/components/ui/popover.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import * as React from "react";
+import { Popover as PopoverPrimitive } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+
+function Popover({
+	...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+	return <PopoverPrimitive.Root data-slot="popover" {...props} />;
+}
+
+function PopoverTrigger({
+	...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+	return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
+}
+
+function PopoverContent({
+	className,
+	align = "center",
+	sideOffset = 4,
+	...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+	return (
+		<PopoverPrimitive.Portal>
+			<PopoverPrimitive.Content
+				data-slot="popover-content"
+				align={align}
+				sideOffset={sideOffset}
+				className={cn(
+					"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+					className,
+				)}
+				{...props}
+			/>
+		</PopoverPrimitive.Portal>
+	);
+}
+
+function PopoverAnchor({
+	...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+	return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

package/registry/admin-apps/nextjs/variants/workspaces/src/components/user-menu.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { observer } from "mobx-react-lite";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { KeyRoundIcon, LogOutIcon, UserIcon } from "lucide-react";
+import { ChangePasswordDialog } from "@/components/change-password-dialog";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+import { useAuthStore } from "@/lib/stores/store-context";
+
+function initialsOf(label: string): string {
+  return (
+    label
+      .split(/[@.\s]+/)
+      .filter(Boolean)
+      .slice(0, 2)
+      .map((part) => part[0]?.toUpperCase())
+      .join("") || "?"
+  );
+}
+
+/** Top-right profile dropdown, alongside `NavUser` in the sidebar footer — the reference app's `Header`/`UserMenu` puts this in the top bar, not just the sidebar. */
+export const UserMenu = observer(function UserMenu() {
+  const store = useAuthStore();
+  const router = useRouter();
+  const [changePasswordOpen, setChangePasswordOpen] = useState(false);
+
+  const label = store.currentUser?.displayName || store.currentUser?.email || store.currentUser?.sub || "Account";
+  const photo = store.currentUser?.photo ?? null;
+
+  async function handleLogOut() {
+    await store.logout();
+    router.push("/login");
+  }
+
+  return (
+    <>
+      <DropdownMenu modal={false}>
+        <DropdownMenuTrigger asChild>
+          <Avatar className="size-8 cursor-pointer">
+            {photo && <AvatarImage src={photo} alt="" className="object-cover" />}
+            <AvatarFallback>{initialsOf(label)}</AvatarFallback>
+          </Avatar>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-56">
+          <DropdownMenuGroup>
+            <DropdownMenuItem onClick={() => router.push("/account")}>
+              <UserIcon />
+              Profile
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => setChangePasswordOpen(true)}>
+              <KeyRoundIcon />
+              Change password
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem variant="destructive" onClick={() => void handleLogOut()}>
+            <LogOutIcon />
+            Log out
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      <ChangePasswordDialog open={changePasswordOpen} onOpenChange={setChangePasswordOpen} />
+    </>
+  );
+});

package/registry/admin-apps/nextjs/variants/workspaces/src/components/workspace-switcher.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { observer } from "mobx-react-lite";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { Plus } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { useWorkspaceStore } from "@/lib/stores/store-context";
+
+/**
+ * Names the workspace every request is scoped to, and switches it. Deliberately plain: it sits
+ * in the header, says what you are looking at, and changes it — the consequence (your roles,
+ * this list of users, this audit log) is visible on the page behind it, not explained here.
+ */
+export const WorkspaceSwitcher = observer(function WorkspaceSwitcher() {
+  const workspaces = useWorkspaceStore();
+  const router = useRouter();
+  const [switching, setSwitching] = useState(false);
+
+  if (workspaces.status !== "ready" || workspaces.workspaces.length === 0) return null;
+
+  async function handleChange(workspaceId: string) {
+    setSwitching(true);
+    try {
+      await workspaces.setActive(workspaceId);
+      // Every screen reloads off the active workspace, so a refresh is all a switch needs.
+      router.refresh();
+    } finally {
+      setSwitching(false);
+    }
+  }
+
+  return (
+    <div className="flex items-center gap-1">
+      <Select value={workspaces.activeWorkspaceId ?? ""} onValueChange={(id) => void handleChange(id)} disabled={switching}>
+        <SelectTrigger aria-label="Active workspace" className="h-8 w-52 text-sm">
+          <SelectValue placeholder="Select a workspace…" />
+        </SelectTrigger>
+        <SelectContent>
+          {workspaces.workspaces.map((workspace) => (
+            <SelectItem key={workspace.id} value={workspace.id}>
+              {workspace.name}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+      <Button asChild variant="ghost" size="sm" title="Create a workspace">
+        <Link href="/workspaces/new">
+          <Plus />
+          New
+        </Link>
+      </Button>
+    </div>
+  );
+});

package/registry/admin-apps/nextjs/variants/workspaces/src/lib/ability.ts

@@ -0,0 +1,101 @@
+import { Ability, AbilityBuilder } from "@casl/ability";
+import type { CurrentUser } from "@simple-auth-kit/auth-client";
+
+/**
+ * The one place the console decides what the signed-in user may do *in the active workspace*.
+ * Every screen asks this module and nothing else — no page reads `currentUser.permissions` (or
+ * `roles`) directly — so there is a single seam to move when the backend changes how it reports
+ * authority.
+ *
+ * Authority here is per-workspace: `/auth/me` answers with the roles and permissions of the
+ * membership named by `X-Workspace-Id`, so switching workspaces re-reads it (see
+ * `WorkspaceStore`) and this ability is rebuilt from the new answer. The same user can be an
+ * administrator in one workspace and an ordinary member in the next.
+ *
+ * ── When `/auth/me` grows `rules` ──────────────────────────────────────────────────────────
+ * The backend is about to serialize the caller's real CASL rules with `packRules` from
+ * `@casl/ability/extra` and return them as `CurrentUser.rules`. When that lands, the switch is
+ * this file alone:
+ *
+ *   import { unpackRules } from "@casl/ability/extra";
+ *   export function buildAbility(user: CurrentUser | null): AppAbility {
+ *     return new Ability(user ? unpackRules(user.rules) : []);
+ *   }
+ *
+ * `hasPermission` and every call site below it keep working unchanged, because they already
+ * phrase the question as "can I do this", not "is this string in that array". Until the field
+ * exists we build the same shape of ability out of `permissions`, which is what the server's
+ * AbilityGuard checks today — so the two cannot disagree.
+ */
+
+/** Permission keys are atomic capability flags, not action/subject pairs — see `PERMISSIONS`. */
+export type AppAbility = Ability<string>;
+
+/**
+ * The workspace backend's permission catalog (`rbac.defaults.ts`), mirrored here so a screen
+ * names a capability rather than spelling a string. These are exactly the keys the server's
+ * `@CheckAbility` decorators demand: hiding a control on one of them and getting a 403 from
+ * the matching route are the same fact, reported twice.
+ *
+ * `membersManage` is the one key the plain backend has no equivalent for — adding and removing
+ * workspace members is a capability only this variant has.
+ */
+export const PERMISSIONS = {
+  usersRead: "users:read",
+  usersManage: "users:manage",
+  usersBlock: "users:block",
+  rolesManage: "roles:manage",
+  rolesAssign: "roles:assign",
+  permissionsRead: "permissions:read",
+  permissionsDefine: "permissions:define",
+  permissionsGrant: "permissions:grant",
+  auditLogRead: "audit-log:read",
+  membersManage: "members:manage",
+  countriesRead: "countries:read",
+  countriesManage: "countries:manage",
+  countriesStatus: "countries:status",
+  customersRead: "customers:read",
+  customersManage: "customers:manage",
+  customersStatus: "customers:status",
+  languagesRead: "languages:read",
+  languagesManage: "languages:manage",
+  languagesStatus: "languages:status",
+} as const;
+
+export type PermissionKey = (typeof PERMISSIONS)[keyof typeof PERMISSIONS];
+
+/** The roles screen carries three independent capabilities; any one of them is worth opening it for. */
+export const ROLES_SCREEN_PERMISSIONS: readonly PermissionKey[] = [
+  PERMISSIONS.rolesManage,
+  PERMISSIONS.rolesAssign,
+  PERMISSIONS.permissionsGrant,
+];
+
+/**
+ * Permission keys ("users:block") aren't real action:subject pairs, so we don't model CASL
+ * subjects at all — `Ability<string>` treats each key as its own atomic "can I do this" flag.
+ *
+ * There is deliberately no role-name shortcut here. The server grants authority from permissions
+ * only — a role called "admin" that carries nothing in this workspace gets the same 403 as no
+ * role at all — so a wildcard for `roles.includes("admin")` would make the console promise what
+ * the server refuses.
+ */
+export function buildAbility(user: CurrentUser | null): AppAbility {
+  const { can, build } = new AbilityBuilder<AppAbility>(Ability);
+  for (const permission of user?.permissions ?? []) can(permission);
+  return build();
+}
+
+export function hasPermission(ability: AppAbility, permissionKey: PermissionKey): boolean {
+  return ability.can(permissionKey);
+}
+
+/** For a screen that several capabilities can each open on their own — see the roles screen. */
+export function hasAnyPermission(ability: AppAbility, permissionKeys: readonly PermissionKey[]): boolean {
+  return permissionKeys.some((key) => ability.can(key));
+}
+
+/** The tooltip a disabled control carries, so "why is this greyed out" is answerable in place. */
+export function missingPermissionHint(permissionKey: PermissionKey): string {
+  return `You need the "${permissionKey}" permission in this workspace to do this.`;
+}

package/registry/admin-apps/nextjs/variants/workspaces/src/lib/active-workspace.ts

@@ -0,0 +1,38 @@
+"use client";
+
+import { deleteCookie, getCookie, setCookie } from "cookies-next/client";
+
+/**
+ * Where "which workspace am I in" actually lives.
+ *
+ * `AuthClient` deliberately does not own this: it takes a resolver function and calls it per
+ * request, exactly as it takes a `TokenStorage` rather than deciding where tokens are kept. So
+ * this module is the app's answer, and `WorkspaceStore` is the observable view of it — the store
+ * writes here, and the client reads here, which is why switching workspaces takes effect on the
+ * very next call without anything having to re-wire the client.
+ *
+ * A cookie rather than component state, so a reload lands you back in the workspace you were in.
+ */
+const COOKIE_NAME = "simple_auth_kit_workspace";
+const COOKIE_MAX_AGE_SECONDS = 60 * 60 * 24 * 365;
+
+/** Read once, then kept in memory: the resolver runs on every scoped request. */
+let cached: string | null | undefined;
+
+export function getActiveWorkspaceId(): string | null {
+  // Client components are rendered on the server for the first paint, where there is no
+  // document to read. No workspace then, which is correct — nothing fetches during that render.
+  if (typeof document === "undefined") return null;
+  if (cached === undefined) {
+    const raw = getCookie(COOKIE_NAME);
+    cached = typeof raw === "string" && raw.length > 0 ? raw : null;
+  }
+  return cached;
+}
+
+export function setActiveWorkspaceId(workspaceId: string | null): void {
+  cached = workspaceId;
+  if (typeof document === "undefined") return;
+  if (workspaceId) setCookie(COOKIE_NAME, workspaceId, { maxAge: COOKIE_MAX_AGE_SECONDS, sameSite: "lax", path: "/" });
+  else deleteCookie(COOKIE_NAME, { path: "/" });
+}

package/registry/admin-apps/nextjs/variants/workspaces/src/lib/auth-client.ts

@@ -0,0 +1,17 @@
+import { AuthClient } from "@simple-auth-kit/auth-client";
+import { getActiveWorkspaceId } from "./active-workspace";
+import { AUTH_API_URL } from "./env";
+import { cookieTokenStorage } from "./token-storage";
+
+// One client for the whole app — cheap to construct, holds no mutable state of its own beyond
+// the injected storage adapter, so a module-level singleton is safe across client components.
+//
+// `workspaceId` is a resolver, not a fixed string: it is read fresh on every workspace-scoped
+// call, so changing the active workspace in the switcher changes what the next request is scoped
+// to with nothing to re-wire. Which calls carry `X-Workspace-Id` is not decided here and cannot
+// be — inside the client only `scopedRequest()` can send it, and `request()` has no way to.
+export const authClient = new AuthClient({
+  baseUrl: AUTH_API_URL,
+  storage: cookieTokenStorage,
+  workspaceId: getActiveWorkspaceId,
+});

package/registry/admin-apps/nextjs/variants/workspaces/src/lib/env.ts

@@ -0,0 +1,4 @@
+// The backend base URL is public by design — the browser talks to it directly with a Bearer
+// token, there's no server-side secret in this app to protect (see plan/README.md decision log:
+// frontend-managed cookies, not backend-issued httpOnly ones).
+export const AUTH_API_URL = process.env.NEXT_PUBLIC_AUTH_API_URL ?? "http://localhost:3005";

package/registry/admin-apps/nextjs/variants/workspaces/src/lib/stores/auth-store.ts

@@ -0,0 +1,139 @@
+"use client";
+
+import { makeAutoObservable, runInAction } from "mobx";
+import { AuthApiError, type CurrentUser, type SessionSummary } from "@simple-auth-kit/auth-client";
+import { authClient } from "../auth-client";
+
+export type LoginOutcome = { status: "success" } | { status: "twoFactorRequired"; challengeToken: string };
+
+export class AuthStore {
+  currentUser: CurrentUser | null = null;
+  status: "idle" | "initializing" | "ready" = "idle";
+
+  constructor() {
+    makeAutoObservable(this, {}, { autoBind: true });
+  }
+
+  get isAuthenticated(): boolean {
+    return this.currentUser !== null;
+  }
+
+  /** Runs once on app mount: if a cached token pair exists, hydrate `currentUser` from it. */
+  async initialize(): Promise<void> {
+    if (this.status !== "idle") return;
+    this.status = "initializing";
+    const hasTokens = await authClient.isAuthenticated();
+    if (!hasTokens) {
+      runInAction(() => {
+        this.status = "ready";
+      });
+      return;
+    }
+    try {
+      const me = await authClient.me();
+      runInAction(() => {
+        this.currentUser = me;
+        this.status = "ready";
+      });
+    } catch {
+      runInAction(() => {
+        this.currentUser = null;
+        this.status = "ready";
+      });
+    }
+  }
+
+  /** Re-fetches `/auth/me` — used after anything that can change roles/permissions/2FA status. */
+  async refreshCurrentUser(): Promise<void> {
+    const me = await authClient.me();
+    runInAction(() => {
+      this.currentUser = me;
+    });
+  }
+
+  /**
+   * 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 `proxy.ts` makes in the base admin-nextjs app — 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 me = await authClient.me();
+      runInAction(() => {
+        this.currentUser = me;
+      });
+      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 authClient.signup(input);
+    await this.refreshCurrentUser();
+  }
+
+  async login(input: { identifier: string; password: string }): Promise<LoginOutcome> {
+    const result = await authClient.login(input);
+    if ("twoFactorRequired" in result) {
+      return { status: "twoFactorRequired", challengeToken: result.challengeToken };
+    }
+    await this.refreshCurrentUser();
+    return { status: "success" };
+  }
+
+  async loginTwoFactor(input: { challengeToken: string; code: string }): Promise<void> {
+    await authClient.loginTwoFactor(input);
+    await this.refreshCurrentUser();
+  }
+
+  async logout(): Promise<void> {
+    try {
+      await authClient.logout();
+    } finally {
+      runInAction(() => {
+        this.currentUser = null;
+      });
+    }
+  }
+
+  async logoutAll(): Promise<void> {
+    try {
+      await authClient.logoutAll();
+    } finally {
+      runInAction(() => {
+        this.currentUser = null;
+      });
+    }
+  }
+
+  async listSessions(): Promise<SessionSummary[]> {
+    return authClient.sessions();
+  }
+
+  async enrollTwoFactor(): Promise<{ secret: string; provisioningUri: string }> {
+    return authClient.enrollTwoFactor();
+  }
+
+  async confirmTwoFactor(code: string): Promise<{ backupCodes: string[] }> {
+    const result = await authClient.confirmTwoFactor(code);
+    await this.refreshCurrentUser(); // picks up the now-true `twoFactorEnabled` flag
+    return result;
+  }
+
+  async disableTwoFactor(code: string): Promise<void> {
+    await authClient.disableTwoFactor(code);
+    await this.refreshCurrentUser(); // picks up the now-false `twoFactorEnabled` flag
+  }
+}

package/registry/admin-apps/nextjs/variants/workspaces/src/lib/stores/store-context.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { AbilityProvider } from "@casl/react";
+import { observer } from "mobx-react-lite";
+import { createContext, useContext, useEffect, useState, type ReactNode } from "react";
+import { buildAbility } from "../ability";
+import { AuthStore } from "./auth-store";
+import { WorkspaceStore } from "./workspace-store";
+
+interface Stores {
+  auth: AuthStore;
+  workspace: WorkspaceStore;
+}
+
+const StoresContext = createContext<Stores | null>(null);
+
+function useStores(): Stores {
+  const stores = useContext(StoresContext);
+  if (!stores) throw new Error("useAuthStore/useWorkspaceStore must be used within <AppProviders>");
+  return stores;
+}
+
+export function useAuthStore(): AuthStore {
+  return useStores().auth;
+}
+
+export function useWorkspaceStore(): WorkspaceStore {
+  return useStores().workspace;
+}
+
+/**
+ * Owns the app's stores and re-derives the CASL ability from `auth.currentUser` on every change.
+ *
+ * The two stores are ordered, not independent: `/auth/me` answers with the roles and permissions
+ * of *the workspace the request named*, so the workspace list has to be settled before the
+ * identity means anything. Signing in therefore runs `auth.initialize()`, then
+ * `workspace.load()`, which picks an active workspace and re-reads the identity inside it.
+ * Wrapped in `observer` so the `AbilityProvider` value follows `currentUser` as that happens.
+ */
+export const AppProviders = observer(function AppProviders({ children }: { children: ReactNode }) {
+  const [stores] = useState<Stores>(() => {
+    const auth = new AuthStore();
+    return { auth, workspace: new WorkspaceStore(auth) };
+  });
+
+  useEffect(() => {
+    void stores.auth.initialize();
+  }, [stores]);
+
+  useEffect(() => {
+    if (stores.auth.status !== "ready") return;
+    if (stores.auth.isAuthenticated) {
+      if (stores.workspace.status === "idle") void stores.workspace.load();
+    } else if (stores.workspace.status !== "idle") {
+      stores.workspace.reset();
+    }
+  }, [stores, stores.auth.status, stores.auth.isAuthenticated, stores.workspace.status]);
+
+  const ability = buildAbility(stores.auth.currentUser);
+
+  return (
+    <StoresContext.Provider value={stores}>
+      <AbilityProvider value={ability}>{children}</AbilityProvider>
+    </StoresContext.Provider>
+  );
+});

package/registry/admin-apps/nextjs/variants/workspaces/src/lib/stores/workspace-store.ts

@@ -0,0 +1,89 @@
+"use client";
+
+import { makeAutoObservable, runInAction } from "mobx";
+import type { WorkspaceSummary } from "@simple-auth-kit/auth-client";
+import { getActiveWorkspaceId, setActiveWorkspaceId } from "../active-workspace";
+import { authClient } from "../auth-client";
+import { AuthStore } from "./auth-store";
+
+/**
+ * The workspaces this user belongs to, and which one the console is currently acting in.
+ *
+ * Roles and permissions live on a *membership*, not on the user, so they are different in every
+ * workspace — which is why every switch re-reads `/auth/me`. Without that the console would keep
+ * showing the controls you had in the workspace you just left, and the server would answer 403.
+ */
+export class WorkspaceStore {
+  workspaces: WorkspaceSummary[] = [];
+  activeWorkspaceId: string | null = null;
+  status: "idle" | "loading" | "ready" = "idle";
+
+  constructor(private readonly auth: AuthStore) {
+    makeAutoObservable(this, {}, { autoBind: true });
+    this.activeWorkspaceId = getActiveWorkspaceId();
+  }
+
+  get activeWorkspace(): WorkspaceSummary | null {
+    return this.workspaces.find((workspace) => workspace.id === this.activeWorkspaceId) ?? null;
+  }
+
+  /** True once we know the answer and it is "none" — the empty state, not a still-loading one. */
+  get hasNoWorkspaces(): boolean {
+    return this.status === "ready" && this.workspaces.length === 0;
+  }
+
+  /** Runs after sign-in: lists the user's workspaces and settles on one to act in. */
+  async load(): Promise<void> {
+    this.status = "loading";
+    try {
+      const workspaces = await authClient.listWorkspaces();
+      const stillAMember = workspaces.some((workspace) => workspace.id === this.activeWorkspaceId);
+      // Falling back to the first one keeps a stale cookie (a workspace you were removed from,
+      // or one from another account on this browser) from scoping every call to a 403.
+      const nextActive = stillAMember ? this.activeWorkspaceId : (workspaces[0]?.id ?? null);
+      setActiveWorkspaceId(nextActive);
+      runInAction(() => {
+        this.workspaces = workspaces;
+        this.activeWorkspaceId = nextActive;
+        this.status = "ready";
+      });
+      if (nextActive !== null) await this.auth.refreshCurrentUser();
+    } catch (err) {
+      runInAction(() => {
+        this.status = "ready";
+      });
+      throw err;
+    }
+  }
+
+  /** Switching workspace changes what you may do, so the identity is re-read before anything renders against it. */
+  async setActive(workspaceId: string): Promise<void> {
+    if (workspaceId === this.activeWorkspaceId) return;
+    setActiveWorkspaceId(workspaceId);
+    runInAction(() => {
+      this.activeWorkspaceId = workspaceId;
+    });
+    await this.auth.refreshCurrentUser();
+  }
+
+  /** The creator is made an administrator of the new workspace by the backend, so we switch straight into it. */
+  async create(name: string): Promise<WorkspaceSummary> {
+    const workspace = await authClient.createWorkspace(name);
+    runInAction(() => {
+      this.workspaces = [...this.workspaces, workspace];
+      this.activeWorkspaceId = workspace.id;
+      this.status = "ready";
+    });
+    setActiveWorkspaceId(workspace.id);
+    await this.auth.refreshCurrentUser();
+    return workspace;
+  }
+
+  /** On sign-out: the next person to use this browser must not inherit the last one's workspace. */
+  reset(): void {
+    setActiveWorkspaceId(null);
+    this.workspaces = [];
+    this.activeWorkspaceId = null;
+    this.status = "idle";
+  }
+}

package/registry/admin-apps/react/shared/components.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "radix-nova",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": false,
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/cn",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "menuColor": "default",
+  "menuAccent": "subtle",
+  "registries": {}
+}

package/registry/admin-apps/react/shared/postcss.config.js

@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+};