Add new API for react-router 6

CHANGELOG.md

@@ -1,3 +1,23 @@
+# 7.0.0
+
+### Breaking Changes
+
+- [#274](https://github.com/okta/okta-react/pull/274)
+  - `SecureRoute` should be imported from `@okta/okta-react/react-router-5`
+  - `react-router-dom` is optional dependency
+
+### Features
+
+- [#274](https://github.com/okta/okta-react/pull/274) Adds new API for integration with `react-router 6.x`
+  - Adds new `<AuthRequired>` container
+  - `<LoginCallback>` acts like a container, can render children on a page that is not a login callback
+  - Adds new hook: `useAuthRequired`
+  - Adds new HOC: `withAuthRequired`
+  - Adds new utils: `getRelativeUri`, `waitForAuthenticated`
+  - `<Security>` accepts props `errorComponent` and `loadingElement`
+  - `<Security>` checks the login callback to be called on the login redirect page
+  - Updated routing samples. Adds new sample `react-router-dom-v6-data` for new routers with Data APIs
+
 # 6.8.0
 
 ### Bug Fixes

build.js

@@ -35,13 +35,21 @@ delete packageJSON.scripts; // remove all scripts
 delete packageJSON.jest; // remove jest section
 delete packageJSON['jest-junit']; // remove jest-junit section
 delete packageJSON.workspaces; // remove yarn workspace section
+delete packageJSON.devDependencies;
 
 // Remove "build/" from the entrypoint paths.
 ['main', 'module', 'types'].forEach(function(key) {
   if (packageJSON[key]) { 
     packageJSON[key] = packageJSON[key].replace(`${NPM_DIR}/`, '');
   }
 });
+['.', './react-router-5'].forEach(function(name) {
+  ['types', 'import', 'require', 'default'].forEach(function(key) {
+    if (packageJSON['exports'][name][key]) {
+      packageJSON['exports'][name][key] = packageJSON['exports'][name][key].replace(`${NPM_DIR}/`, '');
+    }
+  });
+});
 
 fs.writeFileSync(`./${NPM_DIR}/package.json`, JSON.stringify(packageJSON, null, 4));
 

generator/_templates/samples/config/new/package.json.t

@@ -15,8 +15,8 @@ force: true
     "preview": "vite preview"
   },
   "dependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
 <% if (reactRouterDomVersion !== 'false') { -%>
     "react-router-dom": "<%= reactRouterDomVersion %>",
 <% } -%>

generator/config.js

@@ -61,7 +61,7 @@ module.exports = [
     useSiw: false,
     useSemanticUi: false,
     usePolyfill: false,
-    reactRouterDomVersion: '6.2.1',
+    reactRouterDomVersion: '6.22.0',
     reachRouterVersion: false,
     specs: [
       'router-sample'
@@ -73,7 +73,19 @@ module.exports = [
     useSiw: false,
     useSemanticUi: false,
     usePolyfill: false,
-    reactRouterDomVersion: '6.2.1',
+    reactRouterDomVersion: '6.22.0',
+    reachRouterVersion: false,
+    specs: [
+      'router-sample'
+    ]
+  },
+  {
+    name: '@okta/samples.react.react-router-dom-v6-data',
+    nested: 'routing/',
+    useSiw: false,
+    useSemanticUi: false,
+    usePolyfill: false,
+    reactRouterDomVersion: '6.22.0',
     reachRouterVersion: false,
     specs: [
       'router-sample'
@@ -109,7 +121,7 @@ module.exports = [
     useSiw: false,
     useSemanticUi: false,
     usePolyfill: false,
-    reactRouterDomVersion: '5.3.0',
+    reactRouterDomVersion: false,
     reachRouterVersion: "^1.3.4",
     specs: [
       'router-sample'

jest.config.js

@@ -1,9 +1,21 @@
+/*!
+ * Copyright (c) 2017-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.
+ */
+
 module.exports = {
   coverageDirectory: '<rootDir>/test-reports/coverage',
   collectCoverage: true,
   collectCoverageFrom: [
-    './src/**',
-    '!./test/**'
+    'src/**',
+    '!src/.eslintrc.*',
   ],
   globals: {
     AUTH_JS: { minSupportedVersion: '5.3.1' },
@@ -13,20 +25,29 @@ module.exports = {
   },
   reporters: [
     'default',
-    'jest-junit'
+    ['jest-junit', {
+      outputDirectory: '<rootDir>/test-reports/unit',
+      outputName: 'junit-result.xml'
+    }]
   ],
   restoreMocks: true,
   moduleNameMapper: {
+    '^@okta/okta-react$': '<rootDir>/src',
+    '^@okta/okta-react/react-router-5$': '<rootDir>/src/react-router-5.ts',
     // avoid react conflict in yarn workspace
     '^react$': '<rootDir>/node_modules/react',
     '^react-dom$': '<rootDir>/node_modules/react-dom',
-    '^react-router-dom$': '<rootDir>/node_modules/react-router-dom'
+    '^react-router-dom$': '<rootDir>/node_modules/react-router-dom5'
   },
-  roots: [
-    './test/jest'
+  rootDir: '.',
+  testMatch: [
+    '**/test/jest/specs/*.test.*',
+  ],
+  modulePathIgnorePatterns: [
+    '<rootDir>/dist/'
   ],
   setupFiles: [
-    './test/jest/setup.ts'
+    '<rootDir>/test/jest/support/setup.ts'
   ],
   testEnvironment: 'jsdom',
   transform: { 

package.json

@@ -18,6 +18,20 @@
     "dev": "yarn bundle --watch",
     "generate": "yarn --cwd generator install && yarn --cwd generator generate"
   },
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./dist/bundles/types/index.d.ts",
+      "import": "./dist/bundles/okta-react.esm.js",
+      "require": "./dist/bundles/okta-react.cjs.js",
+      "default": "./dist/bundles/okta-react.umd.js"
+    },
+    "./react-router-5": {
+      "types": "./dist/bundles/types/react-router-5.d.ts",
+      "import": "./dist/bundles/okta-react-router-5.esm.js",
+      "require": "./dist/bundles/okta-react-router-5.cjs.js"
+    }
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/okta/okta-react.git"
@@ -52,10 +66,13 @@
   "peerDependencies": {
     "@okta/okta-auth-js": "^5.3.1 || ^6.0.0 || ^7.0.0",
     "react": ">=16.8.0",
-    "react-dom": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "optionalDependencies": {
     "react-router-dom": ">=5.1.0"
   },
   "devDependencies": {
+    "react-router-dom5": "npm:react-router-dom@^5.2.0",
     "@babel/cli": "^7.19.3",
     "@babel/core": "^7.19.3",
     "@babel/plugin-transform-runtime": "^7.19.1",
@@ -71,7 +88,6 @@
     "@types/jest": "^29.5.4",
     "@types/react": "^16.9.0",
     "@types/react-dom": "^16.9.0",
-    "@types/react-router-dom": "^5.1.6",
     "@typescript-eslint/eslint-plugin": "^4.8.1",
     "@typescript-eslint/parser": "^4.8.1",
     "axios": "^0.27.2",
@@ -87,7 +103,7 @@
     "eslint-plugin-jsx-a11y": "^6.0.2",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-react": "^7.3.0",
-    "eslint-plugin-react-hooks": "^2.5.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "globby": "^11.0.1",
     "jasmine-core": "~2.6.2",
     "jasmine-spec-reporter": "~4.1.0",
@@ -98,7 +114,6 @@
     "prop-types": "^15.5.10",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
-    "react-router-dom": "5.2.0",
     "rimraf": "^2.6.2",
     "rollup": "^2.33.1",
     "rollup-plugin-cleanup": "^3.2.1",
@@ -119,7 +134,8 @@
       "samples/**/*",
       "samples/routing/**/*",
       "test/apps/*",
-      "test/e2e"
+      "test/e2e",
+      "test/jest"
     ],
     "nohoist": [
       "**/@wdio/**",
@@ -132,7 +148,9 @@
       "**/@types/react/**",
       "**/@types/react-dom",
       "**/@types/react-dom/**",
-      "**/@types/react-router-dom"
+      "**/@types/react-router-dom",
+      "**/@reach/router/",
+      "**/@reach/router/**"
     ]
   }
 }

rollup.config.js

@@ -10,6 +10,9 @@ const makeExternalPredicate = () => {
   const externalArr = [
     ...Object.keys(pkg.peerDependencies || {}),
     ...Object.keys(pkg.dependencies || {}),
+    // for SecureRoute:
+    ...Object.keys(pkg.optionalDependencies || {}),
+    '@okta/okta-react',
   ];
 
   if (externalArr.length === 0) {
@@ -72,7 +75,8 @@ export default [
       globals: {
         'react': 'React',
         'react-router-dom': 'ReactRouterDOM',
-        '@okta/okta-auth-js': 'OktaAuth'
+        '@okta/okta-auth-js': 'OktaAuth',
+        'compare-versions': 'compareVersions',
       }
     }
   },
@@ -107,5 +111,37 @@ export default [
         sourcemap: true
       }
     ]
+  },
+  {
+    input: 'src/react-router-5.ts',
+    external,
+    plugins: [
+      ...commonPlugins,
+      babel({
+        babelHelpers: 'runtime',
+        presets: [
+          '@babel/preset-env',
+          '@babel/preset-react'
+        ],
+        plugins: [
+          '@babel/plugin-transform-runtime'
+        ],
+        extensions
+      }),
+    ],
+    output: [
+      {
+        format: 'cjs',
+        file: 'dist/bundles/okta-react-router-5.cjs.js',
+        exports: 'named',
+        sourcemap: true
+      },
+      {
+        format: 'esm',
+        file: 'dist/bundles/okta-react-router-5.esm.js',
+        exports: 'named',
+        sourcemap: true
+      }
+    ]
   }
 ];

samples/custom-login/src/App.jsx

@@ -13,7 +13,8 @@
 import React from 'react';
 import { Route, useHistory, Switch } from 'react-router-dom';
 import { OktaAuth, toRelativeUrl } from '@okta/okta-auth-js';
-import { Security, SecureRoute, LoginCallback } from '@okta/okta-react';
+import { Security, LoginCallback } from '@okta/okta-react';
+import { SecureRoute } from '@okta/okta-react/react-router-5';
 import { Container } from 'semantic-ui-react';
 import config from './config';
 import Home from './Home';

samples/doc-direct-auth/src/App.jsx

@@ -12,7 +12,8 @@
 
 import React from 'react';
 import { Route, useHistory } from 'react-router-dom';
-import { Security, SecureRoute, LoginCallback } from '@okta/okta-react';
+import { Security, LoginCallback } from '@okta/okta-react';
+import { SecureRoute } from '@okta/okta-react/react-router-5';
 import { OktaAuth, toRelativeUrl } from '@okta/okta-auth-js';
 import Home from './Home';
 import Login from './Login';

samples/doc-embedded-widget/src/App.jsx

@@ -12,7 +12,8 @@
 
 import React from 'react';
 import { Route, useHistory } from 'react-router-dom';
-import { Security, SecureRoute, LoginCallback } from '@okta/okta-react';
+import { Security, LoginCallback } from '@okta/okta-react';
+import { SecureRoute } from '@okta/okta-react/react-router-5';
 import { OktaAuth, toRelativeUrl } from '@okta/okta-auth-js';
 import Home from './Home';
 import Login from './Login';

samples/okta-hosted-login/src/App.jsx

@@ -13,7 +13,8 @@
 import React from 'react';
 import { Route, useHistory, Switch } from 'react-router-dom';
 import { OktaAuth, toRelativeUrl } from '@okta/okta-auth-js';
-import { Security, SecureRoute, LoginCallback } from '@okta/okta-react';
+import { Security, LoginCallback } from '@okta/okta-react';
+import { SecureRoute } from '@okta/okta-react/react-router-5';
 import { Container } from 'semantic-ui-react';
 import config from './config';
 import Home from './Home';

samples/routing/reach-router/src/App.tsx

@@ -13,23 +13,24 @@
 import React from 'react';
 
 import { navigate } from '@reach/router';
-import { Security } from '@okta/okta-react';
-import { OktaAuth, toRelativeUrl } from '@okta/okta-auth-js';
+import { Security, getRelativeUri } from '@okta/okta-react';
+import { OktaAuth } from '@okta/okta-auth-js';
 import config from './config';
 
 import Footer from './components/Footer';
 import Nav from './components/Nav';
 import Routes from './components/Routes';
+import Loading from './components/Loading';
 
 const oktaAuth = new OktaAuth(config.oidc);
 
 function App() {
-  const restoreOriginalUri = (_oktaAuth: any,  originalUri: string) => {
-    navigate(toRelativeUrl(originalUri || '/', window.location.origin), { replace: true });
-  };
+  const restoreOriginalUri = React.useCallback((_oktaAuth: any,  originalUri: string) => {
+    navigate(getRelativeUri(originalUri), { replace: true });
+  }, [navigate]);
 
   return (
-    <Security oktaAuth={oktaAuth} restoreOriginalUri={restoreOriginalUri}>
+    <Security oktaAuth={oktaAuth} restoreOriginalUri={restoreOriginalUri} loadingElement={<Loading />}>
       <div className="App">
         <header className="App-header">
           <Nav />