@weirdfingers/boards 0.1.4

package/src/auth/providers/none.ts

@@ -0,0 +1,157 @@
+/**
+ * No-auth provider for local development without authentication.
+ */
+
+import { BaseAuthProvider } from './base';
+import { AuthState, User, AuthProviderConfig } from '../types';
+
+interface NoAuthConfig extends AuthProviderConfig {
+  /**
+   * Default user ID for development.
+   * Defaults to 'dev-user'.
+   */
+  defaultUserId?: string;
+
+  /**
+   * Default user email for development.
+   * Defaults to 'dev@example.com'.
+   */
+  defaultEmail?: string;
+
+  /**
+   * Default display name for development.
+   * Defaults to 'Development User'.
+   */
+  defaultDisplayName?: string;
+}
+
+export class NoAuthProvider extends BaseAuthProvider {
+  protected config: NoAuthConfig;
+  private listeners: ((state: AuthState) => void)[] = [];
+  private currentState: AuthState;
+  private defaultUser: User;
+
+  constructor(config: NoAuthConfig = {}) {
+    super(config);
+
+    // Production safety check
+    const nodeEnv = typeof process !== 'undefined' ? process.env?.NODE_ENV : '';
+    const isDevelopment = nodeEnv === 'development' || nodeEnv === '' || nodeEnv === 'test';
+
+    if (!isDevelopment) {
+      const error = new Error(
+        'NoAuthProvider cannot be used in production environments. ' +
+        'Please configure a proper authentication provider (JWT, Supabase, Clerk, etc.)'
+      );
+      console.error('🚨 SECURITY ERROR:', error.message);
+      throw error;
+    }
+
+    this.config = {
+      defaultUserId: 'dev-user',
+      defaultEmail: 'dev@example.com',
+      defaultDisplayName: 'Development User',
+      ...config,
+    };
+
+    this.defaultUser = {
+      id: this.config.defaultUserId!,
+      email: this.config.defaultEmail!,
+      name: this.config.defaultDisplayName,
+      avatar: undefined,
+      metadata: { provider: 'none' },
+      credits: {
+        balance: 1000,
+        reserved: 0,
+      },
+    };
+
+    this.currentState = {
+      user: this.defaultUser,
+      status: 'authenticated', // Always authenticated in no-auth mode
+      signIn: this.signIn.bind(this),
+      signOut: this.signOut.bind(this),
+      getToken: this.getToken.bind(this),
+      refreshToken: this.refreshToken.bind(this),
+    };
+
+    // Use structured warning instead of console.warn
+    if (console.warn) {
+      console.warn(
+        '🚨 [AUTH] NoAuthProvider is active - authentication is disabled!',
+        {
+          message: 'This should ONLY be used in development environments',
+          environment: nodeEnv || 'unknown',
+          provider: 'none',
+        }
+      );
+    }
+  }
+
+  async initialize(): Promise<void> {
+    // No initialization needed - always authenticated
+    this.updateState({ user: this.defaultUser, status: 'authenticated' });
+  }
+
+  async getAuthState(): Promise<AuthState> {
+    return this.currentState;
+  }
+
+  async signIn(): Promise<void> {
+    // No-op in no-auth mode - already signed in
+    if (console.info) {
+      console.info('[AUTH] SignIn called in no-auth mode - no action taken', {
+        provider: 'none',
+        action: 'signIn',
+        status: 'ignored'
+      });
+    }
+  }
+
+  async signOut(): Promise<void> {
+    // No-op in no-auth mode - can't sign out
+    if (console.info) {
+      console.info('[AUTH] SignOut called in no-auth mode - no action taken', {
+        provider: 'none',
+        action: 'signOut',
+        status: 'ignored'
+      });
+    }
+  }
+
+  async getToken(): Promise<string | null> {
+    // Return a fake development token
+    return 'dev-token|no-auth-mode|always-valid';
+  }
+
+  async refreshToken(): Promise<string | null> {
+    // Return the same fake token since it doesn't expire
+    return 'dev-token|no-auth-mode|always-valid';
+  }
+
+  async getUser(): Promise<User | null> {
+    return this.defaultUser;
+  }
+
+  onAuthStateChange(callback: (state: AuthState) => void): () => void {
+    // Call immediately with current state
+    callback(this.currentState);
+
+    this.listeners.push(callback);
+    return () => {
+      const index = this.listeners.indexOf(callback);
+      if (index > -1) {
+        this.listeners.splice(index, 1);
+      }
+    };
+  }
+
+  async destroy(): Promise<void> {
+    this.listeners = [];
+  }
+
+  private updateState(updates: Partial<AuthState>): void {
+    this.currentState = { ...this.currentState, ...updates };
+    this.listeners.forEach(listener => listener(this.currentState));
+  }
+}

