Adds OIE tests

OKTA-382516
<<<Jenkins Check-In of Tested SHA: 42635e0 for [email protected]>>>
Artifact: samples-js-angular

Author: vijetmahabaleshwar-okta

.bacon.yml

@@ -6,3 +6,11 @@ test_suites:
       script_name: e2e
       criteria: MERGE
       queue_name: small
+
+    - name: e2e-oie
+      script_path: /root/okta/samples-js-angular/scripts
+      sort_order: '1'
+      timeout: '10'
+      script_name: e2e-oie
+      criteria: MERGE
+      queue_name: small

custom-login/env.js

@@ -11,3 +11,4 @@ if (fs.existsSync(TESTENV)) {
   });
 }
 process.env.CLIENT_ID = process.env.CLIENT_ID || process.env.SPA_CLIENT_ID;
+process.env.USE_INTERACTION_CODE = process.env.USE_INTERACTION_CODE || false;

custom-login/extra-webpack.config.js

@@ -12,6 +12,7 @@ if (fs.existsSync(TESTENV)) {
   });
 }
 process.env.CLIENT_ID = process.env.CLIENT_ID || process.env.SPA_CLIENT_ID;
+process.env.USE_INTERACTION_CODE = process.env.USE_INTERACTION_CODE || false;
 
 const webpack = require('webpack');
 const env = {};
@@ -20,6 +21,7 @@ const env = {};
 [
   'ISSUER',
   'CLIENT_ID',
+  'USE_INTERACTION_CODE'
 ].forEach(function (key) {
   if (!process.env[key]) {
     throw new Error(`Environment variable ${key} must be set. See README.md`);

custom-login/package-lock.json

@@ -20,7 +20,7 @@
     "@angular/platform-browser-dynamic": "^11.0.9",
     "@angular/router": "^11.0.9",
     "@okta/okta-angular": "^3.0.1",
-    "@okta/okta-signin-widget": "^5.0.0",
+    "@okta/okta-signin-widget": "^5.5.0",
     "colors": "^1.4.0",
     "core-js": "^3.6.5",
     "rxjs": "^6.6.3",

custom-login/package.json

@@ -1,4 +1,5 @@
 const { CLIENT_ID, ISSUER, OKTA_TESTING_DISABLEHTTPSCHECK } = process.env;
+const USE_INTERACTION_CODE = process.env.USE_INTERACTION_CODE || false;
 
 export default {
   oidc: {
@@ -8,7 +9,8 @@ export default {
     scopes: ['openid', 'profile', 'email'],
     testing: {
       disableHttpsCheck: `${OKTA_TESTING_DISABLEHTTPSCHECK}`
-    }
+    },
+    useInteractionCodeFlow: `${USE_INTERACTION_CODE}`,
   },
   resourceServer: {
     messagesUrl: 'http://localhost:8000/api/messages',

custom-login/src/app/app.config.ts

@@ -2,7 +2,7 @@ <h1 class="ui header">Custom Login Page with Sign In Widget</h1>
 <div *ngIf="!isAuthenticated">
   <p>If you‘re viewing this page then you have successfully started this Angular application.</p>
   <p>This example shows you how to use the
-    <a href="https://github.com/okta/okta-oidc-js/tree/master/packages/okta-angular">Okta Angular Library</a>
+    <a href="https://github.com/okta/okta-angular/tree/master">Okta Angular Library</a>
     and the
     <a href="https://github.com/okta/okta-signin-widget">Okta Sign-In Widget</a>
     to add the

custom-login/src/app/home/home.component.html

@@ -17,6 +17,11 @@ import sampleConfig from '../app.config';
 
 const DEFAULT_ORIGINAL_URI = window.location.origin;
 
+let USE_INTERACTION_CODE = false;
+if (sampleConfig.oidc.useInteractionCodeFlow === 'true') {
+  USE_INTERACTION_CODE = true;
+}
+
 @Component({
   selector: 'app-login',
   templateUrl: './login.component.html',
@@ -41,8 +46,10 @@ export class LoginComponent implements OnInit {
         },
       },
       authParams: {
-        issuer: sampleConfig.oidc.issuer
-      }
+        issuer: sampleConfig.oidc.issuer,
+        scopes: sampleConfig.oidc.scopes
+      },
+      useInteractionCodeFlow: USE_INTERACTION_CODE,
     });
   }
 

custom-login/src/app/login/login.component.ts

@@ -6,7 +6,7 @@ <h1 class="ui header">PKCE Flow w/ Okta Hosted Login Page</h1>
 <div *ngIf="!isAuthenticated">
   <p>If you‘re viewing this page then you have successfully started this Angular application.</p>
   <p>This example shows you how to use the
-    <a href="https://github.com/okta/okta-oidc-js/tree/master/packages/okta-angular">Okta Angular Library</a> to add the
+    <a href="https://github.com/okta/okta-angular/tree/master">Okta Angular Library</a> to add the
     <a href="https://developer.okta.com/docs/guides/implement-auth-code-pkce">PKCE Flow</a> to your application.</p>
   <p>When you click the login button below, you will be redirected to the login page on your Okta org. After you authenticate,
     you will be returned to this application with an ID Token and Access Token. These tokens will be stored in local storage