session-expiration-alert
Version:
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
109 lines (74 loc) • 3.93 kB
Markdown
# Session Expiration Alert
[](https://github.com/changhuixu/session-expiration-alert/actions)
[](https://www.npmjs.com/package/session-expiration-alert)
[](https://github.com/changhuixu/session-expiration-alert/blob/master/LICENSE)
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](https://session-expiration-alert.netlify.com/)
## Usage
In `app.config.ts`
```typescript
export const appConfig: ApplicationConfig = {
providers: [
...// other providers
provideSessionExpirationServices(AppSessionInterruptService),
],
};
```
In `app.html`
```html
<session-expiration-alert />
```
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
<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).