{"id":23250744,"url":"https://github.com/changhuixu/session-expiration-alert","last_synced_at":"2025-08-20T09:30:53.701Z","repository":{"id":31627009,"uuid":"128468169","full_name":"changhuixu/session-expiration-alert","owner":"changhuixu","description":"Angular module for session expiration alert","archived":false,"fork":false,"pushed_at":"2024-11-03T02:30:47.000Z","size":1583,"stargazers_count":18,"open_issues_count":7,"forks_count":9,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-12-03T04:47:39.259Z","etag":null,"topics":["alert","angular","angular10","angular6","angular9","session","session-expiration","session-handler","session-management","session-manager","timer"],"latest_commit_sha":null,"homepage":"https://changhuixu.github.io/session-expiration-alert/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/changhuixu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-04-06T20:38:45.000Z","updated_at":"2024-11-03T02:30:51.000Z","dependencies_parsed_at":"2024-11-03T03:29:23.454Z","dependency_job_id":null,"html_url":"https://github.com/changhuixu/session-expiration-alert","commit_stats":{"total_commits":27,"total_committers":1,"mean_commits":27.0,"dds":0.0,"last_synced_commit":"ccdd5f2a76f67cedcbe627d28cf22816144ee8cd"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/changhuixu%2Fsession-expiration-alert","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/changhuixu%2Fsession-expiration-alert/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/changhuixu%2Fsession-expiration-alert/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/changhuixu%2Fsession-expiration-alert/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/changhuixu","download_url":"https://codeload.github.com/changhuixu/session-expiration-alert/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230408177,"owners_count":18220975,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["alert","angular","angular10","angular6","angular9","session","session-expiration","session-handler","session-management","session-manager","timer"],"created_at":"2024-12-19T09:14:54.085Z","updated_at":"2025-08-20T09:30:53.694Z","avatar_url":"https://github.com/changhuixu.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Session Expiration Alert\n\n[![Build Status](https://github.com/changhuixu/session-expiration-alert/actions/workflows/main.yml/badge.svg)](https://github.com/changhuixu/session-expiration-alert/actions)\n\n[![npm](https://img.shields.io/npm/v/session-expiration-alert.svg?style=flat-square)](https://www.npmjs.com/package/session-expiration-alert)\n\n[![npm License](https://img.shields.io/npm/l/session-expiration-alert.svg?style=flat-square)](https://github.com/changhuixu/session-expiration-alert/blob/master/LICENSE)\n\nAn 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.\n\n**v19.x** Dependencies: Angular 19+.\n\n**v13.x** Dependencies: Angular 13+.\n\n**v12.x** Dependencies: Angular 12+, Bootstrap 4.5+ (css), NgBootstrap 10+.\n\n**v11.1.2** When user session is expired, timer will stop and an alert dialog will ask for actions.\n\n**v11.0.0** Breaking Change: Corrected the name for the `SessionInterruptService` service.\n\n**v11.x** Dependencies: Angular 10+, Bootstrap 4.5+ (css), NgBootstrap 7+.\n\n**v10.x** Dependencies: Angular 10+, Bootstrap 4.5+ (css), NgBootstrap 7+.\n\n**v9.x** Dependencies: Angular 9+, Bootstrap 4+ (css), NgBootstrap 6+.\n\n**v6.x** Dependencies: Angular 6+, Bootstrap 4+ (css), NgBootstrap 3+.\n\n## [Demo](https://session-expiration-alert.netlify.com/)\n\n## Usage\n\nIn `app.module.ts`\n\n```typescript\n@NgModule({\n  declarations: [AppComponent],\n  imports: [\n    BrowserModule,\n    HttpClientModule,\n    SessionExpirationAlertModule.forRoot(),\n    // *** your other import modules\n  ],\n  providers: [\n    {\n      provide: SessionInterruptService,\n      useClass: AppSessionInterruptService,\n    },\n  ],\n  bootstrap: [AppComponent],\n})\nexport class AppModule {}\n```\n\nIn `app.component.html`\n\n```html\n\u003csession-expiration-alert\u003e\u003c/session-expiration-alert\u003e\n```\n\nIn `app-session-interrupt.service.ts`\n\n```typescript\n@Injectable()\nexport class AppSessionInterruptService extends SessionInterruptService {\n  constructor(private readonly httpClient: HttpClient) {\n    super();\n  }\n  continueSession() {\n    console.log(`I issue an API request to server.`);\n  }\n  stopSession() {\n    console.log(`I logout.`);\n  }\n}\n```\n\nThen the `SessionTimerService` will start to count down at each second.\n\n- 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.\n\n- To start/stop/reset timer, inject `SessionTimerService` into your component or service, then call `startTimer()`, `stopTimer()`, `resetTimer()` as needed.\n\n- To get the remain time (in seconds), you can subscribe to `remainSeconds$` in `SessionTimerService`.\n\n## Configuration\n\n```typescript\n imports: [\n   // ***\n    SessionExpirationAlertModule.forRoot({totalMinutes: 0.5}),\n   //***\n  ],\n```\n\nThe `SessionExpirationAlertModule` accepts a configuration with interface of `SessionExpirationConfig`, which is an optional input and has a default value of total minutes = 20 min.\n\n```html\n\u003csession-expiration-alert\n  [startTimer]=\"true\"\n  [alertAt]=\"2*60\"\n\u003e\u003c/session-expiration-alert\u003e\n```\n\n[optional] `startTimer` indicates if the app needs to work on session expiration check or not. Default: true.\n\n[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).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchanghuixu%2Fsession-expiration-alert","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchanghuixu%2Fsession-expiration-alert","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchanghuixu%2Fsession-expiration-alert/lists"}