Handle Idle Session Timeout in multiple Tabs #10079

0

AI-Bot created 14 days ago

Support Team ABP Agent

Solution

ABP’s Idle Session Timeout feature already works across multiple tabs of the same browser profile. It uses browser storage and a single activity monitor to keep all tabs in sync: user activity in any tab resets the idle timer, and when the warning/timeout is reached, all tabs react consistently.
To enable and configure it in Angular (v9.1.1):
1. Ensure the Account Module is added on the backend and the Idle Session Timeout setting is enabled.
2. Configure settings (host or tenant) in Settings > Account > Idle Session Timeout:
  - Enable Idle Session Timeout
  - Idle Time (minutes)
  - Show Warning Before (seconds)
3. No extra Angular code is needed for multi-tab handling. The module’s built-in logic listens to user activity events (mouse, keyboard, click, etc.) and coordinates via storage so that all tabs share the same idle state.
If you want to customize behavior:
- You can change thresholds or disable the feature per tenant/host from settings.
- If you need to completely disable the feature for all users, set it off in Settings or override/hide the related setting UI (Angular) as a customization.

Sources

https://abp.io/docs/latest/modules/account/idle-session-timeout
https://github.com/abpframework/abp

This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.

0

sukhdeep.dhillon created 14 days ago

Hi,

The feature does not works for multiple tabs I have tested it. please let me know what's the solution for this.

0

AI-Bot created 14 days ago

Support Team ABP Agent

Solution

Current behavior (ABP v9.1.1, Angular): Idle Session Timeout works per-tab. The built-in Account Idle Session Timeout feature does not synchronize timers across multiple open tabs/windows by default. Each tab runs its own activity watcher and countdown. This is why you observe inconsistent behavior across tabs.
Implement multi‑tab sync (Angular) using storage events:
- Goal: when user activity happens in any tab, reset the idle timer in all tabs; when warning/timeout occurs in one tab, all tabs show the same warning/perform logout.
- Approach: broadcast activity and timer-state via localStorage and subscribe to the storage event in every tab.
Example implementation outline:
1. Create a small cross-tab channel

// src/app/core/idle-sync.service.ts
  import { Injectable, NgZone } from '@angular/core';

  const CHANNEL_KEY = 'abp-idle-sync';
  type IdleSyncMessage =
    | { t: 'activity'; ts: number }
    | { t: 'show-warning'; deadline: number }
    | { t: 'cancel-warning' }
    | { t: 'timeout' };

  @Injectable({ providedIn: 'root' })
  export class IdleSyncService {
    constructor(private zone: NgZone) {
      window.addEventListener('storage', (e) => {
        if (e.key !== CHANNEL_KEY || !e.newValue) return;
        const msg = JSON.parse(e.newValue) as IdleSyncMessage;
        this.zone.run(() => this.onMessage?.(msg));
      });
    }

    onMessage?: (msg: IdleSyncMessage) => void;

    notify(msg: IdleSyncMessage) {
      // write-then-remove to trigger storage event in other tabs
      localStorage.setItem(CHANNEL_KEY, JSON.stringify(msg));
      localStorage.removeItem(CHANNEL_KEY);
    }
  }

Wire it to ABP’s idle feature hooks (Angular):

In your app’s root component (or a dedicated initializer), listen to user activity and dispatch “activity” messages.
Hook into the idle warning display/hide and timeout actions to broadcast “show-warning”, “cancel-warning”, and “timeout”. Also react to incoming messages by invoking the same UI actions locally (so all tabs stay in sync).

Example:

