Provide a polyfill for IE11+ (#408)

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## PENDING
+
+### Features
+
+-[#408](https://github.com/okta/okta-auth-js/pull/408) Provides a polyfill for IE 11+
+
 ## 3.1.4
 
 ### Bug Fixes

README.md

@@ -8,7 +8,7 @@
 
 * [Release status](#release-status)
 * [Need help?](#need-help)
-  * [Browser compatibility](#browser-compatibility)
+  * [Browser compatibility / polyfill](#browser-compatibility--polyfill)
   * [Third party cookies](#third-party-cookies)
 * [Getting started](#getting-started)
 * [Usage guide](#usage-guide)
@@ -42,15 +42,34 @@ If you run into problems using the SDK, you can:
 * Ask questions on the [Okta Developer Forums][devforum]
 * Post [issues][github-issues] here on GitHub (for code errors)
 
-### Browser Compatibility
+### Browser compatibility / polyfill
 
 This SDK is known to work with current versions of Chrome, Firefox, and Safari on desktop and mobile.
 
-Compatibility with IE Edge can be accomplished by adding polyfill/shims for the following objects:
+Compatibility with IE 11 / Edge can be accomplished by adding polyfill/shims for the following objects:
 
-* ES6 Promise
+* ES Promise
 * Array.from
 * TextEncoder
+* Object.assign
+* UInt8 typed array
+* webcrypto (crypto.subtle)
+
+This module provides an entrypoint that implements all required polyfills.
+
+If you are using the JS on a web page from the browser, you can copy the `node_modules/@okta/okta-auth-js/dist` contents to publicly hosted directory, and include a reference to the `okta-auth-js.polyfill.js` file in a `<script>` tag. It should be loaded before any other scripts which depend on the polyfill.  
+
+If you're using a bundler like [Webpack](https://webpack.github.io/) or [Browserify](http://browserify.org/), you can simply import import or require `@okta/okta-auth-js/polyfill` at or near the beginning of your application's code:
+
+```javascript
+import '@okta/okta-auth-js/polyfill';
+```
+
+or
+
+```javascript
+require('@okta/okta-auth-js/polyfill');
+```
 
 ### Third party cookies
 

packages/okta-auth-js/package.json

@@ -22,7 +22,9 @@
     "test:browser": "jest --config ./jest.browser.js",
     "test:server": "jest --config ./jest.server.js",
     "test:report": "yarn test --ci --silent || true",
-    "build": "webpack --config webpack.config.js",
+    "build": "yarn build:lib && yarn build:polyfill",
+    "build:lib": "webpack --config webpack.config.js",
+    "build:polyfill": "webpack --config webpack.polyfill.config.js",
     "prepare": "yarn build",
     "dev": "webpack --config webpack.dev.config.js"
   },
@@ -57,6 +59,7 @@
     "@babel/preset-env": "^7.8.2",
     "babel-jest": "^24.9.0",
     "babel-loader": "^8.0.6",
+    "core-js": "^3.6.5",
     "eslint": "5.6.1",
     "eslint-plugin-compat": "^3.3.0",
     "eslint-plugin-jasmine": "^2.10.1",
@@ -74,6 +77,8 @@
     "karma-webpack": "^3.0.5",
     "lodash": "4.17.11",
     "promise.allsettled": "^1.0.1",
+    "text-encoding": "^0.7.0",
+    "webcrypto-shim": "^0.1.5",
     "webpack": "^3.0.0"
   },
   "jest-junit": {

packages/okta-auth-js/polyfill/index.js

@@ -0,0 +1,13 @@
+// Polyfills objects needed to support IE 11+
+require('core-js/fn/object/assign');
+require('core-js/es/promise');
+require('core-js/es/typed-array/uint8-array');
+require('core-js/features/array/from');
+require('core-js/web/url');
+require('webcrypto-shim');
+
+if (typeof window.TextEncoder !== 'function') {
+  var TextEncodingPolyfill = require('text-encoding');
+  window.TextEncoder = TextEncodingPolyfill.TextEncoder;
+  window.TextDecoder = TextEncodingPolyfill.TextDecoder;
+}

packages/okta-auth-js/webpack.polyfill.config.js

@@ -0,0 +1,36 @@
+/* global __dirname */
+var path    = require('path');
+var _ = require('lodash');
+var commonConfig = require('./webpack.common.config');
+var webpack = require('webpack');
+var fs      = require('fs');
+
+var license = fs.readFileSync('lib/license-header.txt', 'utf8');
+
+module.exports = _.extend({}, _.cloneDeep(commonConfig), {
+  entry: './polyfill/index.js',
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: 'okta-auth-js.polyfill.js',
+    library: 'OktaAuthPolyfill',
+    libraryTarget: 'umd'
+  },
+  plugins: commonConfig.plugins.concat([
+    new webpack.optimize.UglifyJsPlugin({
+      compress: {
+        warnings: false
+      },
+      sourceMap: true,
+      comments: function(node, comment) {
+        // Remove other Okta copyrights
+        var isLicense = /^!/.test(comment.value);
+        var isOkta = /.*Okta.*/.test(comment.value);
+        return isLicense && !isOkta;
+      }
+    }),
+
+    // Add a single Okta license after removing others
+    new webpack.BannerPlugin(license)
+  ]),
+  devtool: 'source-map'
+});

test/app/package.json

@@ -13,11 +13,14 @@
   "author": "",
   "license": "Apache-2.0",
   "dependencies": {
+    "@babel/core": "^7.8.0",
+    "@babel/plugin-transform-runtime": "^7.8.3",
+    "@babel/preset-env": "^7.8.2",
     "@webpack-cli/serve": "^0.1.5",
+    "babel-loader": "^8.0.6",
     "dotenv": "^7.0.0",
     "express": "^4.17.1",
     "source-map-loader": "^0.2.4",
-    "text-encoding": "^0.7.0",
     "webpack": "^4.29.6",
     "webpack-cli": "^3.3.0",
     "webpack-dev-middleware": "^3.7.2",

test/app/src/webpackEntry.js

@@ -1,11 +1,7 @@
 /* entry point for SPA application */
 /* global window, document */
 
-// polyfill TextEncoder for IE Edge
-import { TextEncoder } from 'text-encoding';
-if (typeof window.TextEncoder === 'undefined') {
-  window.TextEncoder = TextEncoder;
-}
+import '@okta/okta-auth-js/polyfill';
 
 import Cookies from 'js-cookie';
 

test/app/webpack.config.js

@@ -27,6 +27,16 @@ module.exports = {
         test: /\.js$/,
         use: ['source-map-loader'],
         enforce: 'pre'
+      },
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        loader: 'babel-loader',
+        query: {
+          presets: ['@babel/env'],
+          plugins: ['@babel/plugin-transform-runtime'],
+          sourceType: 'unambiguous'
+        }
       }
     ]
   }

yarn.lock

@@ -3332,6 +3332,11 @@ core-js@^2.4.0, core-js@^2.6.5:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.11.tgz#38831469f9922bded8ee21c9dc46985e0399308c"
   integrity sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg==
 
+core-js@^3.6.5:
+  version "3.6.5"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.6.5.tgz#7395dc273af37fb2e50e9bd3d9fe841285231d1a"
+  integrity sha512-vZVEEwZoIsI+vPEuoF9Iqf5H7/M3eeQqWlQnYa8FSKKePuYTf5MWnxb5SDAzCa60b3JBRS5g9b+Dq7b1y/RCrA==
+
 core-util-is@1.0.2, core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -10951,6 +10956,11 @@ wdio-chromedriver-service@^5.0.2:
   dependencies:
     fs-extra "^0.30.0"
 
+webcrypto-shim@^0.1.5:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/webcrypto-shim/-/webcrypto-shim-0.1.5.tgz#13e34a010ccc544edecfe8a2642204502841bcf0"
+  integrity sha512-mE+E00gulvbLjHaAwl0kph60oOLQRsKyivEFgV9DMM/3Y05F1vZvGq12hAcNzHRnYxyEOABBT/XMtwGSg5xA7A==
+
 webdriver@5.18.6:
   version "5.18.6"
   resolved "https://registry.yarnpkg.com/webdriver/-/webdriver-5.18.6.tgz#95bede9ae84a7a0e9b90aba8e233f4de4a14f30a"