@checkstack/auth-frontend 0.1.0 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,160 @@
 # @checkstack/auth-frontend
 
+## 0.3.0
+
+### Minor Changes
+
+- 7a23261: ## TanStack Query Integration
+
+  Migrated all frontend components to use `usePluginClient` hook with TanStack Query integration, replacing the legacy `forPlugin()` pattern.
+
+  ### New Features
+
+  - **`usePluginClient` hook**: Provides type-safe access to plugin APIs with `.useQuery()` and `.useMutation()` methods
+  - **Automatic request deduplication**: Multiple components requesting the same data share a single network request
+  - **Built-in caching**: Configurable stale time and cache duration per query
+  - **Loading/error states**: TanStack Query provides `isLoading`, `error`, `isRefetching` states automatically
+  - **Background refetching**: Stale data is automatically refreshed when components mount
+
+  ### Contract Changes
+
+  All RPC contracts now require `operationType: "query"` or `operationType: "mutation"` metadata:
+
+  ```typescript
+  const getItems = proc()
+    .meta({ operationType: "query", access: [access.read] })
+    .output(z.array(itemSchema))
+    .query();
+
+  const createItem = proc()
+    .meta({ operationType: "mutation", access: [access.manage] })
+    .input(createItemSchema)
+    .output(itemSchema)
+    .mutation();
+  ```
+
+  ### Migration
+
+  ```typescript
+  // Before (forPlugin pattern)
+  const api = useApi(myPluginApiRef);
+  const [items, setItems] = useState<Item[]>([]);
+  useEffect(() => {
+    api.getItems().then(setItems);
+  }, [api]);
+
+  // After (usePluginClient pattern)
+  const client = usePluginClient(MyPluginApi);
+  const { data: items, isLoading } = client.getItems.useQuery({});
+  ```
+
+  ### Bug Fixes
+
+  - Fixed `rpc.test.ts` test setup for middleware type inference
+  - Fixed `SearchDialog` to use `setQuery` instead of deprecated `search` method
+  - Fixed null→undefined warnings in notification and queue frontends
+
+### Patch Changes
+
+- Updated dependencies [7a23261]
+  - @checkstack/frontend-api@0.2.0
+  - @checkstack/common@0.3.0
+  - @checkstack/auth-common@0.3.0
+  - @checkstack/ui@0.2.1
+
+## 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/auth-frontend",
-  "version": "0.1.0",
+  "version": "0.3.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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
 import {
   Card,
   CardHeader,
@@ -25,8 +25,7 @@ import {
   useToast,
 } from "@checkstack/ui";
 import { Plus, Trash2, RotateCcw, Copy } from "lucide-react";
-import { useApi } from "@checkstack/frontend-api";
-import { rpcApiRef } from "@checkstack/frontend-api";
+import { usePluginClient } from "@checkstack/frontend-api";
 import { AuthApi } from "@checkstack/auth-common";
 import type { Role } from "../api";
 
@@ -49,12 +48,9 @@ export const ApplicationsTab: React.FC<ApplicationsTabProps> = ({
   roles,
   canManageApplications,
 }) => {
-  const rpcApi = useApi(rpcApiRef);
-  const authClient = rpcApi.forPlugin(AuthApi);
+  const authClient = usePluginClient(AuthApi);
   const toast = useToast();
 
-  const [applications, setApplications] = useState<Application[]>([]);
-  const [loading, setLoading] = useState(true);
   const [applicationToDelete, setApplicationToDelete] = useState<string>();
   const [applicationToRegenerateSecret, setApplicationToRegenerateSecret] =
     useState<{ id: string; name: string }>();
@@ -67,36 +63,19 @@ export const ApplicationsTab: React.FC<ApplicationsTabProps> = ({
   const [newAppName, setNewAppName] = useState("");
   const [newAppDescription, setNewAppDescription] = useState("");
 
-  const fetchApplications = async () => {
-    if (!canManageApplications) {
-      setLoading(false);
-      return;
-    }
-    setLoading(true);
-    try {
-      const data = await authClient.getApplications();
-      setApplications(data as Application[]);
-    } catch (error) {
-      console.error("Failed to fetch applications:", error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    fetchApplications();
-  }, [canManageApplications]);
+  // Query: Applications list
+  const {
+    data: applications = [],
+    isLoading: loading,
+    refetch: refetchApplications,
+  } = authClient.getApplications.useQuery(
+    {},
+    { enabled: canManageApplications }
+  );
 
-  const handleCreateApplication = async () => {
-    if (!newAppName.trim()) {
-      toast.error("Application name is required");
-      return;
-    }
-    try {
-      const result = await authClient.createApplication({
-        name: newAppName.trim(),
-        description: newAppDescription.trim() || undefined,
-      });
+  // Mutations
+  const createApplicationMutation = authClient.createApplication.useMutation({
+    onSuccess: (result) => {
       setCreateAppDialogOpen(false);
       setNewAppName("");
       setNewAppDescription("");
@@ -105,15 +84,68 @@ export const ApplicationsTab: React.FC<ApplicationsTabProps> = ({
         secret: result.secret,
         applicationName: result.application.name,
       });
-      await fetchApplications();
-    } catch (error: unknown) {
+      void refetchApplications();
+    },
+    onError: (error) => {
       toast.error(
         error instanceof Error ? error.message : "Failed to create application"
       );
+    },
+  });
+
+  const updateApplicationMutation = authClient.updateApplication.useMutation({
+    onSuccess: () => {
+      void refetchApplications();
+    },
+    onError: (error) => {
+      toast.error(
+        error instanceof Error ? error.message : "Failed to update application"
+      );
+    },
+  });
+
+  const deleteApplicationMutation = authClient.deleteApplication.useMutation({
+    onSuccess: () => {
+      toast.success("Application deleted successfully");
+      setApplicationToDelete(undefined);
+      void refetchApplications();
+    },
+    onError: (error) => {
+      toast.error(
+        error instanceof Error ? error.message : "Failed to delete application"
+      );
+    },
+  });
+
+  const regenerateSecretMutation =
+    authClient.regenerateApplicationSecret.useMutation({
+      onSuccess: (result) => {
+        setNewSecretDialog({
+          open: true,
+          secret: result.secret,
+          applicationName: applicationToRegenerateSecret?.name ?? "",
+        });
+        setApplicationToRegenerateSecret(undefined);
+      },
+      onError: (error) => {
+        toast.error(
+          error instanceof Error ? error.message : "Failed to regenerate secret"
+        );
+      },
+    });
+
+  const handleCreateApplication = () => {
+    if (!newAppName.trim()) {
+      toast.error("Application name is required");
+      return;
     }
+    createApplicationMutation.mutate({
+      name: newAppName.trim(),
+      description: newAppDescription.trim() || undefined,
+    });
   };
 
-  const handleToggleApplicationRole = async (
+  const handleToggleApplicationRole = (
     appId: string,
     roleId: string,
     currentRoles: string[]
@@ -122,56 +154,20 @@ export const ApplicationsTab: React.FC<ApplicationsTabProps> = ({
       ? currentRoles.filter((r) => r !== roleId)
       : [...currentRoles, roleId];
 
-    try {
-      await authClient.updateApplication({
-        id: appId,
-        roles: newRoles,
-      });
-      setApplications(
-        applications.map((a) =>
-          a.id === appId ? { ...a, roles: newRoles } : a
-        )
-      );
-    } catch (error: unknown) {
-      toast.error(
-        error instanceof Error
-          ? error.message
-          : "Failed to update application roles"
-      );
-    }
+    updateApplicationMutation.mutate({
+      id: appId,
+      roles: newRoles,
+    });
   };
 
-  const handleDeleteApplication = async () => {
+  const handleDeleteApplication = () => {
     if (!applicationToDelete) return;
-    try {
-      await authClient.deleteApplication(applicationToDelete);
-      toast.success("Application deleted successfully");
-      setApplicationToDelete(undefined);
-      await fetchApplications();
-    } catch (error: unknown) {
-      toast.error(
-        error instanceof Error ? error.message : "Failed to delete application"
-      );
-    }
+    deleteApplicationMutation.mutate(applicationToDelete);
   };
 
-  const handleRegenerateSecret = async () => {
+  const handleRegenerateSecret = () => {
     if (!applicationToRegenerateSecret) return;
-    try {
-      const result = await authClient.regenerateApplicationSecret(
-        applicationToRegenerateSecret.id
-      );
-      setApplicationToRegenerateSecret(undefined);
-      setNewSecretDialog({
-        open: true,
-        secret: result.secret,
-        applicationName: applicationToRegenerateSecret.name,
-      });
-    } catch (error: unknown) {
-      toast.error(
-        error instanceof Error ? error.message : "Failed to regenerate secret"
-      );
-    }
+    regenerateSecretMutation.mutate(applicationToRegenerateSecret.id);
   };
 
   return (
@@ -199,7 +195,7 @@ export const ApplicationsTab: React.FC<ApplicationsTabProps> = ({
             <div className="flex justify-center py-4">
               <LoadingSpinner />
             </div>
-          ) : applications.length === 0 ? (
+          ) : (applications as Application[]).length === 0 ? (
             <p className="text-muted-foreground">
               No external applications configured yet.
             </p>
@@ -214,7 +210,7 @@ export const ApplicationsTab: React.FC<ApplicationsTabProps> = ({
                 </TableRow>
               </TableHeader>
               <TableBody>
-                {applications.map((app) => (
+                {(applications as Application[]).map((app) => (
                   <TableRow key={app.id}>
                     <TableCell>
                       <div className="flex flex-col">
@@ -303,7 +299,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>
@@ -322,7 +318,7 @@ export const ApplicationsTab: React.FC<ApplicationsTabProps> = ({
       <ConfirmationModal
         isOpen={!!applicationToRegenerateSecret}
         onClose={() => setApplicationToRegenerateSecret(undefined)}
-        onConfirm={() => void handleRegenerateSecret()}
+        onConfirm={handleRegenerateSecret}
         title="Regenerate Application Secret"
         message={`Are you sure you want to regenerate the secret for "${
           applicationToRegenerateSecret?.name ?? ""
@@ -365,7 +361,7 @@ export const ApplicationsTab: React.FC<ApplicationsTabProps> = ({
                 variant="outline"
                 size="sm"
                 onClick={() => {
-                  navigator.clipboard.writeText(newSecretDialog.secret);
+                  void navigator.clipboard.writeText(newSecretDialog.secret);
                   toast.success("Secret copied to clipboard");
                 }}
               >
@@ -448,8 +444,11 @@ export const ApplicationsTab: React.FC<ApplicationsTabProps> = ({
             >
               Cancel
             </Button>
-            <Button onClick={() => void handleCreateApplication()}>
-              Create
+            <Button
+              onClick={handleCreateApplication}
+              disabled={createApplicationMutation.isPending}
+            >
+              {createApplicationMutation.isPending ? "Creating..." : "Create"}
             </Button>
           </DialogFooter>
         </DialogContent>