fix(web): protect auth route from unauthenticated users

Author: AlkenD

apps/web/src/components/ui/header/index.tsx

@@ -1,5 +1,5 @@
 import { AnimatePresence, motion } from "motion/react";
-import { useState, useEffect } from "react";
+import { useState, useEffect, useMemo } from "react";
 import { SearchIcon, XIcon } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { Button } from "../button";
@@ -22,15 +22,25 @@ import { useSearch } from "@/lib/hooks";
 import type { GetApiV1SearchParams } from "@dester/api-client";
 import SearchResults from "./search-results";
 import { useLocation } from "@tanstack/react-router";
+import { useAuth } from "@/hooks/useAuth";
 
-const tabs = [
+const allTabs = [
   { id: "home", label: "Home", href: "/" },
   { id: "library", label: "Library", href: "/library" },
   { id: "settings", label: "Settings", href: "/settings" },
 ];
 
 const Header = () => {
   const location = useLocation();
+  const { user } = useAuth();
+
+  // Filter tabs based on user role - hide Settings for guests and unauthenticated users
+  const tabs = useMemo(() => {
+    if (!user || user.role === "GUEST") {
+      return allTabs.filter((tab) => tab.id !== "settings");
+    }
+    return allTabs;
+  }, [user]);
   const [activeTab, setActiveTab] = useState(tabs[0].id);
   const [isSearchOpen, setIsSearchOpen] = useState(false);
   const [isDialogOpen, setIsDialogOpen] = useState(false);
@@ -52,7 +62,7 @@ const Header = () => {
     if (currentTab) {
       setActiveTab(currentTab.id);
     }
-  }, [location.pathname]);
+  }, [location.pathname, tabs]);
 
   // Check if current path matches any of the header tabs
   const isOnHeaderTab = tabs.some((tab) => {

apps/web/src/components/ui/header/user-menu.tsx

@@ -98,16 +98,19 @@ export default function UserMenu() {
 
               {/* Menu Items */}
               <div className="py-1">
-                <button
-                  onClick={() => {
-                    navigate({ to: "/settings" });
-                    setIsOpen(false);
-                  }}
-                  className="w-full px-4 py-2.5 text-left text-sm text-white hover:bg-white/10 transition-colors flex items-center gap-3"
-                >
-                  <Settings className="w-4 h-4" />
-                  Settings
-                </button>
+                {/* Only show settings for non-guest users */}
+                {user?.role !== "GUEST" && (
+                  <button
+                    onClick={() => {
+                      navigate({ to: "/settings" });
+                      setIsOpen(false);
+                    }}
+                    className="w-full px-4 py-2.5 text-left text-sm text-white hover:bg-white/10 transition-colors flex items-center gap-3"
+                  >
+                    <Settings className="w-4 h-4" />
+                    Settings
+                  </button>
+                )}
 
                 <button
                   onClick={() => {

apps/web/src/routes/settings/route.tsx

@@ -10,11 +10,11 @@ import { useAuth } from "@/hooks/useAuth";
 export const Route = createFileRoute("/settings")({
   component: RouteComponent,
   beforeLoad: ({ location, context }) => {
-    // Block guests from accessing settings
+    // Block unauthenticated users and guests from accessing settings
     const user = (context as { auth?: { user?: { role?: string } } })?.auth
       ?.user;
-    if (user?.role === "GUEST") {
-      throw redirect({ to: "/" });
+    if (!user || user?.role === "GUEST") {
+      throw redirect({ to: "/login" });
     }
 
     // If we're at the exact settings route, redirect to libraries

apps/web/src/types/auth.ts

@@ -6,7 +6,7 @@ export interface User {
   id: string;
   username: string;
   email?: string;
-  role: "USER" | "ADMIN";
+  role: "USER" | "ADMIN" | "GUEST";
   createdAt: string;
   updatedAt: string;
 }
@@ -22,7 +22,7 @@ export interface RegisterData {
   email?: string;
   password?: string;
   pin?: string;
-  role?: "USER" | "ADMIN";
+  role?: "USER" | "ADMIN" | "GUEST";
 }
 
 export interface AuthResponse {