@simple-auth-kit/cli 1.0.0

package/registry/admin-apps/react/variants/base/src/lib/ability.ts

@@ -0,0 +1,72 @@
+import { AbilityBuilder, PureAbility } from "@casl/ability";
+import { createContextualCan } from "@casl/react";
+import type { CurrentUser } from "@simple-auth-kit/auth-client";
+import { createContext, useContext } from "react";
+
+/**
+ * The one place an `Ability` is constructed. Everything else in the app asks
+ * `ability.can(permission, "permission")` and never looks at `currentUser.permissions` itself,
+ * so the day the backend starts serving CASL rules directly this file is the only one that
+ * changes — see `abilityFor` below.
+ */
+export type AppAbility = PureAbility<[string, "permission"]>;
+
+/**
+ * The backend's permission catalog (`rbac.defaults.ts` in every combo), named here so a typo is
+ * a missing import rather than a silently-ungated button. Each key gates a real route: hiding
+ * an action the caller can't perform and getting a 403 if they call it anyway are the same
+ * rule, read from the same list.
+ */
+export const PERMISSIONS = {
+  usersRead: "users:read",
+  usersBlock: "users:block",
+  usersManage: "users:manage",
+  rolesManage: "roles:manage",
+  rolesAssign: "roles:assign",
+  permissionsGrant: "permissions:grant",
+  permissionsRead: "permissions:read",
+  permissionsDefine: "permissions:define",
+  auditLogRead: "audit-log:read",
+  customersRead: "customers:read",
+  customersManage: "customers:manage",
+  customersStatus: "customers:status",
+  countriesRead: "countries:read",
+  countriesManage: "countries:manage",
+  countriesStatus: "countries:status",
+  languagesRead: "languages:read",
+  languagesManage: "languages:manage",
+  languagesStatus: "languages:status",
+} as const;
+
+export type PermissionKey = (typeof PERMISSIONS)[keyof typeof PERMISSIONS];
+
+/**
+ * `GET /auth/me` answers with a flat `permissions` array — one opaque `noun:verb` key per
+ * capability, not an action/subject pair — so each key becomes an allowed "action" on a single
+ * "permission" subject and `can(key, "permission")` is the only question this ability answers.
+ *
+ * **When `/auth/me` grows its `rules` field** (CASL rules serialized with `packRules` from
+ * `@casl/ability/extra`), replace the body of this function with
+ * `new PureAbility(unpackRules(user.rules))` and delete the builder loop. Nothing else in the
+ * app moves: call sites already ask this ability rather than reading `permissions`, and the
+ * `PERMISSIONS` keys above stay valid as the actions those rules carry. Until the field exists,
+ * `permissions` is the input.
+ */
+export function abilityFor(user: CurrentUser | null): AppAbility {
+  const { can, build } = new AbilityBuilder<AppAbility>(PureAbility);
+  for (const permission of user?.permissions ?? []) can(permission, "permission");
+  return build();
+}
+
+export const AbilityContext = createContext<AppAbility>(abilityFor(null));
+
+export const Can = createContextualCan(AbilityContext.Consumer);
+
+export function useAbility(): AppAbility {
+  return useContext(AbilityContext);
+}
+
+/** True when the ability carries at least one of `permissions` — the "can they open this page at all" question. */
+export function canAny(ability: AppAbility, permissions: readonly string[]): boolean {
+  return permissions.some((permission) => ability.can(permission, "permission"));
+}

package/registry/admin-apps/react/variants/base/src/lib/auth-client.ts

@@ -0,0 +1,9 @@
+import { AuthClient } from "@simple-auth-kit/auth-client";
+import { cookieTokenStorage } from "./token-storage";
+
+const baseUrl = import.meta.env["VITE_AUTH_API_URL"] ?? "http://localhost:3001";
+
+export const authClient = new AuthClient({
+  baseUrl,
+  storage: cookieTokenStorage,
+});

package/registry/admin-apps/react/variants/base/src/lib/theme.tsx

