Session Expiration Alert

An Angular module to time session expiration. When user session idle time reaches a threshold, then pop up a modal dialog to let user choose to continue session or log out the system. When user session is expired, timer will stop and an alert dialog will ask for actions. A http interceptor is registered, so that session timer will restart at every http request.

v21.x Dependencies: Angular 21+. Standalone component.

v19.x Dependencies: Angular 19+.

v13.x Dependencies: Angular 13+.

v12.x Dependencies: Angular 12+, Bootstrap 4.5+ (css), NgBootstrap 10+.

v11.1.2 When user session is expired, timer will stop and an alert dialog will ask for actions.

v11.0.0 Breaking Change: Corrected the name for the SessionInterruptService service.

v11.x Dependencies: Angular 10+, Bootstrap 4.5+ (css), NgBootstrap 7+.

v10.x Dependencies: Angular 10+, Bootstrap 4.5+ (css), NgBootstrap 7+.

v9.x Dependencies: Angular 9+, Bootstrap 4+ (css), NgBootstrap 6+.

v6.x Dependencies: Angular 6+, Bootstrap 4+ (css), NgBootstrap 3+.

Demo

Usage

In app.config.ts

export const appConfig: ApplicationConfig = {
  providers: [
    ...// other providers
    provideSessionExpirationServices(AppSessionInterruptService),
  ],
};

In app.html

<session-expiration-alert />

In app.ts

@Component({
  selector: 'app-root',
  imports: [SessionExpirationAlert], // import the standalone component
  templateUrl: './app.html',
  styleUrl: './app.css',
})

In app-session-interrupt.service.ts, customize your interrupt service using your application's auth services or backend API calls.

@Injectable()
export class AppSessionInterruptService extends SessionInterruptService {
  constructor(private readonly httpClient: HttpClient) {
    super();
  }
  continueSession() {
    console.log(`I issue an API request to server.`);
  }
  stopSession() {
    console.log(`I logout.`);
  }
}

Then the SessionTimerService will start to count down at each second.

• To provide actions in the alert modal dialog, you want to provide a AppSessionInterruptService class, which will be able to continue session via refreshing cookie, or stop session via logging out.

• To start/stop/reset timer, inject SessionTimerService into your component or service, then call startTimer(), stopTimer(), resetTimer() as needed.

• To get the remain time (in seconds), you can subscribe to remainSeconds$ in SessionTimerService.

Configuration

export const appConfig: ApplicationConfig = {
  providers: [
    provideSessionExpirationServices(AppSessionInterruptService, {
      totalMinutes: 0.5,
    }),
  ],
};

The appConfig accepts a configuration with interface of SessionExpirationConfig, which is an optional input and has a default value of total minutes = 20 min.

<session-expiration-alert [startTimer]="true" [alertAt]="2*60" />

[optional] startTimer indicates if the app needs to work on session expiration check or not. Default: true.

[optional] alertAt indicates when the alert modal dialog should show up. The value means how many seconds left till session becomes expired. Default: 60 (seconds).