@checkstack/auth-frontend 0.0.2

package/playwright.config.ts

@@ -0,0 +1,5 @@
+import { createPlaywrightConfig } from "@checkstack/test-utils-frontend/playwright";
+
+export default createPlaywrightConfig({
+  baseURL: "http://localhost:5173",
+});

package/src/api.ts

@@ -0,0 +1,78 @@
+import { createApiRef } from "@checkstack/frontend-api";
+import type { LucideIconName } from "@checkstack/common";
+
+// Types for better-auth entities
+export interface AuthUser {
+  id: string;
+  email: string;
+  name?: string;
+  image?: string;
+}
+
+export interface AuthSession {
+  session: {
+    id: string;
+    userId: string;
+    token: string;
+    expiresAt: Date;
+  };
+  user: AuthUser;
+}
+
+export interface Role {
+  id: string;
+  name: string;
+  description?: string | null;
+  isSystem?: boolean;
+  isAssignable?: boolean; // False for anonymous role - not assignable to users
+  permissions?: string[];
+}
+
+export interface Permission {
+  id: string;
+  description?: string;
+}
+
+export interface AuthStrategy {
+  id: string;
+  displayName: string;
+  description?: string;
+  icon?: LucideIconName;
+  enabled: boolean;
+  configVersion: number;
+  configSchema: Record<string, unknown>; // JSON Schema
+  config?: Record<string, unknown>;
+  adminInstructions?: string; // Markdown instructions for admins
+}
+
+export interface EnabledAuthStrategy {
+  id: string;
+  displayName: string;
+  description?: string;
+  type: "credential" | "social";
+  icon?: LucideIconName;
+  requiresManualRegistration: boolean;
+}
+
+/**
+ * AuthApi provides better-auth client methods for authentication.
+ * For RPC calls (including getEnabledStrategies, user/role/strategy management), use:
+ *   const authClient = rpcApiRef.forPlugin<AuthClient>("auth");
+ */
+export interface AuthApi {
+  // Better-auth methods (not RPC)
+  signIn(
+    email: string,
+    password: string
+  ): Promise<{ data?: AuthSession; error?: Error }>;
+  signInWithSocial(provider: string): Promise<void>;
+  signOut(): Promise<void>;
+  getSession(): Promise<{ data?: AuthSession; error?: Error }>;
+  useSession(): {
+    data?: AuthSession;
+    isPending: boolean;
+    error?: Error;
+  };
+}
+
+export const authApiRef = createApiRef<AuthApi>("auth.api");

package/src/components/ApplicationsTab.tsx

