feat(auth): switching back to angular-oauth2-oidc

switching back to angular-oauth2-oidc as it now support code flow

PLAYBOOK.md

@@ -29,13 +29,13 @@ Do-it-yourself step-by-step instructions to create this project structure from s
 | Software             | Version | Optional |
 | -------------------- | ------- | -------- |
 | Node                 | v12.5.0 |          |
-| Yarn                 | v1.17.0 |          |
+| Yarn                 | v1.17.3 |          |
 | Lerna                | v3.14.1 |          |
-| Angular CLI          | v8.1.0  |          |
-| @nrwl/workspace      | v8.2.0  |          |
+| Angular CLI          | v8.2.0  |          |
+| @nrwl/workspace      | v8.3.0  |          |
 | @nestjs/cli          | v6.5.0  |          |
 | semantic-release-cli | v5.1.1  |          |
-| commitizen           | v3.1.1  |          |
+| commitizen           | v4.0.3  |          |
 
 ### Install Prerequisites
 
@@ -89,7 +89,7 @@ yarn global remove commitizen
 
 yarn global add lerna
 yarn global add @angular/cli@next
-yarn global add @nrwl/workspace
+yarn global add @nrwl/workspace@next
 yarn global add @nestjs/cli
 yarn global add semantic-release-cli
 yarn global add commitizen
@@ -180,6 +180,9 @@ cd ngx-starter-kit
 # Add PWA
 ng add @angular/pwa@next --project webapp
 
+# Add architect for gh-pages deployment
+ng add ngx-gh
+
 # Add Material
 # Ref: https://material.angular.io/guide/schematics
 # Ref: https://material.angular.io/guide/getting-started
@@ -194,7 +197,7 @@ yarn add @angular/flex-layout
 yarn add angular-in-memory-web-api
 # Add oauth2-oidc
 ~yarn add angular-oauth2-oidc~
-yarn add @xmlking/angular-oauth2-oidc-all
+yarn add angular-oauth2-oidc
 
 # Add NGXS
 ng add @ngxs/schematics # makesure "defaultCollection" is set back to "@nrwl/schematics" in angular.json
@@ -679,15 +682,26 @@ npx compodoc -s -d docs
 
 ### Deploy
 
-> deploy demo to gh-pages
+#### deploy this app with mock config to gh-pages
+
+This command will
+
+1. build with mock config
+2. compress
+3. and push build to gh-pages
+
+```bash
+deploy:mock
+```
+
+#### CI/CD Pipeline
 
 ```bash
-# build for gh-pages
-yarn build:mock
-# maybe compress
-gzip -k -r dist/apps/webapp/*.js
-# push gh-pages
-npx ngh --dir dist/apps/webapp
+# deploy only `webapp` app
+ng run webapp:deploy
+# ng run webapp:deploy --base-href /ngx-starter-kit/
+# deploy all affected apps
+nx affected --target deploy
 ```
 
 ### Release

libs/auth/src/lib/admin.guard.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
 import { Observable } from 'rxjs';