// src/app/app.component.ts
  import { Component, HostListener, OnInit } from '@angular/core';
  import { IdleSyncService } from './core/idle-sync.service';
  import { AccountIdleSessionTimeoutService } from '@abp/ng.account/config'; // service used internally by ABP Account Angular UI

  @Component({ selector: 'app-root', template: '<router-outlet></router-outlet>' })
  export class AppComponent implements OnInit {
    constructor(
      private idleSync: IdleSyncService,
      private idleService: AccountIdleSessionTimeoutService
    ) {}

    ngOnInit() {
      // 1) When local idle feature is about to show warning, broadcast to others
      this.idleService.onShowWarning$.subscribe((deadlineUtcMs) => {
        this.idleSync.notify({ t: 'show-warning', deadline: deadlineUtcMs });
      });

      // 2) When local warning is cancelled (user activity), broadcast
      this.idleService.onCancelWarning$.subscribe(() => {
        this.idleSync.notify({ t: 'cancel-warning' });
      });

      // 3) When local timeout happens (logout), broadcast
      this.idleService.onTimeout$.subscribe(() => {
        this.idleSync.notify({ t: 'timeout' });
      });

      // 4) React to messages from other tabs
      this.idleSync.onMessage = (msg) => {
        switch (msg.t) {
          case 'activity':
            this.idleService.resetTimerFromExternalActivity(); // custom helper; see below
            break;
          case 'show-warning':
            this.idleService.showWarningExternally(msg.deadline);
            break;
          case 'cancel-warning':
            this.idleService.cancelWarningExternally();
            break;
          case 'timeout':
            this.idleService.triggerTimeoutExternally();
            break;
        }
      };
    }

    // Broadcast user activity from this tab
    @HostListener('document:mousemove')
    @HostListener('document:keydown')
    @HostListener('document:click')
    onActivity() {
      this.idleSync.notify({ t: 'activity', ts: Date.now() });
    }
  }

Expose minimal helpers on top of ABP’s idle Angular service:

If the ABP Angular Account idle service you use doesn’t expose such methods, wrap/extend it where you already subscribe to its events (warning start/cancel, timeout). The idea is to:
- Keep one source of truth for the timer per tab (the existing ABP idle service),
- On incoming “activity” message, simply call the same “reset” logic you use when the user moves mouse/presses key,
- On “show-warning/cancel/timeout” messages, call the same internal methods you call locally to show/cancel the warning modal or sign out. If needed, implement a thin facade service that calls to the ABP components or dispatches the same RxJS streams they use.
Notes:
- Use localStorage, not sessionStorage. The browser fires “storage” events only across tabs for localStorage.
- Include a debounce/throttle if you want to reduce the activity message rate.
- If you cannot call internal methods of the ABP idle service, mirror the behavior by:
  - Stopping/starting your local countdown timer when “activity” arrives,
  - Opening/closing the same warning modal component with the same translations and deadline,
  - Calling the existing sign-out flow on “timeout” (e.g., AuthService.logout()).

Sources

Idle Session Timeout (overview and behavior):
- https://abp.io/docs/latest/modules/account/idle-session-timeout
ABP Framework repository (to inspect Account Angular implementation and events if needed):
- https://github.com/abpframework/abp

This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.

0

sukhdeep.dhillon created 14 days ago

this AI generated implementation doesn't work because couldn't find AccountIdleSessionTimeoutService service.

0

maliming created 14 days ago

Support Team Fullstack Developer

hi

What is your UI page?

The feature does not works for multiple tabs I have tested it.

Can you share details? What are steps to reproduce?

Thanks.

0

sukhdeep.dhillon created 14 days ago

I didn't add any code, all I did just enable that from the Setting > Account > Idle Session Timeout

I have shared the screenshot as I was working on the first tab and in the second tab the model window appear. model window shouldn't appear on the second tab as I was working on the first tab.

0

maliming created 14 days ago

Support Team Fullstack Developer

hi

Thanks, I will check and provide a solution soon.

0

maliming created 14 days ago

Support Team Fullstack Developer

hi

The next 9.3.x patch version will fix this problem.

I have refunded your question ticket.

Thanks.

0

sukhdeep.dhillon created 13 days ago

Hi, thanks and when are you planning to release that patch

0

maliming created 13 days ago

Support Team Fullstack Developer

hi

One or two weeks. I can share the patch IdleSessionService service with you.

Please send an email to liming.ma@volosoft.com

Thanks.

0

sukhdeep.dhillon created 11 days ago

Hi,

I have sent you an email.

0

maliming created 11 days ago

Support Team Fullstack Developer

hi

I have sent the source code of IdleSessionService

You can override the default one.

See https://abp.io/support/questions/9138/Angular-can%27t-read-AccessToken-when-encryption-enabled#answer-3a194a53-cba3-2668-4e28-17f08ed7bb17

Thanks.

0

