feat: manage active user sessions from profile (CW-7169) (#14556)

## Description First PR of user_sessions feature - enforcement, impersonation and mfa will be handled separately. Adds an Active Sessions section under Profile where users can see every device currently logged in and revoke any session they don't recognize. Helps users lock down stale or unrecognized logins on their own without needing support. **Behavior at the limit, by client:** - **Browser:** returns 409 with a picker overlay; user picks a session to revoke or chooses "End all sessions" to clear them. - **Mobile / API client:** silently evicts the oldest session and proceeds with login (no picker UI to render). - **Pre-tracking users** (token rows without `user_sessions`, i.e. anyone already logged in before this ships): silent-evict any untracked token first, so freshly tracked sessions are never killed in favor of legacy ones. Sessions are stored in a new `user_sessions` table keyed on `(user_id, client_id)` with browser, platform, IP, last activity and (when configured) geo. Kept in sync with `user.tokens` via an after_save callback so revoking a token from any path cleans up the row. Fixes https://linear.app/chatwoot/issue/CW-7169 ## Type of change - [x] New feature (non-breaking change which adds functionality) ## How Has This Been Tested? - Added specs. - Manual local testing: browser picker fires at limit; pre-tracking user silent-evicts; mixed tracked/untracked correctly drops the untracked one first; profile page revoke succeeds; current session cannot be revoked from profile. ## Checklist - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my code - [x] I have commented on my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [x] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [x] Any dependent changes have been merged and published in downstream modules
2026-06-12 16:11:07 +05:30
parent e055cead35
commit 92a1fb8ab7
24 changed files with 754 additions and 1 deletions
@@ -106,4 +106,10 @@ export default {
    const urlData = endPoints('resetAccessToken');
    return axios.post(urlData.url);
  },
+  getSessions() {
+    return axios.get('/api/v1/profile/sessions');
+  },
+  revokeSession(id) {
+    return axios.delete(`/api/v1/profile/sessions/${id}`);
+  },
 };
@@ -154,6 +154,10 @@ export const YEAR_IN_REVIEW_EVENTS = Object.freeze({
  SHARE_CLICKED: 'Year in Review: Share clicked',
 });