package/src/auth/types.ts

@@ -0,0 +1,67 @@
+/**
+ * Core authentication types and interfaces.
+ */
+
+export interface User {
+  id: string;
+  email: string;
+  name?: string;
+  avatar?: string;
+  metadata: Record<string, unknown>;
+  credits: {
+    balance: number;
+    reserved: number;
+  };
+}
+
+export interface AuthProvider {
+  id: string;
+  name: string;
+  type: 'oauth' | 'email' | 'magic-link' | 'custom';
+  config: Record<string, unknown>;
+}
+
+export interface SignInOptions {
+  provider?: string;
+  redirectTo?: string;
+  [key: string]: unknown;
+}
+
+export interface AuthState {
+  user: User | null;
+  status: 'loading' | 'authenticated' | 'unauthenticated' | 'error';
+  signIn: (provider?: AuthProvider, options?: SignInOptions) => Promise<void>;
+  signOut: () => Promise<void>;
+  getToken: () => Promise<string | null>;
+  refreshToken: () => Promise<string | null>;
+}
+
+export interface AuthProviderConfig {
+  /**
+   * Tenant identifier for multi-tenant applications.
+   * If not provided, defaults to single-tenant mode.
+   */
+  tenantId?: string;
+
+  /**
+   * Additional configuration specific to the auth provider.
+   */
+  [key: string]: unknown;
+}
+
+export interface AuthContextValue extends AuthState {
+  /**
+   * Whether the auth system is initializing.
+   */
+  isInitializing: boolean;
+
+  /**
+   * Any error that occurred during authentication.
+   */
+  error: Error | null;
+
+  /**
+   * Clear any authentication errors.
+   */
+  clearError: () => void;
+}

package/src/config/ApiConfigContext.tsx

@@ -0,0 +1,47 @@
+/**
+ * API configuration context for providing backend URLs to hooks.
+ */
+
+import { createContext, useContext, ReactNode } from "react";
+
+export interface ApiConfig {
+  /**
+   * Base URL for the backend API (e.g., "http://localhost:8088")
+   * Used for REST endpoints like SSE streams
+   */
+  apiUrl: string;
+  /**
+   * GraphQL endpoint URL (e.g., "http://localhost:8088/graphql")
+   */
+  graphqlUrl: string;
+  /**
+   * WebSocket URL for GraphQL subscriptions
+   */
+  subscriptionUrl?: string;
+}
+
+const ApiConfigContext = createContext<ApiConfig | null>(null);
+
+interface ApiConfigProviderProps {
+  children: ReactNode;
+  config: ApiConfig;
+}
+
+export function ApiConfigProvider({
+  children,
+  config,
+}: ApiConfigProviderProps) {
+  return (
+    <ApiConfigContext.Provider value={config}>
+      {children}
+    </ApiConfigContext.Provider>
+  );
+}
+
+export function useApiConfig(): ApiConfig {
+  const context = useContext(ApiConfigContext);
+  if (!context) {
+    throw new Error("useApiConfig must be used within ApiConfigProvider");
+  }
+  return context;
+}

package/src/graphql/client.ts

