clefbase 2.0.3 → 2.0.5

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

@@ -85,21 +85,31 @@ async function runInit(cwd = process.cwd()) {
         hosting: services.includes("hosting"),
         functions: services.includes("functions"),
     };
-    // ── Step 4: Hosting setup ─────────────────────────────────────────────────
+    // ── 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);
     }
-    // ── Step 5: Functions setup ───────────────────────────────────────────────
+    // ── Step 6: Functions setup ───────────────────────────────────────────────
     let functionsRuntime;
     if (cfg.services.functions) {
         functionsRuntime = await setupFunctions(cfg, cwd);
     }
-    // ── Step 6: Write root config files ──────────────────────────────────────
+    // ── Step 7: Write root config files ──────────────────────────────────────
     const configPath = (0, config_1.saveConfig)(cfg, cwd);
     (0, config_1.ensureGitignore)(cwd);
     (0, config_1.writeEnvExample)(cfg, cwd);
-    // ── Step 7: Scaffold src/lib ──────────────────────────────────────────────
+    // ── 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!"));
@@ -111,12 +121,172 @@ 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);
+    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);
 }
 // ─── Functions scaffolding ────────────────────────────────────────────────────
 /**
@@ -244,16 +414,14 @@ can return any JSON-serialisable value.
 ### FunctionContext shape
 
 \`\`\`ts
+import type { FunctionContext, AuthUser } from "clefbase";
+
 interface FunctionContext {
   /** Payload supplied by the caller (HTTP) or the event (triggers). */
-  data: unknown;
+  data?: unknown;
 
   /** Populated when the caller includes a valid auth token. */
-  auth?: {
-    uid:      string;
-    email?:   string;
-    metadata: Record<string, unknown>;
-  };
+  auth?: AuthUser;
 
   /** Describes what fired the function. */
   trigger: {
@@ -449,7 +617,11 @@ const FUNCTIONS_TSCONFIG = `{
     "strict": true,
     "esModuleInterop": true,
     "skipLibCheck": true,
-    "outDir": "dist"
+    "outDir": "dist",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
   },
   "include": ["src/**/*"],
   "exclude": ["node_modules", "dist"]
@@ -941,7 +1113,7 @@ function guessDistDir(cwd) {
     }
     return "dist";
 }
-function printUsageHint(cfg) {
+function printUsageHint(cfg, authSetup) {
     const namedImports = [];
     if (cfg.services.database)
         namedImports.push("db");
@@ -965,9 +1137,23 @@ function printUsageHint(cfg) {
     }
     if (cfg.services.auth) {
         console.log();
-        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.bold("  Auth:"));
+        if (authSetup?.scaffoldContext) {
+            console.log(chalk_1.default.dim(`  ✓ Wrap app with <AuthProvider>`));
+            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`));
+        }
     }
     if (cfg.services.storage) {
         console.log();
@@ -994,3 +1180,430 @@ function printUsageHint(cfg) {
     }
     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}</>;
+}`;