session-expiration-alert

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.

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.module.ts

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpClientModule,
    SessionExpirationAlertModule.forRoot(),
    // *** your other import modules
  ],
  providers: [
    {
      provide: SessionInterruptService,
      useClass: AppSessionInterruptService,
    },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

In app.component.html

<session-expiration-alert></session-expiration-alert>

In app-session-interrupt.service.ts

@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

 imports: [
   // ***
    SessionExpirationAlertModule.forRoot({totalMinutes: 0.5}),
   //***
  ],

The SessionExpirationAlertModule 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"
></session-expiration-alert>

[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).