@checkstack/auth-frontend 0.1.0 → 0.3.0

package/src/index.test.tsx

@@ -1,95 +1,141 @@
 import { describe, it, expect, mock, beforeEach } from "bun:test";
 import { authPlugin } from "./index";
-import { permissionApiRef } from "@checkstack/frontend-api";
-import { usePermissions } from "./hooks/usePermissions";
+import { accessApiRef } from "@checkstack/frontend-api";
+import type { AccessRule } from "@checkstack/common";
+import { useAccessRules } from "./hooks/useAccessRules";
 
-// Mock the usePermissions hook
-mock.module("./hooks/usePermissions", () => ({
-  usePermissions: mock(),
+// Mock the useAccessRules hook
+mock.module("./hooks/useAccessRules", () => ({
+  useAccessRules: mock(),
 }));
 
-describe("AuthPermissionApi", () => {
-  let permissionApi: {
-    usePermission: (p: string) => { loading: boolean; allowed: boolean };
+// Test access rule objects
+const testReadAccess: AccessRule = {
+  id: "test.read",
+  resource: "test",
+  level: "read",
+  description: "Test read access",
+};
+
+const testManageAccess: AccessRule = {
+  id: "test.manage",
+  resource: "test",
+  level: "manage",
+  description: "Test manage access",
+};
+
+const otherAccess: AccessRule = {
+  id: "other.read",
+  resource: "other",
+  level: "read",
+  description: "Other read access",
+};
+
+describe("AuthAccessApi", () => {
+  let accessApi: {
+    useAccess: (p: AccessRule) => { loading: boolean; allowed: boolean };
   };
 
   beforeEach(() => {
-    const apiDef = authPlugin.apis?.find(
-      (a) => a.ref.id === permissionApiRef.id
-    );
-    if (!apiDef) throw new Error("Permission API not found in plugin");
-    permissionApi = apiDef.factory({ get: () => ({}) } as any) as any;
+    const apiDef = authPlugin.apis?.find((a) => a.ref.id === accessApiRef.id);
+    if (!apiDef) throw new Error("Access API not found in plugin");
+    accessApi = apiDef.factory({ get: () => ({}) } as any) as any;
   });
 
-  it("should return true if user has the permission", () => {
-    (usePermissions as ReturnType<typeof mock>).mockReturnValue({
-      permissions: ["test.permission"],
+  it("should return true if user has the access rule", () => {
+    (useAccessRules as ReturnType<typeof mock>).mockReturnValue({
+      accessRules: ["test.read"],
       loading: false,
     });
 
-    expect(permissionApi.usePermission("test.permission")).toEqual({
+    expect(accessApi.useAccess(testReadAccess)).toEqual({
       loading: false,
       allowed: true,
     });
   });
 
-  it("should return false if user is missing the permission", () => {
-    (usePermissions as ReturnType<typeof mock>).mockReturnValue({
-      permissions: ["other.permission"],
+  it("should return false if user is missing the access rule", () => {
+    (useAccessRules as ReturnType<typeof mock>).mockReturnValue({
+      accessRules: ["other.read"],
       loading: false,
     });
 
-    expect(permissionApi.usePermission("test.permission")).toEqual({
+    expect(accessApi.useAccess(testReadAccess)).toEqual({
       loading: false,
       allowed: false,
     });
   });
 
-  it("should return false if no session data (no permissions)", () => {
-    (usePermissions as ReturnType<typeof mock>).mockReturnValue({
-      permissions: [],
+  it("should return false if no session data (no access rules)", () => {
+    (useAccessRules as ReturnType<typeof mock>).mockReturnValue({
+      accessRules: [],
       loading: false,
     });
 
-    expect(permissionApi.usePermission("test.permission")).toEqual({
+    expect(accessApi.useAccess(testReadAccess)).toEqual({
       loading: false,
       allowed: false,
     });
   });
 
-  it("should return false if no user permissions (empty array)", () => {
-    (usePermissions as ReturnType<typeof mock>).mockReturnValue({
-      permissions: [],
+  it("should return false if no user access rules (empty array)", () => {
+    (useAccessRules as ReturnType<typeof mock>).mockReturnValue({
+      accessRules: [],
       loading: false,
     });
 
-    expect(permissionApi.usePermission("test.permission")).toEqual({
+    expect(accessApi.useAccess(testReadAccess)).toEqual({
       loading: false,
       allowed: false,
     });
   });
 
-  it("should return true if user has the wildcard permission", () => {
-    (usePermissions as ReturnType<typeof mock>).mockReturnValue({
-      permissions: ["*"],
+  it("should return true if user has the wildcard access rule", () => {
+    (useAccessRules as ReturnType<typeof mock>).mockReturnValue({
+      accessRules: ["*"],
       loading: false,
     });
 
-    expect(permissionApi.usePermission("any.permission")).toEqual({
+    expect(accessApi.useAccess(otherAccess)).toEqual({
       loading: false,
       allowed: true,
     });
   });
 
-  it("should return loading state if permissions are loading", () => {
-    (usePermissions as ReturnType<typeof mock>).mockReturnValue({
-      permissions: [],
+  it("should return true if user has manage access for a manage check", () => {
+    (useAccessRules as ReturnType<typeof mock>).mockReturnValue({
+      accessRules: ["test.manage"],
+      loading: false,
+    });
+
+    expect(accessApi.useAccess(testManageAccess)).toEqual({
+      loading: false,
+      allowed: true,
+    });
+  });
+
+  it("should return loading state if access rules are loading", () => {
+    (useAccessRules as ReturnType<typeof mock>).mockReturnValue({
+      accessRules: [],
       loading: true,
     });
 
-    expect(permissionApi.usePermission("test.permission")).toEqual({
+    expect(accessApi.useAccess(testReadAccess)).toEqual({
       loading: true,
       allowed: false,
     });
   });
+
+  it("should return true if user has manage access for a read check", () => {
+    (useAccessRules as ReturnType<typeof mock>).mockReturnValue({
+      accessRules: ["test.manage"],
+      loading: false,
+    });
+
+    // User has test.manage, which implies test.read
+    expect(accessApi.useAccess(testReadAccess)).toEqual({
+      loading: false,
+      allowed: true,
+    });
+  });
 });

package/src/index.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import {
   ApiRef,
-  permissionApiRef,
-  PermissionApi,
+  accessApiRef,
+  AccessApi,
   createFrontendPlugin,
   createSlotExtension,
   NavbarRightSlot,
@@ -22,71 +22,52 @@ import { ChangePasswordPage } from "./components/ChangePasswordPage";
 import { authApiRef, AuthApi, AuthSession } from "./api";
 import { getAuthClientLazy } from "./lib/auth-client";
 
-import { usePermissions } from "./hooks/usePermissions";
+import { useAccessRules } from "./hooks/useAccessRules";
 
-import { PermissionAction, qualifyPermissionId } from "@checkstack/common";
+import type { AccessRule } from "@checkstack/common";
 import { useNavigate } from "react-router-dom";
 import { Settings2, Key } from "lucide-react";
 import { DropdownMenuItem } from "@checkstack/ui";
 import { UserMenuItemsContext } from "@checkstack/frontend-api";
 import { AuthSettingsPage } from "./components/AuthSettingsPage";
 import {
-  permissions as authPermissions,
+  authAccess,
   authRoutes,
   pluginMetadata,
 } from "@checkstack/auth-common";
 import { resolveRoute } from "@checkstack/common";
 
-class AuthPermissionApi implements PermissionApi {
-  usePermission(permission: string): { loading: boolean; allowed: boolean } {
-    const { permissions, loading } = usePermissions();
-
-    if (loading) {
-      return { loading: true, allowed: false };
-    }
-
-    // If no user, or user has no permissions, return false
-    if (!permissions || permissions.length === 0) {
-      return { loading: false, allowed: false };
-    }
-    const allowed =
-      permissions.includes("*") || permissions.includes(permission);
-    return { loading: false, allowed };
-  }
-
-  useResourcePermission(
-    resource: string,
-    action: PermissionAction
-  ): { loading: boolean; allowed: boolean } {
-    const { permissions, loading } = usePermissions();
+/**
+ * Unified access API implementation.
+ * Uses AccessRule objects for access checks.
+ */
+class AuthAccessApi implements AccessApi {
+  useAccess(accessRule: AccessRule): { loading: boolean; allowed: boolean } {
+    const { accessRules, loading } = useAccessRules();
 
     if (loading) {
       return { loading: true, allowed: false };
     }
 
-    if (!permissions || permissions.length === 0) {
+    // If no user, or user has no access rules, return false
+    if (!accessRules || accessRules.length === 0) {
       return { loading: false, allowed: false };
     }
 
-    const isWildcard = permissions.includes("*");
-    const hasResourceManage = permissions.includes(`${resource}.manage`);
-    const hasSpecificPermission = permissions.includes(`${resource}.${action}`);
+    const accessRuleId = accessRule.id;
 
-    // manage implies read
-    const isAllowed =
-      isWildcard ||
-      hasResourceManage ||
-      (action === "read" && hasResourceManage) ||
-      hasSpecificPermission;
+    // Check wildcard, exact match, or manage implies read
+    const isWildcard = accessRules.includes("*");
+    const hasExact = accessRules.includes(accessRuleId);
 
-    return { loading: false, allowed: isAllowed };
-  }
+    // For read actions, also check if user has manage access for the same resource
+    const hasManage =
+      accessRule.level === "read"
+        ? accessRules.includes(`${accessRule.resource}.manage`)
+        : false;
 
-  useManagePermission(resource: string): {
-    loading: boolean;
-    allowed: boolean;
-  } {
-    return this.useResourcePermission(resource, "manage");
+    const allowed = isWildcard || hasExact || hasManage;
+    return { loading: false, allowed };
   }
 }
 
@@ -180,8 +161,8 @@ export const authPlugin = createFrontendPlugin({
       factory: () => new BetterAuthApi(),
     },
     {
-      ref: permissionApiRef as ApiRef<unknown>,
-      factory: () => new AuthPermissionApi(),
+      ref: accessApiRef as ApiRef<unknown>,
+      factory: () => new AuthAccessApi(),
     },
   ],
   routes: [
@@ -222,12 +203,9 @@ export const authPlugin = createFrontendPlugin({
     },
     createSlotExtension(UserMenuItemsSlot, {
       id: "auth.user-menu.settings",
-      component: ({ permissions: userPerms }: UserMenuItemsContext) => {
+      component: ({ accessRules: userPerms }: UserMenuItemsContext) => {
         const navigate = useNavigate();
-        const qualifiedId = qualifyPermissionId(
-          pluginMetadata,
-          authPermissions.strategiesManage
-        );
+        const qualifiedId = `${pluginMetadata.pluginId}.${authAccess.strategies.id}`;
         const canManage =
           userPerms.includes("*") || userPerms.includes(qualifiedId);
 

package/src/lib/auth-client.ts

@@ -1,10 +1,13 @@
 import { useMemo } from "react";
 import { createAuthClient } from "better-auth/react";
-import { useRuntimeConfig } from "@checkstack/frontend-api";
+import {
+  useRuntimeConfig,
+  getCachedRuntimeConfig,
+} from "@checkstack/frontend-api";
 
 // Cache for lazy-initialized client
 let cachedClient: ReturnType<typeof createAuthClient> | undefined;
-let configPromise: Promise<string> | undefined;
+let cachedBaseUrl: string | undefined;
 
 /**
  * React hook to get the auth client with proper runtime config.
@@ -25,31 +28,23 @@ export function useAuthClient() {
 
 /**
  * Lazy-initialized auth client for class-based APIs.
- * Fetches config from /api/config if not already cached.
- * Use useAuthClient hook in React components instead.
+ * Uses the cached runtime config from RuntimeConfigProvider.
+ *
+ * Note: This should only be called AFTER RuntimeConfigProvider has loaded.
+ * Components rendered inside the provider tree are guaranteed to have config available.
  */
 export function getAuthClientLazy(): ReturnType<typeof createAuthClient> {
-  if (!cachedClient) {
-    // Create with default URL initially
+  const config = getCachedRuntimeConfig();
+  const baseUrl = config?.baseUrl ?? "http://localhost:3000";
+
+  // Recreate client if baseUrl changed or not yet created
+  if (!cachedClient || cachedBaseUrl !== baseUrl) {
+    cachedBaseUrl = baseUrl;
     cachedClient = createAuthClient({
-      baseURL: "http://localhost:3000",
+      baseURL: baseUrl,
       basePath: "/api/auth",
     });
-
-    // Fetch real config and update
-    if (!configPromise) {
-      configPromise = fetch("/api/config")
-        .then((res) => res.json())
-        .then((data: { baseUrl: string }) => data.baseUrl)
-        .catch(() => "http://localhost:3000");
-    }
-
-    configPromise.then((baseUrl) => {
-      cachedClient = createAuthClient({
-        baseURL: baseUrl,
-        basePath: "/api/auth",
-      });
-    });
   }
+
   return cachedClient;
 }

package/src/hooks/usePermissions.ts

@@ -1,43 +0,0 @@
-import { useEffect, useState } from "react";
-import { useAuthClient } from "../lib/auth-client";
-import { rpcApiRef, useApi } from "@checkstack/frontend-api";
-import { AuthApi } from "@checkstack/auth-common";
-
-export const usePermissions = () => {
-  const authClient = useAuthClient();
-  const { data: session, isPending: sessionPending } = authClient.useSession();
-  const [permissions, setPermissions] = useState<string[]>([]);
-  const [loading, setLoading] = useState(true);
-  const rpcApi = useApi(rpcApiRef);
-
-  useEffect(() => {
-    // Don't set loading=false while session is still pending
-    // This prevents "Access Denied" flash during initial page load
-    if (sessionPending) {
-      return;
-    }
-
-    if (!session?.user) {
-      setPermissions([]);
-      setLoading(false);
-      return;
-    }
-
-    const fetchPermissions = async () => {
-      try {
-        const authRpc = rpcApi.forPlugin(AuthApi);
-        const data = await authRpc.permissions();
-        if (Array.isArray(data.permissions)) {
-          setPermissions(data.permissions);
-        }
-      } catch (error) {
-        console.error("Failed to fetch permissions", error);
-      } finally {
-        setLoading(false);
-      }
-    };
-    fetchPermissions();
-  }, [session?.user?.id, sessionPending, rpcApi]);
-
-  return { permissions, loading };
-};