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 o
npm install session-expiration-alertSessionInterruptService service.
app.config.ts
typescript
export const appConfig: ApplicationConfig = {
providers: [
...// other providers
provideSessionExpirationServices(AppSessionInterruptService),
],
};
`
In app.html
`html
`
In app.ts
`typescript
@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.
`typescript
@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
`typescript
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.
`html
`
[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).