@@ -0,0 +1,130 @@
+/**
+ * GraphQL client configuration with authentication.
+ */
+
+import {
+  createClient,
+  fetchExchange,
+  cacheExchange,
+  subscriptionExchange,
+  makeOperation,
+} from "urql";
+import { authExchange } from "@urql/exchange-auth";
+import { createClient as createWSClient } from "graphql-ws";
+
+interface AuthState {
+  getToken(): Promise<string | null>;
+}
+
+interface ClientConfig {
+  url: string;
+  subscriptionUrl?: string;
+  auth: AuthState;
+  tenantId?: string;
+}
+
+export function createGraphQLClient({
+  url,
+  subscriptionUrl,
+  auth,
+  tenantId,
+}: ClientConfig) {
+  const wsClient = subscriptionUrl
+    ? createWSClient({
+        url: subscriptionUrl,
+        connectionParams: async () => {
+          const token = await auth.getToken();
+          const headers: Record<string, string> = {};
+
+          if (token) {
+            headers.Authorization = `Bearer ${token}`;
+          }
+
+          if (tenantId) {
+            headers["X-Tenant"] = tenantId;
+          }
+
+          return headers;
+        },
+      })
+    : null;
+
+  return createClient({
+    url,
+    exchanges: [
+      cacheExchange,
+      authExchange(async () => {
+        // Initialize auth state by fetching token
+        let token = await auth.getToken();
+
+        return {
+          addAuthToOperation: (operation) => {
+            // Build headers
+            const headers: Record<string, string> = {};
+
+            if (token) {
+              headers.Authorization = `Bearer ${token}`;
+            }
+
+            if (tenantId) {
+              headers["X-Tenant"] = tenantId;
+            }
+            const fetchOptions =
+              typeof operation.context.fetchOptions === "function"
+                ? operation.context.fetchOptions()
+                : operation.context.fetchOptions || {};
+
+            // Add headers to operation context
+            return makeOperation(operation.kind, operation, {
+              ...operation.context,
+              fetchOptions: {
+                ...operation.context.fetchOptions,
+                headers: {
+                  ...fetchOptions.headers,
+                  ...headers,
+                },
+              },
+            });
+          },
+
+          didAuthError: (error) => {
+            // Check if error is auth-related
+            return error.graphQLErrors.some(
+              (e) =>
+                e.extensions?.code === "UNAUTHENTICATED" ||
+                e.extensions?.code === "UNAUTHORIZED"
+            );
+          },
+
+          willAuthError: () => {
+            // We don't preemptively block requests
+            return false;
+          },
+
+          refreshAuth: async () => {
+            // Re-fetch token on auth error and update the closure variable
+            token = await auth.getToken();
+          },
+        };
+      }),
+      fetchExchange,
+      ...(wsClient
+        ? [
+            subscriptionExchange({
+              forwardSubscription: (operation) => ({
+                subscribe: (sink) => ({
+                  unsubscribe: wsClient.subscribe(
+                    {
+                      query: operation.query || "",
+                      variables: operation.variables,
+                    },
+                    sink
+                  ),
+                }),
+              }),
+            }),
+          ]
+        : []),
+    ],
+  });
+}

package/src/graphql/operations.ts

