gmoonc 0.0.17 → 0.0.18

package/README.md

@@ -63,6 +63,15 @@ The logo is installed at `src/gmoonc/assets/gmoonc-logo.png`. You can replace it
 
 ## Changelog
 
+### 0.0.18
+- Fix: env.ts no longer throws when .env is missing - only logs warning
+- Fix: client.ts import corrected - hasSupabaseEnv imported from env.ts
+- Fix: GMooncSupabaseSessionProvider imports corrected - hasSupabaseEnv from env.ts
+- Fix: createMissingEnvClient improved - more robust mock client
+- Fix: GMooncAppLayout route protection added - redirects to /login when not authenticated
+- Fix: All imports in generated files now without .js suffix
+- Fix: client.ts syntax error fixed - removed extra closing brace
+
 ### 0.0.17
 - Feature: New `supabase --vite` command to setup Supabase integration
 - Feature: Supabase Auth + RBAC integration with session provider

package/dist/index.cjs

@@ -787,30 +787,35 @@ function generateEnvFile(projectDir, supabaseDir, platform) {
  * Supabase environment variables for Vite
  * 
  * This file reads environment variables from import.meta.env (Vite)
- * and validates their presence.
+ * and validates their presence. Never throws - only logs warnings.
  */
 
 const supabaseUrlValue = import.meta.env.VITE_SUPABASE_URL;
 const supabaseAnonKeyValue = import.meta.env.VITE_SUPABASE_ANON_KEY;
 
-export const hasSupabaseEnv = Boolean(supabaseUrlValue?.trim() && supabaseAnonKeyValue?.trim());
+// Safe trim with fallback to empty string
+const url = typeof supabaseUrlValue === 'string' ? supabaseUrlValue.trim() : '';
+const anonKey = typeof supabaseAnonKeyValue === 'string' ? supabaseAnonKeyValue.trim() : '';
 
-if (!hasSupabaseEnv) {
+export const supabaseUrl = url;
+export const supabaseAnonKey = anonKey;
+export const hasSupabaseEnv = Boolean(url && anonKey);
+
+// Log warning once if env vars are missing (only in browser, only in dev)
+if (!hasSupabaseEnv && typeof window !== 'undefined' && import.meta.env.DEV) {
   const missingVars: string[] = [];
-  if (!supabaseUrlValue?.trim()) missingVars.push('VITE_SUPABASE_URL');
-  if (!supabaseAnonKeyValue?.trim()) missingVars.push('VITE_SUPABASE_ANON_KEY');
-  
-  const errorMessage = \`Missing Supabase environment variables: \${missingVars.join(', ')}.\\n\\nPlease:\\n1. Copy .env.example to .env\\n2. Fill VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY\\n3. Restart dev server\`;
-  
-  if (typeof window !== 'undefined') {
-    console.error('\u274C', errorMessage);
-  }
+  if (!url) missingVars.push('VITE_SUPABASE_URL');
+  if (!anonKey) missingVars.push('VITE_SUPABASE_ANON_KEY');
   
-  throw new Error(errorMessage);
+  console.warn(
+    \`\u26A0\uFE0F Supabase environment variables missing: \${missingVars.join(', ')}.\\n\` +
+    \`Please:\\n\` +
+    \`1. Copy .env.example to .env\\n\` +
+    \`2. Fill VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY\\n\` +
+    \`3. Restart dev server\\n\` +
+    \`The app will continue without authentication until configured.\`
+  );
 }
-
-export const supabaseUrl = supabaseUrlValue!;
-export const supabaseAnonKey = supabaseAnonKeyValue!;
 `;
   writeFileSafe(envFilePath, content);
   logSuccess("Generated src/gmoonc/supabase/env.ts");
@@ -818,7 +823,7 @@ export const supabaseAnonKey = supabaseAnonKeyValue!;
 function generateClientFile(projectDir, supabaseDir) {
   const clientFilePath = (0, import_path6.join)(supabaseDir, "client.ts");
   const content = `import { createClient, type SupabaseClient } from '@supabase/supabase-js';
-import { supabaseUrl, supabaseAnonKey, hasSupabaseEnv } from './env.js';
+import { supabaseUrl, supabaseAnonKey, hasSupabaseEnv } from './env';
 
 // Database types (minimal - extend as needed)
 export interface Database {
@@ -1118,37 +1123,58 @@ export interface Database {
 // Singleton pattern to avoid multiple instances
 let supabaseInstance: SupabaseClient<Database> | null = null;
 
-const createMissingEnvClient = () => {
+let warningLogged = false;
+
+const createMissingEnvClient = (): SupabaseClient<Database> => {
   const missingEnvMessage = 'Supabase environment variables are missing or empty.';
 
+  // Log warning once
+  if (!warningLogged && typeof window !== 'undefined') {
+    console.warn('\u26A0\uFE0F Supabase env not configured. Authentication features will not work.');
+    warningLogged = true;
+  }
+
   const notConfigured = () => Promise.reject(new Error(missingEnvMessage));
+  const emptyResult = () => Promise.resolve({ data: null, error: new Error(missingEnvMessage) });
+  const emptyArray = () => Promise.resolve({ data: [], error: new Error(missingEnvMessage) });
 
   return {
     auth: {
-      getSession: async () => ({ data: { session: null }, error: new Error(missingEnvMessage) }),
+      getSession: async () => ({ data: { session: null }, error: null }),
       signInWithPassword: notConfigured,
       signUp: notConfigured,
-      signOut: notConfigured,
+      signOut: async () => ({ error: null }),
       resend: notConfigured,
-      onAuthStateChange: () => ({ data: { subscription: { unsubscribe: () => {} } } }),
+      onAuthStateChange: () => ({ 
+        data: { subscription: { unsubscribe: () => {} } },
+        error: null
+      }),
       startAutoRefresh: () => Promise.resolve(),
       stopAutoRefresh: () => {},
     },
-      from: () => ({
-        select: () => notConfigured(),
-        eq: () => ({ single: () => notConfigured() }),
+    from: (table: string) => ({
+      select: () => ({
+        eq: () => ({
+          single: () => emptyResult(),
+          maybeSingle: () => emptyResult(),
+        }),
+        order: () => ({
+          eq: () => emptyArray(),
+        }),
       }),
-    } as unknown as SupabaseClient<Database>;
-  };
+      insert: () => notConfigured(),
+      update: () => notConfigured(),
+      delete: () => notConfigured(),
+      upsert: () => notConfigured(),
+    }),
+    rpc: () => Promise.resolve({ data: null, error: new Error(missingEnvMessage) }),
+  } as unknown as SupabaseClient<Database>;
 };
 
 export const supabase = (() => {
   if (supabaseInstance) return supabaseInstance;
 
   if (!hasSupabaseEnv) {
-    if (typeof window !== 'undefined' && import.meta.env.DEV) {
-      console.warn('\u26A0\uFE0F Supabase env vars missing. App will continue without authentication.');
-    }
     supabaseInstance = createMissingEnvClient();
     return supabaseInstance;
   }
@@ -1196,7 +1222,8 @@ function generateSessionProvider(projectDir, supabaseDir) {
   const content = `import React, { createContext, useContext, useState, useEffect, ReactNode, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { User } from '@supabase/supabase-js';
-import { supabase, hasSupabaseEnv } from '../client.js';
+import { supabase } from '../client';
+import { hasSupabaseEnv } from '../env';
 
 export interface GMooncUser {
   id: string;
@@ -1418,8 +1445,8 @@ export function useGMooncSession(): GMooncSessionContextType {
 }
 function generateRbacHelpers(projectDir, supabaseDir) {
   const getMyProfilePath = (0, import_path6.join)(supabaseDir, "rbac/getMyProfile.ts");
-  const getMyProfileContent = `import { supabase } from '../client.js';
-import type { Database } from '../client.js';
+  const getMyProfileContent = `import { supabase } from '../client';
+import type { Database } from '../client';
 
 type Profile = Database['public']['Tables']['profiles']['Row'];
 
@@ -1456,7 +1483,7 @@ export async function getMyProfile(): Promise<Profile | null> {
   writeFileSafe(getMyProfilePath, getMyProfileContent);
   logSuccess("Generated src/gmoonc/supabase/rbac/getMyProfile.ts");
   const hasPermissionPath = (0, import_path6.join)(supabaseDir, "rbac/hasPermission.ts");
-  const hasPermissionContent = `import { supabase } from '../client.js';
+  const hasPermissionContent = `import { supabase } from '../client';
 
 /**
  * Check if the current user has a specific permission
@@ -1545,7 +1572,7 @@ export function hasPermissionSync(
   writeFileSafe(hasPermissionPath, hasPermissionContent);
   logSuccess("Generated src/gmoonc/supabase/rbac/hasPermission.ts");
   const getUserPermissionsPath = (0, import_path6.join)(supabaseDir, "rbac/getUserPermissions.ts");
-  const getUserPermissionsContent = `import { supabase } from '../client.js';
+  const getUserPermissionsContent = `import { supabase } from '../client';
 
 export interface UserPermission {
   module_name: string;
@@ -1589,10 +1616,10 @@ export async function getUserPermissions(): Promise<UserPermission[]> {
   writeFileSafe(getUserPermissionsPath, getUserPermissionsContent);
   logSuccess("Generated src/gmoonc/supabase/rbac/getUserPermissions.ts");
   const rbacIndexPath = (0, import_path6.join)(supabaseDir, "rbac/index.ts");
-  const rbacIndexContent = `export { getMyProfile } from './getMyProfile.js';
-export { hasPermission, hasPermissionSync } from './hasPermission.js';
-export { getUserPermissions } from './getUserPermissions.js';
-export type { UserPermission } from './getUserPermissions.js';
+  const rbacIndexContent = `export { getMyProfile } from './getMyProfile';
+export { hasPermission, hasPermissionSync } from './hasPermission';
+export { getUserPermissions } from './getUserPermissions';
+export type { UserPermission } from './getUserPermissions';
 `;
   writeFileSafe(rbacIndexPath, rbacIndexContent);
   logSuccess("Generated src/gmoonc/supabase/rbac/index.ts");
@@ -1638,18 +1665,64 @@ function patchExistingCode(projectDir, gmooncDir) {
     );
     content = content.replace(
       /import\s+{\s*GMooncSessionProvider[^}]*}\s+from\s+['"][^'"]*session\/GMooncSessionContext['"]/g,
-      "import { GMooncSupabaseSessionProvider } from '../supabase/auth/GMooncSupabaseSessionProvider'"
+      "import { GMooncSupabaseSessionProvider, useGMooncSession } from '../supabase/auth/GMooncSupabaseSessionProvider'"
     );
+    if (!content.includes("from 'react-router-dom'") || !content.includes("Navigate")) {
+      content = content.replace(
+        /import\s+{\s*([^}]*)\s*}\s+from\s+['"]react-router-dom['"]/,
+        (match, imports) => {
+          if (!imports.includes("Navigate")) {
+            return `import { ${imports}, Navigate } from 'react-router-dom'`;
+          }
+          return match;
+        }
+      );
+    }
     content = content.replace(/GMooncSessionProvider/g, "GMooncSupabaseSessionProvider");
+    if (!content.includes("!isLoading && !isAuthenticated")) {
+      content = content.replace(
+        /const\s+{\s*roles,\s*logout\s*}\s+=\s+useGMooncSession\(\);/,
+        "const { roles, logout, isLoading, isAuthenticated } = useGMooncSession();"
+      );
+      content = content.replace(
+        /(\s+}, \[navigate, getBasePath\]\);)\s+(\s+return\s+\()/,
+        `$1
+
+  // Route protection: redirect to login if not authenticated
+  if (!isLoading && !isAuthenticated) {
+    return <Navigate to="/login" replace />;
+  }
+
+  // Show loading state while checking authentication
+  if (isLoading) {
+    return (
+      <div className="gmoonc-root">
+        <div style={{ 
+          display: 'flex', 
+          justifyContent: 'center', 
+          alignItems: 'center', 
+          height: '100vh',
+          fontSize: 'var(--gmoonc-font-size-base, 16px)',
+          color: 'var(--gmoonc-color-text, #333)'
+        }}>
+          Loading...
+        </div>
+      </div>
+    );
+  }
+
+$2`
+      );
+    }
     writeFileSafe(layoutPath, content);
-    logSuccess("Patched layout/GMooncAppLayout.tsx to use GMooncSupabaseSessionProvider");
+    logSuccess("Patched layout/GMooncAppLayout.tsx to use GMooncSupabaseSessionProvider and add route protection");
   }
   logInfo("Auth pages will use Supabase via GMooncSupabaseSessionProvider");
 }
 
 // src/cli/index.ts
 var program = new import_commander.Command();
-program.name("gmoonc").description("Goalmoon Ctrl (gmoonc): Install complete dashboard into your React project").version("0.0.17").option("--base <path>", "Base path for dashboard routes", "/app").option("--skip-router-patch", "Skip automatic router integration (only copy files and inject CSS)").option("--dry-run", "Show what would be done without making changes").action(async (options) => {
+program.name("gmoonc").description("Goalmoon Ctrl (gmoonc): Install complete dashboard into your React project").version("0.0.18").option("--base <path>", "Base path for dashboard routes", "/app").option("--skip-router-patch", "Skip automatic router integration (only copy files and inject CSS)").option("--dry-run", "Show what would be done without making changes").action(async (options) => {
   try {
     logInfo("\u{1F680} Starting gmoonc installer...");
     logInfo("\u{1F4E6} Installing complete dashboard into your React project\n");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gmoonc",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "description": "Goalmoon Ctrl (gmoonc): Complete dashboard installer for React projects",
   "license": "MIT",
   "homepage": "https://gmoonc.com",

package/src/templates/shared/src/gmoonc/layout/GMooncAppLayout.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import { Outlet, useLocation, useNavigate, Link } from 'react-router-dom';
+import { Outlet, useLocation, useNavigate, Link, Navigate } from 'react-router-dom';
 import { GmooncShell } from '../ui/shell';
 import { defaultConfig } from '../config/defaultConfig';
 import { GMooncSessionProvider, useGMooncSession } from '../session/GMooncSessionContext';
@@ -9,7 +9,7 @@ import logoUrl from '../assets/gmoonc-logo.png';
 function GMooncAppLayoutInner() {
   const location = useLocation();
   const navigate = useNavigate();
-  const { roles, logout } = useGMooncSession();
+  const { roles, logout, isLoading, isAuthenticated } = useGMooncSession();
 
   // Determine basePath from current location
   // If path is /app/..., basePath is /app
@@ -47,6 +47,29 @@ function GMooncAppLayoutInner() {
     navigate(normalizedBasePath);
   }, [navigate, getBasePath]);
 
+  // Route protection: redirect to login if not authenticated
+  if (!isLoading && !isAuthenticated) {
+    return <Navigate to="/login" replace />;
+  }
+
+  // Show loading state while checking authentication
+  if (isLoading) {
+    return (
+      <div className="gmoonc-root">
+        <div style={{ 
+          display: 'flex', 
+          justifyContent: 'center', 
+          alignItems: 'center', 
+          height: '100vh',
+          fontSize: 'var(--gmoonc-font-size-base, 16px)',
+          color: 'var(--gmoonc-color-text, #333)'
+        }}>
+          Loading...
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className="gmoonc-root">
       <GmooncShell