@@ -0,0 +1,64 @@
+import { createContext, useContext, useEffect, useMemo, useState, type ReactNode } from "react";
+
+export type Theme = "light" | "dark" | "system";
+
+const STORAGE_KEY = "theme";
+
+interface ThemeContextValue {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+}
+
+const ThemeContext = createContext<ThemeContextValue | null>(null);
+
+function getStoredTheme(): Theme {
+  if (typeof window === "undefined") return "system";
+  const stored = window.localStorage.getItem(STORAGE_KEY);
+  return stored === "light" || stored === "dark" || stored === "system" ? stored : "system";
+}
+
+function systemPrefersDark(): boolean {
+  return typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+
+function applyResolvedTheme(theme: Theme) {
+  const isDark = theme === "dark" || (theme === "system" && systemPrefersDark());
+  document.documentElement.classList.toggle("dark", isDark);
+}
+
+/**
+ * Vite/React Router equivalent of `next-themes`: plain React state persisted to `localStorage`,
+ * driving a `.dark` class on `<html>` — `"system"` resolves via `matchMedia` and stays in sync
+ * with OS changes while mounted. Keeps the same three-state (`light`/`dark`/`system`) API so
+ * consumers like `ThemeToggle`/`useTheme` need no adaptation.
+ */
+export function ThemeProvider({ children }: { children: ReactNode }) {
+  const [theme, setThemeState] = useState<Theme>(() => getStoredTheme());
+
+  useEffect(() => {
+    applyResolvedTheme(theme);
+  }, [theme]);
+
+  useEffect(() => {
+    if (theme !== "system") return;
+    const media = window.matchMedia("(prefers-color-scheme: dark)");
+    const listener = () => applyResolvedTheme("system");
+    media.addEventListener("change", listener);
+    return () => media.removeEventListener("change", listener);
+  }, [theme]);
+
+  function setTheme(next: Theme) {
+    window.localStorage.setItem(STORAGE_KEY, next);
+    setThemeState(next);
+  }
+
+  const value = useMemo(() => ({ theme, setTheme }), [theme]);
+
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
+}
+
+export function useTheme(): ThemeContextValue {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) throw new Error("useTheme must be used within a ThemeProvider");
+  return ctx;
+}

package/registry/admin-apps/react/variants/base/src/lib/token-storage.ts

@@ -0,0 +1,34 @@
+import { deleteCookie, getCookie, setCookie } from "cookies-next/client";
+import type { AuthTokens, TokenStorage } from "@simple-auth-kit/auth-client";
+
+const COOKIE_NAME = "simple-auth-kit-tokens";
+
+/**
+ * Frontend-managed cookie storage for the shared AuthClient — per the project's resolved
+ * decision, this app caches tokens client-side in a (non-httpOnly) cookie rather than relying
+ * on backend-issued cookies. The backend's `Authorization: Bearer` contract is unchanged; this
+ * is purely where the SPA keeps the token between page loads/tabs.
+ */
+export const cookieTokenStorage: TokenStorage = {
+  async get(): Promise<AuthTokens | null> {
+    const raw = getCookie(COOKIE_NAME);
+    if (!raw || typeof raw !== "string") return null;
+    try {
+      return JSON.parse(raw) as AuthTokens;
+    } catch {
+      return null;
+    }
+  },
+
+  async set(tokens: AuthTokens): Promise<void> {
+    setCookie(COOKIE_NAME, JSON.stringify(tokens), {
+      path: "/",
+      maxAge: 60 * 60 * 24 * 30, // 30 days — refresh() rotates the actual token lifetimes server-side
+      sameSite: "lax",
+    });
+  },
+
+  async clear(): Promise<void> {
+    deleteCookie(COOKIE_NAME, { path: "/" });
+  },
+};

package/registry/admin-apps/react/variants/base/src/main.tsx

@@ -0,0 +1,24 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
+import { App } from "./App";
+import { StoreProvider } from "./stores/store-context";
+import { QueryProvider } from "./lib/query-client";
+import { ThemeProvider } from "./lib/theme";
+import { Toaster } from "./components/ui/sonner";
+import "./index.css";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <ThemeProvider>
+      <BrowserRouter>
+        <QueryProvider>
+          <StoreProvider>
+            <App />
+          </StoreProvider>
+          <Toaster position="top-right" closeButton />
+        </QueryProvider>
+      </BrowserRouter>
+    </ThemeProvider>
+  </StrictMode>,
+);

package/registry/admin-apps/react/variants/base/src/pages/AccountPage.tsx

