@checkmate-monitor/auth-frontend 0.1.0

package/playwright.config.ts

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

package/src/api.ts

@@ -0,0 +1,77 @@
+import { createApiRef } from "@checkmate-monitor/frontend-api";
+
+// 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?: string; // Lucide icon name
+  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?: string; // Lucide icon name
+  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/AuthErrorPage.tsx

@@ -0,0 +1,94 @@
+import { Link, useSearchParams } from "react-router-dom";
+import { AlertCircle, Home, LogIn } from "lucide-react";
+import { authRoutes } from "@checkmate-monitor/auth-common";
+import { resolveRoute } from "@checkmate-monitor/common";
+import {
+  Button,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+  Alert,
+  AlertIcon,
+  AlertContent,
+  AlertTitle,
+  AlertDescription,
+} from "@checkmate-monitor/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>
+  );
+};