@simple-auth-kit/cli 1.0.0

package/registry/admin-apps/nextjs/variants/workspaces/src/app/page.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { observer } from "mobx-react-lite";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+import { useAuthStore, useWorkspaceStore } from "@/lib/stores/store-context";
+
+/**
+ * The console's front door. It sends you to the first screen you can actually open: creating a
+ * workspace if you have none, then the dashboard otherwise — its cards are individually
+ * permission-gated, so a low-privilege member sees fewer of them rather than hitting a wall.
+ */
+export default observer(function RootPage() {
+  const store = useAuthStore();
+  const workspaces = useWorkspaceStore();
+  const router = useRouter();
+
+  useEffect(() => {
+    if (store.status !== "ready") return;
+    if (!store.isAuthenticated) {
+      router.replace("/login");
+      return;
+    }
+    if (workspaces.status !== "ready") return;
+    if (workspaces.hasNoWorkspaces) {
+      router.replace("/workspaces/new");
+      return;
+    }
+    router.replace("/dashboard");
+  }, [store.status, store.isAuthenticated, workspaces.status, workspaces.hasNoWorkspaces, router]);
+
+  return <div className="flex min-h-screen items-center justify-center text-sm text-muted-foreground">Loading…</div>;
+});

package/registry/admin-apps/nextjs/variants/workspaces/src/components/app-sidebar.tsx

@@ -0,0 +1,180 @@
+"use client";
+
+import { useAbility } from "@casl/react";
+import { observer } from "mobx-react-lite";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { ChevronRightIcon, ContactIcon, GlobeIcon, LanguagesIcon, LayoutDashboardIcon, ScrollTextIcon, ShieldCheckIcon, UserPlusIcon, UsersIcon, UsersRoundIcon } from "lucide-react";
+import { NavUser } from "@/components/nav-user";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarRail,
+} from "@/components/ui/sidebar";
+import { PERMISSIONS, ROLES_SCREEN_PERMISSIONS, hasAnyPermission, type AppAbility, type PermissionKey } from "@/lib/ability";
+import { useWorkspaceStore } from "@/lib/stores/store-context";
+
+/**
+ * `requires` lists the permissions that each open the screen on their own — same seam as
+ * `nav.tsx` before it. `needsWorkspace` marks the links that are scoped to the active workspace;
+ * "Members" carries no `requires` because it is gated on membership itself, not an administrative
+ * capability (see `nav.tsx`'s original comment). "Dashboard" needs neither: its cards are
+ * individually permission- and workspace-gated on the page itself. "Users" expands into
+ * `children` — `Add user` needs `usersManage`, a strict superset of `All users`'s `usersRead`, so
+ * it can be hidden on its own without collapsing the parent.
+ */
+const LINKS: Array<{
+  href: string;
+  label: string;
+  icon: typeof UsersIcon;
+  requires?: readonly PermissionKey[];
+  needsWorkspace?: boolean;
+  children?: Array<{ href: string; label: string; requires?: readonly PermissionKey[] }>;
+}> = [
+  { href: "/dashboard", label: "Dashboard", icon: LayoutDashboardIcon },
+  {
+    href: "/users",
+    label: "Users",
+    icon: UsersIcon,
+    requires: [PERMISSIONS.usersRead],
+    needsWorkspace: true,
+    children: [
+      { href: "/users", label: "All users", requires: [PERMISSIONS.usersRead] },
+      { href: "/users/new", label: "Add user", requires: [PERMISSIONS.usersManage] },
+    ],
+  },
+  { href: "/members", label: "Members", icon: UsersRoundIcon, needsWorkspace: true },
+  { href: "/roles", label: "Roles & permissions", icon: ShieldCheckIcon, requires: ROLES_SCREEN_PERMISSIONS, needsWorkspace: true },
+  { href: "/permissions", label: "Permissions", icon: ShieldCheckIcon, requires: [PERMISSIONS.permissionsRead], needsWorkspace: true },
+  { href: "/audit-log", label: "Audit log", icon: ScrollTextIcon, requires: [PERMISSIONS.auditLogRead], needsWorkspace: true },
+  {
+    href: "/customers",
+    label: "Customers",
+    icon: ContactIcon,
+    requires: [PERMISSIONS.customersRead],
+    needsWorkspace: true,
+    children: [
+      { href: "/customers", label: "All customers", requires: [PERMISSIONS.customersRead] },
+      { href: "/customers/new", label: "Add customer", requires: [PERMISSIONS.customersManage] },
+    ],
+  },
+  {
+    href: "/countries",
+    label: "Countries",
+    icon: GlobeIcon,
+    requires: [PERMISSIONS.countriesRead],
+    needsWorkspace: true,
+    children: [
+      { href: "/countries", label: "All countries", requires: [PERMISSIONS.countriesRead] },
+      { href: "/countries/new", label: "Add country", requires: [PERMISSIONS.countriesManage] },
+    ],
+  },
+  {
+    href: "/languages",
+    label: "Languages",
+    icon: LanguagesIcon,
+    requires: [PERMISSIONS.languagesRead],
+    needsWorkspace: true,
+    children: [
+      { href: "/languages", label: "All languages", requires: [PERMISSIONS.languagesRead] },
+      { href: "/languages/new", label: "Add language", requires: [PERMISSIONS.languagesManage] },
+    ],
+  },
+];
+
+export const AppSidebar = observer(function AppSidebar() {
+  const ability = useAbility<AppAbility>();
+  const workspaces = useWorkspaceStore();
+  const pathname = usePathname();
+
+  const hasWorkspace = workspaces.activeWorkspaceId !== null;
+  const links = LINKS.filter((link) => (!link.needsWorkspace || hasWorkspace) && (!link.requires || hasAnyPermission(ability, link.requires)))
+    .map((link) => ({ ...link, children: link.children?.filter((child) => !child.requires || hasAnyPermission(ability, child.requires)) }))
+    // A parent with every child hidden by permissions collapses to a plain link.
+    .map((link) => (link.children && link.children.length <= 1 ? { ...link, children: undefined } : link));
+
+  return (
+    <Sidebar collapsible="icon">
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton size="lg" asChild>
+              <Link href="/dashboard">
+                <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                  <ShieldCheckIcon className="size-4" />
+                </div>
+                <div className="grid flex-1 text-left text-sm leading-tight">
+                  <span className="truncate font-medium">simple-auth-kit</span>
+                  <span className="truncate text-xs text-muted-foreground">admin console</span>
+                </div>
+              </Link>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Console</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {links.map((link) =>
+                link.children ? (
+                  <Collapsible key={link.href} asChild defaultOpen={pathname.startsWith(link.href)} className="group/collapsible">
+                    <SidebarMenuItem>
+                      <CollapsibleTrigger asChild>
+                        <SidebarMenuButton tooltip={link.label} isActive={pathname === link.href}>
+                          <link.icon />
+                          <span>{link.label}</span>
+                          <ChevronRightIcon className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+                        </SidebarMenuButton>
+                      </CollapsibleTrigger>
+                      <CollapsibleContent>
+                        <SidebarMenuSub>
+                          {link.children.map((child) => (
+                            <SidebarMenuSubItem key={child.href}>
+                              <SidebarMenuSubButton asChild isActive={pathname === child.href}>
+                                <Link href={child.href}>
+                                  {child.href === "/users/new" ? <UserPlusIcon /> : null}
+                                  <span>{child.label}</span>
+                                </Link>
+                              </SidebarMenuSubButton>
+                            </SidebarMenuSubItem>
+                          ))}
+                        </SidebarMenuSub>
+                      </CollapsibleContent>
+                    </SidebarMenuItem>
+                  </Collapsible>
+                ) : (
+                  <SidebarMenuItem key={link.href}>
+                    <SidebarMenuButton asChild isActive={pathname === link.href} tooltip={link.label}>
+                      <Link href={link.href}>
+                        <link.icon />
+                        <span>{link.label}</span>
+                      </Link>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                ),
+              )}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+      <SidebarFooter>
+        <NavUser />
+      </SidebarFooter>
+      <SidebarRail />
+    </Sidebar>
+  );
+});

