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 `<Secure>` container
+  - `<LoginCallback>` acts like a container, can render children on a page that is not a login callback
+  - Adds new hooks: `useAuthRequired`, `useLoginCallback`
+  - Adds new HOCs: `withAuthRequired`, `withLoginCallback`
+  - 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'

package.json

@@ -13,11 +13,25 @@
     "start": "yarn workspace @okta/test.app.test-harness-app start",
     "test": "yarn lint && yarn test:unit && yarn test:e2e",
     "test:e2e": "yarn workspace @okta/test.e2e test",
-    "test:unit": "jest",
+    "test:unit": "yarn workspace @okta/test.unit test",
     "bundle": "rollup -c",
     "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,7 +66,9 @@
   "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": {
@@ -71,7 +87,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 +102,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 +113,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 +133,8 @@
       "samples/**/*",
       "samples/routing/**/*",
       "test/apps/*",
-      "test/e2e"
+      "test/e2e",
+      "test/jest"
     ],
     "nohoist": [
       "**/@wdio/**",
@@ -132,7 +147,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 />

samples/routing/reach-router/src/components/Routes.tsx

@@ -11,24 +11,20 @@
  */
 
 import React from 'react';
-import { Router, RouteComponentProps } from '@reach/router';
-import { LoginCallback } from '@okta/okta-react';
-import { SecureRoutes } from './SecureRoutes';
+import { Router } from '@reach/router';
+import { LoginCallback, Secure } from '@okta/okta-react';
 
 import Home from '../pages/Home';
 import Protected from '../pages/Protected';
-import Loading from './Loading';
-
-const OktaLoginCallback: React.FC<RouteComponentProps> = () => (<LoginCallback loadingElement={<Loading />} />);
 
 const AppRoutes = () => {
   return (
     <Router>
       <Home path='/' />
-      <OktaLoginCallback path='login/callback' />
-      <SecureRoutes path='protected'>
+      <LoginCallback path='login/callback' />
+      <Secure path='protected'>
         <Protected path='/' />
-      </SecureRoutes>
+      </Secure>
     </Router>
   );
 };