Add logout with token revocation and loading states

surfsense_backend/app/routes/auth_routes.py

@@ -68,13 +68,17 @@ async def refresh_access_token(request: RefreshTokenRequest):
     )
 
 
-@router.post("/logout", response_model=LogoutResponse)
-async def logout(request: LogoutRequest):
+@router.post("/revoke", response_model=LogoutResponse)
+async def revoke_token(request: LogoutRequest):
     """
     Logout current device by revoking the provided refresh token.
+    Does not require authentication - just the refresh token.
     """
-    await revoke_refresh_token(request.refresh_token)
-    logger.info("User logged out from current device")
+    revoked = await revoke_refresh_token(request.refresh_token)
+    if revoked:
+        logger.info("User logged out from current device - token revoked")
+    else:
+        logger.warning("Logout called but no matching token found to revoke")
     return LogoutResponse()
 
 

surfsense_web/components/UserDropdown.tsx

@@ -1,7 +1,8 @@
 "use client";
 
-import { BadgeCheck, LogOut } from "lucide-react";
+import { BadgeCheck, Loader2, LogOut } from "lucide-react";
 import { useRouter } from "next/navigation";
+import { useState } from "react";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
 import {
@@ -13,6 +14,7 @@ import {
 	DropdownMenuSeparator,
 	DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { logout } from "@/lib/auth-utils";
 import { cleanupElectric } from "@/lib/electric/client";
 import { resetUser, trackLogout } from "@/lib/posthog/events";
 
@@ -26,8 +28,11 @@ export function UserDropdown({
 	};
 }) {
 	const router = useRouter();
+	const [isLoggingOut, setIsLoggingOut] = useState(false);
 
 	const handleLogout = async () => {
+		if (isLoggingOut) return;
+		setIsLoggingOut(true);
 		try {
 			// Track logout event and reset PostHog identity
 			trackLogout();
@@ -41,15 +46,17 @@ export function UserDropdown({
 				console.warn("[Logout] Electric cleanup failed (will be handled on next login):", err);
 			}
 
+			// Revoke refresh token on server and clear all tokens from localStorage
+			await logout();
+
 			if (typeof window !== "undefined") {
-				localStorage.removeItem("surfsense_bearer_token");
 				window.location.href = "/";
 			}
 		} catch (error) {
 			console.error("Error during logout:", error);
-			// Optionally, provide user feedback
+			// Even if there's an error, try to clear tokens and redirect
+			await logout();
 			if (typeof window !== "undefined") {
-				localStorage.removeItem("surfsense_bearer_token");
 				window.location.href = "/";
 			}
 		}
@@ -85,9 +92,17 @@ export function UserDropdown({
 					</DropdownMenuItem>
 				</DropdownMenuGroup>
 				<DropdownMenuSeparator />
-				<DropdownMenuItem onClick={handleLogout} className="text-xs md:text-sm">
-					<LogOut className="mr-2 h-3.5 w-3.5 md:h-4 md:w-4" />
-					Log out
+				<DropdownMenuItem
+					onClick={handleLogout}
+					className="text-xs md:text-sm"
+					disabled={isLoggingOut}
+				>
+					{isLoggingOut ? (
+						<Loader2 className="mr-2 h-3.5 w-3.5 md:h-4 md:w-4 animate-spin" />
+					) : (
+						<LogOut className="mr-2 h-3.5 w-3.5 md:h-4 md:w-4" />
+					)}
+					{isLoggingOut ? "Logging out..." : "Log out"}
 				</DropdownMenuItem>
 			</DropdownMenuContent>
 		</DropdownMenu>

surfsense_web/components/layout/providers/LayoutDataProvider.tsx

@@ -25,6 +25,7 @@ import { isPageLimitExceededMetadata } from "@/contracts/types/inbox.types";
 import { useInbox } from "@/hooks/use-inbox";
 import { searchSpacesApiService } from "@/lib/apis/search-spaces-api.service";
 import { deleteThread, fetchThreads, updateThread } from "@/lib/chat/thread-persistence";
+import { logout } from "@/lib/auth-utils";
 import { cleanupElectric } from "@/lib/electric/client";
 import { resetUser, trackLogout } from "@/lib/posthog/events";
 import { cacheKeys } from "@/lib/query-client/cache-keys";
@@ -464,12 +465,15 @@ export function LayoutDataProvider({
 				console.warn("[Logout] Electric cleanup failed (will be handled on next login):", err);
 			}
 
+			// Revoke refresh token on server and clear all tokens from localStorage
+			await logout();
+
 			if (typeof window !== "undefined") {
-				localStorage.removeItem("surfsense_bearer_token");
 				router.push("/");
 			}
 		} catch (error) {
 			console.error("Error during logout:", error);
+			await logout();
 			router.push("/");
 		}
 	}, [router]);

surfsense_web/components/layout/ui/sidebar/SidebarUserProfile.tsx

@@ -1,7 +1,8 @@
 "use client";
 
-import { Check, ChevronUp, Languages, Laptop, LogOut, Moon, Settings, Sun } from "lucide-react";
+import { Check, ChevronUp, Languages, Laptop, Loader2, LogOut, Moon, Settings, Sun } from "lucide-react";
 import { useTranslations } from "next-intl";
+import { useState } from "react";
 import {
 	DropdownMenu,
 	DropdownMenuContent,
@@ -124,6 +125,7 @@ export function SidebarUserProfile({
 }: SidebarUserProfileProps) {
 	const t = useTranslations("sidebar");
 	const { locale, setLocale } = useLocaleContext();
+	const [isLoggingOut, setIsLoggingOut] = useState(false);
 	const bgColor = stringToColor(user.email);
 	const initials = getInitials(user.email);
 	const displayName = user.name || user.email.split("@")[0];
@@ -136,6 +138,16 @@ export function SidebarUserProfile({
 		setTheme?.(newTheme);
 	};
 
+	const handleLogout = async () => {
+		if (isLoggingOut || !onLogout) return;
+		setIsLoggingOut(true);
+		try {
+			await onLogout();
+		} finally {
+			setIsLoggingOut(false);
+		}
+	};
+
 	// Collapsed view - just show avatar with dropdown
 	if (isCollapsed) {
 		return (
@@ -242,9 +254,13 @@ export function SidebarUserProfile({
 
 						<DropdownMenuSeparator />
 
-						<DropdownMenuItem onClick={onLogout}>
-							<LogOut className="mr-2 h-4 w-4" />
-							{t("logout")}
+						<DropdownMenuItem onClick={handleLogout} disabled={isLoggingOut}>
+							{isLoggingOut ? (
+								<Loader2 className="mr-2 h-4 w-4 animate-spin" />
+							) : (
+								<LogOut className="mr-2 h-4 w-4" />
+							)}
+							{isLoggingOut ? t("loggingOut") : t("logout")}
 						</DropdownMenuItem>
 					</DropdownMenuContent>
 				</DropdownMenu>
@@ -360,9 +376,13 @@ export function SidebarUserProfile({
 
 					<DropdownMenuSeparator />
 
-					<DropdownMenuItem onClick={onLogout}>
-						<LogOut className="mr-2 h-4 w-4" />
-						{t("logout")}
+					<DropdownMenuItem onClick={handleLogout} disabled={isLoggingOut}>
+						{isLoggingOut ? (
+							<Loader2 className="mr-2 h-4 w-4 animate-spin" />
+						) : (
+							<LogOut className="mr-2 h-4 w-4" />
+						)}
+						{isLoggingOut ? t("loggingOut") : t("logout")}
 					</DropdownMenuItem>
 				</DropdownMenuContent>
 			</DropdownMenu>

surfsense_web/lib/auth-utils.ts

@@ -104,6 +104,39 @@ export function clearAllTokens(): void {
 	clearRefreshToken();
 }
 
+/**
+ * Logout the current user by revoking the refresh token and clearing localStorage.
+ * Returns true if logout was successful (or tokens were cleared), false otherwise.
+ */
+export async function logout(): Promise<boolean> {
+	const refreshToken = getRefreshToken();
+
+	// Call backend to revoke the refresh token
+	if (refreshToken) {
+		try {
+			const backendUrl = process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL || "http://localhost:8000";
+			const response = await fetch(`${backendUrl}/auth/jwt/revoke`, {
+				method: "POST",
+				headers: {
+					"Content-Type": "application/json",
+				},
+				body: JSON.stringify({ refresh_token: refreshToken }),
+			});
+
+			if (!response.ok) {
+				console.warn("Failed to revoke refresh token:", response.status, await response.text());
+			}
+		} catch (error) {
+			console.warn("Failed to revoke refresh token on server:", error);
+			// Continue to clear local tokens even if server call fails
+		}
+	}
+
+	// Clear all tokens from localStorage
+	clearAllTokens();
+	return true;
+}
+
 /**
  * Checks if the user is authenticated (has a token)
  */
@@ -161,7 +194,7 @@ async function refreshAccessToken(): Promise<string | null> {
 	isRefreshing = true;
 	refreshPromise = (async () => {
 		try {
-			const backendUrl = process.env.NEXT_PUBLIC_BACKEND_URL || "";
+			const backendUrl = process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL || "http://localhost:8000";
 			const response = await fetch(`${backendUrl}/auth/jwt/refresh`, {
 				method: "POST",
 				headers: {

surfsense_web/messages/en.json

@@ -693,6 +693,7 @@
 		"dark": "Dark",
 		"system": "System",
 		"logout": "Logout",
+		"loggingOut": "Logging out...",
 		"inbox": "Inbox",
 		"search_inbox": "Search inbox",
 		"mark_all_read": "Mark all as read",

surfsense_web/messages/zh.json

@@ -678,6 +678,7 @@
 		"dark": "深色",
 		"system": "系统",
 		"logout": "退出登录",
+		"loggingOut": "正在退出...",
 		"inbox": "收件箱",
 		"search_inbox": "搜索收件箱",
 		"mark_all_read": "全部标记为已读",