Context

The console currently mixes different token types (OAuth & session tokens) in a single view. We need a dedicated component to manage session tokens separately. This component will allow users to view their active session tokens, identify their current session, and provide the ability to revoke individual tokens or all tokens except the current session.

Session tokens represent active login sessions across different devices and browsers. Users need a clear way to monitor these sessions, identify potential security issues (like unauthorized access), and easily revoke access when needed.

To be discussed

• Should we add additional information like device type, IP address, or location?
• How should token expiration warnings be calculated?
• How should the component handle the case when a user revokes their current session token?

Inputs

Attributes/properties

Slots

None

CSS custom property

None

CSS part

None

Outputs

Type Definitions

type SessionTokensState = 
  | { type: 'loading' }
  | { type: 'error' }
  | { type: 'loaded', tokens: SessionTokenState[] }
  | { type: 'revoking-all', tokens: SessionTokenState[] };

type SessionTokenState = {
  type: 'current' | 'idle' | 'revoking';
  id: string;
  isCleverTeam: boolean;
  creationDate: Date | string;
  expirationDate: Date | string;
  lastUsedDate: Date | string;
};

type SessionTokenStateWithExpirationWarning = SessionTokenState & {
  isExpirationClose: boolean;
};

Data/APIs

• GET /v2/self/tokens - Get all session tokens
• POST /v2/self/tokens/revoke - Revoke a specific session token

Stories & states

• Loading - Initial loading state while fetching tokens
• Error - Failed to load tokens
• Loaded - Successfully loaded session tokens with data
• Waiting with revoking one token - One token is being revoked
• Waiting with revoking all tokens - All tokens except current are being revoked
• Simulations:
  • Loading → Success
  • Loading → Error
  • Revoking token
  • Revoking all tokens

UX writing & i18n

The component will need text for:

• Main heading ("Session Tokens")
• Introductory text explaining session tokens
• Error state message
• Token information labels (Last used, Creation, Expiration)
• Current session indicator
• Expiration warning indicator
• Clever team indicator
• Revoke button text
• Revoke all buttons text
• Success/error notifications for token revocation

Wireframes and UI propositions

The component will follow these design principles:

• List of token cards in a responsive layout
• Special styling for the current session token (always shown first)
• Each card showing creation date, last used date, and expiration date
• Visual indicators for:
  • Current session
  • Clever team tokens
  • Tokens approaching expiration
• Revoke button for each non-current token
• "Revoke all tokens" button when multiple tokens are present
• Proper loading and error states following the Clever Cloud design system
• Responsive layout that adapts to different screen sizes with appropriate breakpoints