@@ -0,0 +1,452 @@
+import React, { useState, useEffect } from "react";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardContent,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Button,
+  Checkbox,
+  LoadingSpinner,
+  Alert,
+  AlertDescription,
+  ConfirmationModal,
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  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 { AuthApi } from "@checkstack/auth-common";
+import type { Role } from "../api";
+
+export interface Application {
+  id: string;
+  name: string;
+  description?: string | null;
+  roles: string[];
+  createdById: string;
+  createdAt: Date;
+  lastUsedAt?: Date | null;
+}
+
+export interface ApplicationsTabProps {
+  roles: Role[];
+  canManageApplications: boolean;
+}
+
+export const ApplicationsTab: React.FC<ApplicationsTabProps> = ({
+  roles,
+  canManageApplications,
+}) => {
+  const rpcApi = useApi(rpcApiRef);
+  const authClient = rpcApi.forPlugin(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 }>();
+  const [newSecretDialog, setNewSecretDialog] = useState<{
+    open: boolean;
+    secret: string;
+    applicationName: string;
+  }>({ open: false, secret: "", applicationName: "" });
+  const [createAppDialogOpen, setCreateAppDialogOpen] = useState(false);
+  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]);
+
+  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,
+      });
+      setCreateAppDialogOpen(false);
+      setNewAppName("");
+      setNewAppDescription("");
+      setNewSecretDialog({
+        open: true,
+        secret: result.secret,
+        applicationName: result.application.name,
+      });
+      await fetchApplications();
+    } catch (error: unknown) {
+      toast.error(
+        error instanceof Error ? error.message : "Failed to create application"
+      );
+    }
+  };
+
+  const handleToggleApplicationRole = async (
+    appId: string,
+    roleId: string,
+    currentRoles: string[]
+  ) => {
+    const newRoles = currentRoles.includes(roleId)
+      ? 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"
+      );
+    }
+  };
+
+  const handleDeleteApplication = async () => {
+    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"
+      );
+    }
+  };
+
+  const handleRegenerateSecret = async () => {
+    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"
+      );
+    }
+  };
+
+  return (
+    <>
+      <Card>
+        <CardHeader className="flex flex-row items-center justify-between">
+          <CardTitle>External Applications</CardTitle>
+          {canManageApplications && (
+            <Button onClick={() => setCreateAppDialogOpen(true)} size="sm">
+              <Plus className="h-4 w-4 mr-2" />
+              Create Application
+            </Button>
+          )}
+        </CardHeader>
+        <CardContent>
+          <Alert variant="info" className="mb-4">
+            <AlertDescription>
+              External applications use API keys to authenticate with the
+              Checkstack API. The secret is only shown once when created—store it
+              securely.
+            </AlertDescription>
+          </Alert>
+
+          {loading ? (
+            <div className="flex justify-center py-4">
+              <LoadingSpinner />
+            </div>
+          ) : applications.length === 0 ? (
+            <p className="text-muted-foreground">
+              No external applications configured yet.
+            </p>
+          ) : (
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Application</TableHead>
+                  <TableHead>Roles</TableHead>
+                  <TableHead>Last Used</TableHead>
+                  <TableHead className="text-right">Actions</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {applications.map((app) => (
+                  <TableRow key={app.id}>
+                    <TableCell>
+                      <div className="flex flex-col">
+                        <span className="font-medium">{app.name}</span>
+                        {app.description && (
+                          <span className="text-xs text-muted-foreground">
+                            {app.description}
+                          </span>
+                        )}
+                        <span className="text-xs text-muted-foreground font-mono">
+                          ID: {app.id}
+                        </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={`app-role-${app.id}-${role.id}`}
+                                checked={app.roles.includes(role.id)}
+                                disabled={!canManageApplications}
+                                onCheckedChange={() =>
+                                  handleToggleApplicationRole(
+                                    app.id,
+                                    role.id,
+                                    app.roles
+                                  )
+                                }
+                              />
+                              <label
+                                htmlFor={`app-role-${app.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>
+                      {app.lastUsedAt ? (
+                        <span className="text-sm">
+                          {new Date(app.lastUsedAt).toLocaleDateString()}
+                        </span>
+                      ) : (
+                        <span className="text-xs text-muted-foreground">
+                          Never
+                        </span>
+                      )}
+                    </TableCell>
+                    <TableCell className="text-right">
+                      <div className="flex justify-end gap-2">
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={() =>
+                            setApplicationToRegenerateSecret({
+                              id: app.id,
+                              name: app.name,
+                            })
+                          }
+                          title="Regenerate Secret"
+                        >
+                          <RotateCcw className="h-4 w-4" />
+                        </Button>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => setApplicationToDelete(app.id)}
+                        >
+                          <Trash2 className="h-4 w-4" />
+                        </Button>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          )}
+
+          {!canManageApplications && (
+            <p className="text-xs text-muted-foreground mt-4">
+              You don't have permission to manage applications.
+            </p>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Delete Application Confirmation */}
+      <ConfirmationModal
+        isOpen={!!applicationToDelete}
+        onClose={() => setApplicationToDelete(undefined)}
+        onConfirm={handleDeleteApplication}
+        title="Delete Application"
+        message="Are you sure you want to delete this application? Its API key will stop working immediately."
+      />
+
+      {/* Regenerate Secret Confirmation */}
+      <ConfirmationModal
+        isOpen={!!applicationToRegenerateSecret}
+        onClose={() => setApplicationToRegenerateSecret(undefined)}
+        onConfirm={() => void handleRegenerateSecret()}
+        title="Regenerate Application Secret"
+        message={`Are you sure you want to regenerate the secret for "${
+          applicationToRegenerateSecret?.name ?? ""
+        }"? The current secret will stop working immediately and all calling applications will break until updated.`}
+      />
+
+      {/* New Secret Display Dialog */}
+      <Dialog
+        open={newSecretDialog.open}
+        onOpenChange={(open) => {
+          if (!open) {
+            setNewSecretDialog({
+              open: false,
+              secret: "",
+              applicationName: "",
+            });
+          }
+        }}
+      >
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>
+              Application Secret: {newSecretDialog.applicationName}
+            </DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4">
+            <Alert variant="warning">
+              <AlertDescription>
+                Copy this secret now—it will never be shown again!
+              </AlertDescription>
+            </Alert>
+            <div className="flex items-center gap-2">
+              <code className="flex-1 bg-muted p-2 rounded font-mono text-sm break-all">
+                {newSecretDialog.secret}
+              </code>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => {
+                  navigator.clipboard.writeText(newSecretDialog.secret);
+                  toast.success("Secret copied to clipboard");
+                }}
+              >
+                <Copy className="h-4 w-4" />
+              </Button>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button
+              onClick={() =>
+                setNewSecretDialog({
+                  open: false,
+                  secret: "",
+                  applicationName: "",
+                })
+              }
+            >
+              Done
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Create Application Dialog */}
+      <Dialog
+        open={createAppDialogOpen}
+        onOpenChange={(open) => {
+          if (!open) {
+            setCreateAppDialogOpen(false);
+            setNewAppName("");
+            setNewAppDescription("");
+          }
+        }}
+      >
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Create Application</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div>
+              <label className="block text-sm font-medium mb-1">Name</label>
+              <input
+                type="text"
+                value={newAppName}
+                onChange={(e) => setNewAppName(e.target.value)}
+                className="w-full px-3 py-2 border rounded-md bg-background"
+                placeholder="My Application"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium mb-1">
+                Description (optional)
+              </label>
+              <input
+                type="text"
+                value={newAppDescription}
+                onChange={(e) => setNewAppDescription(e.target.value)}
+                className="w-full px-3 py-2 border rounded-md bg-background"
+                placeholder="What does this application do?"
+              />
+            </div>
+            <Alert variant="info">
+              <AlertDescription>
+                New applications are assigned the "Applications" role by
+                default. You can manage roles after creation.
+              </AlertDescription>
+            </Alert>
+          </div>
+          <DialogFooter>
+            <Button
+              variant="ghost"
+              onClick={() => {
+                setCreateAppDialogOpen(false);
+                setNewAppName("");
+                setNewAppDescription("");
+              }}
+            >
+              Cancel
+            </Button>
+            <Button onClick={() => void handleCreateApplication()}>
+              Create
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+};

package/src/components/AuthErrorPage.tsx

@@ -0,0 +1,94 @@
+import { Link, useSearchParams } from "react-router-dom";
+import { AlertCircle, Home, LogIn } from "lucide-react";
+import { authRoutes } from "@checkstack/auth-common";
+import { resolveRoute } from "@checkstack/common";
+import {
+  Button,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+  Alert,
+  AlertIcon,
+  AlertContent,
+  AlertTitle,
+  AlertDescription,
+} from "@checkstack/ui";
+
+/**
+ * Map technical error messages to user-friendly ones
+ */
+const getErrorMessage = (error: string | undefined): string => {
+  if (!error) {
+    return "An unexpected error occurred during authentication.";
+  }
+
+  // Registration disabled error
+  if (error.includes("Registration is currently disabled")) {
+    return "Registration is currently disabled. Please contact an administrator if you need access.";
+  }
+
+  // User denied authorization
+  if (error.includes("access_denied") || error.includes("user_denied")) {
+    return "Authorization was cancelled. Please try again if you wish to sign in.";
+  }
+
+  // Generic OAuth errors
+  if (error.includes("UNKNOWN") || error.includes("unknown")) {
+    return "An unexpected error occurred. Please try again or contact support if the problem persists.";
+  }
+
+  // Return the error as-is if it seems user-friendly
+  return error;
+};
+
+export const AuthErrorPage = () => {
+  const [searchParams] = useSearchParams();
+  const errorParam = searchParams.get("error");
+
+  // better-auth encodes error messages using underscores for spaces
+  // Decode by replacing underscores with spaces
+  const decodedError = errorParam?.replaceAll("_", " ") ?? undefined;
+
+  const errorMessage = getErrorMessage(decodedError);
+
+  return (
+    <div className="min-h-[80vh] flex items-center justify-center">
+      <Card className="w-full max-w-md">
+        <CardHeader className="flex flex-col space-y-1 items-center">
+          <CardTitle>Authentication Error</CardTitle>
+          <CardDescription>
+            We encountered a problem during sign-in
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Alert variant="error">
+            <AlertIcon>
+              <AlertCircle className="h-4 w-4" />
+            </AlertIcon>
+            <AlertContent>
+              <AlertTitle>Sign-in Failed</AlertTitle>
+              <AlertDescription>{errorMessage}</AlertDescription>
+            </AlertContent>
+          </Alert>
+        </CardContent>
+        <CardFooter className="flex gap-2 justify-center">
+          <Link to={resolveRoute(authRoutes.routes.login)}>
+            <Button variant="primary">
+              <LogIn className="mr-2 h-4 w-4" />
+              Try Again
+            </Button>
+          </Link>
+          <Link to="/">
+            <Button variant="outline">
+              <Home className="mr-2 h-4 w-4" />
+              Go Home
+            </Button>
+          </Link>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+};