clefbase 2.0.5 → 2.0.6

package/dist/cli-src/cli/commands/init.js

@@ -85,11 +85,6 @@ async function runInit(cwd = process.cwd()) {
         hosting: services.includes("hosting"),
         functions: services.includes("functions"),
     };
-    // ── Step 4: Auth setup ────────────────────────────────────────────────────
-    let authSetup;
-    if (cfg.services.auth) {
-        authSetup = await setupAuth(cwd);
-    }
     // ── Step 5: Hosting setup ─────────────────────────────────────────────────
     if (cfg.services.hosting) {
         await setupHosting(cfg, cwd);
@@ -105,11 +100,6 @@ async function runInit(cwd = process.cwd()) {
     (0, config_1.writeEnvExample)(cfg, cwd);
     // ── Step 8: Scaffold src/lib ──────────────────────────────────────────────
     const libResult = scaffoldLib(cfg, cwd);
-    // ── Step 9: Scaffold auth files ──────────────────────────────────────────
-    let authResult;
-    if (cfg.services.auth && authSetup) {
-        authResult = await scaffoldAuth(cwd, authSetup);
-    }
     // ── Done ──────────────────────────────────────────────────────────────────
     console.log();
     console.log(chalk_1.default.green.bold("  ✓ Project initialised!"));
@@ -121,172 +111,12 @@ async function runInit(cwd = process.cwd()) {
         console.log(chalk_1.default.dim(`  Lib config:    ${libResult.configCopy}`));
         console.log(chalk_1.default.dim(`  Lib entry:     ${libResult.libFile}`));
     }
-    if (authResult?.hasAuth) {
-        if (authResult.context)
-            console.log(chalk_1.default.dim(`  Auth context:  ${authResult.context}`));
-        if (authResult.modal)
-            console.log(chalk_1.default.dim(`  Auth modal:    ${authResult.modal}`));
-        if (authResult.protected)
-            console.log(chalk_1.default.dim(`  Protected:     ${authResult.protected}`));
-    }
     if (cfg.services.functions) {
         console.log(chalk_1.default.dim(`  Functions:     functions/  (${functionsRuntime ?? "node"})`));
         console.log(chalk_1.default.dim(`                 run: node functions/deploy.mjs`));
     }
     console.log();
-    printUsageHint(cfg, authSetup);
-}
-// ─── Auth scaffolding ────────────────────────────────────────────────────────
-/**
- * Interactively scaffold auth files (AuthContext, AuthModal, etc.).
- */
-async function setupAuth(cwd) {
-    console.log();
-    console.log(chalk_1.default.bold("  Auth Setup"));
-    console.log();
-    const { scaffoldContext } = await inquirer_1.default.prompt([{
-            type: "confirm",
-            name: "scaffoldContext",
-            message: "Scaffold React AuthContext?",
-            default: true,
-        }]);
-    const { scaffoldModal } = await inquirer_1.default.prompt([{
-            type: "confirm",
-            name: "scaffoldModal",
-            message: "Scaffold AuthModal component?",
-            default: true,
-        }]);
-    const { updateApp } = await inquirer_1.default.prompt([{
-            type: "confirm",
-            name: "updateApp",
-            message: "Update App.tsx to use AuthProvider?",
-            default: false,
-        }]);
-    return { scaffoldContext, scaffoldModal, updateApp };
-}
-/**
- * Get the path to a template file within the clefbase CLI package.
- */
-function getTemplatePath(filename) {
-    // In compiled dist, __dirname will be dist-src/cli/commands
-    // We want to resolve to src/cli/templates/ in source
-    // Or in dist, it would be at ../templates/
-    let dir = __dirname;
-    // Check if we're in dist (compiled)
-    if (dir.includes("/dist-src/")) {
-        return path_1.default.join(dir, "../templates", filename);
-    }
-    // Otherwise we're in source
-    return path_1.default.join(dir, "../templates", filename);
-}
-/**
- * Read a template file with fallback to embedded template.
- */
-function readTemplate(filename, fallback) {
-    try {
-        const templatePath = getTemplatePath(filename);
-        return fs_1.default.readFileSync(templatePath, "utf-8");
-    }
-    catch {
-        return fallback;
-    }
-}
-/**
- * Scaffold auth-related files (AuthContext, AuthModal, ProtectedRoute).
- */
-async function scaffoldAuth(cwd, setup) {
-    const result = { hasAuth: false };
-    // Create context directory
-    const contextDir = path_1.default.join(cwd, "src", "context");
-    fs_1.default.mkdirSync(contextDir, { recursive: true });
-    if (setup.scaffoldContext) {
-        const contextFile = path_1.default.join(contextDir, "AuthContext.tsx");
-        try {
-            const content = readTemplate("AuthContext.tsx.template", AUTH_CONTEXT_FALLBACK);
-            fs_1.default.writeFileSync(contextFile, content);
-            result.context = path_1.default.relative(cwd, contextFile);
-            result.hasAuth = true;
-        }
-        catch (err) {
-            console.warn(chalk_1.default.yellow(`  Warning: Could not scaffold AuthContext: ${err.message}`));
-        }
-    }
-    if (setup.scaffoldModal) {
-        const componentDir = path_1.default.join(cwd, "src", "components");
-        fs_1.default.mkdirSync(componentDir, { recursive: true });
-        const modalFile = path_1.default.join(componentDir, "AuthModal.tsx");
-        try {
-            const content = readTemplate("AuthModal.tsx.template", AUTH_MODAL_FALLBACK);
-            fs_1.default.writeFileSync(modalFile, content);
-            result.modal = path_1.default.relative(cwd, modalFile);
-            result.hasAuth = true;
-        }
-        catch (err) {
-            console.warn(chalk_1.default.yellow(`  Warning: Could not scaffold AuthModal: ${err.message}`));
-        }
-        // Also scaffold ProtectedRoute
-        const protectedFile = path_1.default.join(componentDir, "ProtectedRoute.tsx");
-        try {
-            const content = readTemplate("ProtectedRoute.tsx.template", PROTECTED_ROUTE_FALLBACK);
-            fs_1.default.writeFileSync(protectedFile, content);
-            result.protected = path_1.default.relative(cwd, protectedFile);
-        }
-        catch (err) {
-            console.warn(chalk_1.default.yellow(`  Warning: Could not scaffold ProtectedRoute: ${err.message}`));
-        }
-    }
-    // Update App.tsx if it exists and user wants it
-    if (setup.updateApp) {
-        const appPath = path_1.default.join(cwd, "src", "App.tsx");
-        if (fs_1.default.existsSync(appPath)) {
-            try {
-                updateAppWithAuth(appPath);
-            }
-            catch (err) {
-                console.warn(chalk_1.default.yellow(`  Warning: Could not update App.tsx: ${err.message}`));
-            }
-        }
-    }
-    return result;
-}
-/**
- * Update an existing App.tsx to wrap with AuthProvider.
- */
-function updateAppWithAuth(appPath) {
-    let content = fs_1.default.readFileSync(appPath, "utf-8");
-    // Check if already has AuthProvider
-    if (content.includes("AuthProvider")) {
-        return; // Already updated
-    }
-    // Add import if not present
-    if (!content.includes("import { AuthProvider, useAuth }")) {
-        const importLine = "import { AuthProvider, useAuth } from '@/context/AuthContext';\n";
-        content = importLine + content;
-    }
-    // Check if this is a functional component that exports a component
-    // Look for "export default function" or "export default"
-    const exportMatch = content.match(/export\s+default\s+(function\s+\w+\s*\(|const\s+\w+\s*=|\(\)|=>)/);
-    if (exportMatch) {
-        // Find the return statement and wrap the JSX with AuthProvider
-        // This is a simple approach - find the outermost return/JSX in export
-        const returnMatch = content.match(/export\s+default\s+(?:function\s+\w+\s*\([^)]*\)\s*\{|\(.*?\)\s*=>\s*)[\s\S]*?return\s+/);
-        if (returnMatch) {
-            // Insert AuthProvider wrapper
-            // This is complex, so we'll do a simpler approach:
-            // Just add the import and let users wrap manually
-            // Or check if it's a simple functional component
-            if (content.includes("return (") || content.includes("return <")) {
-                // Try to wrap the main rendered content
-                // Find the JSX being returned and wrap it
-                const beforeReturn = content.substring(0, content.lastIndexOf("return"));
-                const afterReturn = content.substring(content.lastIndexOf("return"));
-                const wrappedReturn = afterReturn
-                    .replace(/return\s+(<[^>]+>[\s\S]*)/m, 'return (\n    <AuthProvider>\n      $1\n    </AuthProvider>\n  )');
-                content = beforeReturn + wrappedReturn;
-            }
-        }
-    }
-    fs_1.default.writeFileSync(appPath, content);
+    printUsageHint(cfg);
 }
 // ─── Functions scaffolding ────────────────────────────────────────────────────
 /**
@@ -943,7 +773,7 @@ function buildLibTs(cfg) {
             ` *   const { user } = await auth.signIn("alice@example.com", "pass");`,
             ` *`,
             ` *   // Google sign-in — add this to your root component / entry point:`,
-            ` *   await auth.handleGatewayCallback(); // handles ?cfx_token= on return`,
+            ` *   const result = await auth.handleAuthCallback(); // handles ?cfx_token= on return`,
             ` *`,
             ` *   // On sign-in button click:`,
             ` *   await auth.signInWithGateway("google");`,
@@ -987,20 +817,6 @@ function buildLibTs(cfg) {
         lines.push(`/** Clefbase Auth — sign up, sign in, manage sessions. */`);
         lines.push(`export const auth: Auth = getAuth(app);`);
         lines.push("");
-        lines.push(`/**`);
-        lines.push(` * Call this once on every page load (before rendering your UI).`);
-        lines.push(` * Detects the ?cfx_token= param the gateway appends after OAuth,`);
-        lines.push(` * saves the session, and cleans the URL.`);
-        lines.push(` *`);
-        lines.push(` * @example`);
-        lines.push(` * // React / Next.js — in your root layout or _app.tsx:`);
-        lines.push(` * useEffect(() => { auth.handleGatewayCallback(); }, []);`);
-        lines.push(` *`);
-        lines.push(` * // Vanilla JS — at the top of your entry point:`);
-        lines.push(` * await auth.handleGatewayCallback();`);
-        lines.push(` */`);
-        lines.push(`export { auth };`);
-        lines.push("");
     }
     if (storage) {
         lines.push(`/** Clefbase Storage — upload and manage files. */`);
@@ -1143,16 +959,12 @@ function printUsageHint(cfg, authSetup) {
             console.log(chalk_1.default.cyan(`  import { AuthProvider, useAuth } from "@/context/AuthContext";`));
             console.log(chalk_1.default.cyan(`  const { user, signIn, signOut } = useAuth();`));
         }
-        if (authSetup?.scaffoldModal) {
-            console.log(chalk_1.default.cyan(`  import AuthModal from "@/components/AuthModal";`));
-        }
         if (authSetup?.scaffoldContext) {
             console.log(chalk_1.default.cyan(`  import { EmailVerificationCard } from "clefbase/react";`));
         }
         if (!authSetup?.scaffoldContext) {
             console.log(chalk_1.default.cyan(`  const { user } = await auth.signIn("email", "pass");`));
-            console.log(chalk_1.default.cyan(`  await auth.signInWithGateway("google"); // redirects to auth.cleforyx.com`));
-            console.log(chalk_1.default.cyan(`  await auth.handleGatewayCallback();     // call on every page load`));
+            console.log(chalk_1.default.cyan(`  const result = await auth.handleAuthCallback(); // call on every page load`));
         }
     }
     if (cfg.services.storage) {
@@ -1180,430 +992,3 @@ function printUsageHint(cfg, authSetup) {
     }
     console.log();
 }
