Support react-router v6

CHANGELOG.md

@@ -1,3 +1,9 @@
+# 5.0.0
+
+### Features
+
+- [#26](https://github.com/okta/okta-react/pull/26) Added support for `react-router` 6 beta
+
 # 4.1.0
 
 ### Other

README.md

@@ -121,7 +121,7 @@ This example defines 3 routes:
 // src/App.js
 
 import React, { Component } from 'react';
-import { BrowserRouter as Router, Route } from 'react-router-dom';
+import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import { SecureRoute, Security, LoginCallback } from '@okta/okta-react';
 import { OktaAuth } from '@okta/okta-auth-js';
 import Home from './Home';
@@ -137,9 +137,11 @@ class App extends Component {
     return (
       <Router>
         <Security oktaAuth={oktaAuth}>
-          <Route path='/' exact={true} component={Home}/>
-          <SecureRoute path='/protected' component={Protected}/>
-          <Route path='/login/callback' component={LoginCallback} />
+          <Routes>
+            <Route path='/' element={<Home />}/>
+            <SecureRoute path='/protected/*' element={<Protected />}/>
+            <Route path='/implicit/callback' element={<LoginCallback />} />
+          </Routes>
         </Security>
       </Router>
     );
@@ -166,9 +168,11 @@ const oktaAuth = new OktaAuth({
 const App = () => (
   <Router>
     <Security oktaAuth={oktaAuth}>
-      <Route path='/' exact={true} component={Home}/>
-      <SecureRoute path='/protected' component={Protected}/>
-      <Route path='/login/callback' component={LoginCallback} />
+      <Routes>
+        <Route path='/' element={<Home />}/>
+        <SecureRoute path='/protected/*' element={<Protected />}/>
+        <Route path='/implicit/callback' element={<LoginCallback />} />
+      </Routes>
     </Security>
   </Router>
 );
@@ -345,7 +349,7 @@ export default MessageList = () => {
 #### Example
 
 ```jsx
-import { useHistory } from 'react-router-dom';
+import { useNavigate, Route, Routes, BrowserRouter as Router } from 'react-router-dom';
 import { OktaAuth } from '@okta/okta-auth-js';
 
 const oktaAuth = new OktaAuth({
@@ -355,22 +359,26 @@ const oktaAuth = new OktaAuth({
 });
 
 export default App = () => {
-  const history = useHistory();
+  const navigate = useNavigate();
 
   const customAuthHandler = (oktaAuth) => {
     // Redirect to the /login page that has a CustomLoginComponent
     // This example is specific to React-Router
-    history.push('/login');
+    navigate('/login');
   };
 
   return (
-    <Security
-      oktaAuth={oktaAuth}
-      onAuthRequired={customAuthHandler}
-    >
-      <Route path='/login' component={CustomLoginComponent}>
-      {/* some routes here */}
-    </Security>
+    <Router>
+      <Security
+        oktaAuth={oktaAuth}
+        onAuthRequired={customAuthHandler}
+      >
+        <Routes>
+          <Route path='/login' element={<CustomLoginComponent />}>
+          {/* some routes here */}
+        </Routes>
+      </Security>
+    </Router>
   );
 };
 ```
@@ -384,6 +392,7 @@ Assuming you have configured your application to allow the `Authorization code`
 
 ```jsx
 import { OktaAuth } from '@okta/okta-auth-js';
+import { Router, Route, Routes } from 'react-router-dom';
 
 const oktaAuth = new OktaAuth({
   issuer: 'https://{yourOktaDomain}.com/oauth2/default',
@@ -396,8 +405,10 @@ class App extends Component {
     return (
       <Router>
         <Security oktaAuth={oktaAuth}>
-          <Route path='/' exact={true} component={Home}/>
-          <Route path='/login/callback' component={LoginCallback} />
+          <Routes>
+            <Route path='/' element={<Home />}/>
+            <Route path='/login/callback' element={<LoginCallback />} />
+          </Routes>
         </Security>
       </Router>
     );
@@ -414,10 +425,8 @@ class App extends Component {
 
 `SecureRoute` integrates with `react-router`.  Other routers will need their own methods to ensure authentication using the hooks/HOC props provided by this SDK.
 
-As with `Route` from `react-router-dom`, `<SecureRoute>` can take one of:
-
-- a `component` prop that is passed a component
-- a `render` prop that is passed a function that returns a component.  This function will be passed any additional props that react-router injects (such as `history` or `match`)
+As with `Route` from `react-router-dom` v6, `<SecureRoute>` can take one of:
+- a `element` prop that is passed a component
 - children components
 
 ### `LoginCallback`

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okta/okta-react",
-  "version": "4.2.0",
+  "version": "5.0.0",
   "description": "React support for Okta",
   "private": true,
   "scripts": {
@@ -43,10 +43,9 @@
   },
   "peerDependencies": {
     "@okta/okta-auth-js": "^4.1.0",
-    "@types/react-router-dom": "^5.1.6",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
-    "react-router-dom": ">=5.1.0"
+    "react-router-dom": "^5.1.2 || ^6.0.0-beta.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.11.6",
@@ -63,17 +62,17 @@
     "@types/enzyme": "^3.10.8",
     "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/jest": "^26.0.15",
-    "@types/react-router-dom": "^5.1.6",
     "@typescript-eslint/eslint-plugin": "^4.8.1",
     "@typescript-eslint/parser": "^4.8.1",
     "axios": "^0.21.0",
     "babel-jest": "^26.6.3",
     "chalk": "^4.1.0",
     "dotenv": "^8.2.0",
-    "enzyme": "^3.5.1",
-    "enzyme-adapter-react-16": "^1.4.0",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.5",
     "eslint": "^7.10.0",
     "eslint-plugin-import": "^2.7.0",
+    "eslint-plugin-jasmine": "^4.1.1",
     "eslint-plugin-jest": "^24.0.2",
     "eslint-plugin-jsx-a11y": "^6.0.2",
     "eslint-plugin-node": "^11.1.0",
@@ -89,6 +88,9 @@
     "polished": "^1.7.0",
     "prop-types": "^15.5.10",
     "protractor": "^5.4.2",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
+    "react-router-dom": ">=6.0.0-beta.0",
     "rimraf": "^2.6.2",
     "rollup": "^2.33.1",
     "rollup-plugin-cleanup": "^3.2.1",
@@ -106,4 +108,4 @@
     "./",
     "test/e2e/harness"
   ]
-}
+}

src/SecureRoute.tsx

@@ -12,7 +12,11 @@
 
 import * as React from 'react';
 import { useOktaAuth, OnAuthRequiredFunction } from './OktaContext';
-import { Route, useRouteMatch, RouteProps } from 'react-router-dom';
+import { RouteProps } from 'react-router';
+import * as RR from 'react-router-dom';
+const { Route } = RR;
+// react-router v6 exports useMatch, react-router v5 exports useRouteMatch
+const useMatch = Object.entries(RR).filter(([k, _v]) => k == 'useMatch' || k == 'useRouteMatch')[0][1];
 
 const SecureRoute: React.FC<{
   onAuthRequired?: OnAuthRequiredFunction;
@@ -21,7 +25,8 @@ const SecureRoute: React.FC<{
   ...routeProps 
 }) => { 
   const { oktaAuth, authState, _onAuthRequired } = useOktaAuth();
-  const match = useRouteMatch(routeProps);
+  const { path, caseSensitive } = routeProps;
+  const match = path ? useMatch.call(null, { path, caseSensitive }) : null;
   const pendingLogin = React.useRef(false);
 
   React.useEffect(() => {

src/Security.tsx

@@ -11,7 +11,6 @@
  */
 
 import * as React from 'react';
-import { useHistory } from 'react-router-dom';
 import { toRelativeUrl, AuthSdkError, OktaAuth } from '@okta/okta-auth-js';
 import OktaContext, { OnAuthRequiredFunction } from './OktaContext';
 import OktaError from './OktaError';
@@ -24,8 +23,7 @@ const Security: React.FC<{
   oktaAuth, 
   onAuthRequired, 
   children 
-}) => { 
-  const history = useHistory();
+}) => {
   const [authState, setAuthState] = React.useState(() => {
     if (!oktaAuth) {
       return { 
@@ -46,7 +44,9 @@ const Security: React.FC<{
     // Add default restoreOriginalUri callback
     if (!oktaAuth.options.restoreOriginalUri) {
       oktaAuth.options.restoreOriginalUri = async (_, originalUri) => {
-        history.replace(toRelativeUrl(originalUri, window.location.origin));
+        //todo: use required restoreOriginalUri prop (see PR #71)
+        const relativeUrl = toRelativeUrl(originalUri, window.location.origin);
+        window.location.href = relativeUrl;
       };
     }
 
@@ -64,7 +64,7 @@ const Security: React.FC<{
     }
 
     return () => oktaAuth.authStateManager.unsubscribe();
-  }, [oktaAuth, history]);
+  }, [oktaAuth]);
 
   if (!oktaAuth) {
     const err = new AuthSdkError('No oktaAuth instance passed to Security Component.');

test/e2e/harness/package.json

@@ -10,8 +10,9 @@
     "@types/react-dom": "^16.9.9",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
-    "react-router": "^5.1.2",
-    "react-router-dom": "^5.1.2",
+    "react-router": "^6.0.0-beta.0",
+    "react-router-dom": "^6.0.0-beta.0",
+    "history": "^5.0.0",
     "react-scripts": "3.4.0"
   },
   "devDependencies": {

test/e2e/harness/src/App.tsx

@@ -11,22 +11,22 @@
  */
 
 import * as React from 'react';
-import { Route, Switch, useHistory } from 'react-router-dom';
+import { Route, Routes, useNavigate } from 'react-router-dom';
 import { OktaAuth } from '@okta/okta-auth-js';
 import { Security, LoginCallback, SecureRoute } from '@okta/okta-react';
 import Home from './Home';
 import Protected from './Protected';
 import CustomLogin from './CustomLogin';
 import SessionTokenLogin from './SessionTokenLogin';
 
-const App: React.FC<{ 
-  oktaAuth: OktaAuth, 
-  customLogin: boolean 
+const App: React.FC<{
+  oktaAuth: OktaAuth;
+  customLogin: boolean;
 }> = ({ oktaAuth, customLogin }) => {
-  const history = useHistory();
+  const navigate = useNavigate();
 
   const onAuthRequired = async () => {
-    history.push('/login');
+    navigate('/login');
   };
 
   return (
@@ -35,14 +35,14 @@ const App: React.FC<{
         oktaAuth={oktaAuth}
         onAuthRequired={customLogin ? onAuthRequired : undefined}
       >
-        <Switch>
-          <Route path='/login' component={CustomLogin}/>
-          <Route path='/sessionToken-login' component={SessionTokenLogin}/>
-          <SecureRoute exact path='/protected' component={Protected}/>
-          <Route path='/implicit/callback' component={LoginCallback} />
-          <Route path='/pkce/callback' component={LoginCallback} />
-          <Route path='/' component={Home}/>
-        </Switch>
+        <Routes>
+          <Route path='/login' element={<CustomLogin />}/>
+          <Route path='/sessionToken-login' element={<SessionTokenLogin />}/>
+          <SecureRoute path='/protected' element={<Protected />}/>
+          <Route path='/implicit/callback' element={<LoginCallback />} />
+          <Route path='/pkce/callback' element={<LoginCallback />} />
+          <Route path='/*' element={<Home />}/>
+        </Routes>
       </Security>
       <a href="/?pkce=1">PKCE Flow</a> | <a href="/">Implicit Flow</a>
     </React.StrictMode>