+export const SESSION_EVENTS = Object.freeze({
+  REVOKED_FROM_PROFILE: 'Revoked an active session',
+});
+
 export const ONBOARDING_EVENTS = Object.freeze({
  ACCOUNT_DETAILS_VISITED: 'Onboarding: Account details visited',
  ACCOUNT_DETAILS_COMPLETED: 'Onboarding: Account details completed',
@@ -86,6 +86,17 @@
        "NOTE": "Manage additional security features for your account.",
        "MFA_BUTTON": "Manage Two-Factor Authentication"
      },
+      "SESSIONS_SECTION": {
+        "TITLE": "Active Sessions",
+        "NOTE": "These are the devices currently logged in to your account.",
+        "CURRENT": "Current session",
+        "REVOKE": "Revoke",
+        "REVOKE_SUCCESS": "Session revoked successfully",
+        "REVOKE_ERROR": "Unable to revoke session. Please try again.",
+        "FETCH_ERROR": "Unable to fetch sessions. Please try again.",
+        "LAST_ACTIVE": "Last active",
+        "UNKNOWN_DEVICE": "Unknown device"
+      },
      "ACCESS_TOKEN": {
        "TITLE": "Access Token",
        "NOTE": "This token can be used if you are building an API based integration",
@@ -0,0 +1,137 @@
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { formatDistanceToNow, parseISO } from 'date-fns';
+import { useAlert } from 'dashboard/composables';
+import authAPI from 'dashboard/api/auth';
+import AnalyticsHelper from 'dashboard/helper/AnalyticsHelper';
+import { SESSION_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const { t } = useI18n();
+const sessions = ref([]);
+const loading = ref(false);
+
+const relativeTime = dateStr => {
+  if (!dateStr) return '';
+  return formatDistanceToNow(parseISO(dateStr), { addSuffix: true });
+};
+
+const isUnknown = val => !val || val === 'Unknown' || val === 'Unknown Browser';
+
+const deviceIcon = session => {
+  const name = (session.device_name || '').toLowerCase();
+  if (
+    name.includes('iphone') ||
+    name.includes('android') ||
+    name.includes('mobile')
+  ) {
+    return 'i-lucide-smartphone';
+  }
+  if (name.includes('ipad') || name.includes('tablet')) {
+    return 'i-lucide-tablet';
+  }
+  return 'i-lucide-monitor';
+};
+
+const sessionLabel = session => {
+  const parts = [];
+  if (!isUnknown(session.browser_name)) {
+    parts.push(
+      session.browser_version
+        ? `${session.browser_name} ${session.browser_version}`
+        : session.browser_name
+    );
+  }
+  if (!isUnknown(session.platform_name)) parts.push(session.platform_name);
+  return (
+    parts.join(' on ') ||
+    t('PROFILE_SETTINGS.FORM.SESSIONS_SECTION.UNKNOWN_DEVICE')
+  );
+};
+
+const locationLabel = session => {
+  const parts = [];
+  if (session.city) parts.push(session.city);
+  if (session.country) parts.push(session.country);
+  return parts.join(', ');
+};
+
+const fetchSessions = async () => {
+  loading.value = true;
+  try {
+    const { data } = await authAPI.getSessions();
+    sessions.value = data;
+  } catch {
+    useAlert(t('PROFILE_SETTINGS.FORM.SESSIONS_SECTION.FETCH_ERROR'));
+  } finally {
+    loading.value = false;
+  }
+};
+
+const revokeSession = async session => {
+  try {
+    await authAPI.revokeSession(session.id);
+    sessions.value = sessions.value.filter(s => s.id !== session.id);
+    AnalyticsHelper.track(SESSION_EVENTS.REVOKED_FROM_PROFILE);
+    useAlert(t('PROFILE_SETTINGS.FORM.SESSIONS_SECTION.REVOKE_SUCCESS'));
+  } catch {
+    useAlert(t('PROFILE_SETTINGS.FORM.SESSIONS_SECTION.REVOKE_ERROR'));
+  }
+};
+
+onMounted(fetchSessions);
+</script>
+
+<template>
+  <div class="flex flex-col gap-3">
+    <div
+      v-for="session in sessions"
+      :key="session.id"
+      class="flex items-center justify-between gap-4 rounded-xl border border-n-slate-4 bg-n-background p-4"
+    >
+      <div class="flex items-start gap-3">
+        <Icon
+          :icon="deviceIcon(session)"
+          class="size-5 mt-0.5 text-n-slate-10 flex-shrink-0"
+        />
+        <div class="flex flex-col gap-1">
+          <div class="flex items-center gap-2">
+            <span class="text-heading-3 text-n-slate-12">
+              {{ sessionLabel(session) }}
+            </span>
+            <span
+              v-if="session.current"
+              class="rounded-full bg-n-teal-3 px-2 py-0.5 text-caption text-n-teal-11"
+            >
+              {{ $t('PROFILE_SETTINGS.FORM.SESSIONS_SECTION.CURRENT') }}
+            </span>
+          </div>
+          <span
+            v-if="locationLabel(session)"
+            class="text-body-b3 text-n-slate-11"
+          >
+            {{ locationLabel(session) }}
+          </span>
+          <span
+            v-if="session.last_activity_at"
+            class="text-body-b3 text-n-slate-10"
+          >
+            {{ $t('PROFILE_SETTINGS.FORM.SESSIONS_SECTION.LAST_ACTIVE') }}
+            {{ relativeTime(session.last_activity_at) }}
+          </span>
+        </div>
+      </div>
+      <Button
+        v-if="!session.current"
+        type="button"
+        faded
+        xs
+        :label="$t('PROFILE_SETTINGS.FORM.SESSIONS_SECTION.REVOKE')"
+        color="ruby"
+        @click="revokeSession(session)"
+      />
+    </div>
+  </div>
+</template>
@@ -20,6 +20,7 @@ import SectionLayout from '../account/components/SectionLayout.vue';
 import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
 import AccessToken from './AccessToken.vue';
 import MfaSettingsCard from './MfaSettingsCard.vue';
+import ActiveSessions from './ActiveSessions.vue';
 import Policy from 'dashboard/components/policy.vue';
 import RadioCard from 'dashboard/components-next/radioCard/RadioCard.vue';
 import {
@@ -42,6 +43,7 @@ export default {
    AudioNotifications,
    AccessToken,
    MfaSettingsCard,
+    ActiveSessions,
    BaseSettingsHeader,
  },
  setup() {
@@ -307,6 +309,13 @@ export default {
    >
      <MfaSettingsCard />
    </SectionLayout>
+    <SectionLayout
+      with-border
+      :title="$t('PROFILE_SETTINGS.FORM.SESSIONS_SECTION.TITLE')"
+      :description="$t('PROFILE_SETTINGS.FORM.SESSIONS_SECTION.NOTE')"
+    >
+      <ActiveSessions />
+    </SectionLayout>
    <Policy :permissions="audioNotificationPermissions">
      <SectionLayout
        with-border