Session management

backend/api/account/serializers.py

@@ -24,13 +24,15 @@ class ActiveSessionSerializer(serializers.Serializer):
     client_version = serializers.CharField(
         required=False, allow_null=True, default=None
     )
+    created_at = serializers.DateTimeField(required=True)
     last_used = serializers.DateTimeField(required=True)
     is_current = serializers.BooleanField(required=True)
 
 
 class ActiveSessionListSerializer(serializers.Serializer):
-    sessions = serializers.ListField(
-        child=ActiveSessionSerializer(), required=True, allow_empty=False
+    current_session = ActiveSessionSerializer(required=True)
+    other_sessions = serializers.ListField(
+        child=ActiveSessionSerializer(), required=True, allow_empty=True
     )
 
 

backend/api/account/views.py

@@ -29,6 +29,7 @@
 from api.settings import (
     ACCOUNT_COOKIE_NAME,
     AUTHED_PWD_RESET_EXP_SECONDS,
+    GENERIC_ERR_RESPONSE,
     LONG_SESS_EXP_SECONDS,
     SEND_EMAILS,
     SESS_EXP_SECONDS,
@@ -107,11 +108,13 @@ def get_active_sessions(request):
         user_account=user,
     ).order_by("-last_used")
 
-    active_sessions = []
+    current_session = None
+    other_sessions = []
 
     for session in sessions:
         session_data = {
             "public_id": session.public_id,
+            "created_at": session.created_at,
             "last_used": session.last_used,
             "is_current": session.session_token
             == request.COOKIES.get(ACCOUNT_COOKIE_NAME),
@@ -123,9 +126,26 @@ def get_active_sessions(request):
             session_data["os_version"] = device.os_version() or None
             session_data["client_name"] = device.client_name() or None
             session_data["client_version"] = device.client_version() or None
-        active_sessions.append(session_data)
 
-    return Response({"sessions": active_sessions}, status=200)
+        if session_data["is_current"]:
+            if current_session is not None:
+                logger.error(
+                    f"Multiple sessions matching session token for user: {user.id}."
+                )
+            current_session = session_data
+        else:
+            other_sessions.append(session_data)
+
+    if current_session is None:
+        logger.error(
+            f"No session matching session token for user, despite being authenticated: {user.id}."
+        )
+        return GENERIC_ERR_RESPONSE
+
+    return Response(
+        {"current_session": current_session, "other_sessions": other_sessions},
+        status=200,
+    )
 
 
 @api_endpoint("POST")

frontend/src/app/settings/(submenus)/security/page.tsx

@@ -1,8 +1,11 @@
-"use client";
-
 import ChangePasswordDialog from "@/features/account/setting-dialogs/change-password/main-dialog";
+import SessionManager from "@/features/account/settings/security/components/session-manager";
+import { ROUTES } from "@/lib/utils/api/endpoints";
+import { serverGet } from "@/lib/utils/api/server-fetch";
+
+export default async function Page() {
+  const activeSessions = await serverGet(ROUTES.account.getActiveSessions);
 
-export default function Page() {
   return (
     <div className="flex flex-col gap-6">
       <div className="bg-panel flex flex-col gap-4 rounded-3xl border-none p-6 md:p-8">
@@ -17,6 +20,8 @@ export default function Page() {
           <ChangePasswordDialog />
         </div>
       </div>
+
+      <SessionManager sessions={activeSessions} />
     </div>
   );
 }

frontend/src/features/account/settings/security/components/session-manager.tsx

@@ -0,0 +1,302 @@
+"use client";
+
+import {
+  startTransition,
+  useEffect,
+  useOptimistic,
+  useRef,
+  useState,
+} from "react";
+
+import * as Collapsible from "@radix-ui/react-collapsible";
+import { toZonedTime } from "date-fns-tz";
+import {
+  ChevronDownIcon,
+  CircleQuestionMark,
+  Laptop2Icon,
+  SmartphoneIcon,
+  TabletIcon,
+} from "lucide-react";
+
+import { pruneSessions } from "@/features/account/settings/security/prune-sessions";
+import { removeSession } from "@/features/account/settings/security/remove-session";
+import ActionButton from "@/features/button/components/action";
+import { ConfirmationDialog, useToast } from "@/features/system-feedback";
+import { MESSAGES } from "@/lib/messages";
+import { ActiveSessionList, type ActiveSession } from "@/lib/utils/api/types";
+import { cn } from "@/lib/utils/classname";
+import { formatTimeAgo } from "@/lib/utils/date-time-format";
+
+type SessionAction = { type: "remove"; publicId: string } | { type: "prune" };
+
+export default function SessionManager({
+  sessions,
+}: {
+  sessions: ActiveSessionList;
+}) {
+  const [now, setNow] = useState(Date.now());
+  // This updates the "last used" timestamps every minute
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setNow(Date.now());
+    }, 60000); // Update every minute
+    return () => clearInterval(interval);
+  }, []);
+
+  const userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+
+  const [optimisticSessions, setOptimisticSessions] = useOptimistic(
+    sessions,
+    (state, action: SessionAction) => {
+      switch (action.type) {
+        case "remove":
+          return {
+            current_session: state.current_session,
+            other_sessions: state.other_sessions.filter(
+              (s) => s.public_id !== action.publicId,
+            ),
+          };
+        case "prune":
+          return {
+            current_session: state.current_session,
+            other_sessions: [],
+          };
+        default:
+          return state;
+      }
+    },
+  );
+
+  const [pruneConfirmationOpen, setPruneConfirmationOpen] = useState(false);
+  const [removeConfirmationOpen, setRemoveConfirmationOpen] = useState(false);
+  const sessionToRemove = useRef<string | null>(null);
+  const { addToast } = useToast();
+
+  const handlePruneSessions = async () => {
+    // Immediate UI update
+    startTransition(() => {
+      setOptimisticSessions({ type: "prune" });
+    });
+
+    // Server Action
+    const result = await pruneSessions();
+
+    if (!result.success) {
+      addToast("error", result.error || MESSAGES.ERROR_GENERIC);
+    } else {
+      addToast("success", MESSAGES.SUCCESS_SESSION_PRUNE);
+    }
+  };
+
+  const handleRemoveSession = async (publicId: string) => {
+    // Immediate UI update
+    startTransition(() => {
+      setOptimisticSessions({ type: "remove", publicId });
+    });
+
+    // Server Action
+    const result = await removeSession(publicId);
+
+    if (!result.success) {
+      addToast("error", result.error || MESSAGES.ERROR_GENERIC);
+    } else {
+      addToast("success", MESSAGES.SUCCESS_SESSION_REMOVE);
+    }
+  };
+
+  const onRemoveSession = (publicId: string) => {
+    sessionToRemove.current = publicId;
+    setRemoveConfirmationOpen(true);
+  };
+
+  return (
+    <div className="bg-panel flex flex-col gap-4 rounded-3xl border-none p-6 md:p-8">
+      <div>
+        <h2 className="text-lg font-bold">Active Sessions</h2>
+        <p className="mt-1 text-sm leading-tight opacity-75">
+          These devices have access to your account. If there are any you don
+          {"'"}t recognize, remove them and change your password.
+        </p>
+      </div>
+
+      <Session
+        session={optimisticSessions.current_session}
+        now={now}
+        userTz={userTimeZone}
+      />
+      <div className="bg-foreground/10 h-px w-full" />
+      {optimisticSessions.other_sessions.length > 0 ? (
+        <>
+          <div className="flex flex-col gap-2">
+            {optimisticSessions.other_sessions.map((session) => (
+              <Session
+                key={session.public_id}
+                session={session}
+                now={now}
+                userTz={userTimeZone}
+                onRemove={() => {
+                  onRemoveSession(session.public_id);
+                }}
+              />
+            ))}
+          </div>
+
+          <ActionButton
+            buttonStyle="danger"
+            label="Remove All Other Sessions"
+            className="mx-auto w-fit"
+            onClick={() => {
+              setPruneConfirmationOpen(true);
+            }}
+          />
+        </>
+      ) : (
+        <p className="text-center text-sm opacity-75">
+          No other active sessions.
+        </p>
+      )}
+
+      <ConfirmationDialog
+        type="delete"
+        autoClose={true}
+        title="Remove Session"
+        description="Are you sure you want to log out of this device?"
+        open={removeConfirmationOpen}
+        onOpenChange={setRemoveConfirmationOpen}
+        onConfirm={() => {
+          if (!sessionToRemove.current) return false;
+          handleRemoveSession(sessionToRemove.current);
+          return true;
+        }}
+      />
+      <ConfirmationDialog
+        type="delete"
+        autoClose={true}
+        title="Remove All Other Sessions"
+        description="Are you sure you want to log out of all other devices? You will remain logged in here."
+        open={pruneConfirmationOpen}
+        onOpenChange={setPruneConfirmationOpen}
+        onConfirm={() => {
+          handlePruneSessions();
+          return true;
+        }}
+      />
+    </div>
+  );
+}
+
+function Session({
+  session,
+  now,
+  userTz,
+  onRemove,
+}: {
+  session: ActiveSession;
+  now: number;
+  userTz: string;
+  onRemove?: () => void;
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const lastUsedLocal = toZonedTime(new Date(session.last_used + "Z"), userTz);
+  const lastUsedSecondsAgo = (now - lastUsedLocal.getTime()) / 1000;
+
+  const createdAtLocal = toZonedTime(
+    new Date(session.created_at + "Z"),
+    userTz,
+  );
+
+  return (
+    <div className="bg-background w-full rounded-3xl p-2">
+      <Collapsible.Root open={isOpen} onOpenChange={setIsOpen}>
+        <Collapsible.Trigger
+          className={
+            "group flex w-full cursor-pointer justify-between gap-2 text-left"
+          }
+        >
+          <div className="flex gap-2">
+            <div
+              className={cn(
+                "bg-panel h-fit rounded-full p-2",
+                session.is_current && "bg-accent/50 text-accent-text",
+              )}
+            >
+              {session.device_type === "desktop" ? (
+                <Laptop2Icon className="h-5 w-5" />
+              ) : session.device_type === "smartphone" ? (
+                <SmartphoneIcon className="h-5 w-5" />
+              ) : session.device_type === "tablet" ? (
+                <TabletIcon className="h-5 w-5" />
+              ) : (
+                <CircleQuestionMark className="h-5 w-5" />
+              )}
+            </div>
+
+            <div className="flex flex-col items-start justify-between">
+              <div className="text-sm font-semibold">
+                {!session.os_name && !session.client_name
+                  ? "Unknown"
+                  : (session.os_name || "Unknown Device") +
+                    " • " +
+                    (session.client_name || "Unknown Browser")}
+              </div>
+              <div className="text-xs opacity-75">
+                {session.is_current
+                  ? "This Session"
+                  : `Last used ${formatTimeAgo(lastUsedSecondsAgo)}`}
+              </div>
+            </div>
+          </div>
+          <div
+            className={cn(
+              "group-hover:bg-accent/25 group-active:bg-accent/40",
+              "m-1 h-fit rounded-full p-1",
+            )}
+          >
+            <div
+              className={cn(
+                "transition-transform duration-200",
+                isOpen && "rotate-x-180",
+              )}
+            >
+              <ChevronDownIcon className="h-5 w-5" />
+            </div>
+          </div>
+        </Collapsible.Trigger>
+        <Collapsible.Content className="collapsible-content">
+          <div className="mt-2 flex flex-col gap-2 pl-2 md:flex-row md:items-end md:justify-between">
+            <div className="text-sm">
+              {session.os_name && session.os_version && (
+                <p>
+                  {session.os_name} {session.os_version}
+                </p>
+              )}
+              {session.client_name && session.client_version && (
+                <p>
+                  {session.client_name} {session.client_version}
+                </p>
+              )}
+              <p className="opacity-75">
+                Logged in on{" "}
+                {createdAtLocal.toLocaleString(undefined, {
+                  month: "short",
+                  day: "numeric",
+                  hour: "numeric",
+                  minute: "numeric",
+                })}
+              </p>
+            </div>
+            {onRemove && (
+              <ActionButton
+                buttonStyle="danger"
+                label="Remove"
+                className="mx-auto w-fit md:mx-0"
+                onClick={onRemove}
+              />
+            )}
+          </div>
+        </Collapsible.Content>
+      </Collapsible.Root>
+    </div>
+  );
+}