prep for auth-js 6.0 upgrade

OKTA-457552
<<<Jenkins Check-In of Tested SHA: 5a004af for eng_productivity_ci_bot_okta@okta.com>>>
Artifact: okta-react
Files changed count: 9
PR Link: "#191"

CHANGELOG.md

@@ -1,3 +1,9 @@
+# 6.4.0
+
+### Others
+
+- [#191](https://github.com/okta/okta-react/pull/191) Set `okta-auth-js` minimum supported version as 5.3.1, `AuthSdkError` will be rendered if oktaAuth instance cannot meet the version requirement
+
 # 6.3.0
 
 ### Features

README.md

@@ -97,7 +97,7 @@ Install peer dependencies
 npm install --save react
 npm install --save react-dom
 npm install --save react-router-dom
-npm install --save @okta/okta-auth-js
+npm install --save @okta/okta-auth-js   # requires at least version 5.3.1
 ```
 
 ## Usage

env.js

@@ -1,14 +1,11 @@
 const path = require('path');
 const dotenv = require('dotenv');
 const fs = require('fs');
-const semver = require('semver');
 
 // Read information from package.json and expose as environment variables
 const PACKAGE = require('./package.json');
 process.env.PACKAGE_NAME = PACKAGE.name;
 process.env.PACKAGE_VERSION = PACKAGE.version;
-const authJsVersion = PACKAGE.peerDependencies['@okta/okta-auth-js'];
-process.env.AUTH_JS_MAJOR_VERSION = semver.minVersion(authJsVersion).major;
 
 // Read environment variables from "testenv". Override environment vars if they are already set.
 const TESTENV = path.resolve(__dirname, 'testenv');

jest.config.js

@@ -8,6 +8,7 @@ module.exports = {
     '!./test/**'
   ],
   globals: {
+    AUTH_JS: { minSupportedVersion: '5.3.1' },
     'ts-jest': {
       diagnostics: {
         warnOnly: true

package.json

@@ -70,6 +70,7 @@
     "axios": "^0.21.0",
     "babel-jest": "^26.6.3",
     "chalk": "^4.1.0",
+    "compare-versions": "^4.1.2",
     "dotenv": "^8.2.0",
     "enzyme": "^3.5.1",
     "enzyme-adapter-react-16": "^1.4.0",
@@ -95,7 +96,6 @@
     "rollup-plugin-cleanup": "^3.2.1",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.29.0",
-    "semver": "^7.3.5",
     "shelljs": "^0.8.4",
     "ts-jest": "^26.4.4",
     "typescript": "^4.0.5"
@@ -112,4 +112,4 @@
     "test/e2e/harness",
     "test/e2e-samples"
   ]
-}
+}

rollup.config.js

@@ -33,7 +33,9 @@ const commonPlugins = [
   replace({
     'process.env.PACKAGE_NAME': JSON.stringify(process.env.PACKAGE_NAME),
     'process.env.PACKAGE_VERSION': JSON.stringify(process.env.PACKAGE_VERSION),
-    'process.env.AUTH_JS_MAJOR_VERSION': JSON.stringify(process.env.AUTH_JS_MAJOR_VERSION)
+    'AUTH_JS': JSON.stringify({
+      minSupportedVersion: '5.3.1'
+    })
   }),
   cleanup({ 
     extensions,

src/Security.tsx

@@ -14,6 +14,11 @@ import * as React from 'react';
 import { AuthSdkError, AuthState, OktaAuth } from '@okta/okta-auth-js';
 import OktaContext, { OnAuthRequiredFunction, RestoreOriginalUriFunction } from './OktaContext';
 import OktaError from './OktaError';
+import { compare as compareVersions } from 'compare-versions';
+
+declare const AUTH_JS: {
+  minSupportedVersion: string;
+}
 
 const Security: React.FC<{
   oktaAuth: OktaAuth,
@@ -32,15 +37,6 @@ const Security: React.FC<{
     }
     return oktaAuth.authStateManager.getAuthState();
   });
-  const [oktaAuthMajorVersion] = React.useState(() => {
-    if (!oktaAuth || !oktaAuth._oktaUserAgent) {
-      return null;
-    }
-
-    const oktaAuthVersion = oktaAuth._oktaUserAgent.getVersion();
-    const majorVersion = oktaAuthVersion?.split('.')[0];
-    return majorVersion;
-  });
 
   React.useEffect(() => {
     if (!oktaAuth || !restoreOriginalUri) {
@@ -87,11 +83,20 @@ const Security: React.FC<{
     return <OktaError error={err} />;
   }
 
-  if (oktaAuthMajorVersion !== process.env.AUTH_JS_MAJOR_VERSION 
-      // use SKIP_VERSION_CHECK flag to control version check in tests
-      && process.env.SKIP_VERSION_CHECK !== '1') {
-    const err = new AuthSdkError(`Passed in oktaAuth is not compatible with the SDK, okta-auth-js version ${process.env.AUTH_JS_MAJOR_VERSION}.x is the current supported version.`);
-    return <OktaError error={err} />;
+  if (!oktaAuth._oktaUserAgent) {
+    console.warn('_oktaUserAgent is not available on auth SDK instance. Please use okta-auth-js@^5.3.1 .');
+  }
+  else {
+    // use SKIP_VERSION_CHECK flag to control version check in tests
+    const isAuthJsSupported = process.env.SKIP_VERSION_CHECK === '1' ||
+      compareVersions(oktaAuth._oktaUserAgent.getVersion(), AUTH_JS.minSupportedVersion, '>=');
+    if (!isAuthJsSupported) {
+      const err = new AuthSdkError(`
+        Passed in oktaAuth is not compatible with the SDK,
+        minimum supported okta-auth-js version is ${AUTH_JS.minSupportedVersion}.
+      `);
+      return <OktaError error={err} />;
+    }
   }
 
   return (

test/jest/security.test.tsx

@@ -73,42 +73,56 @@ describe('<Security />', () => {
   });
 
   describe('throws version not match error', () => {
+    let originalConsole;
+
     // turn off SKIP_VERSION_CHECK to test the functionality
     beforeEach(() => {
       process.env.SKIP_VERSION_CHECK = '0';
+
+      originalConsole = global.console;
+      global.console = {
+        ...originalConsole,
+        warn: jest.fn()
+      };
     });
     afterEach(() => {
       process.env.SKIP_VERSION_CHECK = '1';
+      global.console = originalConsole;
     });
-    it('throws runtime error when passed in authJS version not match version from deps list', () => {
-      oktaAuth.userAgent = 'okta-auth-js/9999.0.0'; // intentional large mock version
+    it('throws runtime error when passed in authJS version is too low', () => {
+      const oktaAuthWithMismatchingSDKVersion = {
+        ...oktaAuth,
+        _oktaUserAgent: {
+          addEnvironment: jest.fn(),
+          getVersion: jest.fn().mockReturnValue('1.0.0') // intentional large mock version
+        }
+      };
+
       const mockProps = {
-        oktaAuth,
+        oktaAuth: oktaAuthWithMismatchingSDKVersion,
         restoreOriginalUri
       };
-      // mock auth-js version from dependencies
-      process.env.AUTH_JS_MAJOR_VERSION = '5';
+
       const wrapper = mount(<Security {...mockProps} />);
-      expect(wrapper.find(Security).html()).toBe(`<p>AuthSdkError: Passed in oktaAuth is not compatible with the SDK, okta-auth-js version 5.x is the current supported version.</p>`);
+      expect(wrapper.find(Security).text().trim()).toBe(`AuthSdkError: 
+        Passed in oktaAuth is not compatible with the SDK,
+        minimum supported okta-auth-js version is 5.3.1.`
+      );
     });
 
-    it('can get okta-auth version from _oktaUserAgent property', () => {
+    it('logs a warning when _oktaUserAgent is not available', () => {
       const oktaAuthWithMismatchingSDKVersion = {
         ...oktaAuth,
-        _oktaUserAgent: {
-          addEnvironment: jest.fn(),
-          getVersion: jest.fn().mockReturnValue('okta-auth-js/9999.0.0') // intentional large mock version
-        }
+        _oktaUserAgent: undefined
       };
 
       const mockProps = {
         oktaAuth: oktaAuthWithMismatchingSDKVersion,
         restoreOriginalUri
       };
-      // mock auth-js version from dependencies
-      process.env.AUTH_JS_MAJOR_VERSION = '5';
-      const wrapper = mount(<Security {...mockProps} />);
-      expect(wrapper.find(Security).html()).toBe(`<p>AuthSdkError: Passed in oktaAuth is not compatible with the SDK, okta-auth-js version 5.x is the current supported version.</p>`);
+
+      mount(<Security {...mockProps} />);
+      expect(global.console.warn).toHaveBeenCalledWith('_oktaUserAgent is not available on auth SDK instance. Please use okta-auth-js@^5.3.1 .');
     });
   });
 

yarn.lock

@@ -5337,6 +5337,11 @@ commondir@^1.0.1:
   resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
   integrity sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=
 
+compare-versions@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/compare-versions/-/compare-versions-4.1.2.tgz#a7b1678c897000d03a70a0e01efee43e7b04dda7"
+  integrity sha512-LAfbAbAgjnIwPsr2fvJLfrSyqAhK5nj/ffIg7a5aigry9RXJfNzVnOu0Egw8Z+G8LMDu1Qig2q48bpBzjyjZoQ==
+
 component-emitter@^1.2.1:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.3.0.tgz#16e4070fba8ae29b679f2215853ee181ab2eabc0"