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>
This commit is contained in:
Consultoria AS
2026-01-31 03:33:22 +00:00
parent 34864742d8
commit 3098a40356

View File

@@ -2,6 +2,7 @@
import { useEffect, useMemo, useState } from 'react'; import { useEffect, useMemo, useState } from 'react';
import { useRouter } from 'next/navigation'; import { useRouter } from 'next/navigation';
import { useAuthStore } from '@/stores/auth-store';
/** /**
* Onboarding persistence key. * Onboarding persistence key.
@@ -11,6 +12,7 @@ const STORAGE_KEY = 'horux360:onboarding_seen_v1';
export default function OnboardingScreen() { export default function OnboardingScreen() {
const router = useRouter(); const router = useRouter();
const { isAuthenticated, _hasHydrated } = useAuthStore();
const [isNewUser, setIsNewUser] = useState(true); const [isNewUser, setIsNewUser] = useState(true);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
@@ -21,6 +23,13 @@ export default function OnboardingScreen() {
router.push(path); router.push(path);
}; };
// Redirect to login if not authenticated
useEffect(() => {
if (_hasHydrated && !isAuthenticated) {
router.push('/login');
}
}, [isAuthenticated, _hasHydrated, router]);
useEffect(() => { useEffect(() => {
const seen = typeof window !== 'undefined' && localStorage.getItem(STORAGE_KEY) === '1'; 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]); 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 ( return (
<main className="min-h-screen relative overflow-hidden bg-white"> <main className="min-h-screen relative overflow-hidden bg-white">
{/* Grid tech claro */} {/* Grid tech claro */}
@@ -160,9 +183,6 @@ export default function OnboardingScreen() {
</div> </div>
</div> </div>
<p className="mt-4 text-center text-xs text-slate-400">
Demo UI sin backend Persistencia local: localStorage
</p>
</div> </div>
</div> </div>
</main> </main>