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:
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user