fix: remove require syntax

add cjs bundle validation test

use vite for react-oie test app

adjust rollup config for development

generate esm node bundle

add exports field as guiduice of different envs

OKTA-405564
<<<Jenkins Check-In of Tested SHA: 0dcad6d for [email protected]>>>
Artifact: okta-auth-js
Files changed count: 38
PR Link: "#1114"

Author: shuowu

.bacon.yml

@@ -20,14 +20,13 @@ test_suites:
       script_name: integration
       criteria: MERGE
       queue_name: small
-    # Re-enable once ESM bundle issue is fixed
-    # - name: validate-esm-bundle
-    #   script_path: ../okta-auth-js/scripts
-    #   sort_order: '2'
-    #   timeout: '10'
-    #   script_name: validate-esm-bundle
-    #   criteria: MERGE
-    #   queue_name: small
+    - name: validate-bundles
+      script_path: ../okta-auth-js/scripts
+      sort_order: '2'
+      timeout: '10'
+      script_name: validate-bundles
+      criteria: MERGE
+      queue_name: small
     - name: e2e
       script_path: ../okta-auth-js/scripts
       sort_order: '3'

CHANGELOG.md

@@ -6,6 +6,11 @@
 
 - [#1113](https://github.com/okta/okta-auth-js/pull/1113) Updates types for `SigninWithCredentialsOptions` and `SignInOptions` to support `SP Initiated Auth`
 - [#1125](https://github.com/okta/okta-auth-js/pull/1125) IDX - Supports auto select methodType (when only one selection is available) for `authenticator-verification-data` remediation
+- [#1114](https://github.com/okta/okta-auth-js/pull/1114) Exposes ESM node bundle
+
+### Fixes
+
+- [#1114](https://github.com/okta/okta-auth-js/pull/1114) Fixes ESM browser bundle issue by only using ESM `import` syntax
 
 ## 6.1.0
 

babel.cjs.js

@@ -6,14 +6,15 @@ module.exports = {
     [
       '@babel/preset-env', {
       'targets': {
-        'node': true
+        'node': 11
       },
       'modules': false
     }
   ]],
   'plugins': [
     '@babel/plugin-transform-typescript',
     '@babel/plugin-proposal-class-properties',
+    // https://babeljs.io/docs/en/babel-plugin-transform-runtime#corejs
     ['@babel/plugin-transform-runtime', {
       corejs: 3
     }],

jest.cjs.js

@@ -0,0 +1,39 @@
+/*!
+ * Copyright (c) 2015-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * 
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+//Jest doc: https://jestjs.io/docs/ecmascript-modules
+
+var OktaAuth = '<rootDir>/build/cjs/index.js';
+
+module.exports = {
+  'roots': [
+    'test/validate-bundles'
+  ],
+  'testMatch': [
+    '**/test/validate-bundles/**/*.{js,ts}'
+  ],
+  'transform': {
+    '^.+\\.(ts)$': 'babel-jest'
+  },
+  'transformIgnorePatterns': [
+    OktaAuth
+  ],
+  'restoreMocks': true,
+  'moduleNameMapper': {
+    '^@okta/okta-auth-js$': OktaAuth
+  },
+  'testPathIgnorePatterns': [],
+  'reporters': [
+    'default',
+    'jest-junit'
+  ]
+};

jest.esm.mjs

@@ -12,20 +12,28 @@
 
 //Jest doc: https://jestjs.io/docs/ecmascript-modules
 
-var OktaAuth = '<rootDir>/build/bundles-for-validation/esm/index.mjs';
+const OktaAuth = process.env.BUNDLE_ENV === 'browser' ? 
+  `<rootDir>/build/bundles-for-validation/esm/esm.browser.mjs` : 
+  `<rootDir>/build/esm/esm.node.mjs`;
+const testEnvironment = process.env.BUNDLE_ENV === 'browser' ? 'jsdom' : 'node';
 
 export default {
-  'roots': [
+  roots: [
     'test/validate-bundles'
   ],
-  'testMatch': [
+  testEnvironment,
+  testMatch: [
     '**/test/validate-bundles/**/*.{js,ts}'
   ],
-  'transform': {},
-  'restoreMocks': true,
-  'moduleNameMapper': {
+  transform: {},
+  restoreMocks: true,
+  moduleNameMapper: {
     '^@okta/okta-auth-js$': OktaAuth
   },
-  'extensionsToTreatAsEsm': ['.ts'],
-  'testPathIgnorePatterns': []
+  extensionsToTreatAsEsm: ['.ts'],
+  testPathIgnorePatterns: [],
+  reporters: [
+    'default',
+    'jest-junit'
+  ]
 };

lib/AuthStateManager.ts

@@ -9,15 +9,15 @@
  * 
  * See the License for the specific language governing permissions and limitations under the License.
  */
-
-
+ 
+// @ts-ignore 
+// Do not use this type in code, so it won't be emitted in the declaration output
+import PCancelable from 'p-cancelable';
 import { AuthSdkError } from './errors';
 import { AuthState, AuthStateLogOptions } from './types';
 import { OktaAuth } from '.';
 import { getConsole } from './util';
 import { EVENT_ADDED, EVENT_REMOVED } from './TokenManager';
-// eslint-disable-next-line import/no-commonjs
-const PCancelable = require('p-cancelable');
 
 export const INITIAL_AUTH_STATE = null;
 const DEFAULT_PENDING = {
@@ -43,7 +43,7 @@ const isSameAuthState = (prevState: AuthState | null, state: AuthState) => {
 export class AuthStateManager {
   _sdk: OktaAuth;
   _pending: { 
-    updateAuthStatePromise: typeof PCancelable;
+    updateAuthStatePromise: any;
     canceledTimes: number; 
   };
   _authState: AuthState | null;

lib/OktaAuth.ts

@@ -133,9 +133,9 @@ import {
   clearTransactionMeta,
   isTransactionMetaValid
 } from './idx/transactionMeta';
-
-// eslint-disable-next-line import/no-commonjs
-const Emitter = require('tiny-emitter');
+// @ts-ignore 
+// Do not use this type in code, so it won't be emitted in the declaration output
+import Emitter from 'tiny-emitter';
 
 class OktaAuth implements OktaAuthInterface, SigninAPI, SignoutAPI {
   options: OktaAuthOptions;
@@ -151,7 +151,7 @@ class OktaAuth implements OktaAuthInterface, SigninAPI, SignoutAPI {
   features!: FeaturesAPI;
   token: TokenAPI;
   _tokenQueue: PromiseQueue;
-  emitter: typeof Emitter;
+  emitter: any;
   tokenManager: TokenManager;
   authStateManager: AuthStateManager;
   http: HttpAPI;

lib/browser/browserStorage.ts

@@ -12,6 +12,7 @@
  *
  */
 
+import Cookies from 'js-cookie';
 import AuthSdkError from '../errors/AuthSdkError';
 import {
   StorageProvider,
@@ -25,9 +26,6 @@ import {
 } from '../types';
 import { warn } from '../util';
 
-// eslint-disable-next-line import/no-commonjs
-const Cookies = require('js-cookie');
-
 // Building this as an object allows us to mock the functions in our tests
 var storageUtil: BrowserStorageUtil = {
 
@@ -246,7 +244,11 @@ var storageUtil: BrowserStorageUtil = {
       return storageUtil.storage.get(name);
     },
 
-    get: function(name: string): string {
+    get: function(name?: string): string {
+      // return all cookies when no args is provided
+      if (!arguments.length) {
+        return Cookies.get();
+      }
       return Cookies.get(name);
     },
 

lib/crypto/node.ts

@@ -16,11 +16,15 @@
 // Ponyfill for NodeJS
 // Webpack config excludes this file
 
+import atobModule from 'atob';
+import btoaModule from 'btoa';
+import { Crypto } from '@peculiar/webcrypto';
+
 let a;
 if (typeof atob !== 'undefined') {
   a = atob;
 } else {
-  a = require('atob');
+  a = atobModule;
 }
 export { a as atob };
 
@@ -29,22 +33,23 @@ let b;
 if (typeof btoa !== 'undefined') {
   b = btoa;
 } else {
-  b = require('btoa');
+  b = btoaModule;
 }
 export { b as btoa };
 
-let crypto;
-try {
-  crypto = require('crypto');
-} catch (err) {
-  // this environment has no crypto module!
-}
+const crypto = (async () => {
+  try {
+    return await import('crypto');
+  } catch (err) {
+    // this environment has no crypto module!
+    return undefined;
+  }
+})();
 
 let webcrypto;
 if (typeof crypto !== 'undefined' && crypto['webcrypto']) {
   webcrypto = crypto['webcrypto'];
 } else {
-  const { Crypto } = require('@peculiar/webcrypto');
   webcrypto = new Crypto();
 }
 

lib/server/serverStorage.ts

@@ -11,10 +11,12 @@
  *
  */
 
+// @ts-ignore 
+// Do not use this type in code, so it won't be emitted in the declaration output
+import NodeCache from 'node-cache';
 import { SimpleStorage, StorageType, StorageUtil, Cookies } from '../types';
 import { AuthSdkError } from '../errors';
 // eslint-disable-next-line import/no-commonjs
-const NodeCache = require('node-cache'); // commonJS module cannot be imported without esModuleInterop
 
 // this is a SHARED memory storage to support a stateless http server
 const sharedStorage = typeof NodeCache === 'function' ? new NodeCache() : null;

package.json

@@ -6,9 +6,19 @@
   "homepage": "https://github.com/okta/okta-auth-js",
   "license": "Apache-2.0",
   "main": "build/cjs/index.js",
-  "module": "build/esm/index.js",
+  "module": "build/esm/esm.node.mjs",
   "browser": "build/dist/okta-auth-js.umd.js",
   "types": "build/lib/index.d.ts",
+  "exports": {
+    "node": {
+      "import": "./build/esm/esm.node.mjs",
+      "require": "./build/cjs/index.js"
+    },
+    "browser": {
+      "import": "./build/esm/esm.browser.js"
+    },
+    "default": "./build/dist/okta-auth-js.umd.js"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/okta/okta-auth-js.git"
@@ -20,7 +30,7 @@
     "banners": "node ./scripts/maintain-banners.js",
     "clean": "yarn clean:build",
     "clean:build": "rimraf build && rimraf build2",
-    "dev": "webpack --config webpack.dev.config.js",
+    "dev": "NODE_ENV=development yarn build:esm --watch",
     "lint": "eslint .",
     "tsd": "tsd",
     "lint:report": "eslint -f checkstyle -o ./build2/reports/lint/eslint-checkstyle-result.xml .",
@@ -36,7 +46,9 @@
     "test:report": "yarn test --ci --silent || true",
     "test:samples": "yarn workspace @okta/test.e2e.samples start",
     "test:integration": "jest --config ./jest.integration.js",
-    "test:bundle:esm": "NODE_OPTIONS=--experimental-vm-modules jest --config ./jest.esm.mjs",
+    "test:bundle:esm:browser": "cross-env BUNDLE_ENV=browser NODE_OPTIONS=--experimental-vm-modules jest --config ./jest.esm.mjs",
+    "test:bundle:esm:node": "cross-env BUNDLE_ENV=node NODE_OPTIONS=--experimental-vm-modules jest --config ./jest.esm.mjs",
+    "test:bundle:cjs": "cross-env BUNDLE_ENV=node jest --config ./jest.cjs.js",
     "build": "node scripts/build.js",
     "build:cdn": "cross-env NODE_ENV=production webpack --config webpack.cdn.config.js",
     "build:web": "cross-env NODE_ENV=production webpack --config webpack.config.js",
@@ -78,7 +90,7 @@
     "btoa": "^1.2.1",
     "core-js": "^3.6.5",
     "cross-fetch": "^3.1.5",
-    "js-cookie": "2.2.1",
+    "js-cookie": "^3.0.1",
     "jsonpath-plus": "^6.0.1",
     "node-cache": "^5.1.2",
     "p-cancelable": "^2.0.0",