-import { OAuthService } from '@xmlking/angular-oauth2-oidc-all';
+import { OAuthService } from 'angular-oauth2-oidc';
 import { MatSnackBar } from '@angular/material/snack-bar';
 
 @Injectable({

libs/auth/src/lib/auth.guard.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
-import { OAuthService } from '@xmlking/angular-oauth2-oidc-all';
+import { OAuthService } from 'angular-oauth2-oidc';
 import { Store } from '@ngxs/store';
 import { Login } from './auth.actions';
 // import { waitUntil } from '@ngx-starter-kit/utils';

libs/auth/src/lib/auth.module.ts

@@ -2,7 +2,13 @@ import { APP_INITIALIZER, ModuleWithProviders, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
 import { NgxsModule, Store } from '@ngxs/store';
-import { JwksValidationHandler, OAuthModule, OAuthService, ValidationHandler } from '@xmlking/angular-oauth2-oidc-all';
+import {
+  JwksValidationHandler,
+  NullValidationHandler,
+  OAuthModule,
+  OAuthService,
+  ValidationHandler,
+} from 'angular-oauth2-oidc';
 
 import { environment } from '@env/environment';
 import { ReactiveFormsModule } from '@angular/forms';
@@ -57,7 +63,14 @@ const matModules = [
   ],
   declarations: [LoginComponent],
   entryComponents: [LoginComponent],
-  providers: [ROPCService, AuthService, AuthGuard, { provide: ValidationHandler, useClass: JwksValidationHandler }],
+  providers: [
+    ROPCService,
+    AuthService,
+    AuthGuard,
+    { provide: ValidationHandler, useClass: JwksValidationHandler },
+    // NOTE: for CodeFlow use NullValidationHandler
+    // { provide: ValidationHandler, useClass: NullValidationHandler },
+  ],
 })
 export class AuthModule {
   static forRoot(): ModuleWithProviders {

libs/auth/src/lib/auth.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { OAuthService } from '@xmlking/angular-oauth2-oidc-all';
+import { OAuthService, OAuthEvent } from 'angular-oauth2-oidc';
 import { HttpClient, HttpErrorResponse } from '@angular/common/http';
 import { Observable, Subscription, throwError } from 'rxjs';
 import { catchError, filter, mergeMap, tap } from 'rxjs/operators';
@@ -10,7 +10,6 @@ import { LoginComponent } from './components/login/login.component';
 import { MatDialog } from '@angular/material/dialog';
 import { Router } from '@angular/router';
 import { fromPromise } from 'rxjs/internal/observable/fromPromise';
-import { OAuthEvent } from '@xmlking/angular-oauth2-oidc-all/events';
 
 @Injectable()
 export class AuthService {

libs/auth/src/lib/auth.state.ts

@@ -13,7 +13,7 @@ import {
 import { AuthService } from './auth.service';
 import { Router } from '@angular/router';
 import { authConfigCodeFlow, authConfigHybridFlow, authConfigImplicit, authConfigPassword } from './oauth.config';
-import { OAuthService } from '@xmlking/angular-oauth2-oidc-all';
+import { OAuthService } from 'angular-oauth2-oidc';
 import { map } from 'rxjs/operators';
 
 export interface AuthStateModel {

libs/auth/src/lib/components/login/login.component.ts

@@ -3,7 +3,7 @@ import { HttpErrorResponse } from '@angular/common/http';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 import { Store } from '@ngxs/store';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { OAuthService } from '@xmlking/angular-oauth2-oidc-all';
+import { OAuthService } from 'angular-oauth2-oidc';
 
 import { ROPCService } from '../../ropc.service';
 import { ChangeAuthMode, AuthMode } from '../../auth.actions';
@@ -53,9 +53,8 @@ export class LoginComponent {
   }
 
   initSSO() {
-    this.store.dispatch(new ChangeAuthMode(AuthMode.ImplicitFLow)).subscribe(() => {
-      this.oauthService.initImplicitFlow();
-      // this.oauthService.initAuthorizationCodeFlow();
+    this.store.dispatch(new ChangeAuthMode(AuthMode.ImplicitFLow /* HINT: AuthMode.CodeFLow*/)).subscribe(() => {
+      this.oauthService.initLoginFlow();
       console.log('initSSO');
     });
   }

libs/auth/src/lib/oauth.config.ts

@@ -1,4 +1,4 @@
-import { AuthConfig } from '@xmlking/angular-oauth2-oidc-all';
+import { AuthConfig } from 'angular-oauth2-oidc';
 import { environment } from '@env/environment';
 
 const authConfig: AuthConfig = {
@@ -51,8 +51,22 @@ export const authConfigCodeFlow: AuthConfig = {
   timeoutFactor: environment.production ? 0.75 : 0.1,
   disableAtHashCheck: true,
 
-  // PingFederate Specific
+  // set the scope for the permissions the client should request
+  // The first four are defined by OIDC.
+  // Important: Request offline_access to get a refresh token
+  // The ngxapi-audience scope is a usecase specific one
+  scope: 'openid profile email ngxapi-audience',
+  // TODO: scope: 'openid profile email   offline_access ngxapi-audience',
+
+  responseType: 'code',
+  // PingFederate Specific:
+
+  // Just needed if your auth server demands a secret. In general, this
+  // is a sign that the auth server is not configured with SPAs in mind
+  // and it might not enforce further best practices vital for security
+  // such applications.
   // dummyClientSecret: '.....',
+
   // customQueryParams: { acr_values: '....' },
 };
 

libs/auth/src/lib/oauth.init.ts

@@ -1,11 +1,11 @@
-import { OAuthService } from '@xmlking/angular-oauth2-oidc-all';
+import { OAuthService } from 'angular-oauth2-oidc';
 import { Store } from '@ngxs/store';
 import { LoginSuccess } from './auth.actions';
 import { AuthorizationErrorResponse } from './oauth.errors';
 import { authConfigImplicit, authConfigCodeFlow } from './oauth.config';
 
 export function initializeAuth(oauthService: OAuthService, store: Store) {
-  // use appropriate authConfig, matching to initSSO() in login.component.ts
+  // HINT: use appropriate authConfig, matching to initSSO() in login.component.ts
   // oauthService.configure(authConfigCodeFlow);
   oauthService.configure(authConfigImplicit);
   oauthService.setStorage(sessionStorage);

libs/auth/src/lib/ropc.service.ts

@@ -1,5 +1,5 @@
 import { Inject, Injectable } from '@angular/core';
-import { OAuthService } from '@xmlking/angular-oauth2-oidc-all';
+import { OAuthService } from 'angular-oauth2-oidc';
 import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
 import { environment } from '@env/environment';
 

libs/core/src/lib/interceptors/jwt.interceptor.ts

@@ -3,7 +3,7 @@ import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/c
 import { Observable } from 'rxjs';
 import { Store } from '@ngxs/store';
 import { environment } from '@env/environment';
-import { OAuthService } from '@xmlking/angular-oauth2-oidc-all';
+import { OAuthService } from 'angular-oauth2-oidc';
 
 const allowedUrls = [environment.API_BASE_URL, environment.DOCS_BASE_URL];
 

libs/dashboard/src/lib/containers/dashboard-layout/dashboard-layout.component.ts

@@ -9,7 +9,7 @@ import { RouterState } from '@ngxs/router-plugin';
 import { filter, map } from 'rxjs/operators';
 import { RouterStateData, WINDOW } from '@ngx-starter-kit/core';
 import { untilDestroy } from '@ngx-starter-kit/ngx-utils';
-import { OAuthService } from '@xmlking/angular-oauth2-oidc-all';
+import { OAuthService } from 'angular-oauth2-oidc';
 
 // import { AuthService } from '@ngx-starter-kit/oidc';
 

package.json

@@ -132,11 +132,11 @@
     "@ngxs/router-plugin": "^3.4.3",
     "@ngxs/storage-plugin": "^3.4.3",
     "@ngxs/store": "^3.4.3",
-    "@xmlking/angular-oauth2-oidc-all": "^6.0.1",
     "@xmlking/api-ai-javascript": "^2.0.0-beta.22",
-    "@xmlking/ngx-knob": "^0.2.0",
+    "@xmlking/ngx-knob": "^0.3.0",
     "@xmlking/ngx-quicklink": "^0.0.11",
     "angular-in-memory-web-api": "^0.8.0",
+    "angular-oauth2-oidc": "8.0.1",
     "chart.js": "^2.8.0",
     "chart.piecelabel.js": "^0.15.0",
     "core-js": "^2.6.7",

stories/awesome.md

@@ -18,7 +18,7 @@ A curated list of awesome Angular resources
 
 - Differential Loading
 
-  Find what browsers are supported? `cd apps/webapp`,  `npx browserslist`
+  Find what browsers are supported? `cd apps/webapp`, `npx browserslist`
 
 - How do I design Landing page?
 
@@ -126,16 +126,15 @@ A curated list of awesome Angular resources
   > `{ enableTracing: true }`
   > Read [debugging router](https://dzone.com/articles/note-to-self-debugging-angular-4-routing)
 
+- How to open Angular Material Dialog via route link?
 
-* How to open Angular Material Dialog via route link?
-  > useful for sharing bookmarkable links. e.g., `/account/edit` `/account/add`
-  > [Routing to Angular Material Dialogs](https://medium.com/ngconf/routing-to-angular-material-dialogs-c3fb7231c177)
- 
-* How to use new `providedIn` Dependency Injection?
+  > useful for sharing bookmarkable links. e.g., `/account/edit` `/account/add` > [Routing to Angular Material Dialogs](https://medium.com/ngconf/routing-to-angular-material-dialogs-c3fb7231c177)
+
+- How to use new `providedIn` Dependency Injection?
 
   > Read Total Guide To Angular 6+ Dependency Injection — : [providedIn vs providers: []](https://medium.com/@tomastrajan/total-guide-to-angular-6-dependency-injection-providedin-vs-providers-85b7a347b59f)
 
-* How to manage state in the front-end?
+- How to manage state in the front-end?
 
 > use [NGXS](https://amcdnl.gitbooks.io/ngxs/)
 > Read [Immer with NGXS](https://blog.angularindepth.com/simple-state-mutations-in-ngxs-with-immer-48b908874a5e)
@@ -199,6 +198,10 @@ Total Guide To Dynamic Angular Animations That Can Be Customized At Runtime
   > [Rendering on the Web](https://developers.google.com/web/updates/2019/02/rendering-on-the-web)
   > Refer [here](https://blog.angularindepth.com/creating-an-angular-universal-app-with-the-angular-cli-5ef26c9fd9a5) <br/> > [nest-next](https://github.com/kyle-mccarthy/nest-next) <br/> > [nuxt/vue.js + nest](https://github.com/chanlito/nuxt-ts-starter) <br/> > [nest + angular](https://github.com/kamilmysliwiec/universal-nest)<br/>
 
+- dynamic form group builder with class-validator
+
+  > todo [ngx-dynamic-form-builder](https://github.com/EndyKaufman/ngx-dynamic-form-builde)
+
 - How to configure nginx?
 
   > Use [blog](https://medium.freecodecamp.org/an-introduction-to-nginx-for-developers-62179b6a458f)

yarn.lock

@@ -2816,15 +2816,6 @@
     "@webassemblyjs/wast-parser" "1.8.5"
     "@xtuc/long" "4.2.2"
 
-"@xmlking/angular-oauth2-oidc-all@^6.0.1":
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/@xmlking/angular-oauth2-oidc-all/-/angular-oauth2-oidc-all-6.0.1.tgz#3c0c2bf2200b0536eb505c1ffebafe507bdb131f"
-  integrity sha512-viZEyNFUifMoqw13dAAhvE0FnHgl4rbRD9tmupN1rnO5L58wr4kFjbfVKUoQAhGdYVw9hmprCc56bdidfgIA/A==
-  dependencies:
-    js-sha256 "^0.9.0"
-    jsrsasign "^8.0.12"
-    tslib "^1.9.0"
-
 "@xmlking/api-ai-javascript@^2.0.0-beta.22":
   version "2.0.0-beta.22"
   resolved "https://registry.yarnpkg.com/@xmlking/api-ai-javascript/-/api-ai-javascript-2.0.0-beta.22.tgz#36799dda95515b4010e5381d11fc37cc602c53fc"
@@ -2842,10 +2833,10 @@
     ms "^2.1.1"
     request "^2.88.0"
 
-"@xmlking/ngx-knob@^0.2.0":
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/@xmlking/ngx-knob/-/ngx-knob-0.2.0.tgz#8d87881e45b1e7ef04fa2a28a350ba156c32c84a"
-  integrity sha512-orGZTH+rZjZxhfBeuBkJbuLZO5bJAuTM3ucfOEcIN23tMf8WfEgWLhTLBwOZ8Knc6kzBTwXG7QkCinJdvPpE1Q==
+"@xmlking/ngx-knob@^0.3.0":
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/@xmlking/ngx-knob/-/ngx-knob-0.3.0.tgz#68fd9cb236858985fac2c0320c58122dcf9bfc08"
+  integrity sha512-nCtk88sGu/MhMGbKsqwGZinT2vnXjbbALlvF3V7CWb1rQDtoszHJ9CSFmazKGQDsx96wJs9u6IsfLYzXsjKb1g==
   dependencies:
     tslib "^1.9.0"
 
@@ -3102,6 +3093,14 @@ angular-in-memory-web-api@^0.8.0:
   resolved "https://registry.yarnpkg.com/angular-in-memory-web-api/-/angular-in-memory-web-api-0.8.0.tgz#6cb63c9e8e22c59383dfcccaf0512791400bf4e1"
   integrity sha512-2n0YtCLFxZo4JePHvH6q8b7JmBmhZq44Ic8VaBPRSXE4vAmlKXHU+kI2quNa612EAETDRkZcvLOU8K8CkhIZgQ==
 
+angular-oauth2-oidc@8.0.1:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/angular-oauth2-oidc/-/angular-oauth2-oidc-8.0.1.tgz#b5326874297362957d1da9e70a07243d6e249800"
+  integrity sha512-EHy/jxAJtkNrZ8sjDsSLPZ4qCXIDyCj7SBDpHzyUAdxMklGRoTkyWnjLdC8j0jYC6nEycaaVe06k1esm54XPAg==
+  dependencies:
+    jsrsasign "^8.0.12"
+    tslib "^1.9.0"
+
 ansi-align@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-2.0.0.tgz#c36aeccba563b89ceb556f3690f0b1d9e3547f7f"
@@ -10252,11 +10251,6 @@ js-levenshtein@^1.1.3:
   resolved "https://registry.yarnpkg.com/js-levenshtein/-/js-levenshtein-1.1.6.tgz#c6cee58eb3550372df8deb85fad5ce66ce01d59d"
   integrity sha512-X2BB11YZtrRqY4EnQcLX5Rh373zbK4alC1FW7D7MBhL2gtcC17cTnr6DmfHZeS0s2rTHjUTMMHfG7gO8SSdw+g==
 
-js-sha256@^0.9.0:
-  version "0.9.0"
-  resolved "https://registry.yarnpkg.com/js-sha256/-/js-sha256-0.9.0.tgz#0b89ac166583e91ef9123644bd3c5334ce9d0966"
-  integrity sha512-sga3MHh9sgQN2+pJ9VYZ+1LPwXOxuBJBA5nrR5/ofPfuiJBE2hnjsaN8se8JznOmGLN2p49Pe5U/ttafcs/apA==
-
 js-stringify@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/js-stringify/-/js-stringify-1.0.2.tgz#1736fddfd9724f28a3682adc6230ae7e4e9679db"