feat: session page revamp

web/apps/client-demo/src/Router.tsx

@@ -11,6 +11,7 @@ import Settings from './pages/Settings';
 import General from './pages/settings/General';
 import Preferences from './pages/settings/Preferences';
 import Profile from './pages/settings/Profile';
+import Sessions from './pages/settings/Sessions';
 
 function Router() {
   return (
@@ -28,6 +29,7 @@ function Router() {
           <Route path="general" element={<General />} />
           <Route path="preferences" element={<Preferences />} />
           <Route path="profile" element={<Profile />} />
+          <Route path="sessions" element={<Sessions />} />
         </Route>
         <Route path="*" element={<Navigate to="/" replace />} />
       </Routes>

web/apps/client-demo/src/pages/Settings.tsx

@@ -6,7 +6,8 @@ import { useFrontier } from '@raystack/frontier/react';
 const NAV_ITEMS = [
   { label: 'General', path: 'general' },
   { label: 'Preferences', path: 'preferences' },
-  { label: 'Profile', path: 'profile' }
+  { label: 'Profile', path: 'profile' },
+  { label: 'Sessions', path: 'sessions' }
 ];
 
 export default function Settings() {

web/apps/client-demo/src/pages/settings/Sessions.tsx

@@ -0,0 +1,7 @@
+import { SessionsView } from '@raystack/frontier/react';
+
+export default function Sessions() {
+  return <SessionsView onLogout={() => {
+    window.location.href = '/login';
+  }} />;
+}

web/sdk/react/hooks/useSessions.ts

@@ -1,5 +1,10 @@
 import { useMemo } from 'react';
-import { useQuery, useMutation, createConnectQueryKey, useTransport } from '@connectrpc/connect-query';
+import {
+  useQuery,
+  useMutation,
+  createConnectQueryKey,
+  useTransport
+} from '@connectrpc/connect-query';
 import { useQueryClient } from '@tanstack/react-query';
 import { FrontierServiceQueries } from '@raystack/proton/frontier';
 import { toast } from '@raystack/apsara';
@@ -21,74 +26,78 @@ const getErrorMessage = (error: unknown): string => {
   return 'Something went wrong';
 };
 
-export const formatDeviceDisplay = (browser?: string, operatingSystem?: string): string => {
-  const browserName = browser || "Unknown";
-  const osName = operatingSystem || "Unknown";
-  return browserName === "Unknown" && osName === "Unknown" ? "Unknown browser and OS" : `${browserName} on ${osName}`;
+export const formatDeviceDisplay = (
+  browser?: string,
+  operatingSystem?: string
+): string => {
+  const browserName = browser || 'Unknown';
+  const osName = operatingSystem || 'Unknown';
+  return browserName === 'Unknown' && osName === 'Unknown'
+    ? 'Unknown browser and OS'
+    : `${browserName} on ${osName}`;
 };
 
 export const useSessions = () => {
   const queryClient = useQueryClient();
   const transport = useTransport();
 
-  const { 
-    data: sessionsData, 
-    isLoading, 
-    error 
-  } = useQuery(
-    FrontierServiceQueries.listSessions,
-    {}
-  );
+  const {
+    data: sessionsData,
+    isLoading,
+    error
+  } = useQuery(FrontierServiceQueries.listSessions, {});
 
   const formatLastActive = (updatedAt?: any) => {
     const d = timestampToDayjs(updatedAt);
-    return d ? d.fromNow() : "Unknown";
+    return d ? d.fromNow() : 'Unknown';
   };
 
-  const sessions = useMemo(() => 
-    (sessionsData?.sessions || [])
-      .map((session: any) => ({
-        id: session.id || '',
-        browser: session.metadata?.browser || 'Unknown',
-        operatingSystem: session.metadata?.operatingSystem || 'Unknown',
-        ipAddress: session.metadata?.ipAddress || 'Unknown',
-        location: formatLocation(session.metadata?.location),
-        lastActive: formatLastActive(session.updatedAt),
-        isCurrent: session.isCurrentSession || false,
-      }))
-      .sort((a, b) => {
-        // Current session first, then by last active (most recent first)
-        if (a.isCurrent && !b.isCurrent) return -1;
-        if (!a.isCurrent && b.isCurrent) return 1;
-        return 0; // Keep original order for non-current sessions
-      }), [sessionsData?.sessions]
+  const sessions = useMemo(
+    () =>
+      (sessionsData?.sessions || [])
+        .map((session: any) => ({
+          id: session.id || '',
+          browser: session.metadata?.browser || 'Unknown',
+          operatingSystem: session.metadata?.operatingSystem || 'Unknown',
+          ipAddress: session.metadata?.ipAddress || 'Unknown',
+          location: formatLocation(session.metadata?.location),
+          lastActive: formatLastActive(session.updatedAt),
+          isCurrent: session.isCurrentSession || false
+        }))
+        .sort((a, b) => {
+          // Current session first, then by last active (most recent first)
+          if (a.isCurrent && !b.isCurrent) return -1;
+          if (!a.isCurrent && b.isCurrent) return 1;
+          return 0; // Keep original order for non-current sessions
+        }),
+    [sessionsData?.sessions]
   );
 
-  const {
-    mutate: revokeSession,
-    isPending: isRevokingSession,
-  } = useMutation(FrontierServiceQueries.revokeSession, {
-    onSuccess: () => {
-      // Invalidate and refetch the sessions list
-      queryClient.invalidateQueries({
-        queryKey: createConnectQueryKey({
-          schema: FrontierServiceQueries.listSessions,
-          transport,
-          input: {},
-          cardinality: "finite",
-        }),
-      });
-      toast.success('Session revoked successfully');
-    },
-    onError: (error: any) => {
-      toast.error('Failed to revoke session', {
-        description: getErrorMessage(error)
-      });
-    },
-  });
+  const { mutate: revokeSession, isPending: isRevokingSession } = useMutation(
+    FrontierServiceQueries.revokeSession,
+    {
+      onSuccess: () => {
+        // Invalidate and refetch the sessions list
+        queryClient.invalidateQueries({
+          queryKey: createConnectQueryKey({
+            schema: FrontierServiceQueries.listSessions,
+            transport,
+            input: {},
+            cardinality: 'finite'
+          })
+        });
+        toast.success('Session revoked successfully');
+      },
+      onError: (error: any) => {
+        toast.error('Failed to revoke session', {
+          description: getErrorMessage(error)
+        });
+      }
+    }
+  );
 
-  const handleRevokeSession = (sessionId: string) => {
-    revokeSession({ sessionId });
+  const handleRevokeSession = (sessionId: string, options?: any) => {
+    revokeSession({ sessionId }, options);
   };
 
   return {
@@ -97,6 +106,6 @@ export const useSessions = () => {
     error: error?.message || null,
     refetch: () => {},
     revokeSession: handleRevokeSession,
-    isRevokingSession,
+    isRevokingSession
   };
 };

web/sdk/react/index.ts

@@ -33,6 +33,7 @@ export { ViewHeader } from './components/view-header';
 export { GeneralView } from './views-new/general';
 export { PreferencesView, PreferenceRow } from './views-new/preferences';
 export { ProfileView } from './views-new/profile';
+export { SessionsView } from './views-new/sessions';
 
 export type {
   FrontierClientOptions,

web/sdk/react/views-new/sessions/components/revoke-session-confirm-dialog.tsx

@@ -0,0 +1,58 @@
+import { AlertDialog, Button } from '@raystack/apsara-v1';
+
+interface RevokeSessionConfirmDialogProps {
+  open: boolean;
+  onOpenChange: (isOpen: boolean) => void;
+  onConfirm: () => void;
+  isLoading?: boolean;
+  isCurrentSession?: boolean;
+}
+
+export const RevokeSessionConfirmDialog = ({
+  open,
+  onOpenChange,
+  onConfirm,
+  isLoading = false,
+  isCurrentSession = false
+}: RevokeSessionConfirmDialogProps) => {
+  const handleConfirm = () => {
+    onConfirm();
+  };
+
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialog.Content width={400} showCloseButton={false}>
+        <AlertDialog.Body>
+          <AlertDialog.Title>
+            {isCurrentSession ? 'Log out' : 'Revoke'}
+          </AlertDialog.Title>
+          <AlertDialog.Description>
+            Are you sure you want to {isCurrentSession ? 'log out' : 'revoke'} of this session? This action cannot be undone.
+          </AlertDialog.Description>
+        </AlertDialog.Body>
+        <AlertDialog.Footer justify="end" gap={5}>
+          <Button
+            variant="outline"
+            color="neutral"
+            onClick={() => onOpenChange(false)}
+            disabled={isLoading}
+            data-test-id="frontier-sdk-cancel-final-revoke-dialog"
+          >
+            Cancel
+          </Button>
+          <Button
+            variant="solid"
+            color="danger"
+            onClick={handleConfirm}
+            disabled={isLoading}
+            loading={isLoading}
+            loaderText={isCurrentSession ? 'Signing out...' : 'Revoking...'}
+            data-test-id="frontier-sdk-confirm-final-revoke-dialog"
+          >
+            {isCurrentSession ? 'Log out' : 'Revoke'}
+          </Button>
+        </AlertDialog.Footer>
+      </AlertDialog.Content>
+    </AlertDialog>
+  );
+};

web/sdk/react/views-new/sessions/components/revoke-session-dialog.module.css

@@ -0,0 +1,12 @@
+.detailRow {
+  padding: var(--rs-space-5) 0;
+  border-bottom: 0.5px solid var(--rs-color-border-base-primary);
+}
+.detailRow:last-child {
+  border-bottom: none;
+}
+
+.detailLabel {
+  width: 120px;
+  flex-shrink: 0;
+}