diff --git a/cloud/app/components/blocks/navigation/desktop-navigation.tsx b/cloud/app/components/blocks/navigation/desktop-navigation.tsx
index 6e9448d449..d29315bada 100644
--- a/cloud/app/components/blocks/navigation/desktop-navigation.tsx
+++ b/cloud/app/components/blocks/navigation/desktop-navigation.tsx
@@ -2,6 +2,7 @@ import { Link } from "@tanstack/react-router";
import React from "react";
import { cn } from "@/app/lib/utils";
import { NAV_LINK_STYLES, DESKTOP_NAV_STYLES } from "./styles";
+import { useAuth } from "@/app/contexts/auth";
// Reusable navigation link component
interface NavLinkProps {
@@ -33,12 +34,28 @@ interface DesktopNavigationProps {
export default function DesktopNavigation({
isSearchOpen,
}: DesktopNavigationProps) {
+ const { user, isLoading, logout } = useAuth();
+
return (
{/* Products Menu */}
- Docs
+ Docs
Blog
Pricing
+ {!isLoading && (
+ <>
+ {user ? (
+
+ ) : (
+ Login
+ )}
+ >
+ )}
);
}
diff --git a/cloud/app/components/blocks/navigation/mobile-navigation.tsx b/cloud/app/components/blocks/navigation/mobile-navigation.tsx
index fbec5e6575..fa78b6fc8e 100644
--- a/cloud/app/components/blocks/navigation/mobile-navigation.tsx
+++ b/cloud/app/components/blocks/navigation/mobile-navigation.tsx
@@ -1,5 +1,7 @@
import { Link } from "@tanstack/react-router";
import { MOBILE_NAV_STYLES, NAV_LINK_STYLES } from "./styles";
+import { useAuth } from "@/app/contexts/auth";
+import { cn } from "@/app/lib/utils";
interface MobileNavigationProps {
/**
@@ -16,8 +18,15 @@ export default function MobileNavigation({
isOpen,
onClose,
}: MobileNavigationProps) {
+ const { user, isLoading, logout } = useAuth();
+
if (!isOpen) return null;
+ const handleLogout = async () => {
+ await logout();
+ onClose();
+ };
+
return (
@@ -36,6 +45,27 @@ export default function MobileNavigation({
>
Pricing
+
+ {!isLoading && (
+ <>
+ {user ? (
+
+ ) : (
+
+ Login
+
+ )}
+ >
+ )}
);
diff --git a/cloud/app/components/protected.tsx b/cloud/app/components/protected.tsx
index a25a803346..2c0de9d43e 100644
--- a/cloud/app/components/protected.tsx
+++ b/cloud/app/components/protected.tsx
@@ -10,7 +10,7 @@ export function Protected({ children }: { children: ReactNode }) {
useEffect(() => {
// Only redirect on client-side after auth check completes
if (!isLoading && !user) {
- void navigate({ to: "/login", replace: true });
+ void navigate({ to: "/home", replace: true });
}
}, [user, isLoading, navigate]);