package/registry/admin-apps/nextjs/variants/workspaces/src/components/change-password-dialog.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+import { useState, type FormEvent } from "react";
+import { EyeIcon, EyeOffIcon } from "lucide-react";
+import { Alert } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { authClient } from "@/lib/auth-client";
+import { errorMessage } from "@/lib/error";
+
+function PasswordField({
+  id,
+  label,
+  value,
+  onChange,
+}: {
+  id: string;
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+}) {
+  const [visible, setVisible] = useState(false);
+  return (
+    <div className="flex flex-col gap-1.5">
+      <Label htmlFor={id}>{label}</Label>
+      <div className="relative">
+        <Input id={id} type={visible ? "text" : "password"} required value={value} onChange={(e) => onChange(e.target.value)} className="pr-9" />
+        <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>
+    </div>
+  );
+}
+
+export function ChangePasswordDialog({ open, onOpenChange }: { open: boolean; onOpenChange: (open: boolean) => void }) {
+  const [currentPassword, setCurrentPassword] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [notice, setNotice] = useState<string | null>(null);
+  const [submitting, setSubmitting] = useState(false);
+
+  function reset() {
+    setCurrentPassword("");
+    setNewPassword("");
+    setConfirmPassword("");
+    setError(null);
+    setNotice(null);
+  }
+
+  async function handleSubmit(event: FormEvent) {
+    event.preventDefault();
+    setError(null);
+    setNotice(null);
+    if (newPassword !== confirmPassword) {
+      setError("The new password and confirmation don't match.");
+      return;
+    }
+    setSubmitting(true);
+    try {
+      await authClient.changePassword({ currentPassword, newPassword });
+      setNotice("Password changed. Every other session was signed out.");
+      setCurrentPassword("");
+      setNewPassword("");
+      setConfirmPassword("");
+    } catch (err) {
+      setError(errorMessage(err));
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(next) => {
+        if (!next) reset();
+        onOpenChange(next);
+      }}
+    >
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Change password</DialogTitle>
+          <DialogDescription>Every other session gets signed out — this one doesn&apos;t.</DialogDescription>
+        </DialogHeader>
+        <form onSubmit={handleSubmit} className="flex flex-col gap-4">
+          {error && <Alert variant="destructive">{error}</Alert>}
+          {notice && <Alert variant="success">{notice}</Alert>}
+          <PasswordField id="currentPassword" label="Current password" value={currentPassword} onChange={setCurrentPassword} />
+          <PasswordField id="newPassword" label="New password" value={newPassword} onChange={setNewPassword} />
+          <PasswordField id="confirmPassword" label="Confirm new password" value={confirmPassword} onChange={setConfirmPassword} />
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
+              Close
+            </Button>
+            <Button type="submit" disabled={submitting}>
+              {submitting ? "Changing…" : "Change password"}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,105 @@
+"use client";
+
+import { observer } from "mobx-react-lite";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { ChevronsUpDownIcon, KeyRoundIcon, LogOutIcon, UserIcon } from "lucide-react";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { ChangePasswordDialog } from "@/components/change-password-dialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from "@/components/ui/sidebar";
+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("") || "?"
+  );
+}
+
+export const NavUser = observer(function NavUser() {
+  const { isMobile } = useSidebar();
+  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 handleSignOut() {
+    await store.logout();
+    router.push("/login");
+  }
+
+  return (
+    <>
+      <SidebarMenu>
+        <SidebarMenuItem>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <SidebarMenuButton size="lg" className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
+                <Avatar className="size-8 rounded-lg">
+                  {photo && <AvatarImage src={photo} alt="" />}
+                  <AvatarFallback className="rounded-lg">{initialsOf(label)}</AvatarFallback>
+                </Avatar>
+                <div className="grid flex-1 text-left text-sm leading-tight">
+                  <span className="truncate font-medium">{store.currentUser?.roles.join(", ") || "Signed in"}</span>
+                  <span className="truncate text-xs text-muted-foreground">{store.currentUser?.twoFactorEnabled ? "2FA on" : "2FA off"}</span>
+                </div>
+                <ChevronsUpDownIcon className="ml-auto size-4" />
+              </SidebarMenuButton>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+              className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+              side={isMobile ? "bottom" : "right"}
+              align="end"
+              sideOffset={4}
+            >
+              <DropdownMenuLabel className="p-0 font-normal">
+                <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                  <Avatar className="size-8 rounded-lg">
+                    {photo && <AvatarImage src={photo} alt="" />}
+                    <AvatarFallback className="rounded-lg">{initialsOf(label)}</AvatarFallback>
+                  </Avatar>
+                  <div className="grid flex-1 text-left text-sm leading-tight">
+                    <span className="truncate font-medium">{store.currentUser?.roles.join(", ") || "Signed in"}</span>
+                    <span className="truncate text-xs text-muted-foreground">{store.currentUser?.twoFactorEnabled ? "2FA on" : "2FA off"}</span>
+                  </div>
+                </div>
+              </DropdownMenuLabel>
+              <DropdownMenuSeparator />
+              <DropdownMenuGroup>
+                <DropdownMenuItem onClick={() => router.push("/account")}>
+                  <UserIcon />
+                  Profile
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => setChangePasswordOpen(true)}>
+                  <KeyRoundIcon />
+                  Change password
+                </DropdownMenuItem>
+              </DropdownMenuGroup>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem variant="destructive" onClick={() => void handleSignOut()}>
+                <LogOutIcon />
+                Sign out
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </SidebarMenuItem>
+      </SidebarMenu>
+      <ChangePasswordDialog open={changePasswordOpen} onOpenChange={setChangePasswordOpen} />
+    </>
+  );
+});

