Adds a static app to test usage from CDN (#446)

okta · Aug 12, 2020 · 34afcbb · 34afcbb
1 parent af8f21d
commit 34afcbb
Show file tree

Hide file tree

Showing 8 changed files with 217 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -15,7 +15,7 @@
   },
   "scripts": {
     "build": "yarn workspace @okta/okta-auth-js build",
-    "clean": "yarn clean-node-modules",
+    "clean": "yarn clean-dist && yarn clean-node-modules",
     "clean-dist": "rimraf dist && lerna exec rimraf build2 && lerna exec rimraf dist",
     "clean-node-modules": "lerna exec rimraf node_modules && rimraf node_modules",
     "lint": "yarn workspaces run lint",

diff --git a/test/app/.gitignore b/test/app/.gitignore
@@ -1,3 +1,5 @@
 node_modules/
 .yalc
-*.log
+*.log
+public/*.js
+public/*.map
diff --git a/test/app/public/index.html b/test/app/public/index.html
@@ -12,5 +12,19 @@
       bootstrapLanding();
     </script>
     <a href="/server">Server-side Login Form</a>
+    <script>
+      function staticApp(e) {
+        e.preventDefault();
+        var config = getAuthJSConfig();
+        var params = {
+          issuer: config.issuer,
+          clientId: config.clientId,
+          redirectUri: config.redirectUri
+        }
+        var url = '/static' + toQueryParams(params);
+        window.location.assign(url);
+      }
+    </script>
+    <a href="#" onclick="staticApp(event)">Static App</a>
   </body>
 </html>
diff --git a/test/app/public/static/index.html b/test/app/public/static/index.html
@@ -0,0 +1,111 @@
+<html>
+  <head>
+    <!-- https://global.oktacdn.com/okta-auth-js/3.2.3/okta-auth-js.polyfill.js -->
+    <script src="/okta-auth-js.polyfill.js" type="text/javascript"></script>
+
+    <!-- https://global.oktacdn.com/okta-auth-js/3.2.3/okta-auth-js.min.js -->
+    <script src="/okta-auth-js.min.js" type="text/javascript"></script>
+  </head>
+  <body>
+    <div id="unauth" style="display: none">
+      <b>Please login</b><hr/>
+      <a id="login" href="#" onclick="login(event)">Login</a>
+    </div>
+    <div id="auth" style="display: none">
+      <b>Welcome back</b><hr/>
+      <div id="userinfo"></div><hr/>
+      <a id="logout" href=#" onclick="logout(event)">Logout</a>
+    </div>
+    <div id="error" style="color: red; padding-top: 20px">
+    </div>
+    <hr/>
+    <a href="/">Return Home</a>
+    <script type="text/javascript">
+      var authClient;
+      var issuer;
+      var clientId;
+      var redirectUri = window.location.origin + window.location.pathname; // http://localhost:8080/static/
+
+      var url = new URL(window.location.href);
+      var state = url.searchParams.get('state');
+      if (state) {
+        state = JSON.parse(state);
+        issuer = state.issuer;
+        clientId = state.clientId;
+      } else {
+        issuer = url.searchParams.get('issuer');
+        clientId = url.searchParams.get('clientId');
+      }
+
+      function main() {
+        try {
+          authClient = new OktaAuth({
+            issuer: issuer,
+            clientId: clientId,
+            redirectUri: redirectUri
+          });
+        } catch (error) {
+          return showError(error);
+        }
+
+        if (authClient.token.isLoginRedirect()) {
+          return handleLoginRedirect();
+        }
+
+        // normal app startup.
+        showUserInfo();
+      }
+
+      function handleLoginRedirect() {
+        authClient.token.parseFromUrl().then(function(res) {
+          var tokens = res.tokens;
+          if (tokens.idToken) {
+            authClient.tokenManager.add('idToken', tokens.idToken);
+          }
+          if (tokens.accessToken) {
+            authClient.tokenManager.add('accessToken', tokens.accessToken);
+          }
+          showUserInfo();
+        });
+      }
+
+      function showError(error) {
+        console.error(error);
+        var node = document.createElement('DIV');
+        node.innerText = JSON.stringify(error, null, 2);
+        document.getElementById('error').appendChild(node);
+      }
+
+      function showUserInfo() {
+        authClient.token.getUserInfo().then(function(userInfo) {
+          document.getElementById('auth').style.display = 'block';
+          document.getElementById('userinfo').innerText = JSON.stringify(userInfo, null, 2);
+        }).catch(function(error) {
+          showError(error);
+          showLogin();
+        });
+      }
+
+      function showLogin() {
+        document.getElementById('unauth').style.display = 'block';
+      }
+
+      function login(e) {
+        e.preventDefault();
+        authClient.token.getWithRedirect({
+          state: JSON.stringify({
+            issuer: issuer,
+            clientId: clientId
+          })
+        });
+      };
+
+      function logout(e) {
+        e.preventDefault();
+        authClient.signOut()
+      }
+
+      main();
+    </script>
+  </body>
+</html>
diff --git a/test/app/server.js b/test/app/server.js
@@ -20,6 +20,7 @@ app.use(webpackDevMiddleware(compiler, {
 }));
 
 app.use(express.static('./public'));
+app.use(express.static('../../packages/okta-auth-js/dist'));
 
 app.use(express.urlencoded());
 app.post('/login', function(req, res) {

diff --git a/test/app/src/webpackEntry.js b/test/app/src/webpackEntry.js
@@ -7,6 +7,7 @@ import Cookies from 'js-cookie';
 
 import TestApp from './testApp';
 import { getDefaultConfig, getConfigFromUrl, getConfigFromStorage, clearStorage } from './config';
+import { toQueryParams } from './util';
 
 let app;
 let config;
@@ -24,6 +25,9 @@ function mount() {
   return app;
 }
 
+window.getAuthJSConfig = getDefaultConfig;
+window.toQueryParams = toQueryParams;
+
 // Login page, read config from URL
 window.getWidgetConfig = function() {
   const siwConfig = window.location.search ? getConfigFromUrl() : getDefaultConfig();

diff --git a/test/e2e/pageobjects/StaticApp.js b/test/e2e/pageobjects/StaticApp.js
@@ -0,0 +1,60 @@
+import assert from 'assert';
+import toQueryParams from '../util/toQueryParams';
+
+class StaticApp {
+  get unauth() { return $('#unauth'); }
+  get auth() { return $('#auth'); }
+  get userinfo() { return $('#userinfo'); }
+  get error() { return $('#error'); }
+  get login() { return $('#login'); }
+  get logout() { return $('#logout'); }
+
+  async open() {
+    const ISSUER = process.env.ISSUER;
+    const CLIENT_ID = process.env.CLIENT_ID;
+    const params = toQueryParams({
+      issuer: ISSUER,
+      clientId: CLIENT_ID
+    });
+    await browser.url('/static' + params);
+    await browser.waitUntil(async () => this.error.then(el => el.isExisting()), 5000, 'wait for error selector');
+  }
+
+  async assertNoError() {
+    await this.error.then(el => el.getText()).then(txt => {
+      assert(txt === '');
+    });
+  }
+
+  async waitForLoginBtn() {
+    return browser.waitUntil(async () => this.login.then(el => el.isDisplayed()), 5000, 'wait for login button');
+  }
+
+  async clickLogin() {
+    await this.waitForLoginBtn();
+    await this.login.then(el => el.click());
+  }
+
+  async waitForUserInfo() {
+    return browser.waitUntil(async () => this.userinfo.then(el => el.isDisplayed()), 5000, 'wait for userinfo');
+  }
+
+  async assertUserInfo() {
+    await this.waitForUserInfo();
+    await this.userinfo.then(el => el.getText()).then(txt => {
+      assert(txt !== '');
+    });
+  }
+
+  async waitForLogoutBtn() {
+    return browser.waitUntil(async () => this.logout.then(el => el.isDisplayed()), 5000, 'wait for logout button');
+  }
+
+  async clickLogout() {
+    await this.waitForLogoutBtn();
+    await this.logout.then(el => el.click());
+  }
+
+}
+
+export default new StaticApp();
diff --git a/test/e2e/specs/static.js b/test/e2e/specs/static.js
@@ -0,0 +1,23 @@
+import StaticApp from '../pageobjects/StaticApp';
+import OktaLogin from '../pageobjects/OktaLogin';
+import TestApp from '../pageobjects/TestApp';
+
+const USERNAME = process.env.USERNAME;
+const PASSWORD = process.env.PASSWORD;
+
+describe('Static App', () => {
+
+  beforeEach(async () => {
+    await StaticApp.open();
+  });
+
+  it('can login, display userinfo, and logout', async () => {
+    await StaticApp.clickLogin();
+    await OktaLogin.signin(USERNAME, PASSWORD);
+    await StaticApp.assertUserInfo();
+    await StaticApp.assertNoError();
+    await StaticApp.clickLogout();
+    await TestApp.waitForLoginBtn();
+  });
+
+});