@checkstack/auth-frontend 0.1.0 → 0.3.0

package/src/components/AuthSettingsPage.tsx

@@ -1,12 +1,19 @@
 import React, { useEffect, useState, useMemo } from "react";
 import { useSearchParams } from "react-router-dom";
-import { useApi, permissionApiRef, 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";
+  useApi,
+  accessApiRef,
+  usePluginClient,
+} from "@checkstack/frontend-api";
+import { PageLayout, Tabs, TabPanel } from "@checkstack/ui";
+import {
+  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";
@@ -16,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 permissionApi = useApi(permissionApiRef);
-  const toast = useToast();
+  const authClient = usePluginClient(AuthApi);
+  const accessApi = useApi(accessApiRef);
   const [searchParams, setSearchParams] = useSearchParams();
 
   const session = authApi.useSession();
@@ -27,15 +32,8 @@ 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 [permissions, setPermissions] = useState<Permission[]>([]);
-  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(() => {
@@ -58,62 +56,69 @@ 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
-  );
-  const canReadTeams = permissionApi.usePermission(
-    authPermissions.teamsRead.id
-  );
-  const canManageTeams = permissionApi.usePermission(
-    authPermissions.teamsManage.id
+  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);
+
+  // 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 permissionsLoading =
-    loading ||
+  const dataLoading =
+    usersLoading || rolesLoading || rulesLoading || strategiesLoading;
+
+  const accessRulesLoading =
+    dataLoading ||
     canReadUsers.loading ||
     canReadRoles.loading ||
     canManageStrategies.loading ||
     canManageApplications.loading ||
     canReadTeams.loading;
 
-  const hasAnyPermission =
+  const hasAnyAccess =
     canReadUsers.allowed ||
     canReadRoles.allowed ||
     canManageStrategies.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" | "teams" | "strategies" | "applications";
@@ -129,7 +134,7 @@ 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)
@@ -169,42 +174,24 @@ 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 permissionsData = await authClient.getPermissions();
-      const strategiesData = await authClient.getStrategies();
-      setUsers(usersData);
-      setRoles(rolesData);
-      setPermissions(permissionsData);
-      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
       title="Authentication Settings"
-      loading={permissionsLoading}
+      loading={accessRulesLoading}
       allowed={isAllowed}
     >
       <Tabs
@@ -220,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}
-          permissions={permissions}
+          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

@@ -1,11 +1,11 @@
 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,
   ExtensionSlot,
   pluginRegistry,
-  rpcApiRef,
+  usePluginClient,
   UserMenuItemsSlot,
   UserMenuItemsBottomSlot,
   UserMenuItemsContext,
@@ -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,24 +47,16 @@ 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);
+  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();
@@ -74,7 +66,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 +266,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 +288,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 +299,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 { useApi, usePluginClient } 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,14 +31,11 @@ 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);
+  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(() => {
@@ -58,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();
@@ -83,11 +67,16 @@ 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 {
-        navigate("/");
+        // Use full page navigation to ensure session state refreshes in navbar
+        globalThis.location.href = "/";
       }
     } catch (error) {
       console.error("Registration failed:", error);