package/registry/admin-apps/nextjs/variants/workspaces/src/components/permission-required.tsx

@@ -0,0 +1,32 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import type { PermissionKey } from "@/lib/ability";
+
+/**
+ * Shown in place of a screen the signed-in user can't read. It names the permission rather than
+ * saying "access denied", because the fix — ask an admin for that key — is only actionable if
+ * you know which one is missing. The server enforces the same key on the route behind this
+ * screen; this is the polite version of the 403, not a substitute for it.
+ */
+export function PermissionRequired({ permission, what }: { permission: PermissionKey | readonly PermissionKey[]; what: string }) {
+  const keys = Array.isArray(permission) ? permission : [permission as PermissionKey];
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{what} isn&apos;t available to you</CardTitle>
+        <CardDescription>
+          You need {keys.length > 1 ? "one of these permissions" : "the"}{" "}
+          {keys.map((key, index) => (
+            <span key={key}>
+              {index > 0 && (index === keys.length - 1 ? " or " : ", ")}
+              <span className="font-mono">{key}</span>
+            </span>
+          ))}{" "}
+          {keys.length > 1 ? "to see this" : "permission to see this"} in this workspace. Ask one of its admins to grant it, or to
+          assign you a role that carries it.
+        </CardDescription>
+      </CardHeader>
+      <CardContent />
+    </Card>
+  );
+}