firebase-os 1.1.6 → 1.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "firebase-os",
-  "version": "1.1.6",
+  "version": "1.1.8",
   "description": "A complete Firebase-powered admin OS — one React component.",
   "type": "module",
   "main": "dist/firebase-os.cjs.js",

package/scripts/postinstall.js

@@ -191,32 +191,46 @@ const viteConfigPath = path.join(consumerRoot, 'vite.config.ts');
 if (fs.existsSync(viteConfigPath)) {
   let viteConfig = fs.readFileSync(viteConfigPath, 'utf8');
   if (!viteConfig.includes('@tailwindcss/vite')) {
-    viteConfig = "import tailwindcss from '@tailwindcss/vite';\\n" + viteConfig;
-    viteConfig = viteConfig.replace('plugins: [', 'plugins: [\\n    tailwindcss(),');
+    // Build the patched file with real newlines (not escaped \n literals)
+    const importLine = "import tailwindcss from '@tailwindcss/vite';";
+    viteConfig = importLine + '\n' + viteConfig;
+    viteConfig = viteConfig.replace(
+      'plugins: [',
+      'plugins: [\n    tailwindcss(),'
+    );
     fs.writeFileSync(viteConfigPath, viteConfig);
     console.log('  ✓ Patched vite.config.ts to enable Tailwind CSS v4');
   }
 }
 
-// ── 6. Create .env file with placeholders ──────────────────────────────────
+// ── 6. Create .env file with empty placeholders ────────────────────────────
 const envPath = path.join(consumerRoot, '.env');
 if (!fs.existsSync(envPath)) {
   const envContent = `# 🔥 Firebase OS Configuration
-# Paste your Firebase Web App configuration here.
-# You can find these in your Firebase Console -> Project Settings -> General -> Your Apps
-
-VITE_FIREBASE_API_KEY=your_api_key_here
-VITE_FIREBASE_AUTH_DOMAIN=your_project_id.firebaseapp.com
-VITE_FIREBASE_PROJECT_ID=your_project_id
-VITE_FIREBASE_STORAGE_BUCKET=your_project_id.firebasestorage.app
-VITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
-VITE_FIREBASE_APP_ID=your_app_id
-
-# Comma-separated list of admin emails
-VITE_ADMIN_EMAILS=admin@example.com
+# Fill in each value below with your Firebase Web App credentials.
+# Find them in Firebase Console -> Project Settings -> General -> Your Apps
+# Leave values empty until you are ready — the app will show a Setup page.
+# After filling them in, restart the dev server (npm run dev).
+
+# Your Firebase API Key (e.g. AIzaSyD...)
+VITE_FIREBASE_API_KEY=
+# Your Firebase Auth Domain (e.g. myproject.firebaseapp.com)
+VITE_FIREBASE_AUTH_DOMAIN=
+# Your Firebase Project ID (e.g. myproject)
+VITE_FIREBASE_PROJECT_ID=
+# Your Firebase Storage Bucket (e.g. myproject.firebasestorage.app)
+VITE_FIREBASE_STORAGE_BUCKET=
+# Your Firebase Messaging Sender ID (e.g. 123456789012)
+VITE_FIREBASE_MESSAGING_SENDER_ID=
+# Your Firebase App ID (e.g. 1:123456789012:web:abcdef123456)
+VITE_FIREBASE_APP_ID=
+
+# Comma-separated list of admin email addresses (these users get admin role on first registration)
+# Example: you@email.com,colleague@email.com
+VITE_ADMIN_EMAILS=
 `;
   fs.writeFileSync(envPath, envContent);
-  console.log('  ✓ Created .env template');
+  console.log('  ✓ Created .env template (fill in your Firebase credentials)');
 }
 
 console.log('\n[firebase-os] 🎉 Hybrid Setup complete! You now have full control over styling and configs.\n');

package/src/FirebaseOS.tsx

