update version to 5.0.0

BREAKING CHANGE: use OKTA_AUTH injection token to inject oktaAuth instance (#79)

* fixes prod build issue by introducing OKTA_AUTH injection token
* add test apps
* add changelog & migrating guide
* add test apps readme

OKTA-435165
<<<Jenkins Check-In of Tested SHA: 7b7fe1c for [email protected]>>>
Artifact: okta-angular
Files changed count: 286
PR Link: "#80"

.bacon.yml

@@ -16,7 +16,7 @@ test_suites:
     - name: e2e
       script_path: /root/okta/okta-angular/scripts
       sort_order: '3'
-      timeout: '10'
+      timeout: '20'
       script_name: e2e
       criteria: MERGE
       queue_name: small

.gitignore

@@ -8,3 +8,4 @@ testenv
 yalc.lock
 yarn-error.log
 .idea
+build2

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn test:apps:clear; git add test/apps/**/package.json

CHANGELOG.md

@@ -1,3 +1,9 @@
+# 5.0.0
+
+### Breaking Changes
+
+- [#79](https://github.com/okta/okta-angular/pull/79) Uses `OKTA_AUTH` injection token instead of `OktaAuth` type to inject `oktaAuth` instance. This change is introduced to fix production build [issue](https://github.com/okta/okta-angular/issues/72) for Angular v7 & 8. See [MIGRATING](MIGRATING.md) for detailed information.
+
 # 4.1.1
 
 ### Fixes

MIGRATING.md

@@ -4,6 +4,27 @@
 
 # Migrating
 
+## From version 4.x to 5.x
+
+### Adding `OKTA_AUTH` injection token explicitly for `oktaAuth` usage
+
+To fix Angular 7 & 8 production build [issue](https://github.com/okta/okta-angular/issues/72), `oktaAuth` instance is now injected by [injection token](https://angular.io/api/core/InjectionToken) instead of implicit referring by types.
+
+```typescript
+import { Component } from '@angular/core';
+import { OKTA_AUTH } from '@okta/okta-angular';
+
+@Component({
+  selector: 'app-component',
+  template: `
+    <div>page content</div>
+  `,
+})
+export class MyComponent {
+  constructor(@Inject(OKTA_AUTH) private oktaAuth: OktaAuth) {}
+}
+```
+
 ## From version 3.x to 4.x
 
 ### Updating `OktaConfig`

lerna.json

@@ -0,0 +1,6 @@
+{
+  "packages": [
+    "test/apps/*"
+  ],
+  "version": "0.0.0"
+}

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@okta/okta-angular",
   "private": true,
-  "version": "4.2.0",
+  "version": "5.0.0",
   "description": "Angular support for Okta",
   "main": "./dist/bundles/okta-angular.umd.js",
   "module": "./dist/fesm5/okta-angular.js",
@@ -22,13 +22,17 @@
     "prepare": "yarn build",
     "start": "yarn --cwd test/e2e/harness/ start",
     "test": "yarn lint && yarn test:e2e && yarn test:unit",
-    "test:e2e": "yarn --cwd test/e2e/harness/ e2e",
+    "pretest:e2e": "yarn test:apps:prepare",
+    "test:e2e": "yarn workspace @okta/test.e2e start",
     "test:unit": "jest",
     "pack:lib": "npm run build && npm pack ./dist",
     "publish:lib": "npm run build && npm publish ./dist",
     "publish:lib:next": "npm run build && npm publish --tag next ./dist",
     "compodoc": "compodoc -p tsconfig.json",
-    "compodoc:serve": "compodoc -s"
+    "compodoc:serve": "compodoc -s",
+    "test:apps:prepare": "sh ./scripts/prepare-test-apps.sh",
+    "test:apps:clear": "sh ./scripts/clear-test-apps.sh",
+    "lerna": "lerna"
   },
   "repository": "https://github.com/okta/okta-angular",
   "homepage": "https://github.com/okta/okta-angular",
@@ -55,6 +59,7 @@
     "@angular/platform-server": "7.2.16",
     "@angular/router": "7.2.16",
     "@compodoc/compodoc": "1.1.9",
+    "@okta/okta-auth-js": "^5.8.0",
     "@rollup/plugin-commonjs": "11.0.1",
     "@rollup/plugin-node-resolve": "7.0.0",
     "@types/jest": "^26.0.14",
@@ -73,9 +78,11 @@
     "eslint-plugin-jest": "^24.0.2",
     "eslint-plugin-node": "^11.1.0",
     "globby": "^11.0.1",
+    "husky": "^7.0.4",
     "jest": "^26.4.2",
     "jest-junit": "^11.1.0",
     "jest-preset-angular": "^8.3.1",
+    "lerna": "^4.0.0",
     "prettier": "^2.1.2",
     "raw-loader": "1.0.0",
     "reflect-metadata": "0.1.13",
@@ -95,6 +102,7 @@
     "uglify-js": "3.13.5",
     "webpack": "^4.32.2",
     "webpack-filter-warnings-plugin": "1.2.1",
+    "yalc": "^1.0.0-pre.53",
     "zone.js": "~0.8.26"
   },
   "peerDependencies": {
@@ -140,8 +148,13 @@
     "outputName": "junit-result.xml"
   },
   "sideEffects": false,
-  "workspaces": [
-    "./",
-    "test/e2e/harness"
-  ]
-}
+  "workspaces": {
+    "packages": [
+      "./",
+      "test/e2e"
+    ],
+    "nohoist": [
+      "test/apps/*"
+    ]
+  }
+}

