Actions Status

Oidc Idle Time Implementation using Okta and Angular

This project is a sample implementation of OIDC Idle Time handling described from here in Angular project.

Github Page (hosted)

Project setup

  1. OP (OpenID Provider) / IdP = OKTA
  2. RP (Relying Party) = dummy.restapiexample.com
  3. IdP session extention API Session Me

Project Walkthrough

  1. Login using sample@example.com | Password123
  2. Open and observe browser developer console
  3. IdP session extended for 15 minutes indicates OP/IdP Session TTL has been extended to 15 minutes more
  4. Access token renewed (15 minutes) indicates Access Token for RP has been renewed (also indicating IdP session is still active)
  5. Simulate the "user active" activity using RP API call (Reload button), Refers to the blog for the handling details idle handling

Okta IdP Setting

Register your okta developer account (https://developer.okta.com/signup)

Application Setting

okta application setup

IdP SSO TTL Setting

IdP SSO setup

RP Access Token Expiration Setup

IdP SSO setup

workbox integration link

npm bundle way and workbox-config configuration way

Reference

  1. in package.json, generate service worker metadata "build-sw-config": "workbox generateSW", should execute after build
  2. workbox will look for the workbox-config and generate the precached assets
  3. generate a sw.js (specify from config) and register at window service worker (main.ts)
  4. to run npm run build && npm run build-sw-config && npm run server

Achieve custom service worker js

Reference

  1. achieve precahce using inject manifest "build-sw-script": "workbox injectManifest", should execute after build
  2. support both CDN and local link
  3. of course the best option is still be local mode
  4. to run npm run build && npm run build-sw-script && npm run server