@@ -53,8 +53,14 @@ export interface FirebaseOSProps {
 export function FirebaseOS(props: FirebaseOSProps) {
   // If the consumer passed firebaseConfig as props, initialize Firebase
   // before any child component tries to use auth/db/storage.
-  if (props.firebaseConfig) {
-    initializeFirebase(props.firebaseConfig);
+  // Guard: only initialize when real credentials are present (not empty strings).
+  const fc = props.firebaseConfig;
+  const hasRealConfig = fc &&
+    fc.apiKey && fc.apiKey.trim() !== '' &&
+    fc.projectId && fc.projectId.trim() !== '';
+
+  if (hasRealConfig) {
+    initializeFirebase(fc);
   }
 
   const config: FirebaseOSConfig = {

package/src/pages/Setup.tsx

@@ -60,21 +60,22 @@ function getEnvVal(key: string): string {
 // Environment key status
 export function getEnvStatus() {
   const missing: string[] = [];
+  const empty: string[] = [];
   for (const { key, label } of REQUIRED_KEYS) {
     const v = getEnvVal(key);
-    if (!v || v.trim() === '') {
-      console.log('Missing key:', key, v);
+    if (!v) {
       missing.push(label);
-    } else {
-      console.log('Found key:', key, v);
+    } else if (v.trim() === '') {
+      empty.push(label);
     }
   }
   
   const adminEmails = getEnvVal('VITE_ADMIN_EMAILS');
   const missingAdminEmails = !adminEmails || adminEmails.trim() === '';
   
-  console.log('Setup complete?', missing.length === 0, missing);
-  return { allSet: missing.length === 0, missing, missingAdminEmails };
+  // Combine missing + empty for the overall check
+  const allMissing = [...missing, ...empty];
+  return { allSet: allMissing.length === 0, missing: allMissing, empty, missingAdminEmails };
 }
 
 export function isSetupComplete(): boolean {
@@ -171,7 +172,7 @@ export function Setup({ standalone }: SetupProps) {
     return window.matchMedia('(prefers-color-scheme: dark)').matches;
   });
 
-  const [verifyResult, setVerifyResult] = useState<{ missing: string[]; missingAdminEmails?: boolean } | null>(null);
+  const [verifyResult, setVerifyResult] = useState<{ missing: string[]; empty?: string[]; missingAdminEmails?: boolean } | null>(null);
   const [isVerifying, setIsVerifying] = useState(false);
 
   // Only manage the data-theme attribute and favicon when standalone (no ThemeContext)
@@ -199,7 +200,7 @@ export function Setup({ standalone }: SetupProps) {
     setVerifyResult(null);
     setTimeout(() => {
       const status = getEnvStatus();
-      setVerifyResult({ missing: status.missing, missingAdminEmails: status.missingAdminEmails });
+      setVerifyResult({ missing: status.missing, empty: status.empty, missingAdminEmails: status.missingAdminEmails });
       if (status.allSet) {
         setTimeout(() => { window.location.href = '/'; }, 1800);
       }
@@ -285,7 +286,12 @@ export function Setup({ standalone }: SetupProps) {
                   <div className="w-8 h-8 rounded-full bg-red-500/10 border border-red-500/20 flex items-center justify-center shrink-0">
                     <AlertCircle className="w-4 h-4 text-red-500" />
                   </div>
-                  <span className="font-bold text-foreground/70">Missing values — update <code className="text-accent text-[12px]">.env</code> and restart dev server</span>
+                  <span className="font-bold text-foreground/70">
+                    {verifyResult.empty && verifyResult.empty.length > 0
+                      ? <>These values are <span className="text-red-500">empty</span> — fill them in your <code className="text-accent text-[12px]">.env</code> file and restart the dev server</>
+                      : <>Missing values — update <code className="text-accent text-[12px]">.env</code> and restart dev server</>
+                    }
+                  </span>
                 </div>
                 <div className="flex flex-wrap gap-1.5 ml-10">
                   {verifyResult.missing.map(m => (