@checkstack/auth-frontend 0.0.4 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,177 @@
 # @checkstack/auth-frontend
 
+## 0.2.0
+
+### Minor Changes
+
+- 9faec1f: # Unified AccessRule Terminology Refactoring
+
+  This release completes a comprehensive terminology refactoring from "permission" to "accessRule" across the entire codebase, establishing a consistent and modern access control vocabulary.
+
+  ## Changes
+
+  ### Core Infrastructure (`@checkstack/common`)
+
+  - Introduced `AccessRule` interface as the primary access control type
+  - Added `accessPair()` helper for creating read/manage access rule pairs
+  - Added `access()` builder for individual access rules
+  - Replaced `Permission` type with `AccessRule` throughout
+
+  ### API Changes
+
+  - `env.registerPermissions()` → `env.registerAccessRules()`
+  - `meta.permissions` → `meta.access` in RPC contracts
+  - `usePermission()` → `useAccess()` in frontend hooks
+  - Route `permission:` field → `accessRule:` field
+
+  ### UI Changes
+
+  - "Roles & Permissions" tab → "Roles & Access Rules"
+  - "You don't have permission..." → "You don't have access..."
+  - All permission-related UI text updated
+
+  ### Documentation & Templates
+
+  - Updated 18 documentation files with AccessRule terminology
+  - Updated 7 scaffolding templates with `accessPair()` pattern
+  - All code examples use new AccessRule API
+
+  ## Migration Guide
+
+  ### Backend Plugins
+
+  ```diff
+  - import { permissionList } from "./permissions";
+  - env.registerPermissions(permissionList);
+  + import { accessRules } from "./access";
+  + env.registerAccessRules(accessRules);
+  ```
+
+  ### RPC Contracts
+
+  ```diff
+  - .meta({ userType: "user", permissions: [permissions.read.id] })
+  + .meta({ userType: "user", access: [access.read] })
+  ```
+
+  ### Frontend Hooks
+
+  ```diff
+  - const canRead = accessApi.usePermission(permissions.read.id);
+  + const canRead = accessApi.useAccess(access.read);
+  ```
+
+  ### Routes
+
+  ```diff
+  - permission: permissions.entityRead.id,
+  + accessRule: access.read,
+  ```
+
+### Patch Changes
+
+- 95eeec7: # Auto-login after credential registration
+
+  Users are now automatically logged in after successful registration when using the credential (email & password) authentication strategy.
+
+  ## Changes
+
+  ### Backend (`@checkstack/auth-backend`)
+
+  - Added `autoSignIn: true` to the `emailAndPassword` configuration in better-auth
+  - Users no longer need to manually log in after registration; a session is created immediately upon successful sign-up
+
+  ### Frontend (`@checkstack/auth-frontend`)
+
+  - Updated `RegisterPage` to use full page navigation after registration to ensure the session state refreshes correctly
+  - Updated `LoginPage` to use full page navigation after login to ensure fresh permissions state when switching between users
+
+- Updated dependencies [9faec1f]
+- Updated dependencies [f533141]
+  - @checkstack/auth-common@0.2.0
+  - @checkstack/common@0.2.0
+  - @checkstack/frontend-api@0.1.0
+  - @checkstack/ui@0.2.0
+
+## 0.1.0
+
+### Minor Changes
+
+- 8e43507: # Teams and Resource-Level Access Control
+
+  This release introduces a comprehensive Teams system for organizing users and controlling access to resources at a granular level.
+
+  ## Features
+
+  ### Team Management
+
+  - Create, update, and delete teams with name and description
+  - Add/remove users from teams
+  - Designate team managers with elevated privileges
+  - View team membership and manager status
+
+  ### Resource-Level Access Control
+
+  - Grant teams access to specific resources (systems, health checks, incidents, maintenances)
+  - Configure read-only or manage permissions per team
+  - Resource-level "Team Only" mode that restricts access exclusively to team members
+  - Separate `resourceAccessSettings` table for resource-level settings (not per-grant)
+  - Automatic cleanup of grants when teams are deleted (database cascade)
+
+  ### Middleware Integration
+
+  - Extended `autoAuthMiddleware` to support resource access checks
+  - Single-resource pre-handler validation for detail endpoints
+  - Automatic list filtering for collection endpoints
+  - S2S endpoints for access verification
+
+  ### Frontend Components
+
+  - `TeamsTab` component for managing teams in Auth Settings
+  - `TeamAccessEditor` component for assigning team access to resources
+  - Resource-level "Team Only" toggle in `TeamAccessEditor`
+  - Integration into System, Health Check, Incident, and Maintenance editors
+
+  ## Breaking Changes
+
+  ### API Response Format Changes
+
+  List endpoints now return objects with named keys instead of arrays directly:
+
+  ```typescript
+  // Before
+  const systems = await catalogApi.getSystems();
+
+  // After
+  const { systems } = await catalogApi.getSystems();
+  ```
+
+  Affected endpoints:
+
+  - `catalog.getSystems` → `{ systems: [...] }`
+  - `healthcheck.getConfigurations` → `{ configurations: [...] }`
+  - `incident.listIncidents` → `{ incidents: [...] }`
+  - `maintenance.listMaintenances` → `{ maintenances: [...] }`
+
+  ### User Identity Enrichment
+
+  `RealUser` and `ApplicationUser` types now include `teamIds: string[]` field with team memberships.
+
+  ## Documentation
+
+  See `docs/backend/teams.md` for complete API reference and integration guide.
+
+### Patch Changes
+
+- 97c5a6b: Fix Radix UI accessibility warning in dialog components by adding visually hidden DialogDescription components
+- Updated dependencies [8e43507]
+- Updated dependencies [97c5a6b]
+- Updated dependencies [8e43507]
+  - @checkstack/ui@0.1.0
+  - @checkstack/auth-common@0.1.0
+  - @checkstack/common@0.1.0
+  - @checkstack/frontend-api@0.0.4
+
 ## 0.0.4
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/auth-frontend",
-  "version": "0.0.4",
+  "version": "0.2.0",
   "type": "module",
   "main": "src/index.tsx",
   "exports": {

package/src/api.ts

@@ -25,10 +25,10 @@ export interface Role {
   description?: string | null;
   isSystem?: boolean;
   isAssignable?: boolean; // False for anonymous role - not assignable to users
-  permissions?: string[];
+  accessRules?: string[];
 }
 
-export interface Permission {
+export interface AccessRuleEntry {
   id: string;
   description?: string;
 }

package/src/components/ApplicationsTab.tsx

@@ -18,6 +18,7 @@ import {
   ConfirmationModal,
   Dialog,
   DialogContent,
+  DialogDescription,
   DialogHeader,
   DialogTitle,
   DialogFooter,
@@ -189,8 +190,8 @@ export const ApplicationsTab: React.FC<ApplicationsTabProps> = ({
           <Alert variant="info" className="mb-4">
             <AlertDescription>
               External applications use API keys to authenticate with the
-              Checkstack API. The secret is only shown once when created—store it
-              securely.
+              Checkstack API. The secret is only shown once when created—store
+              it securely.
             </AlertDescription>
           </Alert>
 
@@ -302,7 +303,7 @@ export const ApplicationsTab: React.FC<ApplicationsTabProps> = ({
 
           {!canManageApplications && (
             <p className="text-xs text-muted-foreground mt-4">
-              You don't have permission to manage applications.
+              You don't have access to manage applications.
             </p>
           )}
         </CardContent>
@@ -346,6 +347,9 @@ export const ApplicationsTab: React.FC<ApplicationsTabProps> = ({
             <DialogTitle>
               Application Secret: {newSecretDialog.applicationName}
             </DialogTitle>
+            <DialogDescription className="sr-only">
+              Copy your application secret - it will only be shown once
+            </DialogDescription>
           </DialogHeader>
           <div className="space-y-4">
             <Alert variant="warning">
@@ -399,6 +403,9 @@ export const ApplicationsTab: React.FC<ApplicationsTabProps> = ({
         <DialogContent>
           <DialogHeader>
             <DialogTitle>Create Application</DialogTitle>
+            <DialogDescription className="sr-only">
+              Create a new external application with API key access
+            </DialogDescription>
           </DialogHeader>
           <div className="space-y-4">
             <div>

package/src/components/AuthSettingsPage.tsx

@@ -1,51 +1,54 @@
 import React, { useEffect, useState, useMemo } from "react";
 import { useSearchParams } from "react-router-dom";
-import {
-  useApi,
-  permissionApiRef,
-  rpcApiRef,
-} from "@checkstack/frontend-api";
+import { useApi, accessApiRef, rpcApiRef } from "@checkstack/frontend-api";
 import { PageLayout, useToast, Tabs, TabPanel } from "@checkstack/ui";
-import { authApiRef, AuthUser, Role, AuthStrategy, Permission } from "../api";
 import {
-  permissions as authPermissions,
-  AuthApi,
-} from "@checkstack/auth-common";
-import { Shield, Settings2, Users, Key } from "lucide-react";
+  authApiRef,
+  AuthUser,
+  Role,
+  AuthStrategy,
+  AccessRuleEntry,
+} from "../api";
+import { authAccess, AuthApi } from "@checkstack/auth-common";
+import { Shield, Settings2, Users, Key, Users2 } from "lucide-react";
 import { UsersTab } from "./UsersTab";
 import { RolesTab } from "./RolesTab";
 import { StrategiesTab } from "./StrategiesTab";
 import { ApplicationsTab } from "./ApplicationsTab";
+import { TeamsTab } from "./TeamsTab";
 
 export const AuthSettingsPage: React.FC = () => {
   const authApi = useApi(authApiRef);
   const rpcApi = useApi(rpcApiRef);
   const authClient = rpcApi.forPlugin(AuthApi);
-  const permissionApi = useApi(permissionApiRef);
+  const accessApi = useApi(accessApiRef);
   const toast = useToast();
   const [searchParams, setSearchParams] = useSearchParams();
 
   const session = authApi.useSession();
 
   const [activeTab, setActiveTab] = useState<
-    "users" | "roles" | "strategies" | "applications"
+    "users" | "roles" | "teams" | "strategies" | "applications"
   >("users");
   const [users, setUsers] = useState<(AuthUser & { roles: string[] })[]>([]);
   const [roles, setRoles] = useState<Role[]>([]);
-  const [permissions, setPermissions] = useState<Permission[]>([]);
+  const [accessRuleEntries, setAccessRuleEntries] = useState<AccessRuleEntry[]>([]);
   const [strategies, setStrategies] = useState<AuthStrategy[]>([]);
   const [loading, setLoading] = useState(true);
 
-  const canReadUsers = permissionApi.usePermission(
-    authPermissions.usersRead.id
-  );
+  const canReadUsers = accessApi.useAccess(authAccess.users.read);
 
   // Handle ?tab= URL parameters (from command palette)
   useEffect(() => {
     const tab = searchParams.get("tab");
 
-    if (tab && ["users", "roles", "strategies", "applications"].includes(tab)) {
-      setActiveTab(tab as "users" | "roles" | "strategies" | "applications");
+    if (
+      tab &&
+      ["users", "roles", "teams", "strategies", "applications"].includes(tab)
+    ) {
+      setActiveTab(
+        tab as "users" | "roles" | "teams" | "strategies" | "applications"
+      );
     }
 
     // Clear the URL params after processing
@@ -56,58 +59,41 @@ export const AuthSettingsPage: React.FC = () => {
     }
   }, [searchParams, setSearchParams]);
 
-  const canManageUsers = permissionApi.usePermission(
-    authPermissions.usersManage.id
-  );
-  const canCreateUsers = permissionApi.usePermission(
-    authPermissions.usersCreate.id
-  );
-  const canReadRoles = permissionApi.usePermission(
-    authPermissions.rolesRead.id
-  );
-  const canCreateRoles = permissionApi.usePermission(
-    authPermissions.rolesCreate.id
-  );
-  const canUpdateRoles = permissionApi.usePermission(
-    authPermissions.rolesUpdate.id
-  );
-  const canDeleteRoles = permissionApi.usePermission(
-    authPermissions.rolesDelete.id
-  );
-  const canManageRoles = permissionApi.usePermission(
-    authPermissions.rolesManage.id
-  );
-  const canManageStrategies = permissionApi.usePermission(
-    authPermissions.strategiesManage.id
-  );
-  const canManageRegistration = permissionApi.usePermission(
-    authPermissions.registrationManage.id
-  );
-  const canManageApplications = permissionApi.usePermission(
-    authPermissions.applicationsManage.id
-  );
-
-  // Compute loading and permission states for PageLayout
-  const permissionsLoading =
+  const canManageUsers = accessApi.useAccess(authAccess.users.manage);
+  const canCreateUsers = accessApi.useAccess(authAccess.users.create);
+  const canReadRoles = accessApi.useAccess(authAccess.roles.read);
+  const canCreateRoles = accessApi.useAccess(authAccess.roles.create);
+  const canUpdateRoles = accessApi.useAccess(authAccess.roles.update);
+  const canDeleteRoles = accessApi.useAccess(authAccess.roles.delete);
+  const canManageRoles = accessApi.useAccess(authAccess.roles.manage);
+  const canManageStrategies = accessApi.useAccess(authAccess.strategies);
+  const canManageRegistration = accessApi.useAccess(authAccess.registration);
+  const canManageApplications = accessApi.useAccess(authAccess.applications);
+  const canReadTeams = accessApi.useAccess(authAccess.teams.read);
+  const canManageTeams = accessApi.useAccess(authAccess.teams.manage);
+
+  const accessRulesLoading =
     loading ||
     canReadUsers.loading ||
     canReadRoles.loading ||
     canManageStrategies.loading ||
-    canManageApplications.loading;
+    canManageApplications.loading ||
+    canReadTeams.loading;
 
-  const hasAnyPermission =
+  const hasAnyAccess =
     canReadUsers.allowed ||
     canReadRoles.allowed ||
     canManageStrategies.allowed ||
-    canManageApplications.allowed;
+    canManageApplications.allowed ||
+    canReadTeams.allowed;
 
-  // Special case: if user is not logged in, show permission denied
-  const isAllowed = session.data?.user ? hasAnyPermission : false;
+  // Special case: if user is not logged in, show access denied
+  const isAllowed = session.data?.user ? hasAnyAccess : false;
 
-  // Compute visible tabs based on permissions
+  // Compute visible tabs based on access rules
   const visibleTabs = useMemo(() => {
     const tabs: Array<{
-      id: "users" | "roles" | "strategies" | "applications";
+      id: "users" | "roles" | "teams" | "strategies" | "applications";
       label: string;
       icon: React.ReactNode;
     }> = [];
@@ -120,9 +106,15 @@ export const AuthSettingsPage: React.FC = () => {
     if (canReadRoles.allowed)
       tabs.push({
         id: "roles",
-        label: "Roles & Permissions",
+        label: "Roles & Access Rules",
         icon: <Shield size={18} />,
       });
+    if (canReadTeams.allowed)
+      tabs.push({
+        id: "teams",
+        label: "Teams",
+        icon: <Users2 size={18} />,
+      });
     if (canManageStrategies.allowed)
       tabs.push({
         id: "strategies",
@@ -139,6 +131,7 @@ export const AuthSettingsPage: React.FC = () => {
   }, [
     canReadUsers.allowed,
     canReadRoles.allowed,
+    canReadTeams.allowed,
     canManageStrategies.allowed,
     canManageApplications.allowed,
   ]);
@@ -160,11 +153,11 @@ export const AuthSettingsPage: React.FC = () => {
         roles: string[];
       })[];
       const rolesData = await authClient.getRoles();
-      const permissionsData = await authClient.getPermissions();
+      const accessRulesData = await authClient.getAccessRules();
       const strategiesData = await authClient.getStrategies();
       setUsers(usersData);
       setRoles(rolesData);
-      setPermissions(permissionsData);
+      setAccessRuleEntries(accessRulesData);
       setStrategies(strategiesData);
     } catch (error: unknown) {
       const message =
@@ -188,7 +181,7 @@ export const AuthSettingsPage: React.FC = () => {
   return (
     <PageLayout
       title="Authentication Settings"
-      loading={permissionsLoading}
+      loading={accessRulesLoading}
       allowed={isAllowed}
     >
       <Tabs
@@ -196,7 +189,7 @@ export const AuthSettingsPage: React.FC = () => {
         activeTab={activeTab}
         onTabChange={(tabId) =>
           setActiveTab(
-            tabId as "users" | "roles" | "strategies" | "applications"
+            tabId as "users" | "roles" | "teams" | "strategies" | "applications"
           )
         }
         className="mb-6"
@@ -219,7 +212,7 @@ export const AuthSettingsPage: React.FC = () => {
       <TabPanel id="roles" activeTab={activeTab}>
         <RolesTab
           roles={roles}
-          permissions={permissions}
+          accessRulesList={accessRuleEntries}
           userRoleIds={currentUserRoleIds}
           canReadRoles={canReadRoles.allowed}
           canCreateRoles={canCreateRoles.allowed}
@@ -229,6 +222,15 @@ export const AuthSettingsPage: React.FC = () => {
         />
       </TabPanel>
 
+      <TabPanel id="teams" activeTab={activeTab}>
+        <TeamsTab
+          users={users}
+          canReadTeams={canReadTeams.allowed}
+          canManageTeams={canManageTeams.allowed}
+          onDataChange={fetchData}
+        />
+      </TabPanel>
+
       <TabPanel id="strategies" activeTab={activeTab}>
         <StrategiesTab
           strategies={strategies}

package/src/components/LoginPage.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Link, useNavigate } from "react-router-dom";
+import { Link } from "react-router-dom";
 import { LogIn, LogOut, AlertCircle } from "lucide-react";
 import {
   useApi,
@@ -38,7 +38,7 @@ import {
 } from "@checkstack/ui";
 import { authApiRef } from "../api";
 import { useEnabledStrategies } from "../hooks/useEnabledStrategies";
-import { usePermissions } from "../hooks/usePermissions";
+import { useAccessRules } from "../hooks/useAccessRules";
 import { useAuthClient } from "../lib/auth-client";
 import { SocialProviderButton } from "./SocialProviderButton";
 import { useEffect } from "react";
@@ -47,7 +47,7 @@ export const LoginPage = () => {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [loading, setLoading] = useState(false);
-  const navigate = useNavigate();
+
   const authApi = useApi(authApiRef);
   const rpcApi = useApi(rpcApiRef);
   const authRpcClient = rpcApi.forPlugin(AuthApi);
@@ -74,7 +74,8 @@ export const LoginPage = () => {
       if (error) {
         console.error("Login failed:", error);
       } else {
-        navigate("/");
+        // Use full page navigation to ensure session/permissions state refreshes
+        globalThis.location.href = "/";
       }
     } finally {
       setLoading(false);
@@ -273,7 +274,7 @@ export const LogoutMenuItem = (_props: UserMenuItemsContext) => {
 export const LoginNavbarAction = () => {
   const authApi = useApi(authApiRef);
   const { data: session, isPending } = authApi.useSession();
-  const { permissions, loading: permissionsLoading } = usePermissions();
+  const { accessRules, loading: accessRulesLoading } = useAccessRules();
   const authClient = useAuthClient();
   const [hasCredentialAccount, setHasCredentialAccount] =
     useState<boolean>(false);
@@ -295,7 +296,7 @@ export const LoginNavbarAction = () => {
     });
   }, [session?.user, authClient]);
 
-  if (isPending || permissionsLoading || credentialLoading) {
+  if (isPending || accessRulesLoading || credentialLoading) {
     return <div className="w-20 h-9 bg-muted animate-pulse rounded-full" />;
   }
 
@@ -306,7 +307,7 @@ export const LoginNavbarAction = () => {
     );
     const hasBottomItems = bottomExtensions.length > 0;
     const menuContext: UserMenuItemsContext = {
-      permissions,
+      accessRules,
       hasCredentialAccount,
     };
 

package/src/components/RegisterPage.tsx

@@ -1,13 +1,9 @@
 import React, { useState, useEffect } from "react";
-import { Link, useNavigate } from "react-router-dom";
+import { Link } from "react-router-dom";
 import { AlertCircle } from "lucide-react";
 import { useApi, rpcApiRef } from "@checkstack/frontend-api";
 import { authApiRef } from "../api";
-import {
-  AuthApi,
-  authRoutes,
-  passwordSchema,
-} from "@checkstack/auth-common";
+import { AuthApi, authRoutes, passwordSchema } from "@checkstack/auth-common";
 import { resolveRoute } from "@checkstack/common";
 import {
   Button,
@@ -35,7 +31,7 @@ export const RegisterPage = () => {
   const [password, setPassword] = useState("");
   const [loading, setLoading] = useState(false);
   const [validationErrors, setValidationErrors] = useState<string[]>([]);
-  const navigate = useNavigate();
+
   const authApi = useApi(authApiRef);
   const rpcApi = useApi(rpcApiRef);
   const authRpcClient = rpcApi.forPlugin(AuthApi);
@@ -87,7 +83,8 @@ export const RegisterPage = () => {
       if (res.error) {
         console.error("Registration failed:", res.error);
       } else {
-        navigate("/");
+        // Use full page navigation to ensure session state refreshes in navbar
+        globalThis.location.href = "/";
       }
     } catch (error) {
       console.error("Registration failed:", error);