@@ -0,0 +1,293 @@
+/**
+ * GraphQL queries and mutations for the Boards API.
+ */
+
+import { gql } from "urql";
+
+// Fragments for reusable query parts
+export const USER_FRAGMENT = gql`
+  fragment UserFragment on User {
+    id
+    email
+    displayName
+    avatarUrl
+    createdAt
+  }
+`;
+
+export const BOARD_FRAGMENT = gql`
+  fragment BoardFragment on Board {
+    id
+    tenantId
+    ownerId
+    title
+    description
+    isPublic
+    settings
+    metadata
+    createdAt
+    updatedAt
+    generationCount
+  }
+`;
+
+export const GENERATION_FRAGMENT = gql`
+  fragment GenerationFragment on Generation {
+    id
+    boardId
+    userId
+    generatorName
+    artifactType
+    status
+    progress
+    storageUrl
+    thumbnailUrl
+    inputParams
+    outputMetadata
+    errorMessage
+    createdAt
+    updatedAt
+    completedAt
+  }
+`;
+
+// Auth queries
+export const GET_CURRENT_USER = gql`
+  ${USER_FRAGMENT}
+  query GetCurrentUser {
+    me {
+      ...UserFragment
+    }
+  }
+`;
+
+// Board queries
+export const GET_BOARDS = gql`
+  ${BOARD_FRAGMENT}
+  ${USER_FRAGMENT}
+  query GetBoards($limit: Int, $offset: Int) {
+    myBoards(limit: $limit, offset: $offset) {
+      ...BoardFragment
+      owner {
+        ...UserFragment
+      }
+    }
+  }
+`;
+
+export const GET_BOARD = gql`
+  ${BOARD_FRAGMENT}
+  ${USER_FRAGMENT}
+  ${GENERATION_FRAGMENT}
+  query GetBoard($id: UUID!) {
+    board(id: $id) {
+      ...BoardFragment
+      owner {
+        ...UserFragment
+      }
+      members {
+        id
+        boardId
+        userId
+        role
+        invitedBy
+        joinedAt
+        user {
+          ...UserFragment
+        }
+        inviter {
+          ...UserFragment
+        }
+      }
+      generations(limit: 10) {
+        ...GenerationFragment
+      }
+    }
+  }
+`;
+
+// Generator queries
+export const GET_GENERATORS = gql`
+  query GetGenerators($artifactType: String) {
+    generators(artifactType: $artifactType) {
+      name
+      description
+      artifactType
+      inputSchema
+    }
+  }
+`;
+
+// Generation queries
+export const GET_GENERATIONS = gql`
+  ${GENERATION_FRAGMENT}
+  query GetGenerations($boardId: UUID, $limit: Int, $offset: Int) {
+    generations(boardId: $boardId, limit: $limit, offset: $offset) {
+      ...GenerationFragment
+      board {
+        id
+        title
+      }
+      user {
+        ...UserFragment
+      }
+    }
+  }
+`;
+
+export const GET_GENERATION = gql`
+  ${GENERATION_FRAGMENT}
+  query GetGeneration($id: UUID!) {
+    generation(id: $id) {
+      ...GenerationFragment
+      board {
+        ...BoardFragment
+      }
+      user {
+        ...UserFragment
+      }
+    }
+  }
+`;
+
+// Board mutations
+export const CREATE_BOARD = gql`
+  ${BOARD_FRAGMENT}
+  ${USER_FRAGMENT}
+  mutation CreateBoard($input: CreateBoardInput!) {
+    createBoard(input: $input) {
+      ...BoardFragment
+      owner {
+        ...UserFragment
+      }
+    }
+  }
+`;
+
+export const UPDATE_BOARD = gql`
+  ${BOARD_FRAGMENT}
+  mutation UpdateBoard($id: UUID!, $input: UpdateBoardInput!) {
+    updateBoard(id: $id, input: $input) {
+      ...BoardFragment
+    }
+  }
+`;
+
+export const DELETE_BOARD = gql`
+  mutation DeleteBoard($id: UUID!) {
+    deleteBoard(id: $id) {
+      success
+    }
+  }
+`;
+
+// Board member mutations
+export const ADD_BOARD_MEMBER = gql`
+  mutation AddBoardMember($boardId: UUID!, $email: String!, $role: BoardRole!) {
+    addBoardMember(boardId: $boardId, email: $email, role: $role) {
+      id
+      boardId
+      userId
+      role
+      invitedBy
+      joinedAt
+      user {
+        ...UserFragment
+      }
+    }
+  }
+`;
+
+export const UPDATE_BOARD_MEMBER_ROLE = gql`
+  mutation UpdateBoardMemberRole($id: UUID!, $role: BoardRole!) {
+    updateBoardMemberRole(id: $id, role: $role) {
+      id
+      role
+    }
+  }
+`;
+
+export const REMOVE_BOARD_MEMBER = gql`
+  mutation RemoveBoardMember($id: UUID!) {
+    removeBoardMember(id: $id) {
+      success
+    }
+  }
+`;
+
+// Generation mutations
+export const CREATE_GENERATION = gql`
+  ${GENERATION_FRAGMENT}
+  mutation CreateGeneration($input: CreateGenerationInput!) {
+    createGeneration(input: $input) {
+      ...GenerationFragment
+    }
+  }
+`;
+
+export const CANCEL_GENERATION = gql`
+  mutation CancelGeneration($id: UUID!) {
+    cancelGeneration(id: $id) {
+      id
+      status
+    }
+  }
+`;
+
+export const RETRY_GENERATION = gql`
+  ${GENERATION_FRAGMENT}
+  mutation RetryGeneration($id: UUID!) {
+    retryGeneration(id: $id) {
+      ...GenerationFragment
+    }
+  }
+`;
+
+// Input types (these should match your backend GraphQL schema)
+export interface CreateBoardInput {
+  title: string;
+  description?: string;
+  isPublic?: boolean;
+  settings?: Record<string, unknown>;
+  metadata?: Record<string, unknown>;
+}
+
+export interface UpdateBoardInput {
+  title?: string;
+  description?: string;
+  isPublic?: boolean;
+  settings?: Record<string, unknown>;
+  metadata?: Record<string, unknown>;
+}
+
+export interface CreateGenerationInput {
+  boardId: string;
+  generatorName: string;
+  artifactType: ArtifactType; // Allow string for flexibility with new types
+  inputParams: Record<string, unknown>;
+  metadata?: Record<string, unknown>;
+}
+
+// Enums (should match backend)
+export enum BoardRole {
+  VIEWER = "VIEWER",
+  EDITOR = "EDITOR",
+  ADMIN = "ADMIN",
+}
+
+export enum GenerationStatus {
+  PENDING = "PENDING",
+  RUNNING = "RUNNING",
+  COMPLETED = "COMPLETED",
+  FAILED = "FAILED",
+  CANCELLED = "CANCELLED",
+}
+
+export enum ArtifactType {
+  IMAGE = "image",
+  VIDEO = "video",
+  AUDIO = "audio",
+  TEXT = "text",
+  LORA = "lora",
+  MODEL = "model",
+}