From 3098a40356f799c160dccbfbcad2e7dcd6d882f6 Mon Sep 17 00:00:00 2001
From: Consultoria AS <desarrollo@consultoria-as.com>
Date: Sat, 31 Jan 2026 03:33:22 +0000
Subject: [PATCH] fix: add auth protection to onboarding and remove demo text

- Add authentication check using useAuthStore
- Redirect unauthenticated users to /login
- Show loading state while auth store hydrates
- Remove "Demo UI sin backend" text from production

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../onboarding/OnboardingScreen.tsx           | 26 ++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/apps/web/components/onboarding/OnboardingScreen.tsx b/apps/web/components/onboarding/OnboardingScreen.tsx
index 2d5eecf..9f589c7 100644
--- a/apps/web/components/onboarding/OnboardingScreen.tsx
+++ b/apps/web/components/onboarding/OnboardingScreen.tsx
@@ -2,6 +2,7 @@
 
 import { useEffect, useMemo, useState } from 'react';
 import { useRouter } from 'next/navigation';
+import { useAuthStore } from '@/stores/auth-store';
 
 /**
  * Onboarding persistence key.
@@ -11,6 +12,7 @@ const STORAGE_KEY = 'horux360:onboarding_seen_v1';
 
 export default function OnboardingScreen() {
   const router = useRouter();
+  const { isAuthenticated, _hasHydrated } = useAuthStore();
   const [isNewUser, setIsNewUser] = useState(true);
   const [loading, setLoading] = useState(false);
 
@@ -21,6 +23,13 @@ export default function OnboardingScreen() {
     router.push(path);
   };
 
+  // Redirect to login if not authenticated
+  useEffect(() => {
+    if (_hasHydrated && !isAuthenticated) {
+      router.push('/login');
+    }
+  }, [isAuthenticated, _hasHydrated, router]);
+
   useEffect(() => {
     const seen = typeof window !== 'undefined' && localStorage.getItem(STORAGE_KEY) === '1';
 
@@ -46,6 +55,20 @@ export default function OnboardingScreen() {
 
   const headerStatus = useMemo(() => (isNewUser ? 'Onboarding' : 'Redirección'), [isNewUser]);
 
+  // Show loading while store hydrates
+  if (!_hasHydrated) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-white">
+        <div className="animate-pulse text-slate-500">Cargando...</div>
+      </div>
+    );
+  }
+
+  // Don't render if not authenticated
+  if (!isAuthenticated) {
+    return null;
+  }
+
   return (
     <main className="min-h-screen relative overflow-hidden bg-white">
       {/* Grid tech claro */}
@@ -160,9 +183,6 @@ export default function OnboardingScreen() {
             </div>
           </div>
 
-          <p className="mt-4 text-center text-xs text-slate-400">
-            Demo UI sin backend • Persistencia local: localStorage
-          </p>
         </div>
       </div>
     </main>