@checkstack/auth-frontend 0.2.0 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,67 @@
 # @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

package/package.json

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

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">
@@ -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>

package/src/components/AuthSettingsPage.tsx

@@ -1,7 +1,11 @@
 import React, { useEffect, useState, useMemo } from "react";
 import { useSearchParams } from "react-router-dom";
-import { useApi, accessApiRef, rpcApiRef } from "@checkstack/frontend-api";
-import { PageLayout, useToast, Tabs, TabPanel } from "@checkstack/ui";
+import {
+  useApi,
+  accessApiRef,
+  usePluginClient,
+} from "@checkstack/frontend-api";
+import { PageLayout, Tabs, TabPanel } from "@checkstack/ui";
 import {
   authApiRef,
   AuthUser,
@@ -19,10 +23,8 @@ import { TeamsTab } from "./TeamsTab";
 
 export const AuthSettingsPage: React.FC = () => {
   const authApi = useApi(authApiRef);
-  const rpcApi = useApi(rpcApiRef);
-  const authClient = rpcApi.forPlugin(AuthApi);
+  const authClient = usePluginClient(AuthApi);
   const accessApi = useApi(accessApiRef);
-  const toast = useToast();
   const [searchParams, setSearchParams] = useSearchParams();
 
   const session = authApi.useSession();
@@ -30,11 +32,6 @@ export const AuthSettingsPage: React.FC = () => {
   const [activeTab, setActiveTab] = useState<
     "users" | "roles" | "teams" | "strategies" | "applications"
   >("users");
-  const [users, setUsers] = useState<(AuthUser & { roles: string[] })[]>([]);
-  const [roles, setRoles] = useState<Role[]>([]);
-  const [accessRuleEntries, setAccessRuleEntries] = useState<AccessRuleEntry[]>([]);
-  const [strategies, setStrategies] = useState<AuthStrategy[]>([]);
-  const [loading, setLoading] = useState(true);
 
   const canReadUsers = accessApi.useAccess(authAccess.users.read);
 
@@ -72,8 +69,39 @@ export const AuthSettingsPage: React.FC = () => {
   const canReadTeams = accessApi.useAccess(authAccess.teams.read);
   const canManageTeams = accessApi.useAccess(authAccess.teams.manage);
 
+  // Queries: Fetch data from API
+  const {
+    data: users = [],
+    isLoading: usersLoading,
+    refetch: refetchUsers,
+  } = authClient.getUsers.useQuery({}, { enabled: canReadUsers.allowed });
+
+  const {
+    data: roles = [],
+    isLoading: rolesLoading,
+    refetch: refetchRoles,
+  } = authClient.getRoles.useQuery({}, { enabled: canReadRoles.allowed });
+
+  const {
+    data: accessRuleEntries = [],
+    isLoading: rulesLoading,
+    refetch: refetchRules,
+  } = authClient.getAccessRules.useQuery({}, { enabled: canReadRoles.allowed });
+
+  const {
+    data: strategies = [],
+    isLoading: strategiesLoading,
+    refetch: refetchStrategies,
+  } = authClient.getStrategies.useQuery(
+    {},
+    { enabled: canManageStrategies.allowed }
+  );
+
+  const dataLoading =
+    usersLoading || rolesLoading || rulesLoading || strategiesLoading;
+
   const accessRulesLoading =
-    loading ||
+    dataLoading ||
     canReadUsers.loading ||
     canReadRoles.loading ||
     canManageStrategies.loading ||
@@ -146,37 +174,19 @@ export const AuthSettingsPage: React.FC = () => {
     }
   }, [visibleTabs, activeTab]);
 
-  const fetchData = async () => {
-    setLoading(true);
-    try {
-      const usersData = (await authClient.getUsers()) as (AuthUser & {
-        roles: string[];
-      })[];
-      const rolesData = await authClient.getRoles();
-      const accessRulesData = await authClient.getAccessRules();
-      const strategiesData = await authClient.getStrategies();
-      setUsers(usersData);
-      setRoles(rolesData);
-      setAccessRuleEntries(accessRulesData);
-      setStrategies(strategiesData);
-    } catch (error: unknown) {
-      const message =
-        error instanceof Error ? error.message : "Failed to fetch data";
-      toast.error(message);
-      console.error(error);
-    } finally {
-      setLoading(false);
-    }
+  const handleDataChange = async () => {
+    await Promise.all([
+      refetchUsers(),
+      refetchRoles(),
+      refetchRules(),
+      refetchStrategies(),
+    ]);
   };
 
-  // Initial data fetch
-  useEffect(() => {
-    fetchData();
-  }, []);
-
   // Get current user's role IDs for the RolesTab
+  const typedUsers = users as (AuthUser & { roles: string[] })[];
   const currentUserRoleIds =
-    users.find((u) => u.id === session.data?.user?.id)?.roles || [];
+    typedUsers.find((u) => u.id === session.data?.user?.id)?.roles || [];
 
   return (
     <PageLayout
@@ -197,52 +207,52 @@ export const AuthSettingsPage: React.FC = () => {
 
       <TabPanel id="users" activeTab={activeTab}>
         <UsersTab
-          users={users}
-          roles={roles}
-          strategies={strategies}
+          users={typedUsers}
+          roles={roles as Role[]}
+          strategies={strategies as AuthStrategy[]}
           currentUserId={session.data?.user?.id}
           canReadUsers={canReadUsers.allowed}
           canCreateUsers={canCreateUsers.allowed}
           canManageUsers={canManageUsers.allowed}
           canManageRoles={canManageRoles.allowed}
-          onDataChange={fetchData}
+          onDataChange={handleDataChange}
         />
       </TabPanel>
 
       <TabPanel id="roles" activeTab={activeTab}>
         <RolesTab
-          roles={roles}
-          accessRulesList={accessRuleEntries}
+          roles={roles as Role[]}
+          accessRulesList={accessRuleEntries as AccessRuleEntry[]}
           userRoleIds={currentUserRoleIds}
           canReadRoles={canReadRoles.allowed}
           canCreateRoles={canCreateRoles.allowed}
           canUpdateRoles={canUpdateRoles.allowed}
           canDeleteRoles={canDeleteRoles.allowed}
-          onDataChange={fetchData}
+          onDataChange={handleDataChange}
         />
       </TabPanel>
 
       <TabPanel id="teams" activeTab={activeTab}>
         <TeamsTab
-          users={users}
+          users={typedUsers}
           canReadTeams={canReadTeams.allowed}
           canManageTeams={canManageTeams.allowed}
-          onDataChange={fetchData}
+          onDataChange={handleDataChange}
         />
       </TabPanel>
 
       <TabPanel id="strategies" activeTab={activeTab}>
         <StrategiesTab
-          strategies={strategies}
+          strategies={strategies as AuthStrategy[]}
           canManageStrategies={canManageStrategies.allowed}
           canManageRegistration={canManageRegistration.allowed}
-          onDataChange={fetchData}
+          onDataChange={handleDataChange}
         />
       </TabPanel>
 
       <TabPanel id="applications" activeTab={activeTab}>
         <ApplicationsTab
-          roles={roles}
+          roles={roles as Role[]}
           canManageApplications={canManageApplications.allowed}
         />
       </TabPanel>

package/src/components/LoginPage.tsx

@@ -5,7 +5,7 @@ import {
   useApi,
   ExtensionSlot,
   pluginRegistry,
-  rpcApiRef,
+  usePluginClient,
   UserMenuItemsSlot,
   UserMenuItemsBottomSlot,
   UserMenuItemsContext,
@@ -49,22 +49,14 @@ export const LoginPage = () => {
   const [loading, setLoading] = useState(false);
 
   const authApi = useApi(authApiRef);
-  const rpcApi = useApi(rpcApiRef);
-  const authRpcClient = rpcApi.forPlugin(AuthApi);
+  const authClient = usePluginClient(AuthApi);
   const { strategies, loading: strategiesLoading } = useEnabledStrategies();
-  const [registrationAllowed, setRegistrationAllowed] = useState<boolean>(true);
 
-  useEffect(() => {
-    authRpcClient
-      .getRegistrationStatus()
-      .then(({ allowRegistration }) => {
-        setRegistrationAllowed(allowRegistration);
-      })
-      .catch((error: Error) => {
-        console.error("Failed to check registration status:", error);
-        setRegistrationAllowed(true);
-      });
-  }, [authRpcClient]);
+  // Query: Registration status
+  const { data: registrationData } = authClient.getRegistrationStatus.useQuery(
+    {}
+  );
+  const registrationAllowed = registrationData?.allowRegistration ?? true;
 
   const handleCredentialLogin = async (e: React.FormEvent) => {
     e.preventDefault();

package/src/components/RegisterPage.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { Link } from "react-router-dom";
 import { AlertCircle } from "lucide-react";
-import { useApi, rpcApiRef } from "@checkstack/frontend-api";
+import { useApi, usePluginClient } from "@checkstack/frontend-api";
 import { authApiRef } from "../api";
 import { AuthApi, authRoutes, passwordSchema } from "@checkstack/auth-common";
 import { resolveRoute } from "@checkstack/common";
@@ -33,12 +33,9 @@ export const RegisterPage = () => {
   const [validationErrors, setValidationErrors] = useState<string[]>([]);
 
   const authApi = useApi(authApiRef);
-  const rpcApi = useApi(rpcApiRef);
-  const authRpcClient = rpcApi.forPlugin(AuthApi);
+  const authClient = usePluginClient(AuthApi);
   const { strategies, loading: strategiesLoading } = useEnabledStrategies();
-  const [registrationAllowed, setRegistrationAllowed] = useState<boolean>(true);
-  const [checkingRegistration, setCheckingRegistration] = useState(true);
-  const authClient = useAuthClient();
+  const authBetterClient = useAuthClient();
 
   // Validate password on change
   useEffect(() => {
@@ -54,19 +51,10 @@ export const RegisterPage = () => {
     }
   }, [password]);
 
-  useEffect(() => {
-    authRpcClient
-      .getRegistrationStatus()
-      .then(({ allowRegistration }) => {
-        setRegistrationAllowed(allowRegistration);
-      })
-      .catch((error: Error) => {
-        console.error("Failed to check registration status:", error);
-        // Default to allowed on error to avoid blocking
-        setRegistrationAllowed(true);
-      })
-      .finally(() => setCheckingRegistration(false));
-  }, [authRpcClient]);
+  // Query: Registration status
+  const { data: registrationData, isLoading: checkingRegistration } =
+    authClient.getRegistrationStatus.useQuery({});
+  const registrationAllowed = registrationData?.allowRegistration ?? true;
 
   const handleCredentialRegister = async (e: React.FormEvent) => {
     e.preventDefault();
@@ -79,7 +67,11 @@ export const RegisterPage = () => {
 
     setLoading(true);
     try {
-      const res = await authClient.signUp.email({ name, email, password });
+      const res = await authBetterClient.signUp.email({
+        name,
+        email,
+        password,
+      });
       if (res.error) {
         console.error("Registration failed:", res.error);
       } else {

package/src/components/RoleDialog.tsx

@@ -83,21 +83,17 @@ export const RoleDialog: React.FC<RoleDialogProps> = ({
     setSelectedAccessRules(newSelected);
   };
 
-  const handleSave = async () => {
+  const handleSave = () => {
     setSaving(true);
-    try {
-      await onSave({
-        ...(isEditing && { id: role.id }),
-        name,
-        description: description || undefined,
-        accessRules: [...selectedAccessRules],
-      });
-      onOpenChange(false);
-    } catch (error) {
-      console.error("Failed to save role:", error);
-    } finally {
-      setSaving(false);
-    }
+    onSave({
+      ...(isEditing && { id: role.id }),
+      name,
+      description: description || undefined,
+      accessRules: [...selectedAccessRules],
+    });
+    // Dialog closing and saving state are managed by the parent via onDataChange callback
+    onOpenChange(false);
+    setSaving(false);
   };
 
   let buttonText = "Create";
@@ -149,8 +145,8 @@ export const RoleDialog: React.FC<RoleDialogProps> = ({
             {isAdminRole && (
               <Alert variant="info" className="mb-3">
                 <AlertDescription>
-                  The administrator role has wildcard access to all access rules.
-                  These cannot be modified.
+                  The administrator role has wildcard access to all access
+                  rules. These cannot be modified.
                 </AlertDescription>
               </Alert>
             )}