- {/* Sidebar */}
-
+
+
+
+
+ {/* Sidebar */}
+
- {/* Content */}
-
- {activeSection === 'appearance' &&
}
- {activeSection === 'notifications' &&
}
- {activeSection === 'privacy' &&
}
- {activeSection === 'accounts' &&
}
- {activeSection === 'danger' &&
}
+ {/* Content */}
+
+ {activeSection === 'appearance' &&
}
+ {activeSection === 'notifications' &&
}
+ {activeSection === 'privacy' &&
}
+ {activeSection === 'accounts' &&
}
+ {activeSection === 'danger' &&
}
+
-
);
}
diff --git a/web/src/components/auth/require-auth.tsx b/web/src/components/auth/require-auth.tsx
new file mode 100644
index 0000000..d7e5ef2
--- /dev/null
+++ b/web/src/components/auth/require-auth.tsx
@@ -0,0 +1,49 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useRouter, usePathname } from 'next/navigation';
+import { useAuthStore } from '@/store/authStore';
+import { Loader2 } from 'lucide-react';
+
+interface RequireAuthProps {
+ children: React.ReactNode;
+ fallback?: React.ReactNode;
+}
+
+export function RequireAuth({ children, fallback }: RequireAuthProps) {
+ const router = useRouter();
+ const pathname = usePathname();
+ const { isAuthenticated } = useAuthStore();
+ const [hasHydrated, setHasHydrated] = useState(false);
+
+ useEffect(() => {
+ // Wait for Zustand persistence hydration to complete to prevent race conditions on page refresh
+ if (useAuthStore.persist?.hasHydrated()) {
+ setHasHydrated(true);
+ } else {
+ const unsub = useAuthStore.persist?.onFinishHydration(() => setHasHydrated(true));
+ return () => {
+ unsub?.();
+ };
+ }
+ }, []);
+
+ useEffect(() => {
+ if (hasHydrated && !isAuthenticated) {
+ const fullPath = typeof window !== 'undefined' ? `${window.location.pathname}${window.location.search}` : pathname;
+ const redirectUrl = `/auth/login?redirect=${encodeURIComponent(fullPath)}`;
+ router.replace(redirectUrl);
+ }
+ }, [hasHydrated, isAuthenticated, pathname, router]);
+
+ if (!hasHydrated || !isAuthenticated) {
+ if (fallback) return <>{fallback};
+ return (
+
+
+
+ );
+ }
+
+ return <>{children};
+}
diff --git a/web/src/hooks/useAuth.ts b/web/src/hooks/useAuth.ts
index 7d04d2a..e2bdfaa 100644
--- a/web/src/hooks/useAuth.ts
+++ b/web/src/hooks/useAuth.ts
@@ -1,10 +1,13 @@
'use client';
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useCallback } from 'react';
+import { useRouter, usePathname } from 'next/navigation';
import api from '@/lib/api';
import { useAuthStore } from '@/store/authStore';
export function useAuth() {
+ const router = useRouter();
+ const pathname = usePathname();
const { user, isAuthenticated, setUser, logout } = useAuthStore();
const hasValidated = useRef(false);
@@ -27,5 +30,27 @@ export function useAuth() {
}
}, [isAuthenticated, setUser, logout]);
- return { user, isAuthenticated, setUser, logout };
+ /**
+ * Helper function for protected actions embedded inside public or mixed pages.
+ * If the user is authenticated, executes `actionFn()`.
+ * Otherwise, redirects to `/auth/login?redirect=
` without executing `actionFn`.
+ */
+ const requireAuth = useCallback(
+ (actionFn: () => void | Promise, overrideRedirectPath?: string) => {
+ if (isAuthenticated) {
+ return actionFn();
+ }
+
+ let redirectPath = overrideRedirectPath;
+ if (!redirectPath && typeof window !== 'undefined') {
+ redirectPath = `${window.location.pathname}${window.location.search}`;
+ }
+
+ const safePath = redirectPath || pathname || '/';
+ router.push(`/auth/login?redirect=${encodeURIComponent(safePath)}`);
+ },
+ [isAuthenticated, pathname, router]
+ );
+
+ return { user, isAuthenticated, setUser, logout, requireAuth };
}
diff --git a/web/tsconfig.json b/web/tsconfig.json
index 74cf535..ab7581d 100644
--- a/web/tsconfig.json
+++ b/web/tsconfig.json
@@ -15,7 +15,7 @@
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
- "jsx": "preserve",
+ "jsx": "react-jsx",
"incremental": true,
"plugins": [
{