scripts/clear-test-apps.sh

@@ -0,0 +1 @@
+npx lerna exec -- npx yalc remove --all

scripts/e2e.sh

@@ -1,8 +1,9 @@
 #!/bin/bash -x
 
-source ${OKTA_HOME}/${REPO}/scripts/setup.sh
+source ${OKTA_HOME}/${REPO}/scripts/setup-e2e.sh
 
-setup_service google-chrome-stable 83.0.4103.61-1
+setup_service java 1.8.222
+setup_service google-chrome-stable 89.0.4389.72-1
 
 export TEST_SUITE_TYPE="junit"
 export TEST_RESULT_FILE_DIR="${REPO}/test-reports/e2e"
@@ -14,6 +15,9 @@ export [email protected]
 get_secret prod/okta-sdk-vars/client_secret CLIENT_SECRET
 get_secret prod/okta-sdk-vars/password PASSWORD
 
+export CI=true
+export DBUS_SESSION_BUS_ADDRESS=/dev/null
+
 if ! yarn test:e2e; then
   echo "unit failed! Exiting..."
   exit ${TEST_FAILURE}

scripts/prepare-test-apps.sh

@@ -0,0 +1,6 @@
+pushd ./dist
+npx yalc publish
+popd
+
+npx lerna exec -- npx yalc add @okta/okta-angular
+npx lerna exec -- yarn build --prod

scripts/setup-e2e.sh

