feat: enforce concurrent session limit with login picker (CW-7169) (#14621)

## Description

Cap active sessions at `MAX_USER_SESSIONS` which defaults to existing
value of `25` per user. This ensure existing user login behavior is not
affected for self-hosted installations. Browser users at the cap see a
session picker (409 response) to choose which session to end.
Non-browser clients and partially-tracked users get silent
oldest-session eviction.

Depends on #14556.

## Type of change

- [x] New feature (non-breaking change which adds functionality)

## How Has This Been Tested?

Specs cover: under limit, at limit (browser picker, non-browser
eviction), partial tracking fallback, revoke single/all sessions during
login, session row creation on successful login.

---------

Co-authored-by: Sony Mathew <sony@chatwoot.com>

app/javascript/dashboard/components/auth/SessionLimitOverlay.vue

@@ -0,0 +1,141 @@
+<script setup>
+import { ref, computed, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { format, parseISO } from 'date-fns';
+
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
+const props = defineProps({
+  sessions: {
+    type: Array,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['revoke', 'revokeAll', 'cancel']);
+
+const { t } = useI18n();
+const revokingId = ref(null);
+const revokingAll = ref(false);
+
+const sortedSessions = computed(() =>
+  [...props.sessions].sort(
+    (a, b) => new Date(b.created_at) - new Date(a.created_at)
+  )
+);
+
+const formatDate = dateStr => {
+  if (!dateStr) return '';
+  return format(parseISO(dateStr), 'MMMM d, yyyy');
+};
+
+const formatTime = dateStr => {
+  if (!dateStr) return '';
+  return format(parseISO(dateStr), 'hh:mma');
+};
+
+const isUnknown = val => !val || val === 'Unknown' || val === 'Unknown Browser';
+
+const sessionLabel = session => {
+  const parts = [];
+  if (!isUnknown(session.browser_name)) parts.push(session.browser_name);
+  if (!isUnknown(session.platform_name)) parts.push(session.platform_name);
+  return parts.join(' on ') || t('SESSION_LIMIT.UNKNOWN_DEVICE');
+};
+
+watch(
+  () => props.sessions,
+  () => {
+    revokingId.value = null;
+    revokingAll.value = false;
+  }
+);
+
+const handleRevoke = session => {
+  revokingId.value = session.id;
+  emit('revoke', session.id);
+};
+
+const handleRevokeAll = () => {
+  revokingAll.value = true;
+  emit('revokeAll');
+};
+</script>
+
+<template>
+  <div class="w-full max-w-lg mx-auto">
+    <div
+      class="bg-white shadow dark:bg-n-solid-2 p-11 sm:shadow-lg sm:rounded-lg"
+    >
+      <!-- Header -->
+      <div class="flex items-start justify-between gap-4 mb-6">
+        <div>
+          <h2 class="text-2xl font-semibold text-n-slate-12">
+            {{ $t('SESSION_LIMIT.TITLE') }}
+          </h2>
+          <p class="text-sm text-n-slate-11 mt-2">
+            {{ $t('SESSION_LIMIT.DESCRIPTION') }}
+          </p>
+        </div>
+        <NextButton
+          type="button"
+          faded
+          sm
+          class="flex-shrink-0 whitespace-nowrap"
+          :label="$t('SESSION_LIMIT.END_ALL')"
+          :is-loading="revokingAll"
+          :disabled="revokingId !== null"
+          @click="handleRevokeAll"
+        />
+      </div>
+
+      <!-- Session List -->
+      <div class="flex flex-col gap-3 max-h-80 overflow-y-auto">
+        <div
+          v-for="session in sortedSessions"
+          :key="session.id"
+          class="flex items-center justify-between gap-4 rounded-xl border border-n-slate-4 bg-n-background px-4 py-3"
+        >
+          <div class="flex items-center gap-3 min-w-0">
+            <Icon
+              icon="i-lucide-monitor"
+              class="size-4 text-n-slate-10 flex-shrink-0"
+            />
+            <div class="flex flex-col gap-0.5 min-w-0">
+              <span class="text-sm font-medium text-n-slate-12">
+                {{ sessionLabel(session) }}
+              </span>
+              <span class="text-xs text-n-slate-10">
+                {{
+                  `${$t('SESSION_LIMIT.STARTED')} ${formatDate(session.created_at)}, ${formatTime(session.created_at)}`
+                }}
+              </span>
+            </div>
+          </div>
+          <button
+            type="button"
+            class="text-sm font-medium text-n-slate-11 hover:text-n-slate-12 flex-shrink-0 disabled:opacity-50"
+            :disabled="revokingId !== null || revokingAll"
+            @click="handleRevoke(session)"
+          >
+            {{ $t('SESSION_LIMIT.END') }}
+          </button>
+        </div>
+      </div>
+
+      <!-- Cancel -->
+      <div class="text-center pt-4">
+        <NextButton
+          sm
+          slate
+          link
+          type="button"
+          class="w-full hover:!no-underline"
+          :label="$t('SESSION_LIMIT.CANCEL')"
+          @click="() => emit('cancel')"
+        />
+      </div>
+    </div>
+  </div>
+</template>

app/javascript/dashboard/helper/AnalyticsHelper/events.js

@@ -155,6 +155,7 @@ export const YEAR_IN_REVIEW_EVENTS = Object.freeze({
 });
 
 export const SESSION_EVENTS = Object.freeze({
+  LIMIT_HIT: 'Session limit reached at login',
   REVOKED_FROM_PROFILE: 'Revoked an active session',
 });
 

app/javascript/dashboard/i18n/locale/en/index.js

@@ -40,6 +40,7 @@ import whatsappTemplates from './whatsappTemplates.json';
 import contentTemplates from './contentTemplates.json';
 import mfa from './mfa.json';
 import onboarding from './onboarding.json';
+import sessionLimit from './sessionLimit.json';
 import yearInReview from './yearInReview.json';
 
 export default {
@@ -85,5 +86,6 @@ export default {
   ...contentTemplates,
   ...mfa,
   ...onboarding,
+  ...sessionLimit,
   ...yearInReview,
 };

app/javascript/dashboard/i18n/locale/en/sessionLimit.json

@@ -0,0 +1,12 @@
+{
+  "SESSION_LIMIT": {
+    "TITLE": "Active session limit reached",
+    "DESCRIPTION": "You have reached your limit of active sessions. Please end a session before logging in.",
+    "END": "End",
+    "END_ALL": "End all sessions",
+    "LOG_IN": "Log in",
+    "CANCEL": "Back to login",
+    "UNKNOWN_DEVICE": "Unknown device",
+    "STARTED": "Started"
+  }
+}

app/javascript/v3/api/auth.js

@@ -43,6 +43,15 @@ export const login = async ({
         mfaToken: error.response.data.mfa_token,
       };
     }
+    if (
+      error.response?.status === 409 &&
+      error.response?.data?.sessions_limit_reached
+    ) {
+      return {
+        sessionsLimitReached: true,
+        sessions: error.response.data.sessions,
+      };
+    }
     const loginError = new Error(parseAPIErrorResponse(error));
     loginError.errorCode = error.response?.data?.error_code;
     throw loginError;

app/javascript/v3/views/login/Index.vue

@@ -8,6 +8,8 @@ import { useVuelidate } from '@vuelidate/core';
 import { SESSION_STORAGE_KEYS } from 'dashboard/constants/sessionStorage';
 import SessionStorage from 'shared/helpers/sessionStorage';
 import { useBranding } from 'shared/composables/useBranding';
+import AnalyticsHelper from 'dashboard/helper/AnalyticsHelper';
+import { SESSION_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
 
 // components
 import SimpleDivider from '../../components/Divider/SimpleDivider.vue';
@@ -17,6 +19,7 @@ import Spinner from 'shared/components/Spinner.vue';
 import Icon from 'dashboard/components-next/icon/Icon.vue';
 import NextButton from 'dashboard/components-next/button/Button.vue';
 import MfaVerification from 'dashboard/components/auth/MfaVerification.vue';
+import SessionLimitOverlay from 'dashboard/components/auth/SessionLimitOverlay.vue';
 
 const ERROR_MESSAGES = {
   'no-account-found': 'LOGIN.OAUTH.NO_ACCOUNT_FOUND',
@@ -36,6 +39,7 @@ export default {
     NextButton,
     SimpleDivider,
     MfaVerification,
+    SessionLimitOverlay,
     Icon,
   },
   props: {
@@ -68,6 +72,8 @@ export default {
       error: '',
       mfaRequired: false,
       mfaToken: null,
+      sessionsLimitReached: false,
+      limitedSessions: [],
     };
   },
   validations() {
@@ -182,6 +188,15 @@ export default {
             return;
           }
 
+          // Check if sessions limit reached
+          if (result?.sessionsLimitReached) {
+            this.loginApi.showLoading = false;
+            this.sessionsLimitReached = true;
+            this.limitedSessions = result.sessions;
+            AnalyticsHelper.track(SESSION_EVENTS.LIMIT_HIT);
+            return;
+          }
+
           this.handleImpersonation();
           this.showAlertMessage(this.$t('LOGIN.API.SUCCESS_MESSAGE'));
         })
@@ -224,6 +239,51 @@ export default {
       this.mfaToken = null;
       this.credentials.password = '';
     },
+    retryLoginWithParams(extraParams) {
+      const credentials = {
+        email: this.email
+          ? decodeURIComponent(this.email)
+          : this.credentials.email,
+        password: this.credentials.password,
+        sso_auth_token: this.ssoAuthToken,
+        ssoAccountId: this.ssoAccountId,
+        ssoConversationId: this.ssoConversationId,
+        ...extraParams,
+      };
+
+      this.sessionsLimitReached = false;
+      this.limitedSessions = [];
+      this.loginApi.showLoading = true;
+      login(credentials)
+        .then(result => {
+          if (result?.sessionsLimitReached) {
+            this.loginApi.showLoading = false;
+            this.sessionsLimitReached = true;
+            this.limitedSessions = result.sessions;
+            AnalyticsHelper.track(SESSION_EVENTS.LIMIT_HIT);
+            return;
+          }
+          this.handleImpersonation();
+          this.showAlertMessage(this.$t('LOGIN.API.SUCCESS_MESSAGE'));
+        })
+        .catch(response => {
+          this.loginApi.hasErrored = true;
+          this.showAlertMessage(
+            response?.message || this.$t('LOGIN.API.UNAUTH')
+          );
+        });
+    },
+    handleSessionRevoke(sessionId) {
+      this.retryLoginWithParams({ revoke_session_id: sessionId });
+    },
+    handleSessionRevokeAll() {
+      this.retryLoginWithParams({ revoke_all_sessions: true });
+    },
+    handleSessionLimitCancel() {
+      this.sessionsLimitReached = false;
+      this.limitedSessions = [];
+      this.credentials.password = '';
+    },
   },
 };
 </script>
@@ -255,8 +315,18 @@ export default {
       </p>
     </section>
 
+    <!-- Session Limit Section -->
+    <section v-if="sessionsLimitReached" class="mt-11">
+      <SessionLimitOverlay
+        :sessions="limitedSessions"
+        @revoke="handleSessionRevoke"
+        @revoke-all="handleSessionRevokeAll"
+        @cancel="handleSessionLimitCancel"
+      />
+    </section>
+
     <!-- MFA Verification Section -->
-    <section v-if="mfaRequired" class="mt-11">
+    <section v-else-if="mfaRequired" class="mt-11">
       <MfaVerification
         :mfa-token="mfaToken"
         @verified="handleMfaVerified"