Session Management

[paanSinghCoder]

Session Management

Description

Proposal to implement session management features in Frontier, allowing users to view and control their active sessions across multiple devices. This will provide users with visibility into their current logged in sessions, including device information, location, and last active date-time, along with the ability to revoke access from specific devices.

Additionally, it introduces admin capabilities through the Frontier Admin UI, enabling internal teams to manage and monitor user sessions for security and support purposes.

Background

Frontier currently implements a basic session management system where users receive a session token upon login that remains valid until explicit logout or expiration. This implementation, while functional, lacks visibility and control that modern authentication systems are expected to provide. Users have no way to track or manage their active sessions across different devices, and our support team lacks the tools to assist users who suspect unauthorized access to their accounts.

The current session implementation in Frontier is built on a straightforward token-based system. When users authenticate through any of our supported methods (email OTP, magic links, or passkeys), a session is created and stored in our PostgreSQL database. This session contains only the essential information: user identification, creation timestamp, and expiration time. While this basic structure has served us well for single-device scenarios, it becomes problematic in multi-device situations.

Proposal

The primary goal is to implement a session management system that provides both end-users and administrators with visibility and control over active sessions. This will be achieved through these main components:

SDK

Adding a new "Session" section in "Security" tab where user can:

• View all their active sessions with device details (browser, OS, location)
• See when each device was last active
• Revoke access for any device except their current one
• Logout from their current device
• Poll the last active API on frontend to update the active timestamp

Admin

For the Frontier Admin, in the "Users" page and "Security" tab:

• Session monitoring capabilities for the support team
• Ability to view all active sessions for a specific user
• CTA to revoke a session for a user

API Specifications

SDK APIs

• List all active sessions

GET /frontier/v1beta1/sessions

Response:
{
  "sessions": [
    {
      "id": "SESSION_ID",
      "metadata": {},
      "created_at": "2025-06-26T10:52:13.030926Z",
      "updated_at": "2025-06-30T05:55:08.510873Z",
      "os": "Mac OS",
      "browser": "Chrome",
      "ip_address": "203.0.113.25",
      "location": "",
      "timestamp": "",
      "isCurrentSession": true
    }
  ]
}

• Revoke a session

POST /frontier/v1beta1/sessions/[SESSION_ID]/revoke

Note: When a user logs out, the session should be marked as expired instead of being deleted immediately. Expired sessions should then be purged after a buffer period (e.g., expiry time + 1 day). This approach ensures that the audit service can still retrieve necessary session details during the buffer window.

• Update last active time

POST /frontier/v1beta1/users/[USER_ID]/sessions/ping

Last active time tracking on Frontend

Did a POC for the session tracking mechanism using a React hook in the Frontier SDK. The implementation validates our approach for maintaining user activity status:

Implementation Details

1. Location: The hook is implemented in the SDK's /react/hooks folder:

// frontier/sdks/js/packages/core/react/hooks/useLastActiveTracker.ts
export const useLastActiveTracker = () => {
  useEffect(() => {
    const intervalId = setInterval(() => [Make last active API call here], 10000);
    
    return () => {
      clearInterval(intervalId);
    };
  }, []);
};

2. Integration: The hook is mounted in the SDK's Window component, which serves as the root component for all Frontier dialogs:

// frontier/sdks/js/packages/core/react/components/window/index.tsx
export const Window = ({ open, onOpenChange, children, ...props }) => {
  useActivityTracker();
  
  return (
    <Dialog open={open} onOpenChange={onOpenChange} {...props}>
      {children}
    </Dialog>
  );
};

3. Lifecycle:
   • The hook automatically starts the interval when the Window component mounts
   • Uses React's useEffect for proper cleanup on unmount
   • Handles interval clearing when the component is destroyed

Admin APIs

• List all active sessions

GET /frontier-api/v1beta1/admin/users/[USER_ID]/sessions

Response:
{
  "sessions": [
    {
      "id": "SESSION_ID",
      "metadata": {},
      "created_at": "2025-06-26T10:52:13.030926Z",
      "updated_at": "2025-06-30T05:55:08.510873Z",
      "os": "Mac OS",
      "browser": "Chrome",
      "ip_address": "203.0.113.25",
      "location": "",
      "timestamp": ""
    }
  ]
}

• Revoke a session

POST /frontier-api/v1beta1/users/[USER_ID]/sessions/[SESSION_ID]/revoke

Note: When a user logs out, the session should be marked as expired instead of being deleted immediately. Expired sessions should then be purged after a buffer period (e.g., expiry time + 1 day). This approach ensures that the audit service can still retrieve necessary session details during the buffer window.

Designs

• SDK UI Design

• Admin UI Design

[rohilsurana]

Sessions are independent of organization so we can remove the org/org_id namespacing from the APIs.