Decouple Security from react-router [OKTA-333775]

- Added required prop `restoreOriginalUri` to `Security`
- Updated readme with setting `restoreOriginalUri` callback for `react-router`

Author: denysoblohin-okta

CHANGELOG.md

@@ -1,3 +1,9 @@
+# 5.0.0
+
+### Breaking Changes
+
+- [#71](https://github.com/okta/okta-react/pull/71) Adds required prop `restoreOriginalUri` to `Security` that will override `restoreOriginalUri` callback of `oktaAuth`
+
 # 4.1.0
 
 ### Other

README.md

@@ -121,40 +121,51 @@ 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, withRouter } from 'react-router-dom';
 import { SecureRoute, Security, LoginCallback } from '@okta/okta-react';
-import { OktaAuth } from '@okta/okta-auth-js';
+import { OktaAuth, toRelativeUrl } from '@okta/okta-auth-js';
 import Home from './Home';
 import Protected from './Protected';
 
-const oktaAuth = new OktaAuth({
-  issuer: 'https://{yourOktaDomain}.com/oauth2/default',
-  clientId: '{clientId}',
-  redirectUri: window.location.origin + '/login/callback'
-});
 class App extends Component {
+  constructor(props) {
+    super(props);
+    this.oktaAuth = new OktaAuth({
+      issuer: 'https://{yourOktaDomain}.com/oauth2/default',
+      clientId: '{clientId}',
+      redirectUri: window.location.origin + '/login/callback'
+    });
+    this.restoreOriginalUri = async (_oktaAuth, originalUri) => {
+      props.history.replace(toRelativeUrl(originalUri, window.location.origin));
+    };
+  }
+
   render() {
     return (
-      <Router>
-        <Security oktaAuth={oktaAuth}>
-          <Route path='/' exact={true} component={Home}/>
-          <SecureRoute path='/protected' component={Protected}/>
-          <Route path='/login/callback' component={LoginCallback} />
-        </Security>
-      </Router>
+      <Security oktaAuth={this.oktaAuth} restoreOriginalUri={this.restoreOriginalUri} >
+        <Route path='/' exact={true} component={Home} />
+        <SecureRoute path='/protected' component={Protected} />
+        <Route path='/login/callback' component={LoginCallback} />
+      </Security>
     );
   }
 }
 
-export default App;
+const AppWithRouterAccess = withRouter(App);
+export default class extends Component {
+  render() {
+    return (<Router><AppWithRouterAccess/></Router>);
+  }
+}
 ```
 
 #### Creating React Router Routes with function-based components
 
 ```jsx
 import React from 'react';
 import { SecureRoute, Security, LoginCallback } from '@okta/okta-react';
-import { OktaAuth } from '@okta/okta-auth-js';
+import { OktaAuth, toRelativeUrl } from '@okta/okta-auth-js';
+import { useHistory } from 'react-router-dom';
 import Home from './Home';
 import Protected from './Protected';
 
@@ -163,15 +174,23 @@ const oktaAuth = new OktaAuth({
   clientId: '{clientId}',
   redirectUri: window.location.origin + '/login/callback'
 });
-const App = () => (
-  <Router>
-    <Security oktaAuth={oktaAuth}>
-      <Route path='/' exact={true} component={Home}/>
-      <SecureRoute path='/protected' component={Protected}/>
-      <Route path='/login/callback' component={LoginCallback} />
-    </Security>
-  </Router>
-);
+
+const App = () => {
+  const history = useHistory();
+  const restoreOriginalUri = async (_oktaAuth, originalUri) => {
+    history.replace(toRelativeUrl(originalUri, window.location.origin));
+  };
+
+  return (
+    <Router>
+      <Security oktaAuth={oktaAuth} restoreOriginalUri={restoreOriginalUri}>
+        <Route path='/' exact={true} component={Home} />
+        <SecureRoute path='/protected' component={Protected} />
+        <Route path='/login/callback' component={LoginCallback} />
+      </Security>
+    </Router>
+  );
+};
 
 export default App;
 ```
@@ -338,6 +357,10 @@ export default MessageList = () => {
 
 *(required)* The pre-initialized [oktaAuth][Okta Auth SDK] instance. See [Configuration Reference](https://github.com/okta/okta-auth-js#configuration-reference) for details of how to initialize the instance.
 
+#### restoreOriginalUri
+
+*(required)* Callback function. Called to restore original () during [oktaAuth.handleLoginRedirect()](https://github.com/okta/okta-auth-js#handleloginredirecttokens) is called. Will override [restoreOriginalUri option of oktaAuth](https://github.com/okta/okta-auth-js#restoreoriginaluri)
+
 #### onAuthRequired
 
 *(optional)* Callback function. Called when authentication is required. If this is not supplied, `okta-react` redirects to Okta. This callback will receive [oktaAuth][Okta Auth SDK] instance as the first function parameter. This is triggered when a [SecureRoute](#secureroute) is accessed without authentication. A common use case for this callback is to redirect users to a custom login route when authentication is required for a [SecureRoute](#secureroute).
@@ -346,7 +369,7 @@ export default MessageList = () => {
 
 ```jsx
 import { useHistory } from 'react-router-dom';