@@ -0,0 +1,368 @@
+import { type FormEvent, useEffect, useState } from "react";
+import { observer } from "mobx-react-lite";
+import { QRCodeSVG } from "qrcode.react";
+import { AuthApiError } from "@simple-auth-kit/auth-client";
+import { toast } from "sonner";
+import { useAuthStore } from "@/stores/store-context";
+import { authClient } from "@/lib/auth-client";
+import { PhotoUpload } from "@/components/photo-upload";
+import { ChangePasswordDialog } from "@/components/change-password-dialog";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+
+function apiErrorMessage(err: unknown, fallback: string): string {
+  return err instanceof AuthApiError ? err.message : fallback;
+}
+
+interface ProfileForm {
+  firstName: string;
+  lastName: string;
+  displayName: string;
+  phone: string;
+  username: string;
+}
+
+function toProfileForm(user: {
+  firstName: string | null;
+  lastName: string | null;
+  displayName: string | null;
+  phone: string | null;
+  username: string | null;
+}): ProfileForm {
+  return {
+    firstName: user.firstName ?? "",
+    lastName: user.lastName ?? "",
+    displayName: user.displayName ?? "",
+    phone: user.phone ?? "",
+    username: user.username ?? "",
+  };
+}
+
+function initialsOf(label: string): string {
+  return (
+    label
+      .split(/[@.\s]+/)
+      .filter(Boolean)
+      .slice(0, 2)
+      .map((part) => part[0]?.toUpperCase())
+      .join("") || "?"
+  );
+}
+
+export const AccountPage = observer(function AccountPage() {
+  const store = useAuthStore();
+  const user = store.currentUser;
+
+  const [form, setForm] = useState<ProfileForm | null>(user ? toProfileForm(user) : null);
+  const [profileSaving, setProfileSaving] = useState(false);
+  const [changePasswordOpen, setChangePasswordOpen] = useState(false);
+  const [logoutAllBusy, setLogoutAllBusy] = useState(false);
+
+  useEffect(() => {
+    store.loadSessions().catch((err) => toast.error(apiErrorMessage(err, "Couldn't load active sessions.")));
+  }, [store]);
+
+  async function handlePhotoChange(photo: string | null) {
+    try {
+      const updated = await authClient.updateProfile({ photo });
+      setForm(toProfileForm(updated));
+      await store.refreshCurrentUser();
+      toast.success(photo ? "Photo updated." : "Photo removed.");
+    } catch (err) {
+      toast.error(apiErrorMessage(err, "Couldn't update the photo. Try again."));
+    }
+  }
+
+  async function handleProfileSubmit(event: FormEvent) {
+    event.preventDefault();
+    if (!form) return;
+    setProfileSaving(true);
+    try {
+      const updated = await authClient.updateProfile({
+        firstName: form.firstName || null,
+        lastName: form.lastName || null,
+        displayName: form.displayName || null,
+        phone: form.phone || null,
+        username: form.username || null,
+      });
+      setForm(toProfileForm(updated));
+      await store.refreshCurrentUser();
+      toast.success("Profile saved.");
+    } catch (err) {
+      toast.error(apiErrorMessage(err, "Couldn't save your profile. Try again."));
+    } finally {
+      setProfileSaving(false);
+    }
+  }
+
+  async function handleLogoutAll() {
+    setLogoutAllBusy(true);
+    try {
+      await store.logoutAll();
+      toast.success("Signed out of all sessions. You'll need to sign in again.");
+    } catch (err) {
+      toast.error(apiErrorMessage(err, "Couldn't sign out of all sessions. Try again."));
+    } finally {
+      setLogoutAllBusy(false);
+    }
+  }
+
+  if (!user || !form) return null;
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div>
+        <h1 className="text-2xl font-semibold">My account</h1>
+        <p className="text-sm text-muted-foreground">Session details, active sessions, and two-factor authentication.</p>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">Profile</CardTitle>
+          <CardDescription>Your own info — no admin permission needed to change any of this.</CardDescription>
+        </CardHeader>
+        <CardContent className="flex flex-col gap-4">
+          <PhotoUpload photo={user.photo} fallback={initialsOf(user.displayName || user.email)} onChange={handlePhotoChange} />
+
+          <form onSubmit={handleProfileSubmit} className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+            <div className="flex flex-col gap-1.5">
+              <Label htmlFor="account-firstName">First name</Label>
+              <Input id="account-firstName" value={form.firstName} onChange={(e) => setForm({ ...form, firstName: e.target.value })} />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label htmlFor="account-lastName">Last name</Label>
+              <Input id="account-lastName" value={form.lastName} onChange={(e) => setForm({ ...form, lastName: e.target.value })} />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label htmlFor="account-displayName">Display name</Label>
+              <Input id="account-displayName" value={form.displayName} onChange={(e) => setForm({ ...form, displayName: e.target.value })} />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label htmlFor="account-username">Username</Label>
+              <Input id="account-username" value={form.username} onChange={(e) => setForm({ ...form, username: e.target.value })} />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label htmlFor="account-phone">Phone</Label>
+              <Input id="account-phone" value={form.phone} onChange={(e) => setForm({ ...form, phone: e.target.value })} />
+            </div>
+            <div className="flex items-end gap-2">
+              <Button type="submit" disabled={profileSaving}>
+                {profileSaving ? "Saving…" : "Save changes"}
+              </Button>
+              <Button type="button" variant="outline" onClick={() => setChangePasswordOpen(true)}>
+                Change password
+              </Button>
+            </div>
+          </form>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">Session</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <dl className="grid grid-cols-[max-content_1fr] gap-x-6 gap-y-2 text-sm">
+            <dt className="text-muted-foreground">User ID</dt>
+            <dd className="font-mono">{user.sub}</dd>
+            <dt className="text-muted-foreground">Session ID</dt>
+            <dd className="font-mono">{user.sessionId}</dd>
+            <dt className="text-muted-foreground">Roles</dt>
+            <dd className="flex flex-wrap gap-1">
+              {user.roles.map((role) => (
+                <Badge key={role} variant="secondary">
+                  {role}
+                </Badge>
+              ))}
+            </dd>
+            <dt className="text-muted-foreground">Permissions</dt>
+            <dd className="flex flex-wrap gap-1">
+              {user.permissions.length === 0 ? (
+                <span className="text-muted-foreground">None</span>
+              ) : (
+                user.permissions.map((permission) => (
+                  <Badge key={permission} variant="outline">
+                    {permission}
+                  </Badge>
+                ))
+              )}
+            </dd>
+          </dl>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">Active sessions</CardTitle>
+          <CardDescription>Devices/browsers currently signed in as you.</CardDescription>
+        </CardHeader>
+        <CardContent className="flex flex-col gap-4">
+          {store.sessions.length === 0 ? (
+            <p className="text-sm text-muted-foreground">No active sessions.</p>
+          ) : (
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Session ID</TableHead>
+                  <TableHead>User agent</TableHead>
+                  <TableHead>IP</TableHead>
+                  <TableHead>Created</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {store.sessions.map((session) => (
+                  <TableRow key={session.id}>
+                    <TableCell className="font-mono text-xs">
+                      {session.id === user.sessionId ? <Badge variant="secondary">this device</Badge> : session.id.slice(0, 8)}
+                    </TableCell>
+                    <TableCell className="max-w-[16rem] truncate text-muted-foreground">{session.userAgent ?? "—"}</TableCell>
+                    <TableCell className="text-muted-foreground">{session.ip ?? "—"}</TableCell>
+                    <TableCell className="text-muted-foreground">{new Date(session.createdAt).toLocaleString()}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          )}
+          <Button variant="destructive" className="w-fit" disabled={logoutAllBusy} onClick={() => void handleLogoutAll()}>
+            {logoutAllBusy ? "Signing out…" : "Sign out of all sessions"}
+          </Button>
+        </CardContent>
+      </Card>
+
+      <TwoFactorCard />
+
+      <ChangePasswordDialog open={changePasswordOpen} onClose={() => setChangePasswordOpen(false)} />
+    </div>
+  );
+});
+
+const TwoFactorCard = observer(function TwoFactorCard() {
+  const store = useAuthStore();
+  const user = store.currentUser;
+
+  const [enrollment, setEnrollment] = useState<{ secret: string; provisioningUri: string } | null>(null);
+  const [confirmCode, setConfirmCode] = useState("");
+  const [backupCodes, setBackupCodes] = useState<string[] | null>(null);
+  const [disableCode, setDisableCode] = useState("");
+  const [showDisableForm, setShowDisableForm] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+
+  if (!user) return null;
+
+  async function handleEnroll() {
+    setSubmitting(true);
+    try {
+      const result = await store.enrollTwoFactor();
+      setEnrollment(result);
+    } catch (err) {
+      toast.error(apiErrorMessage(err, "Couldn't start 2FA enrollment. Try again."));
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  async function handleConfirm(event: FormEvent) {
+    event.preventDefault();
+    setSubmitting(true);
+    try {
+      const result = await store.confirmTwoFactor(confirmCode);
+      setBackupCodes(result.backupCodes);
+      setEnrollment(null);
+      setConfirmCode("");
+      toast.success("Two-factor authentication enabled.");
+    } catch (err) {
+      toast.error(apiErrorMessage(err, "Couldn't confirm this code. Try again."));
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  async function handleDisable(event: FormEvent) {
+    event.preventDefault();
+    setSubmitting(true);
+    try {
+      await store.disableTwoFactor(disableCode);
+      setShowDisableForm(false);
+      setDisableCode("");
+      toast.success("Two-factor authentication disabled.");
+    } catch (err) {
+      toast.error(apiErrorMessage(err, "Couldn't disable 2FA. Try again."));
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-base">Two-factor authentication</CardTitle>
+        <CardDescription>
+          {user.twoFactorEnabled ? "Enabled — a code is required at every login." : "Not enabled. Add an authenticator app for extra security."}
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-4">
+        {backupCodes ? (
+          <div className="rounded-md border border-border bg-muted/50 p-4">
+            <p className="mb-2 text-sm font-medium">Save these backup codes — shown only once.</p>
+            <div className="grid grid-cols-2 gap-1 font-mono text-sm">
+              {backupCodes.map((code) => (
+                <span key={code}>{code}</span>
+              ))}
+            </div>
+            <Button size="sm" variant="outline" className="mt-3" onClick={() => setBackupCodes(null)}>
+              Done
+            </Button>
+          </div>
+        ) : user.twoFactorEnabled ? (
+          showDisableForm ? (
+            <form onSubmit={handleDisable} className="flex flex-col gap-3">
+              <div className="flex flex-col gap-1.5 max-w-xs">
+                <Label htmlFor="disable-code">Enter a code to confirm</Label>
+                <Input id="disable-code" value={disableCode} onChange={(e) => setDisableCode(e.target.value)} autoFocus required />
+              </div>
+              <div className="flex gap-2">
+                <Button type="submit" variant="destructive" disabled={submitting}>
+                  {submitting ? "Disabling…" : "Confirm disable"}
+                </Button>
+                <Button type="button" variant="outline" onClick={() => setShowDisableForm(false)}>
+                  Cancel
+                </Button>
+              </div>
+            </form>
+          ) : (
+            <Button variant="destructive" className="self-start" onClick={() => setShowDisableForm(true)}>
+              Disable 2FA
+            </Button>
+          )
+        ) : enrollment ? (
+          <form onSubmit={handleConfirm} className="flex flex-col gap-4">
+            <div className="flex flex-col items-start gap-3 sm:flex-row sm:items-center">
+              <div className="rounded-md border border-border bg-white p-3">
+                <QRCodeSVG value={enrollment.provisioningUri} size={160} />
+              </div>
+              <div className="flex flex-col gap-1 text-sm text-muted-foreground">
+                <p>Scan with your authenticator app, or enter this secret manually:</p>
+                <code className="rounded bg-muted px-2 py-1 font-mono text-xs">{enrollment.secret}</code>
+              </div>
+            </div>
+            <div className="flex flex-col gap-1.5 max-w-xs">
+              <Label htmlFor="confirm-code">Enter the 6-digit code to confirm</Label>
+              <Input id="confirm-code" value={confirmCode} onChange={(e) => setConfirmCode(e.target.value)} autoFocus required />
+            </div>
+            <Button type="submit" disabled={submitting} className="self-start">
+              {submitting ? "Confirming…" : "Confirm & enable"}
+            </Button>
+          </form>
+        ) : (
+          <Button onClick={() => void handleEnroll()} disabled={submitting} className="self-start">
+            {submitting ? "Starting…" : "Enable 2FA"}
+          </Button>
+        )}
+      </CardContent>
+    </Card>
+  );
+});