sukhdeep.dhillon created 11 days ago

Thanks, let me try and I will update you.

0

maliming created 11 days ago

Support Team Fullstack Developer

ok, : )

0

sukhdeep.dhillon created 11 days ago

Hi,

I'm getting error the following errors:

0

maliming created 11 days ago

Support Team Fullstack Developer

hi

I will ask our Angular team.

Thanks.

0

sumeyye.kurtulus created 11 days ago

Support Team Angular Expert

Hello, If you are using the latest version of the source code, it is about the Angular version incompatibility. Since we updated the latest ABP version to Angular v20, the DOCUMENT import is changed from @angular/common library to @angular/core library.

0

sukhdeep.dhillon created 11 days ago

Hi, I'm still using angular 19. I fixed the Document to import from @angular/common. how about the other error

0

sumeyye.kurtulus created 11 days ago

Support Team Angular Expert

If you are just extend the service, you can use this import instead:

const IdleSessionModalComponent = (
        await import("@volo/abp.ng.account/admin")
      ).IdleSessionModalComponent;

However, If you want to override the service by importing the source code, it will complain about this import. You can fix this by adding these relative paths to your tsconfig.json. You need to change the path according to your file structure:

"@volo/abp.ng.account": [
        "../modules/Volo.Abp.Account.Pro/angular/projects/account/src/public-api.ts"
      ],
      "@volo/abp.ng.account/admin": [
        "../modules/Volo.Abp.Account.Pro/angular/projects/account/admin/src/public-api.ts"
      ],
      "@volo/abp.ng.account/public": [
        "../modules/Volo.Abp.Account.Pro/angular/projects/account/public/src/public-api.ts"
      ],
      "@volo/abp.ng.account/admin/config": [
        "../modules/Volo.Abp.Account.Pro/angular/projects/account/admin/config/src/public-api.ts"
      ],
      "@volo/abp.ng.account/public/config": [
        "../modules/Volo.Abp.Account.Pro/angular/projects/account/public/config/src/public-api.ts"
      ],
      "@volo/abp.ng.account/public/proxy": [
        "../modules/Volo.Abp.Account.Pro/angular/projects/account/public/proxy/src/public-api.ts"
      ]

0

sukhdeep.dhillon created 8 days ago

Hi,

I will wait for this patch to be released.

Plus, could you please do the following as part of your release. As I have highlight in the image:

add setting to change the SignOut Time
add localization key to the Modal message.

0

maliming created 8 days ago

Support Team Fullstack Developer

hi

add setting to change the SignOut Time

You can change the time on the account -> Idle session timeout page.

add localization key to the Modal message.

The Key of AccountResource are:

"YourSessionIsAboutToExpire": "Your session is about to expire",
"YourSessionIsAboutToExpireInfo": "For security reasons, your connection times out after you've been inactive for a while. Do you want to stay signed in?",
"IdleSignOutNow": "Sign out now",
"IdleStaySignedIn": "Stay signed in",

Thanks.

0

sukhdeep.dhillon created 6 days ago

okay thanks for the localization.

this setting is about when do you want the user to see the model window

I'm asking about when this model window appear, it appear for 1 minute and then it starts counting down. where do we have that setting to change that 1 minute setting ?

0

maliming created 6 days ago

Support Team Fullstack Developer

hi

It is hard-coded in the Angular IdleSessionService service.

const MODAL_COUNTDOWN = 60;
const SECONDS = 1000 * 60;

Thanks.

0

sukhdeep.dhillon created 4 days ago

Hi,

that means only for this setting, I need to create this service on the frontend. but I was thinking to use this feature as it is once you release the new patch.

0

maliming created 4 days ago

Support Team Fullstack Developer

hi

We will try to add a new configuration to set it.

Thanks.

Framework

Tools

Startup Templates

UI Themes

Mobile

Modules

25 Answer(s)

ABP Live Training
Packages

Mastering
ABP Framework

Framework

Tools

Startup Templates

UI Themes

Mobile

Modules

More

More

More

More

Handle Idle Session Timeout in multiple Tabs #10079

25 Answer(s)

ABP Live TrainingPackages

MasteringABP Framework

ABP Live Training
Packages

Mastering
ABP Framework