-import { OktaAuth } from '@okta/okta-auth-js';
+import { OktaAuth, toRelativeUrl } from '@okta/okta-auth-js';
 
 const oktaAuth = new OktaAuth({
   issuer: 'https://{yourOktaDomain}.com/oauth2/default',
@@ -363,10 +386,15 @@ export default App = () => {
     history.push('/login');
   };
 
+  const restoreOriginalUri = async (_oktaAuth, originalUri) => {
+    history.replace(toRelativeUrl(originalUri, window.location.origin));
+  };
+
   return (
     <Security
       oktaAuth={oktaAuth}
       onAuthRequired={customAuthHandler}
+      restoreOriginalUri={restoreOriginalUri}
     >
       <Route path='/login' component={CustomLoginComponent}>
       {/* some routes here */}
@@ -395,8 +423,8 @@ class App extends Component {
   render() {
     return (
       <Router>
-        <Security oktaAuth={oktaAuth}>
-          <Route path='/' exact={true} component={Home}/>
+        <Security oktaAuth={oktaAuth} restoreOriginalUri={restoreOriginalUri}>
+          <Route path='/' exact={true} component={Home} />
           <Route path='/login/callback' component={LoginCallback} />
         </Security>
       </Router>
@@ -452,6 +480,39 @@ export default MyComponent = () => {
 
 ## Migrating between versions
 
+### Migrating from 4.x to 5.x
+
+From version 5.0, the Security component explicitly requires prop [restoreOriginalUri](#restoreoriginaluri) to decouple from `react-router`. 
+Example of implementation of this callback for `react-router`:
+
+```jsx
+import { Security } from '@okta/okta-react';
+import { useHistory } from 'react-router-dom';
+import { OktaAuth, toRelativeUrl } from '@okta/okta-auth-js';
+
+const oktaAuth = new OktaAuth({
+  issuer: 'https://{yourOktaDomain}.com/oauth2/default',
+  clientId: '{clientId}',
+  redirectUri: window.location.origin + '/login/callback'
+});
+
+export default App = () => {
+  const history = useHistory();
+  const restoreOriginalUri = async (_oktaAuth, originalUri) => {
+    history.replace(toRelativeUrl(originalUri, window.location.origin));
+  };
+
+  return (
+    <Security
+      oktaAuth={oktaAuth}
+      restoreOriginalUri={restoreOriginalUri}
+    >
+      {/* some routes here */}
+    </Security>
+  );
+};
+```
+
 ### Migrating from 3.x to 4.x
 
 #### Updating the Security component

src/OktaContext.ts

@@ -14,6 +14,8 @@ import { AuthState, OktaAuth } from '@okta/okta-auth-js';
 
 export type OnAuthRequiredFunction = (oktaAuth: OktaAuth) => Promise<void> | void;
 
+export type RestoreOriginalUriFunction = (oktaAuth: OktaAuth, originalUri: string) => Promise<void> | void;
+
 export interface IOktaContext {
     oktaAuth: OktaAuth;
     authState: AuthState;

src/Security.tsx

@@ -11,21 +11,21 @@
  */
 
 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 { AuthSdkError, OktaAuth } from '@okta/okta-auth-js';
+import OktaContext, { OnAuthRequiredFunction, RestoreOriginalUriFunction } from './OktaContext';
 import OktaError from './OktaError';
 
 const Security: React.FC<{
-  oktaAuth: OktaAuth, 
+  oktaAuth: OktaAuth,
+  restoreOriginalUri: RestoreOriginalUriFunction, 
   onAuthRequired?: OnAuthRequiredFunction,
   children?: React.ReactNode
 } & React.HTMLAttributes<HTMLDivElement>> = ({ 
-  oktaAuth, 
+  oktaAuth,
+  restoreOriginalUri, 
   onAuthRequired, 
-  children 
+  children
 }) => { 
-  const history = useHistory();
   const [authState, setAuthState] = React.useState(() => {
     if (!oktaAuth) {
       return { 
@@ -39,16 +39,17 @@ const Security: React.FC<{
   });
 
   React.useEffect(() => {
-    if (!oktaAuth) {
+    if (!oktaAuth || !restoreOriginalUri) {
       return;
     }
 
     // Add default restoreOriginalUri callback
-    if (!oktaAuth.options.restoreOriginalUri) {
-      oktaAuth.options.restoreOriginalUri = async (_, originalUri) => {
-        history.replace(toRelativeUrl(originalUri, window.location.origin));
-      };
+    if (oktaAuth.options.restoreOriginalUri && restoreOriginalUri) {
+      console.warn('Two custom restoreOriginalUri callbacks are detected. The one from the OktaAuth configuration will be overridden by the provided restoreOriginalUri prop from the Security component.');
     }
+    oktaAuth.options.restoreOriginalUri = async (oktaAuth: any, originalUri: string) => {
+      restoreOriginalUri(oktaAuth, originalUri);
+    };
 
     // Add okta-react userAgent
     oktaAuth.userAgent = `${process.env.PACKAGE_NAME}/${process.env.PACKAGE_VERSION} ${oktaAuth.userAgent}`;
@@ -64,13 +65,18 @@ const Security: React.FC<{
     }
 
     return () => oktaAuth.authStateManager.unsubscribe();
-  }, [oktaAuth, history]);
+  }, [oktaAuth, restoreOriginalUri]);
 
   if (!oktaAuth) {
     const err = new AuthSdkError('No oktaAuth instance passed to Security Component.');
     return <OktaError error={err} />;
   }
 
+  if (!restoreOriginalUri) {
+    const err = new AuthSdkError('No restoreOriginalUri callback passed to Security Component.');
+    return <OktaError error={err} />;
+  }
+
   return (
     <OktaContext.Provider value={{ 
       oktaAuth, 

test/e2e/harness/src/App.tsx

@@ -12,7 +12,7 @@
 
 import * as React from 'react';
 import { Route, Switch, useHistory } from 'react-router-dom';
-import { OktaAuth } from '@okta/okta-auth-js';
+import { OktaAuth, toRelativeUrl } from '@okta/okta-auth-js';
 import { Security, LoginCallback, SecureRoute } from '@okta/okta-react';
 import Home from './Home';
 import Protected from './Protected';
@@ -29,11 +29,16 @@ const App: React.FC<{
     history.push('/login');
   };
 
+  const restoreOriginalUri = async (_oktaAuth: OktaAuth, originalUri: string) => {
+    history.replace(toRelativeUrl(originalUri, window.location.origin));
+  };
+
   return (
     <React.StrictMode>
       <Security
         oktaAuth={oktaAuth}
         onAuthRequired={customLogin ? onAuthRequired : undefined}
+        restoreOriginalUri={restoreOriginalUri}
       >
         <Switch>
           <Route path='/login' component={CustomLogin}/>

test/jest/loginCallback.test.tsx

@@ -19,6 +19,9 @@ describe('<LoginCallback />', () => {
   let oktaAuth;
   let authState;
   let mockProps;
+  const restoreOriginalUri = async (_, url) => {
+    location.href = url;
+  };
   beforeEach(() => {
     authState = {
       isPending: true
@@ -33,7 +36,10 @@ describe('<LoginCallback />', () => {
       isLoginRedirect: jest.fn().mockImplementation(() => false),
       handleLoginRedirect: jest.fn()
     };
-    mockProps = { oktaAuth };
+    mockProps = {
+      oktaAuth, 
+      restoreOriginalUri
+    };
   });
 
   it('renders the component', () => {

test/jest/secureRoute.test.tsx

@@ -13,14 +13,17 @@
 import * as React from 'react';
 import { mount } from 'enzyme';
 import { act } from 'react-dom/test-utils';
-import { MemoryRouter, Route } from 'react-router-dom';
+import { MemoryRouter, Route, RouteProps } from 'react-router-dom';
 import SecureRoute from '../../src/SecureRoute';
 import Security from '../../src/Security';
 
 describe('<SecureRoute />', () => {
   let oktaAuth;
   let authState;
   let mockProps;
+  const restoreOriginalUri = async (_, url) => {
+    location.href = url;
+  };
 
   beforeEach(() => {
     authState = {
@@ -39,7 +42,10 @@ describe('<SecureRoute />', () => {
       signInWithRedirect: jest.fn(),
       setOriginalUri: jest.fn()
     };
-    mockProps = { oktaAuth };
+    mockProps = {
+      oktaAuth, 
+      restoreOriginalUri
+    };
   });
 
   describe('With changing authState', () => {
@@ -305,7 +311,8 @@ describe('<SecureRoute />', () => {
         </MemoryRouter>
       );
       const secureRoute = wrapper.find(SecureRoute);
-      expect(secureRoute.find(Route).props().exact).toBe(true);
+      const props: RouteProps = secureRoute.find(Route).props();
+      expect(props.exact).toBe(true);
       expect(wrapper.find(MyComponent).html()).toBe('<div>hello world</div>');
     });
 
@@ -322,7 +329,8 @@ describe('<SecureRoute />', () => {
         </MemoryRouter>
       );
       const secureRoute = wrapper.find(SecureRoute);
-      expect(secureRoute.find(Route).props().strict).toBe(true);
+      const props: RouteProps = secureRoute.find(Route).props();
+      expect(props.strict).toBe(true);
       expect(wrapper.find(MyComponent).html()).toBe('<div>hello world</div>');
     });
 
@@ -339,7 +347,8 @@ describe('<SecureRoute />', () => {
         </MemoryRouter>
       );
       const secureRoute = wrapper.find(SecureRoute);
-      expect(secureRoute.find(Route).props().sensitive).toBe(true);
+      const props: RouteProps = secureRoute.find(Route).props();
+      expect(props.sensitive).toBe(true);
       expect(wrapper.find(MyComponent).html()).toBe('<div>hello world</div>');
     });