@@ -0,0 +1,57 @@
+#!/bin/bash -xe
+
+# Install yarn
+setup_service yarn 1.21.1
+
+yarn global add yalc
+
+# Add yarn to the $PATH so npm cli commands do not fail
+export PATH="${PATH}:$(yarn global bin)"
+
+# Install required node version
+export NVM_DIR="/root/.nvm"
+setup_service node v12.20.0
+
+cd ${OKTA_HOME}/${REPO}
+
+# undo permissions change on scripts/publish.sh
+git checkout -- scripts
+
+# ensure we're in a branch on the correct sha
+git checkout $BRANCH
+git reset --hard $SHA
+
+git config --global user.email "[email protected]"
+git config --global user.name "oktauploader-okta"
+
+#!/bin/bash
+YARN_REGISTRY=https://registry.yarnpkg.com
+OKTA_REGISTRY=${ARTIFACTORY_URL}/api/npm/npm-okta-master
+
+# Yarn does not utilize the npmrc/yarnrc registry configuration
+# if a lockfile is present. This results in `yarn install` problems
+# for private registries. Until [email protected] is released, this is our current
+# workaround.
+#
+# Related issues:
+#  - https://github.com/yarnpkg/yarn/issues/5892
+#  - https://github.com/yarnpkg/yarn/issues/3330
+
+# Replace yarn registry with Okta's
+echo "Replacing $YARN_REGISTRY with $OKTA_REGISTRY within yarn.lock files..."
+find . -type d -name node_modules -prune -o -name 'yarn.lock' -print -exec sed -i "s#${YARN_REGISTRY}#${OKTA_REGISTRY}#" {} +
+
+if ! yarn install --frozen-lockfile; then
+  echo "yarn install failed! Exiting..."
+  exit ${FAILED_SETUP}
+fi
+for app in test/apps/*
+do
+  pushd $app
+    yarn install
+  popd
+done
+
+# Revert the original change(s)
+echo "Replacing $OKTA_REGISTRY with $YARN_REGISTRY within yarn.lock files..."
+find . -type d -name node_modules -prune -o -name 'yarn.lock' -print -exec sed -i "s#${OKTA_REGISTRY}#${YARN_REGISTRY}#" {} +

src/okta-angular.ts

@@ -12,7 +12,7 @@
 
 export { OktaAuthModule } from './okta/okta.module';
 export { OktaAuthGuard } from './okta/okta.guard';
-export { OktaConfig, OKTA_CONFIG } from './okta/models/okta.config';
+export { OktaConfig, OKTA_CONFIG, OKTA_AUTH } from './okta/models/okta.config';
 export { OktaAuthStateService } from './okta/services/auth-state.service';
 
 // Okta View Components

src/okta/components/callback.component.ts

@@ -12,7 +12,7 @@
 
 import { Component, OnInit, Optional, Injector, Inject } from '@angular/core';
 import { OktaAuth } from '@okta/okta-auth-js';
-import { OKTA_CONFIG, OktaConfig } from '../models/okta.config';
+import { OKTA_CONFIG, OktaConfig, OKTA_AUTH } from '../models/okta.config';
 
 @Component({
   template: `<div>{{error}}</div>`
@@ -22,7 +22,7 @@ export class OktaCallbackComponent implements OnInit {
 
   constructor(
     @Inject(OKTA_CONFIG) private config: OktaConfig,
-    private oktaAuth: OktaAuth,
+    @Inject(OKTA_AUTH) private oktaAuth: OktaAuth,
     @Optional() private injector?: Injector
   ) {}
 

src/okta/models/okta.config.ts

@@ -27,3 +27,4 @@ export interface OktaConfig {
 }
 
 export const OKTA_CONFIG = new InjectionToken<OktaConfig>('okta.config.angular');
+export const OKTA_AUTH = new InjectionToken<OktaAuth>('okta.auth');

src/okta/okta.guard.ts

@@ -27,7 +27,7 @@ import { filter } from 'rxjs/operators';
 
 import { OktaAuth, AuthState } from '@okta/okta-auth-js';
 
-import { AuthRequiredFunction, OktaConfig, OKTA_CONFIG } from './models/okta.config';
+import { AuthRequiredFunction, OktaConfig, OKTA_CONFIG, OKTA_AUTH } from './models/okta.config';
 
 @Injectable()
 export class OktaAuthGuard implements CanActivate, CanActivateChild, CanLoad {
@@ -37,7 +37,7 @@ export class OktaAuthGuard implements CanActivate, CanActivateChild, CanLoad {
 
   constructor(
     @Inject(OKTA_CONFIG) private config: OktaConfig, 
-    private oktaAuth: OktaAuth, 
+    @Inject(OKTA_AUTH) private oktaAuth: OktaAuth, 
     private injector: Injector
   ) { 
     this.onAuthRequired = this.config.onAuthRequired;

src/okta/okta.module.ts

@@ -17,10 +17,14 @@ import { OktaCallbackComponent } from './components/callback.component';
 import { OktaAuthGuard } from './okta.guard';
 import { OktaAuthStateService } from './services/auth-state.service';
 import { OktaHasAnyGroupDirective } from './has-any-group.directive';
-import { OktaConfig, OKTA_CONFIG } from './models/okta.config';
-import { OktaAuth, AuthSdkError, toRelativeUrl } from '@okta/okta-auth-js';
+import { OktaConfig, OKTA_CONFIG, OKTA_AUTH } from './models/okta.config';
+import { AuthSdkError, OktaAuth, toRelativeUrl } from '@okta/okta-auth-js';
 import packageInfo from './packageInfo';
 
+export function oktaAuthFactory(config: OktaConfig): OktaAuth {
+  return config.oktaAuth;
+}
+
 @NgModule({
   declarations: [
     OktaCallbackComponent,
@@ -34,10 +38,8 @@ import packageInfo from './packageInfo';
     OktaAuthGuard,
     OktaAuthStateService,
     {
-      provide: OktaAuth,
-      useFactory(config: OktaConfig) {
-        return config.oktaAuth;
-      },
+      provide: OKTA_AUTH,
+      useFactory: oktaAuthFactory,
       deps: [ OKTA_CONFIG ]
     },
   ]

src/okta/services/auth-state.service.ts

@@ -1,7 +1,8 @@
-import { Injectable, OnDestroy } from '@angular/core';
+import { Injectable, OnDestroy, Inject } from '@angular/core';
 import { AuthState, OktaAuth } from '@okta/okta-auth-js';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { mergeMap } from 'rxjs/operators';
+import { OKTA_AUTH } from '../models/okta.config';
 
 const defaultAuthState = {
   isAuthenticated: false
@@ -16,7 +17,7 @@ export class OktaAuthStateService implements OnDestroy {
   // only expose readonly property
   public readonly authState$: Observable<AuthState> = this._authState.asObservable();
 
-  constructor(private oktaAuth: OktaAuth) {
+  constructor(@Inject(OKTA_AUTH) private oktaAuth: OktaAuth) {
     this.updateAuthState = this.updateAuthState.bind(this);
 
     // set initial authState

test/apps/README.md

@@ -0,0 +1,18 @@
+# Test Apps
+
+This folder includes Angular test apps cross all supported Angular versions (7 - 13). All apps are generated via @angular/cli, then small adjustment has been added to support the E2E testing requirements.
+
+## How to setup a new test app
+
+1. Generate a new Angular app with @angular/cli under `test/apps` directory.
+
+**Note:** repalce `{version}` in the script with the Angular version for the new app.
+
+```bash
+nxp @angular/cli@{version} new angular-v{version}
+```
+2. Copy `prebuild.js` from the exising test apps. The `prebuild` script loads okta test configs from `testenv`, then add it to Angular's environment module (`src/environments`).
+3. Update `scripts` and `workspaces` field in package.json by following `package.json` in the exising apps.
+4. Add `lite-server` in `devDependencies`, so the e2e tests can run against the prod build artifacts. `bs-config.js` should also be copied over as the static server's config file.
+5. Once above steps are finished, try the newly generated app locally first. If everything looks good, then update `runner.js` under `e2e` folder to bind e2e tests with the new app.
+6. Push a commit and test on bacon.

test/apps/angular-v10/.browserslistrc

@@ -0,0 +1,18 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR
+not IE 9-10 # Angular support for IE 9-10 has been deprecated and will be removed as of Angular v11. To opt-in, remove the 'not' prefix on this line.
+not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.

test/apps/angular-v10/.editorconfig

@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false