@percepta/create 3.3.0 → 3.4.0

package/templates/webapp/src/app/(admin)/layout.tsx

@@ -0,0 +1,43 @@
+import { notFound, redirect } from "next/navigation";
+import type { ReactNode } from "react";
+import Header from "../../components/Header";
+import { getServerSession } from "../../lib/auth";
+import {
+  canManageAppRoles,
+  canManageDefaultRoles,
+} from "../../services/access/AppAccessControl";
+
+export default async function AdminLayout({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  const session = await getServerSession();
+
+  if (session?.user == null) {
+    redirect("/auth/signin");
+  }
+
+  const [canManageDefaults, canManageRoles] = await Promise.all([
+    canManageDefaultRoles(session.user.id),
+    canManageAppRoles(session.user.id),
+  ]);
+  const showAdminLink = canManageDefaults || canManageRoles;
+
+  if (!showAdminLink) {
+    notFound();
+  }
+
+  return (
+    <>
+      <Header showAdminLink={showAdminLink} />
+      <main>
+        <div className="py-8">
+          <div className="mx-auto max-w-6xl">
+            <div className="rounded-lg bg-white p-8">{children}</div>
+          </div>
+        </div>
+      </main>
+    </>
+  );
+}

package/templates/webapp/src/app/(app)/layout.tsx

@@ -2,7 +2,11 @@ import { notFound, redirect } from "next/navigation";
 import type { ReactNode } from "react";
 import Header from "../../components/Header";
 import { getServerSession } from "../../lib/auth";
-import { canAccessApplication } from "../../services/access/AppAccessControl";
+import {
+  canAccessApplication,
+  canManageAppRoles,
+  canManageDefaultRoles,
+} from "../../services/access/AppAccessControl";
 
 export default async function AppLayout({ children }: { children: ReactNode }) {
   const session = await getServerSession();
@@ -11,14 +15,20 @@ export default async function AppLayout({ children }: { children: ReactNode }) {
     redirect("/auth/signin");
   }
 
-  const canAccessApp = await canAccessApplication(session.user.id);
+  const [canAccessApp, canManageDefaults, canManageRoles] = await Promise.all([
+    canAccessApplication(session.user.id),
+    canManageDefaultRoles(session.user.id),
+    canManageAppRoles(session.user.id),
+  ]);
+  const showAdminLink = canManageDefaults || canManageRoles;
+
   if (!canAccessApp) {
     notFound();
   }
 
   return (
     <>
-      <Header />
+      <Header showAdminLink={showAdminLink} />
       <main>
         <div className="py-8">
           <div className="mx-auto max-w-6xl">

package/templates/webapp/src/app/(auth)/auth/signin/CredentialsSignInForm.tsx

@@ -23,7 +23,7 @@ type Credentials = z.infer<typeof CREDENTIALS_SCHEMA>;
 // credentials. In dev we prefill with the seeded user from `pnpm db:seed` so a
 // fresh scaffold is one click away from authed.
 const DEFAULTS: Credentials = IS_DEV
-  ? { email: "admin@example.com", password: "password" }
+  ? { email: "app-admin@example.com", password: "password" }
   : { email: "", password: "" };
 
 export function CredentialsSignInForm() {

package/templates/webapp/src/app/global-error.tsx

@@ -8,9 +8,8 @@ export default function GlobalError({
   reset: () => void;
 }) {
   try {
-    // eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-unsafe-assignment
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
     const { faro } = require("@grafana/faro-web-sdk");
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
     faro.api?.pushError(error);
   } catch {
     // Faro may not be initialized yet — don't let reporting break the error page

package/templates/webapp/src/components/Header.tsx

@@ -9,10 +9,15 @@ import {
   DropdownMenuTrigger,
 } from "@percepta/design";
 import { LogOut } from "lucide-react";
+import Link from "next/link";
 import React, { useCallback } from "react";
 import { authClient } from "../lib/auth-client";
 
-export default function Header() {
+export default function Header({
+  showAdminLink,
+}: {
+  readonly showAdminLink: boolean;
+}) {
   const { data: session } = authClient.useSession();
   const user = session?.user;
 
@@ -31,7 +36,23 @@ export default function Header() {
   }
 
   return (
-    <header className="sticky top-0 z-30 flex h-16 w-full items-center justify-end border-b border-border bg-card px-4 shadow-sm sm:px-6 lg:px-8">
+    <header className="sticky top-0 z-30 flex h-16 w-full items-center justify-between border-b border-border bg-card px-4 shadow-sm sm:px-6 lg:px-8">
+      <nav aria-label="Primary navigation" className="flex items-center gap-2">
+        <Link
+          className="rounded-md px-3 py-2 text-sm font-medium text-foreground transition-colors hover:bg-muted"
+          href="/"
+        >
+          __APP_TITLE__
+        </Link>
+        {showAdminLink ? (
+          <Link
+            className="rounded-md px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+            href="/admin"
+          >
+            Admin
+          </Link>
+        ) : null}
+      </nav>
       <DropdownMenu>
         <DropdownMenuTrigger asChild={true}>
           <button

package/templates/webapp/src/server/api/routers/access.ts

@@ -5,8 +5,8 @@ export const accessRouter = router({
   roleManagementStatus: protectedProcedure
     .use(
       requirePermission({
-        permission: accessManifest.system.manageRolesPermission,
-        resource: accessManifest.system.ref(),
+        permission: accessManifest.application.manageAppRolesPermission,
+        resource: accessManifest.application.ref(),
       }),
     )
     .query(() => ({ canManageRoles: true })),

package/templates/webapp/src/services/access/AppAccessControl.ts

@@ -1,6 +1,9 @@
 import {
   type AppAccessRuntime,
+  applicationRef,
   createAppAccessRuntime,
+  createCustomerAccessControl,
+  type CustomerAccessControl,
 } from "@percepta/access-control";
 import { accessManifest } from "../../access/access.manifest";
 import { getEnvConfig } from "../../config/getEnvConfig";
@@ -30,10 +33,56 @@ export function canAccessApplication(userId: string): Promise<boolean> {
   return appAccessRuntime.canAccessApplication(userId);
 }
 
+export function canManageAppRoles(userId: string): Promise<boolean> {
+  const { permissions } = getAccessControl();
+  return permissions.can({
+    permission: accessManifest.application.manageAppRolesPermission,
+    resource: applicationRef(accessManifest.appNamespace),
+    subject: toUserSubject(userId),
+  });
+}
+
+export function canManageAppRolesStrong(userId: string): Promise<boolean> {
+  const { permissions } = getAccessControl();
+  return permissions.canStrong({
+    permission: accessManifest.application.manageAppRolesPermission,
+    resource: applicationRef(accessManifest.appNamespace),
+    subject: toUserSubject(userId),
+  });
+}
+
+export function canManageDefaultRoles(userId: string): Promise<boolean> {
+  const { permissions } = getAccessControl();
+  return permissions.can({
+    permission: accessManifest.application.manageDefaultRolesPermission,
+    resource: applicationRef(accessManifest.appNamespace),
+    subject: toUserSubject(userId),
+  });
+}
+
+export function canManageDefaultRolesStrong(
+  userId: string,
+): Promise<boolean> {
+  const { permissions } = getAccessControl();
+  return permissions.canStrong({
+    permission: accessManifest.application.manageDefaultRolesPermission,
+    resource: applicationRef(accessManifest.appNamespace),
+    subject: toUserSubject(userId),
+  });
+}
+
 export function getAccessControl(): AppAccessControl {
   return appAccessRuntime.getAccessControl();
 }
 
+export function getCustomerAccessControl(): CustomerAccessControl {
+  const { client } = getAccessControl();
+  return createCustomerAccessControl({
+    applications: [{ appNamespace: accessManifest.appNamespace }],
+    client,
+  });
+}
+
 export function toUserSubject(userId: string) {
   return appAccessRuntime.toUserSubject(userId);
 }

package/templates/webapp/src/services/inngest/events/AppEvents.ts

@@ -1,4 +1,4 @@
-import { ExampleEventPayload } from "./payloads/ExampleEventPayload";
+import { exampleEventPayloadSchema } from "./payloads/ExampleEventPayload";
 
 /**
  * Define all Inngest events for the application here.
@@ -24,5 +24,5 @@ import { ExampleEventPayload } from "./payloads/ExampleEventPayload";
  */
 export const AppEvents = {
   // Example event - replace with your actual events
-  "app/example.event": ExampleEventPayload.SCHEMA,
+  "app/example.event": exampleEventPayloadSchema,
 };

package/templates/webapp/src/services/inngest/events/payloads/ExampleEventPayload.ts

@@ -1,12 +1,8 @@
 import z from "zod";
 
-/**
- * Example event payload schema.
- * Replace this with your actual event payloads.
- */
-export type ExampleEventPayload = z.infer<typeof ExampleEventPayload.SCHEMA>;
-export namespace ExampleEventPayload {
-  export const SCHEMA = z.object({
-    exampleId: z.string(),
-  });
-}
+/** Example event payload schema. Replace this with your actual event payloads. */
+export const exampleEventPayloadSchema = z.object({
+  exampleId: z.string(),
+});
+
+export type ExampleEventPayload = z.infer<typeof exampleEventPayloadSchema>;

package/templates/webapp/src/app/(app)/admin/_lib/PrincipalRoleTable.tsx

@@ -1,113 +0,0 @@
-import type { SubjectRef } from "@percepta/access-control";
-import { ShieldCheck, ShieldMinus } from "lucide-react";
-import { type AccessAppRole, assignableRoles } from "./accessAdmin";
-
-type RoleAction = (formData: FormData) => Promise<void>;
-
-export interface PrincipalRoleRow {
-  readonly accessLabel: string;
-  readonly canAssignRoles?: boolean;
-  readonly detail: string;
-  readonly displayName: string;
-  readonly roles: readonly AccessAppRole[];
-  readonly subject: SubjectRef;
-}
-
-export function PrincipalRoleTable({
-  assignAction,
-  principalColumnLabel,
-  revokeAction,
-  rows,
-}: {
-  readonly assignAction: RoleAction;
-  readonly principalColumnLabel: string;
-  readonly revokeAction: RoleAction;
-  readonly rows: readonly PrincipalRoleRow[];
-}) {
-  return (
-    <div className="overflow-x-auto rounded-md border border-border">
-      <table className="w-full text-left text-sm">
-        <thead className="border-b border-border bg-muted/50 text-xs text-muted-foreground uppercase">
-          <tr>
-            <th className="px-4 py-3 font-medium">{principalColumnLabel}</th>
-            <th className="px-4 py-3 font-medium">Application Access</th>
-            <th className="px-4 py-3 font-medium">Roles</th>
-            <th className="px-4 py-3 font-medium">Actions</th>
-          </tr>
-        </thead>
-        <tbody className="divide-y divide-border">
-          {rows.map((principal) => (
-            <tr key={principal.subject} className="align-top">
-              <td className="px-4 py-4">
-                <div className="font-medium text-foreground">
-                  {principal.displayName}
-                </div>
-                <div className="text-muted-foreground">{principal.detail}</div>
-              </td>
-              <td className="px-4 py-4 text-foreground">
-                {principal.accessLabel}
-              </td>
-              <td className="px-4 py-4">
-                {principal.roles.length > 0 ? (
-                  <div className="flex flex-wrap gap-2">
-                    {principal.roles.map((role) => (
-                      <span
-                        key={role}
-                        className="rounded-md border border-border bg-muted px-2 py-1 text-xs font-medium text-foreground"
-                      >
-                        {role}
-                      </span>
-                    ))}
-                  </div>
-                ) : (
-                  <span className="text-muted-foreground">None</span>
-                )}
-              </td>
-              <td className="px-4 py-4">
-                <div className="flex flex-wrap gap-2">
-                  {assignableRoles.map((role) => {
-                    const hasRole = principal.roles.includes(role);
-                    const action = hasRole ? revokeAction : assignAction;
-                    return (
-                      <form action={action} key={role}>
-                        <input
-                          name="subject"
-                          type="hidden"
-                          value={principal.subject}
-                        />
-                        <input name="role" type="hidden" value={role} />
-                        <button
-                          className={
-                            hasRole
-                              ? "inline-flex h-9 items-center gap-2 rounded-md border border-border px-3 text-sm font-medium text-foreground transition-colors hover:bg-muted"
-                              : "inline-flex h-9 items-center gap-2 rounded-md bg-primary px-3 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-50"
-                          }
-                          disabled={
-                            !hasRole && principal.canAssignRoles === false
-                          }
-                          type="submit"
-                        >
-                          {hasRole ? (
-                            <>
-                              <ShieldMinus className="h-4 w-4" />
-                              Revoke {role}
-                            </>
-                          ) : (
-                            <>
-                              <ShieldCheck className="h-4 w-4" />
-                              Assign {role}
-                            </>
-                          )}
-                        </button>
-                      </form>
-                    );
-                  })}
-                </div>
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
-  );
-}

package/templates/webapp/src/app/(app)/admin/_lib/accessAdmin.ts

@@ -1,85 +0,0 @@
-import type { AppRole, SubjectRef } from "@percepta/access-control";
-import { revalidatePath } from "next/cache";
-import { notFound, redirect } from "next/navigation";
-import { accessManifest } from "../../../../access/access.manifest";
-import { getServerSession } from "../../../../lib/auth";
-import {
-  getAccessControl,
-  toUserSubject,
-} from "../../../../services/access/AppAccessControl";
-
-export type AccessAppRole = AppRole<typeof accessManifest>;
-
-export const assignableRoles: readonly AccessAppRole[] =
-  accessManifest.system.assignableRoles ?? [];
-
-export async function updatePrincipalRole(
-  formData: FormData,
-  operation: "assign" | "revoke",
-  path: string,
-) {
-  await requireRoleManager();
-  const app = getAccessControl().app;
-  const role = readAssignableRole(formData);
-  const subject = readPrincipalSubject(formData);
-
-  if (operation === "assign") {
-    await app.assignAppRole(role, subject);
-  } else {
-    await app.revokeAppRole(role, subject);
-  }
-
-  revalidatePath(path);
-}
-
-export async function requireRoleManager() {
-  if (!isAdminUiEnabled()) {
-    notFound();
-  }
-
-  const session = await getServerSession();
-
-  if (session?.user == null) {
-    redirect("/auth/signin");
-  }
-
-  const allowed = await getAccessControl().permissions.canStrong({
-    permission: accessManifest.system.manageRolesPermission,
-    resource: accessManifest.system.ref(),
-    subject: toUserSubject(session.user.id),
-  });
-  if (!allowed) {
-    notFound();
-  }
-}
-
-export function readAssignableRole(formData: FormData): AccessAppRole {
-  const role = formData.get("role");
-  if (
-    typeof role !== "string" ||
-    !assignableRoles.includes(role as AccessAppRole)
-  ) {
-    throw new Error("Invalid app role.");
-  }
-
-  return role as AccessAppRole;
-}
-
-function readPrincipalSubject(formData: FormData): SubjectRef {
-  const subject = formData.get("subject");
-  if (
-    typeof subject !== "string" ||
-    (!subject.startsWith("core/user:") &&
-      !/^core\/group:[^#]+#member$/.test(subject))
-  ) {
-    throw new Error("Invalid principal subject.");
-  }
-
-  return subject as SubjectRef;
-}
-
-function isAdminUiEnabled(): boolean {
-  const adminUI: { readonly enabled?: boolean } | undefined =
-    accessManifest.adminUI;
-  return adminUI?.enabled !== false;
-}

package/templates/webapp/src/app/(app)/admin/groups/page.tsx

@@ -1,117 +0,0 @@
-import type { SubjectRef } from "@percepta/access-control";
-import { db as authDb } from "@__REPO_NAME__/auth/db";
-import { groups } from "@__REPO_NAME__/auth/schema";
-import { inArray } from "drizzle-orm";
-import type { Metadata } from "next";
-import { accessManifest } from "../../../../access/access.manifest";
-import { getAccessControl } from "../../../../services/access/AppAccessControl";
-import {
-  type PrincipalRoleRow,
-  PrincipalRoleTable,
-} from "../_lib/PrincipalRoleTable";
-import { requireRoleManager, updatePrincipalRole } from "../_lib/accessAdmin";
-
-export const metadata: Metadata = {
-  title: "Groups - __APP_TITLE__",
-  description: "Groups - __APP_TITLE__",
-};
-
-const GROUP_SUBJECT_PATTERN = /^core\/group:([^#]+)#member$/;
-
-export default async function AdminGroupsPage() {
-  await requireRoleManager();
-
-  const rows = await listApplicationGroups();
-
-  return (
-    <div className="space-y-6">
-      <div>
-        <h1 className="text-2xl font-semibold text-foreground">Groups</h1>
-      </div>
-
-      {rows.length === 0 ? (
-        <div className="rounded-md border border-border bg-card p-8 text-sm text-muted-foreground">
-          <p className="font-medium text-foreground">No groups enrolled.</p>
-          <p className="mt-2">
-            Groups appear here after the customer identity sync projects them
-            into SpiceDB and grants this application access.
-          </p>
-        </div>
-      ) : (
-        <PrincipalRoleTable
-          assignAction={assignGroupRole}
-          principalColumnLabel="Group"
-          revokeAction={revokeGroupRole}
-          rows={rows}
-        />
-      )}
-    </div>
-  );
-}
-
-async function assignGroupRole(formData: FormData) {
-  "use server";
-
-  await updatePrincipalRole(formData, "assign", "/admin/groups");
-}
-
-async function revokeGroupRole(formData: FormData) {
-  "use server";
-
-  await updatePrincipalRole(formData, "revoke", "/admin/groups");
-}
-
-async function listApplicationGroups(): Promise<readonly PrincipalRoleRow[]> {
-  const access = getAccessControl();
-  const subjects = await access.permissions.lookupSubjects({
-    permission: accessManifest.system.accessPermission,
-    resource: accessManifest.system.ref(),
-    subjectRelation: "member",
-    subjectType: "core/group",
-  });
-
-  if (subjects.length === 0) {
-    return [];
-  }
-
-  const groupRefs = subjects.map((subject) => ({
-    id: groupIdFromSubject(subject),
-    subject,
-  }));
-  const groupNames = await listGroupNames(groupRefs.map(({ id }) => id));
-
-  const rows = await Promise.all(
-    groupRefs.map(async ({ id, subject }) => ({
-      accessLabel: "Allowed",
-      detail: subject,
-      displayName: groupNames.get(id) ?? id,
-      roles: await access.app.listAppRoles(subject),
-      subject,
-    })),
-  );
-
-  return rows.sort((a, b) => a.displayName.localeCompare(b.displayName));
-}
-
-async function listGroupNames(
-  groupIds: readonly string[],
-): Promise<ReadonlyMap<string, string>> {
-  const groupRows = await authDb
-    .select({
-      id: groups.id,
-      name: groups.name,
-    })
-    .from(groups)
-    .where(inArray(groups.id, [...new Set(groupIds)]));
-
-  return new Map(groupRows.map((group) => [group.id, group.name]));
-}
-
-function groupIdFromSubject(subject: SubjectRef): string {
-  const id = GROUP_SUBJECT_PATTERN.exec(subject)?.[1];
-  if (id == null) {
-    throw new Error("Invalid group subject.");
-  }
-
-  return id;
-}

package/templates/webapp/src/app/(app)/admin/users/page.tsx

@@ -1,79 +0,0 @@
-import { db as authDb } from "@__REPO_NAME__/auth/db";
-import { users } from "@__REPO_NAME__/auth/schema";
-import type { Metadata } from "next";
-import { accessManifest } from "../../../../access/access.manifest";
-import {
-  getAccessControl,
-  toUserSubject,
-} from "../../../../services/access/AppAccessControl";
-import { PrincipalRoleTable } from "../_lib/PrincipalRoleTable";
-import { requireRoleManager, updatePrincipalRole } from "../_lib/accessAdmin";
-
-export const metadata: Metadata = {
-  title: "Users - __APP_TITLE__",
-  description: "Users - __APP_TITLE__",
-};
-
-export default async function AdminUsersPage() {
-  await requireRoleManager();
-
-  const access = getAccessControl();
-  const userRows = await authDb
-    .select({
-      email: users.email,
-      id: users.id,
-      name: users.name,
-    })
-    .from(users)
-    .orderBy(users.email);
-
-  const rows = await Promise.all(
-    userRows.map(async (user) => {
-      const subject = toUserSubject(user.id);
-      const [canAccessApp, roles] = await Promise.all([
-        access.permissions.can({
-          permission: accessManifest.system.accessPermission,
-          resource: accessManifest.system.ref(),
-          subject,
-        }),
-        access.app.listAppRoles(subject),
-      ]);
-
-      return {
-        accessLabel: canAccessApp ? "Allowed" : "Not enrolled",
-        canAssignRoles: canAccessApp,
-        detail: user.email,
-        displayName: user.name,
-        roles,
-        subject,
-      };
-    }),
-  );
-
-  return (
-    <div className="space-y-6">
-      <div>
-        <h1 className="text-2xl font-semibold text-foreground">Users</h1>
-      </div>
-
-      <PrincipalRoleTable
-        assignAction={assignUserRole}
-        principalColumnLabel="User"
-        revokeAction={revokeUserRole}
-        rows={rows}
-      />
-    </div>
-  );
-}
-
-async function assignUserRole(formData: FormData) {
-  "use server";
-
-  await updatePrincipalRole(formData, "assign", "/admin/users");
-}
-
-async function revokeUserRole(formData: FormData) {
-  "use server";
-
-  await updatePrincipalRole(formData, "revoke", "/admin/users");
-}