@checkstack/auth-frontend 0.0.2

package/src/components/StrategiesTab.tsx

@@ -0,0 +1,276 @@
+import React, { useState, useEffect } from "react";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardContent,
+  Button,
+  LoadingSpinner,
+  Alert,
+  AlertIcon,
+  AlertContent,
+  AlertTitle,
+  AlertDescription,
+  DynamicForm,
+  useToast,
+} from "@checkstack/ui";
+import { Shield, RefreshCw } from "lucide-react";
+import { useApi } from "@checkstack/frontend-api";
+import { rpcApiRef } from "@checkstack/frontend-api";
+import { AuthApi } from "@checkstack/auth-common";
+import type { AuthStrategy } from "../api";
+import { AuthStrategyCard } from "./AuthStrategyCard";
+
+export interface StrategiesTabProps {
+  strategies: AuthStrategy[];
+  canManageStrategies: boolean;
+  canManageRegistration: boolean;
+  onDataChange: () => Promise<void>;
+}
+
+export const StrategiesTab: React.FC<StrategiesTabProps> = ({
+  strategies,
+  canManageStrategies,
+  canManageRegistration,
+  onDataChange,
+}) => {
+  const rpcApi = useApi(rpcApiRef);
+  const authClient = rpcApi.forPlugin(AuthApi);
+  const toast = useToast();
+
+  const [reloading, setReloading] = useState(false);
+  const [expandedStrategy, setExpandedStrategy] = useState<string>();
+  const [strategyConfigs, setStrategyConfigs] = useState<
+    Record<string, Record<string, unknown>>
+  >({});
+
+  // Registration state
+  const [registrationSchema, setRegistrationSchema] = useState<
+    Record<string, unknown> | undefined
+  >();
+  const [registrationSettings, setRegistrationSettings] = useState<{
+    allowRegistration: boolean;
+  }>({ allowRegistration: true });
+  const [loadingRegistration, setLoadingRegistration] = useState(true);
+  const [savingRegistration, setSavingRegistration] = useState(false);
+  const [registrationValid, setRegistrationValid] = useState(true);
+
+  // Initialize strategy configs when strategies change
+  useEffect(() => {
+    const configs: Record<string, Record<string, unknown>> = {};
+    for (const strategy of strategies) {
+      configs[strategy.id] = strategy.config || {};
+    }
+    setStrategyConfigs(configs);
+  }, [strategies]);
+
+  // Fetch registration data when we have permission
+  useEffect(() => {
+    if (!canManageRegistration) {
+      setLoadingRegistration(false);
+      return;
+    }
+
+    const fetchRegistrationData = async () => {
+      setLoadingRegistration(true);
+      try {
+        const [schema, status] = await Promise.all([
+          authClient.getRegistrationSchema(),
+          authClient.getRegistrationStatus(),
+        ]);
+        setRegistrationSchema(schema);
+        setRegistrationSettings(status);
+      } catch (error) {
+        console.error("Failed to fetch registration data:", error);
+      } finally {
+        setLoadingRegistration(false);
+      }
+    };
+    fetchRegistrationData();
+  }, [canManageRegistration, authClient]);
+
+  const handleToggleStrategy = async (strategyId: string, enabled: boolean) => {
+    try {
+      await authClient.updateStrategy({ id: strategyId, enabled });
+      await onDataChange();
+    } catch (error: unknown) {
+      const message =
+        error instanceof Error ? error.message : "Failed to toggle strategy";
+      toast.error(message);
+    }
+  };
+
+  const handleSaveStrategyConfig = async (
+    strategyId: string,
+    config: Record<string, unknown>
+  ) => {
+    try {
+      const strategy = strategies.find((s) => s.id === strategyId);
+      if (!strategy) {
+        toast.error("Strategy not found");
+        return;
+      }
+      setStrategyConfigs({
+        ...strategyConfigs,
+        [strategyId]: config,
+      });
+      await authClient.updateStrategy({
+        id: strategyId,
+        enabled: strategy.enabled,
+        config,
+      });
+      toast.success(
+        "Configuration saved successfully! Click 'Reload Authentication' to apply changes."
+      );
+    } catch (error: unknown) {
+      const message =
+        error instanceof Error
+          ? error.message
+          : "Failed to save strategy configuration";
+      toast.error(message);
+    }
+  };
+
+  const handleSaveRegistration = async () => {
+    setSavingRegistration(true);
+    try {
+      await authClient.setRegistrationStatus(registrationSettings);
+      toast.success("Registration settings saved successfully");
+    } catch (error: unknown) {
+      toast.error(
+        error instanceof Error
+          ? error.message
+          : "Failed to save registration settings"
+      );
+    } finally {
+      setSavingRegistration(false);
+    }
+  };
+
+  const handleReloadAuth = async () => {
+    setReloading(true);
+    try {
+      await authClient.reloadAuth();
+      toast.success("Authentication system reloaded successfully");
+      await onDataChange();
+    } catch (error: unknown) {
+      toast.error(
+        error instanceof Error
+          ? error.message
+          : "Failed to reload authentication"
+      );
+    } finally {
+      setReloading(false);
+    }
+  };
+
+  const enabledStrategies = strategies.filter((s) => s.enabled);
+  const hasNoEnabled = enabledStrategies.length === 0;
+
+  return (
+    <div className="space-y-4">
+      {/* Platform Settings */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Platform Settings</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {canManageRegistration ? (
+            loadingRegistration ? (
+              <div className="flex justify-center py-4">
+                <LoadingSpinner />
+              </div>
+            ) : registrationSchema ? (
+              <div className="space-y-4">
+                <DynamicForm
+                  schema={registrationSchema}
+                  value={registrationSettings}
+                  onChange={(value) =>
+                    setRegistrationSettings(
+                      value as { allowRegistration: boolean }
+                    )
+                  }
+                  onValidChange={setRegistrationValid}
+                />
+                <Button
+                  onClick={() => void handleSaveRegistration()}
+                  disabled={savingRegistration || !registrationValid}
+                >
+                  {savingRegistration ? "Saving..." : "Save Settings"}
+                </Button>
+              </div>
+            ) : (
+              <p className="text-muted-foreground">
+                Failed to load registration settings
+              </p>
+            )
+          ) : (
+            <p className="text-sm text-muted-foreground">
+              You don't have permission to manage registration settings.
+            </p>
+          )}
+        </CardContent>
+      </Card>
+
+      <div className="flex justify-end">
+        <Button
+          onClick={handleReloadAuth}
+          disabled={!canManageStrategies || reloading}
+          className="gap-2"
+        >
+          <RefreshCw className={`h-4 w-4 ${reloading ? "animate-spin" : ""}`} />
+          {reloading ? "Reloading..." : "Reload Authentication"}
+        </Button>
+      </div>
+
+      {hasNoEnabled && (
+        <Alert variant="warning">
+          <AlertIcon>
+            <Shield className="h-4 w-4" />
+          </AlertIcon>
+          <AlertContent>
+            <AlertTitle>No authentication strategies enabled</AlertTitle>
+            <AlertDescription>
+              You won't be able to log in! Please enable at least one
+              authentication strategy and reload authentication.
+            </AlertDescription>
+          </AlertContent>
+        </Alert>
+      )}
+
+      <Alert className="mt-6">
+        <AlertIcon>
+          <Shield className="h-4 w-4" />
+        </AlertIcon>
+        <AlertContent>
+          <AlertDescription>
+            Changes to authentication strategies require clicking the "Reload
+            Authentication" button to take effect. This reloads the auth system
+            without requiring a full restart.
+          </AlertDescription>
+        </AlertContent>
+      </Alert>
+
+      {strategies.map((strategy) => (
+        <AuthStrategyCard
+          key={strategy.id}
+          strategy={strategy}
+          onToggle={handleToggleStrategy}
+          onSaveConfig={handleSaveStrategyConfig}
+          disabled={!canManageStrategies}
+          expanded={expandedStrategy === strategy.id}
+          onExpandedChange={(isExpanded) => {
+            setExpandedStrategy(isExpanded ? strategy.id : undefined);
+          }}
+          config={strategyConfigs[strategy.id]}
+        />
+      ))}
+
+      {!canManageStrategies && (
+        <p className="text-xs text-muted-foreground mt-4">
+          You don't have permission to manage strategies.
+        </p>
+      )}
+    </div>
+  );
+};

package/src/components/UsersTab.tsx

@@ -0,0 +1,234 @@
+import React, { useState } from "react";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardContent,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Button,
+  Checkbox,
+  Alert,
+  AlertDescription,
+  ConfirmationModal,
+  useToast,
+} from "@checkstack/ui";
+import { Plus, Trash2 } from "lucide-react";
+import { useApi } from "@checkstack/frontend-api";
+import { rpcApiRef } from "@checkstack/frontend-api";
+import { AuthApi } from "@checkstack/auth-common";
+import type { AuthUser, Role, AuthStrategy } from "../api";
+import { CreateUserDialog } from "./CreateUserDialog";
+
+export interface UsersTabProps {
+  users: (AuthUser & { roles: string[] })[];
+  roles: Role[];
+  strategies: AuthStrategy[];
+  currentUserId?: string;
+  canReadUsers: boolean;
+  canCreateUsers: boolean;
+  canManageUsers: boolean;
+  canManageRoles: boolean;
+  onDataChange: () => Promise<void>;
+}
+
+export const UsersTab: React.FC<UsersTabProps> = ({
+  users,
+  roles,
+  strategies,
+  currentUserId,
+  canReadUsers,
+  canCreateUsers,
+  canManageUsers,
+  canManageRoles,
+  onDataChange,
+}) => {
+  const rpcApi = useApi(rpcApiRef);
+  const authClient = rpcApi.forPlugin(AuthApi);
+  const toast = useToast();
+
+  const [userToDelete, setUserToDelete] = useState<string>();
+  const [createUserDialogOpen, setCreateUserDialogOpen] = useState(false);
+
+  const hasCredentialStrategy = strategies.some(
+    (s) => s.id === "credential" && s.enabled
+  );
+
+  const handleDeleteUser = async () => {
+    if (!userToDelete) return;
+    try {
+      await authClient.deleteUser(userToDelete);
+      toast.success("User deleted successfully");
+      setUserToDelete(undefined);
+      await onDataChange();
+    } catch (error: unknown) {
+      toast.error(
+        error instanceof Error ? error.message : "Failed to delete user"
+      );
+    }
+  };
+
+  const handleToggleRole = async (
+    userId: string,
+    roleId: string,
+    currentRoles: string[]
+  ) => {
+    if (currentUserId === userId) {
+      toast.error("You cannot update your own roles");
+      return;
+    }
+
+    const newRoles = currentRoles.includes(roleId)
+      ? currentRoles.filter((r) => r !== roleId)
+      : [...currentRoles, roleId];
+
+    try {
+      await authClient.updateUserRoles({ userId, roles: newRoles });
+      await onDataChange();
+    } catch (error: unknown) {
+      const message =
+        error instanceof Error ? error.message : "Failed to update roles";
+      toast.error(message);
+    }
+  };
+
+  const handleCreateUser = async (data: {
+    name: string;
+    email: string;
+    password: string;
+  }) => {
+    try {
+      await authClient.createCredentialUser(data);
+      toast.success("User created successfully");
+      await onDataChange();
+    } catch (error: unknown) {
+      toast.error(
+        error instanceof Error ? error.message : "Failed to create user"
+      );
+      throw error;
+    }
+  };
+
+  return (
+    <>
+      <Card>
+        <CardHeader className="flex flex-row items-center justify-between">
+          <CardTitle>User Management</CardTitle>
+          {canCreateUsers && hasCredentialStrategy && (
+            <Button onClick={() => setCreateUserDialogOpen(true)} size="sm">
+              <Plus className="h-4 w-4 mr-2" />
+              Create User
+            </Button>
+          )}
+        </CardHeader>
+        <CardContent>
+          <Alert variant="info" className="mb-4">
+            <AlertDescription>
+              You cannot modify roles for your own account. This security
+              measure prevents accidental self-lockout from the system and
+              permission elevation.
+            </AlertDescription>
+          </Alert>
+          {canReadUsers ? (
+            users.length === 0 ? (
+              <p className="text-muted-foreground">No users found.</p>
+            ) : (
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>User</TableHead>
+                    <TableHead>Roles</TableHead>
+                    <TableHead className="text-right">Actions</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {users.map((user) => (
+                    <TableRow key={user.id}>
+                      <TableCell>
+                        <div className="flex flex-col">
+                          <span className="font-medium">
+                            {user.name || "N/A"}
+                          </span>
+                          <span className="text-xs text-muted-foreground">
+                            {user.email}
+                          </span>
+                        </div>
+                      </TableCell>
+                      <TableCell>
+                        <div className="flex flex-wrap flex-col gap-2">
+                          {roles
+                            .filter((role) => role.isAssignable !== false)
+                            .map((role) => (
+                              <div
+                                key={role.id}
+                                className="flex items-center space-x-2"
+                              >
+                                <Checkbox
+                                  id={`role-${user.id}-${role.id}`}
+                                  checked={user.roles.includes(role.id)}
+                                  disabled={
+                                    !canManageRoles || currentUserId === user.id
+                                  }
+                                  onCheckedChange={() =>
+                                    handleToggleRole(
+                                      user.id,
+                                      role.id,
+                                      user.roles
+                                    )
+                                  }
+                                />
+                                <label
+                                  htmlFor={`role-${user.id}-${role.id}`}
+                                  className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                                >
+                                  {role.name}
+                                </label>
+                              </div>
+                            ))}
+                        </div>
+                      </TableCell>
+                      <TableCell className="text-right">
+                        {canManageUsers &&
+                          user.email !== "admin@checkstack.com" && (
+                            <Button
+                              variant="destructive"
+                              size="icon"
+                              onClick={() => setUserToDelete(user.id)}
+                            >
+                              <Trash2 size={16} />
+                            </Button>
+                          )}
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            )
+          ) : (
+            <p className="text-muted-foreground">
+              You don't have permission to list users.
+            </p>
+          )}
+        </CardContent>
+      </Card>
+
+      <ConfirmationModal
+        isOpen={!!userToDelete}
+        onClose={() => setUserToDelete(undefined)}
+        onConfirm={handleDeleteUser}
+        title="Delete User"
+        message="Are you sure you want to delete this user? This action cannot be undone."
+      />
+
+      <CreateUserDialog
+        open={createUserDialogOpen}
+        onOpenChange={setCreateUserDialogOpen}
+        onSubmit={handleCreateUser}
+      />
+    </>
+  );
+};

package/src/hooks/useEnabledStrategies.ts

@@ -0,0 +1,54 @@
+import { useState, useEffect } from "react";
+import { useApi, rpcApiRef } from "@checkstack/frontend-api";
+import { AuthApi } from "@checkstack/auth-common";
+import type { EnabledAuthStrategy } from "../api";
+
+export interface UseEnabledStrategiesResult {
+  strategies: EnabledAuthStrategy[];
+  loading: boolean;
+  error?: Error;
+}
+
+export const useEnabledStrategies = (): UseEnabledStrategiesResult => {
+  const rpcApi = useApi(rpcApiRef);
+  const authClient = rpcApi.forPlugin(AuthApi);
+
+  const [strategies, setStrategies] = useState<EnabledAuthStrategy[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error>();
+
+  useEffect(() => {
+    let mounted = true;
+
+    const fetchStrategies = async () => {
+      try {
+        setLoading(true);
+        const result = await authClient.getEnabledStrategies();
+        if (mounted) {
+          setStrategies(result);
+          setError(undefined);
+        }
+      } catch (error_) {
+        if (mounted) {
+          setError(
+            error_ instanceof Error
+              ? error_
+              : new Error("Failed to fetch strategies")
+          );
+        }
+      } finally {
+        if (mounted) {
+          setLoading(false);
+        }
+      }
+    };
+
+    fetchStrategies();
+
+    return () => {
+      mounted = false;
+    };
+  }, [authClient]);
+
+  return { strategies, loading, error };
+};

package/src/hooks/usePermissions.ts

@@ -0,0 +1,43 @@
+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 };
+};

package/src/index.test.tsx

@@ -0,0 +1,95 @@
+import { describe, it, expect, mock, beforeEach } from "bun:test";
+import { authPlugin } from "./index";
+import { permissionApiRef } from "@checkstack/frontend-api";
+import { usePermissions } from "./hooks/usePermissions";
+
+// Mock the usePermissions hook
+mock.module("./hooks/usePermissions", () => ({
+  usePermissions: mock(),
+}));
+
+describe("AuthPermissionApi", () => {
+  let permissionApi: {
+    usePermission: (p: string) => { 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;
+  });
+
+  it("should return true if user has the permission", () => {
+    (usePermissions as ReturnType<typeof mock>).mockReturnValue({
+      permissions: ["test.permission"],
+      loading: false,
+    });
+
+    expect(permissionApi.usePermission("test.permission")).toEqual({
+      loading: false,
+      allowed: true,
+    });
+  });
+
+  it("should return false if user is missing the permission", () => {
+    (usePermissions as ReturnType<typeof mock>).mockReturnValue({
+      permissions: ["other.permission"],
+      loading: false,
+    });
+
+    expect(permissionApi.usePermission("test.permission")).toEqual({
+      loading: false,
+      allowed: false,
+    });
+  });
+
+  it("should return false if no session data (no permissions)", () => {
+    (usePermissions as ReturnType<typeof mock>).mockReturnValue({
+      permissions: [],
+      loading: false,
+    });
+
+    expect(permissionApi.usePermission("test.permission")).toEqual({
+      loading: false,
+      allowed: false,
+    });
+  });
+
+  it("should return false if no user permissions (empty array)", () => {
+    (usePermissions as ReturnType<typeof mock>).mockReturnValue({
+      permissions: [],
+      loading: false,
+    });
+
+    expect(permissionApi.usePermission("test.permission")).toEqual({
+      loading: false,
+      allowed: false,
+    });
+  });
+
+  it("should return true if user has the wildcard permission", () => {
+    (usePermissions as ReturnType<typeof mock>).mockReturnValue({
+      permissions: ["*"],
+      loading: false,
+    });
+
+    expect(permissionApi.usePermission("any.permission")).toEqual({
+      loading: false,
+      allowed: true,
+    });
+  });
+
+  it("should return loading state if permissions are loading", () => {
+    (usePermissions as ReturnType<typeof mock>).mockReturnValue({
+      permissions: [],
+      loading: true,
+    });
+
+    expect(permissionApi.usePermission("test.permission")).toEqual({
+      loading: true,
+      allowed: false,
+    });
+  });
+});