-// ─── Template Fallbacks ──────────────────────────────────────────────────
-const AUTH_CONTEXT_FALLBACK = `'use client';
-
-import React, { createContext, useContext, useEffect, useState } from 'react';
-import type { AuthUser } from 'clefbase';
-import { getAuth, getDatabase } from 'clefbase';
-
-/**
- * Base user data interface stored in the 'users' collection.
- * Extend this in your app for custom fields.
- */
-export interface UserData {
-  uid: string;
-  email: string;
-  displayName?: string;
-  photoUrl?: string;
-  createdAt?: string;
-  [key: string]: unknown;
-}
-
-/**
- * Auth context for managing authentication state and user data in your React app.
- * Wraps the clefbase Auth SDK with React Context integration.
- *
- * Features:
- * - User state management with auth listener
- * - User profile data synced from database's 'users' collection
- * - Token persistence (handled by SDK)
- * - Auth modal state
- * - Error handling and loading states
- * - Auto-create user doc on first signup
- * - Auto-sync user data on signin
- */
-
-interface AuthContextType<T extends UserData = UserData> {
-  /** Currently authenticated user, or null if not signed in */
-  user: AuthUser | null;
-  /** User profile data from the 'users' collection, or null if not signed in */
-  userData: T | null;
-  /** Authentication token */
-  token: string | null;
-  /** True while auth state is being restored or operations are pending */
-  loading: boolean;
-  /** Error message from last failed operation */
-  error: string | null;
-  /** True if auth modal is open */
-  isAuthModalOpen: boolean;
-
-  // ── Auth modal management ────────────────────────────────────────────────
-
-  /**
-   * Open the auth modal for sign in / sign up.
-   * The modal at auth.cleforyx.com handles the actual authentication.
-   * After success, auth state updates automatically.
-   */
-  openAuthModal: () => void;
-
-  /**
-   * Close the auth modal programmatically.
-   */
-  closeAuthModal: () => void;
-
-  /**
-   * Manually sync user data from the database.
-   */
-  syncUserData: () => Promise<void>;
-
-  /**
-   * Update user data in the database.
-   */
-  updateUserData: (updates: Partial<Omit<T, 'uid'>>) => Promise<void>;
-
-  /**
-   * Verify email with a verification code.
-   */
-  verifyEmail: (code: string) => Promise<void>;
-
-  /**
-   * Request a password reset email.
-   */
-  sendPasswordResetEmail: (email: string) => Promise<void>;
-
-  /**
-   * Sign out the current user and clear data.
-   */
-  signOut: () => Promise<void>;
-
-  /**
-   * Refresh user data from auth server.
-   */
-  refreshUser: () => Promise<void>;
-}
-
-const AuthContext = createContext<AuthContextType | undefined>(undefined);
-
-/**
- * Hook to use auth context in your components.
- */
-export function useAuth<T extends UserData = UserData>(): AuthContextType<T> {
-  const context = useContext(AuthContext);
-  if (!context) {
-    throw new Error('useAuth() must be used within <AuthProvider>');
-  }
-  return context as AuthContextType<T>;
-}
-
-/**
- * Provider component that wraps your app with authentication.
- */
-export function AuthProvider({ children }: { children: React.ReactNode }) {
-  // State
-  const [user, setUser] = useState<AuthUser | null>(null);
-  const [userData, setUserData] = useState<UserData | null>(null);
-  const [token, setToken] = useState<string | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [isAuthModalOpen, setIsAuthModalOpen] = useState(false);
-
-  // Get auth and database services from clefbase
-  const auth = getAuth();
-  const db = getDatabase();
-
-  // ── Helper: sync user data from database ────────────────────────────────
-
-  const syncUserDataInternal = async (uid: string): Promise<void> => {
-    try {
-      const doc = await db.collection('users').doc(uid).get();
-      if (doc) {
-        setUserData(doc as UserData);
-      } else {
-        // First login - create user doc
-        const authUser = auth.currentUser;
-        if (authUser) {
-          const newUserData: UserData = {
-            uid: authUser.uid,
-            email: authUser.email,
-            displayName: authUser.displayName,
-            photoUrl: authUser.photoUrl,
-            createdAt: new Date().toISOString(),
-          };
-          await db.collection('users').doc(uid).set(newUserData);
-          setUserData(newUserData);
-        }
-      }
-    } catch (err) {
-      console.error('Error syncing user data:', err);
-    }
-  };
-
-  // ── Initialize on mount ────────────────────────────────────────────────
-
-  useEffect(() => {
-    const initAuth = async () => {
-      try {
-        setLoading(true);
-
-        const currentUser = auth.currentUser;
-        const currentToken = auth.currentToken;
-
-        setUser(currentUser);
-        setToken(currentToken);
-
-        if (currentUser) {
-          await syncUserDataInternal(currentUser.uid);
-        }
-
-        const unsubscribe = auth.onAuthStateChanged(async (newUser) => {
-          setUser(newUser);
-          if (newUser) {
-            setToken(auth.currentToken);
-            await syncUserDataInternal(newUser.uid);
-          } else {
-            setToken(null);
-            setUserData(null);
-          }
-        });
-
-        setLoading(false);
-
-        return () => unsubscribe();
-      } catch (err) {
-        console.error('Auth initialization error:', err);
-        setLoading(false);
-      }
-    };
-
-    initAuth();
-  }, [auth, db]);
-
-  // ── Error handling helper ──────────────────────────────────────────────
-
-  const handleError = (err: unknown): string => {
-    if (err instanceof Error) {
-      return err.message;
-    }
-    if (typeof err === 'string') {
-      return err;
-    }
-    return 'An unknown error occurred';
-  };
-
-  // ── User data methods ──────────────────────────────────────────────────
-
-  const syncUserData = async (): Promise<void> => {
-    if (!user) {
-      setUserData(null);
-      return;
-    }
-
-    try {
-      await syncUserDataInternal(user.uid);
-    } catch (err) {
-      const message = handleError(err);
-      setError(message);
-      throw err;
-    }
-  };
-
-  const updateUserData = async (
-    updates: Partial<Omit<UserData, 'uid'>>
-  ): Promise<void> => {
-    if (!user) {
-      throw new Error('User not authenticated');
-    }
-
-    try {
-      setError(null);
-      setLoading(true);
-
-      const authUpdates: Record<string, unknown> = {};
-      if ('displayName' in updates) {
-        authUpdates.displayName = updates.displayName;
-      }
-      if ('photoUrl' in updates) {
-        authUpdates.photoUrl = updates.photoUrl;
-      }
-
-      if (Object.keys(authUpdates).length > 0) {
-        await auth.updateProfile(authUpdates);
-      }
-
-      await db.collection('users').doc(user.uid).update(updates);
-
-      setUserData((prev) => (prev ? { ...prev, ...updates } : null));
-    } catch (err) {
-      const message = handleError(err);
-      setError(message);
-      throw err;
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  // ── Auth methods ───────────────────────────────────────────────────────
-
-  const signOut = async () => {
-    try {
-      setError(null);
-      setLoading(true);
-      await auth.signOut();
-      setUser(null);
-      setToken(null);
-      setUserData(null);
-    } catch (err) {
-      const message = handleError(err);
-      setError(message);
-      throw err;
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const verifyEmail = async (code: string) => {
-    try {
-      setError(null);
-      setLoading(true);
-      const result = await auth.verifyEmail(code);
-      setUser(result);
-    } catch (err) {
-      const message = handleError(err);
-      setError(message);
-      throw err;
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const sendPasswordResetEmail = async (email: string) => {
-    try {
-      setError(null);
-      setLoading(true);
-      await auth.sendPasswordResetEmail(email);
-    } catch (err) {
-      const message = handleError(err);
-      setError(message);
-      throw err;
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const refreshUser = async () => {
-    try {
-      setError(null);
-      const updated = await auth.refreshCurrentUser();
-      if (updated) setUser(updated);
-    } catch (err) {
-      const message = handleError(err);
-      setError(message);
-      throw err;
-    }
-  };
-
-  // ── Modal management ───────────────────────────────────────────────────
-
-  const openAuthModal = () => {
-    setIsAuthModalOpen(true);
-  };
-
-  const closeAuthModal = () => {
-    setIsAuthModalOpen(false);
-  };
-
-  // ── Provider value ────────────────────────────────────────────────────
-
-  const value: AuthContextType = {
-    user,
-    userData,
-    token,
-    loading,
-    error,
-    isAuthModalOpen,
-    syncUserData,
-    updateUserData,
-    verifyEmail,
-    sendPasswordResetEmail,
-    signOut,
-    refreshUser,
-    openAuthModal,
-    closeAuthModal,
-  };
-
-  return (
-    <AuthContext.Provider value={value}>
-      {!loading && children}
-    </AuthContext.Provider>
-  );
-}
-
-/**
- * CUSTOMIZATION GUIDE
- *
- * Extend UserData with custom fields, sync to database, and use useAuth<MyType>().
- */
-`;
-const AUTH_MODAL_FALLBACK = `'use client';
-import React, { useEffect, CSSProperties } from 'react';
-import { useAuth } from '@/context/AuthContext';
-
-export default function AuthModal({ isOpen, onClose, overlayStyle, cardStyle, showCloseButton = true, backdropDismiss = true }: any) {
-  const { closeAuthModal } = useAuth();
-  const projectId = typeof window !== 'undefined' && (window as any).__CLEFORYX_PROJECT_ID;
-
-  useEffect(() => {
-    if (!isOpen) return;
-    const handleMessage = (e: MessageEvent) => {
-      if (e.data?.source === 'cleforyx-auth' && e.data?.type === 'auth_success') {
-        closeAuthModal();
-        onClose();
-      }
-    };
-    window.addEventListener('message', handleMessage);
-    return () => window.removeEventListener('message', handleMessage);
-  }, [isOpen, closeAuthModal, onClose]);
-
-  if (!isOpen) return null;
-
-  const currentUrl = typeof window !== 'undefined' ? window.location.origin : '';
-  const iframeUrl = \`https://auth.cleforyx.com/login?project=\${projectId}&redirect=\${encodeURIComponent(currentUrl)}&embed=popup\`;
-
-  const defaultOverlayStyle: CSSProperties = {
-    position: 'fixed', inset: 0, backgroundColor: 'rgba(15, 23, 42, 0.6)',
-    display: 'flex', alignItems: 'center', justifyContent: 'center',
-    zIndex: 9999, backdropFilter: 'blur(4px)', padding: '16px', boxSizing: 'border-box',
-  };
-
-  const defaultCardStyle: CSSProperties = {
-    backgroundColor: 'white', borderRadius: '20px',
-    boxShadow: '0 24px 64px rgba(0, 0, 0, 0.2)',
-    overflow: 'hidden', width: '100%', maxWidth: '460px', position: 'relative',
-  };
-
-  const handleBackdropClick = (e: React.MouseEvent) => {
-    if (backdropDismiss && e.target === e.currentTarget) onClose();
-  };
-
-  return (
-    <div style={{ ...defaultOverlayStyle, ...overlayStyle }} onClick={handleBackdropClick}>
-      <div style={{ ...defaultCardStyle, ...cardStyle }}>
-        {showCloseButton && (
-          <button style={{ position: 'absolute', top: '14px', right: '16px', background: 'rgba(0,0,0,0.06)', border: 'none', width: '28px', height: '28px', borderRadius: '50%', cursor: 'pointer', zIndex: 1 }} onClick={onClose} aria-label="Close">✕</button>
-        )}
-        <iframe src={iframeUrl} style={{ width: '100%', height: '560px', border: 'none', display: 'block' }} title="Sign in" allow="identity-credentials-get" />
-      </div>
-    </div>
-  );
-}`;
-const PROTECTED_ROUTE_FALLBACK = `'use client';
-import React from 'react';
-import { useAuth } from '@/context/AuthContext';
-
-export function ProtectedRoute({ children, LoadingComponent, onUnauthorized }: any) {
-  const { user, loading, openAuthModal } = useAuth();
-
-  if (loading) {
-    if (LoadingComponent) return <LoadingComponent />;
-    return <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100vh' }}>Loading...</div>;
-  }
-
-  if (!user) {
-    onUnauthorized?.();
-    openAuthModal();
-    return null;
-  }
-
-  return <>{children}</>;
-}`;