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 user will be logged out.

Dependencies: Angular 5+, Bootstrap 4+, NgBootstrap 1+.

Usage

In app.module.ts

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

In app.component.html

<session-expriation-alert></session-expriation-alert>

In app-session-interupt.service.ts

@Injectable()
export class AppSessionInteruptService extends SessionInteruptService {
  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 AppSessionInteruptService 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-expriation-alert [startTimer]="true" [alertAt]="2*60"></session-expriation-alert>

startTimer indicates if the app needs to work on session expiration check or not.

alertAt indicates when the alert modal dialog should show up. The value means how many seconds left till session becomes expired.