👥 Manage Devices

The ManageDevices page enables users to view and remove active sessions from their account, such as when they’ve logged in on multiple devices.

Built using:

✅ @zezosoft/react-ui-kit → <ZezoManageDevices />
✅ zezoClient().auth.whoami() for session data
✅ React Query for data fetching & mutations
✅ toast for notifications

⚙️ Behavior

Lists all active sessions for the user (web, mobile, etc.).
Allows removal of any session except the current one.
Uses the whoami API to fetch session info.
Displays proper loading and error states.
Refreshes page after a session is removed.

🧩 Usage Example

📁 Server Page – `page.tsx`


import { getSession } from "@/businessLogic/web/auth/session/session";
import { removeSession } from "@/businessLogic/web/auth/remove-session/action/remove-session";
import ManageDevicesClient from "./components/ManageDevicesClient";
import { redirect } from "next/navigation";
 
export default async function ManageDevicesPage() {
  const session = await getSession();
  if (!session) redirect("/email-login");
 
  return (
    <ManageDevicesClient
      getSession={getSession}
      removeSession={removeSession}
    />
  );
}

🧠 Client Component – ManageDevicesClient.tsx


"use client";
 
import React, { useState } from "react";
import { useQuery, useMutation } from "@tanstack/react-query";
import toast from "react-hot-toast";
import { ManageDevices as ZezoManageDevices } from "@zezosoft/react-ui-kit";
 
interface Props {
  getSession: () => Promise<any>;
  removeSession: (sessionId: string) => Promise<any>;
}
 
export default function ManageDevicesClient({
  getSession,
  removeSession,
}: Props) {
  const [removingSessionId, setRemovingSessionId] = useState<string | null>(
    null
  );
 
  const { data, isLoading, isError } = useQuery({
    queryKey: ["whoami"],
    queryFn: () => getSession(),
  });
 
  const removeMutation = useMutation({
    mutationFn: async (sessionId: string) => {
      setRemovingSessionId(sessionId);
      const result = await removeSession(sessionId);
      if (!result?.success) throw new Error("Session removal failed");
      return result;
    },
    onSuccess: () => {
      toast.success("Session removed");
      window.location.reload();
    },
    onError: () => {
      toast.error("Failed to remove session");
      setRemovingSessionId(null);
    },
  });
 
  if (isLoading) return <div className="px-10">Loading sessions...</div>;
  if (isError || !data?.user)
    return <div className="px-10">Failed to load sessions.</div>;
 
  return (
    <ZezoManageDevices
      sessions={data.user.sessions || []}
      currentSessionToken={data.accessToken || ""}
      onRemoveSession={(sessionId) => {
        if (sessionId === data.accessToken) {
          toast.error("You can't remove your current session.");
          return;
        }
        removeMutation.mutate(sessionId);
      }}
      removingSessionId={removingSessionId}
    />
  );
}

🖼️ UI Preview

Here’s how the ManageDevices component looks in action:

Search UI