chore: update auth-js to 4.8.0

aarongranick-okta · eng-prod-CI-bot-okta · commit 67626d12fcc1 · 2021-04-02T23:54:17.000Z
feat: adds handling of interaction_required error updates CHANGELOG and README for onAuthResume fix linting remove stale debugging updates README OKTA-360883 <<<Jenkins Check-In of Tested SHA: 2918f28 for eng_productivity_ci_bot_okta@okta.com>>> Artifact: okta-react
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,8 @@
+# 5.1.0
+
+### Features
+- [#104](https://github.com/okta/okta-react/pull/104) Adds support for `onAuthResume` to `LoginCallback` for `interaction_required` OAuth errors (requires okta-auth-js 4.8+)
+
 # 5.0.0
 
 ### Breaking Changes
diff --git a/README.md b/README.md
@@ -1,4 +1,5 @@
 [Okta Auth SDK]: https://github.com/okta/okta-auth-js
+[Okta SignIn Widget]: https://github.com/okta/okta-signin-widget
 [AuthState]: https://github.com/okta/okta-auth-js#authstatemanager
 [react-router]: https://github.com/ReactTraining/react-router
 [reach-router]: https://reach.tech/router
@@ -476,6 +477,40 @@ As with `Route` from `react-router-dom`, `<SecureRoute>` can take one of:
 
 `LoginCallback` handles the callback after the redirect to and back from the Okta-hosted login page. By default, it parses the tokens from the uri, stores them, then redirects to `/`. If a `SecureRoute` caused the redirect, then the callback redirects to the secured route. For more advanced cases, this component can be copied to your own source tree and modified as needed.
 
+#### errorComponent
+
+By default, LoginCallback will display any errors from `authState.error`.  If you wish to customise the display of such error messages, you can pass your own component as an `errorComponent` prop to `<LoginCallback>`.  The `authState.error` value will be passed to the `errorComponent` as the `error` prop.
+
+#### onAuthResume
+
+When an external auth (such as a social IDP) redirects back to your application AND your Okta sign-in policies require additional authentication factors before authentication is complete, the redirect to your application redirectUri callback will be an `interaction_required` error.  
+
+An `interaction_required` error is an indication that you should resume the authentication flow.  You can pass an `onAuthResume` function as a prop to `<LoginCallback>`, and the `<LoginCallback>` will call the `onAuthResume` function when an `interaction_required` error is returned to the redirectUri of your application.  
+
+If using the [Okta SignIn Widget][], redirecting to your login route will allow the widget to automatically resume your authentication transaction.
+
+```jsx
+// Example assumes you are using react-router with a customer-hosted Okta SignIn Widget on your /login route
+// This code is wherever you have your <Security> component, which must be inside your <Router> for react-router
+  const onAuthResume = async () => { 
+    history.push('/login');
+  };
+
+return (
+  <Security
+    oktaAuth={oktaAuth}
+    restoreOriginalUri={restoreOriginalUri}
+  >
+    <Switch>
+      <SecureRoute path='/protected' component={Protected} />
+      <Route path='/login/callback' render={ (props) => <LoginCallback {...props} onAuthResume={ onAuthResume } /> } />
+      <Route path='/login' component={CustomLogin} />
+      <Route path='/' component={Home} />
+    </Switch>
+  </Security>
+);
+```
+
 ### `withOktaAuth`
 
 `withOktaAuth` is a [higher-order component][] which injects an [oktaAuth][Okta Auth SDK] instance and an [authState][AuthState] object as props into the component. Function-based components will want to use the `useOktaAuth` hook instead.  These props provide a way for components to make decisions based on [authState][AuthState] or to call [Okta Auth SDK][] methods, such as `.signInWithRedirect()` or `.signOut()`.  Components wrapped in `withOktaAuth()` need to be a child or descendant of a `<Security>` component to have the necessary context.
diff --git a/package.json b/package.json
@@ -39,10 +39,10 @@
     "yarn": "^1.7.0"
   },
   "dependencies": {
-    "@babel/runtime": "^7.11.2"
+    "@babel/runtime": "^7.11.2",
+    "@okta/okta-auth-js": "^4.8.0"
   },
   "peerDependencies": {
-    "@okta/okta-auth-js": "^4.1.0",
     "@types/react-router-dom": "^5.1.6",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
@@ -57,7 +57,6 @@
     "@babel/preset-env": "^7.11.5",
     "@babel/preset-react": "^7.10.4",
     "@babel/register": "^7.12.1",
-    "@okta/okta-auth-js": "^4.1.2",
     "@rollup/plugin-babel": "^5.2.1",
     "@rollup/plugin-replace": "^2.3.4",
     "@types/enzyme": "^3.10.8",
diff --git a/src/LoginCallback.tsx b/src/LoginCallback.tsx
@@ -11,19 +11,28 @@
  */
 
 import * as React from 'react';
-import { useOktaAuth } from './OktaContext';
+import { useOktaAuth, OnAuthResumeFunction } from './OktaContext';
 import OktaError from './OktaError';
 
 const LoginCallback: React.FC<{ 
-  errorComponent?: React.ComponentType<{ error: Error }>
-}> = ({ errorComponent }) => { 
+  errorComponent?: React.ComponentType<{ error: Error }>,
+  onAuthResume?: OnAuthResumeFunction,
+}> = ({ errorComponent, onAuthResume }) => { 
   const { oktaAuth, authState } = useOktaAuth();
   const authStateReady = !authState.isPending;
-
   const ErrorReporter = errorComponent || OktaError;
 
   React.useEffect(() => {
-    oktaAuth.handleLoginRedirect();
+
+    if (onAuthResume && oktaAuth.isInteractionRequired?.() ) {
+      onAuthResume();
+      return;
+    }
+    oktaAuth.handleLoginRedirect()
+    .catch( err => { 
+      console.log(err); //TODO: handle these errors OKTA-361608
+    });  
+
   }, [oktaAuth]);
 
   if(authStateReady && authState.error) { 
diff --git a/src/OktaContext.ts b/src/OktaContext.ts
@@ -13,6 +13,7 @@ import * as React from 'react';
 import { AuthState, OktaAuth } from '@okta/okta-auth-js';
 
 export type OnAuthRequiredFunction = (oktaAuth: OktaAuth) => Promise<void> | void;
+export type OnAuthResumeFunction = () => void;
 
 export type RestoreOriginalUriFunction = (oktaAuth: OktaAuth, originalUri: string) => Promise<void> | void;
 
diff --git a/src/SecureRoute.tsx b/src/SecureRoute.tsx
@@ -55,6 +55,7 @@ const SecureRoute: React.FC<{
     if(!authState.isAuthenticated && !authState.isPending) { 
       handleLogin();
     }  
+
   }, [
     authState.isPending, 
     authState.isAuthenticated, 
diff --git a/test/e2e/harness/package.json b/test/e2e/harness/package.json
@@ -3,7 +3,7 @@
   "version": "0.0.8",
   "private": true,
   "dependencies": {
-    "@okta/okta-auth-js": "^4.1.2",
+    "@okta/okta-auth-js": "^4.8.0",
     "@okta/okta-react": "*",
     "@types/node": "^14.14.7",
     "@types/react": "^16.9.56",
diff --git a/test/e2e/harness/public/index.html b/test/e2e/harness/public/index.html
@@ -20,6 +20,8 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>React App</title>
+    <script src="https://global.oktacdn.com/okta-signin-widget/5.4.0/js/okta-sign-in.min.js" type="text/javascript"></script>
+    <link href="https://global.oktacdn.com/okta-signin-widget/5.4.0/css/okta-sign-in.min.css" type="text/css" rel="stylesheet"/>
   </head>
   <body>
     <noscript>
diff --git a/test/e2e/harness/src/App.tsx b/test/e2e/harness/src/App.tsx
@@ -17,18 +17,24 @@ import { Security, LoginCallback, SecureRoute } from '@okta/okta-react';
 import Home from './Home';
 import Protected from './Protected';
 import CustomLogin from './CustomLogin';
+import WidgetLogin from './WidgetLogin';
 import SessionTokenLogin from './SessionTokenLogin';
 
 const App: React.FC<{ 
   oktaAuth: OktaAuth, 
-  customLogin: boolean 
-}> = ({ oktaAuth, customLogin }) => {
+  customLogin: boolean, 
+  baseUrl: string,
+}> = ({ oktaAuth, customLogin, baseUrl }) => {
   const history = useHistory();
 
   const onAuthRequired = async () => {
     history.push('/login');
   };
 
+  const onAuthResume = async () => { 
+    history.push('/widget-login');
+  };
+
   const restoreOriginalUri = async (_oktaAuth: OktaAuth, originalUri: string) => {
     history.replace(toRelativeUrl(originalUri, window.location.origin));
   };
@@ -41,12 +47,13 @@ const App: React.FC<{
         restoreOriginalUri={restoreOriginalUri}
       >
         <Switch>
-          <Route path='/login' component={CustomLogin}/>
-          <Route path='/sessionToken-login' component={SessionTokenLogin}/>
-          <SecureRoute exact path='/protected' component={Protected}/>
+          <Route path='/login' component={CustomLogin} />
+          <Route path='/widget-login' render={ (props) => <WidgetLogin {...props} baseUrl={baseUrl} /> }/>
+          <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}/>
+          <Route path='/pkce/callback' render={ (props) => <LoginCallback {...props} onAuthResume={ onAuthResume } /> } />
+          <Route path='/' component={Home} />
         </Switch>
       </Security>
       <a href="/?pkce=1">PKCE Flow</a> | <a href="/">Implicit Flow</a>
diff --git a/test/e2e/harness/src/Home.tsx b/test/e2e/harness/src/Home.tsx
@@ -44,6 +44,7 @@ const Home: React.FC = () => {
       <Link to='/'>Home</Link><br/>
       <Link to='/protected'>Protected</Link><br/>
       <Link to='/sessionToken-login'>Session Token Login</Link><br/>
+      <Link to='/widget-login'>Widget Login</Link><br/>
       {button}
       { authState.isAuthenticated ? <button id="renew-id-token-button" onClick={renewToken('idToken')}>Renew ID Token</button> : null }
       { authState.isAuthenticated ? <button id="renew-access-token-button" onClick={renewToken('accessToken')}>Renew Access Token</button> : null }
diff --git a/test/e2e/harness/src/WidgetLogin.tsx b/test/e2e/harness/src/WidgetLogin.tsx
@@ -0,0 +1,64 @@
+/*
+ * Copyright (c) 2018, 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.
+ */
+import * as React from 'react';
+import { useOktaAuth } from '@okta/okta-react';
+
+declare global {
+  // TODO: Remove "any"s once widget has TS definitions
+  interface Window { OktaSignIn: any } // eslint-disable-line @typescript-eslint/no-explicit-any
+}
+
+const WidgetLogin: React.FC<{
+  baseUrl: string,
+}> = (baseUrl) => {
+  const { oktaAuth } = useOktaAuth();
+  const widgetRef = React.useRef<HTMLDivElement | null>(null);
+
+  React.useEffect( () => {
+    if (!widgetRef.current) {
+      return;
+    }
+
+    const widget = new window.OktaSignIn({
+      baseUrl,
+      authClient: oktaAuth, // Note: the interactionCodeFlow below requires PKCE enabled on the authClient 
+      useInteractionCodeFlow: true, // Set to true, if your org is OIE enabled
+    });
+
+    widget.on('afterError', (context: any) => { // eslint-disable-line @typescript-eslint/no-explicit-any
+      console.log({ context });
+      // The Widget is ready for user input
+    });
+
+    widget.renderEl(
+      { el: widgetRef.current },
+      (res: any) => { // eslint-disable-line @typescript-eslint/no-explicit-any
+        console.log(res);
+        oktaAuth.handleLoginRedirect(res.tokens);
+      },
+      (err: any) => { // eslint-disable-line @typescript-eslint/no-explicit-any
+        console.log({ err });  
+        throw err;
+      },
+    );
+
+    return () => widget.remove();
+  }, [oktaAuth, baseUrl]);
+
+  return (
+    <div>
+      <p>Note: Requires interaction code flow and PKCE</p>
+      <div ref={widgetRef} />
+    </div>
+  );
+};
+export default WidgetLogin;
diff --git a/test/e2e/harness/src/index.tsx b/test/e2e/harness/src/index.tsx
@@ -26,6 +26,7 @@ const url = new URL(window.location.href);
 const pkce = !!url.searchParams.get('pkce') || url.pathname.indexOf('pkce/callback') >= 0;
 const redirectUri = window.location.origin + (pkce ? '/pkce/callback' : '/implicit/callback');
 const customLogin = !!url.searchParams.get('customLogin');
+const baseUrl =  ISSUER?.split('/oauth2')[0] || 'ISSUER-NOT-SUPPLIED';
 
 const oktaAuth = new OktaAuth({
   issuer: ISSUER,
@@ -36,7 +37,7 @@ const oktaAuth = new OktaAuth({
 
 ReactDOM.render(
   <Router>
-    <App oktaAuth={oktaAuth} customLogin={customLogin} />
+    <App oktaAuth={oktaAuth} customLogin={customLogin} baseUrl={baseUrl} />
   </Router>
   , document.getElementById('root')
 );
diff --git a/test/jest/loginCallback.test.tsx b/test/jest/loginCallback.test.tsx
@@ -34,7 +34,8 @@ describe('<LoginCallback />', () => {
         updateAuthState: jest.fn(),
       },
       isLoginRedirect: jest.fn().mockImplementation(() => false),
-      handleLoginRedirect: jest.fn()
+      isInteractionRequired: jest.fn().mockImplementation( () => false ),
+      handleLoginRedirect: jest.fn().mockImplementation( () => Promise.resolve() ),
     };
     mockProps = {
       oktaAuth, 
@@ -114,6 +115,39 @@ describe('<LoginCallback />', () => {
       expect(wrapper.text()).toBe('Override: errorData');
     });
 
+    it('will not trigger a passed onAuthResume when isInteractionRequired is false', () => { 
+      const resumeFunction = jest.fn();
+      const wrapper = mount(
+        <Security {...mockProps}>
+          <LoginCallback onAuthResume={resumeFunction}/>
+        </Security>
+      );
+      expect(resumeFunction).not.toHaveBeenCalled();
+      expect(wrapper.text()).toBe('');
+    });
+
+    it('will trigger a passed onAuthResume function when isInteractionRequired is true', () => {
+      oktaAuth.isInteractionRequired = jest.fn().mockImplementation( () => true );
+      const resumeFunction = jest.fn();
+      const wrapper = mount(
+        <Security {...mockProps}>
+          <LoginCallback onAuthResume={resumeFunction}/>
+        </Security>
+      );
+      expect(resumeFunction).toHaveBeenCalled();
+      expect(wrapper.text()).toBe(''); // no output since we expect to be redirected
+    });
+
+    it('will treat isInteractionRequired like a normal error if not onAuthResume is passed', () => { 
+      oktaAuth.isInteractionRequired = jest.fn().mockImplementation( () => true );
+      const wrapper = mount(
+        <Security {...mockProps}>
+          <LoginCallback />
+        </Security>
+      );
+      expect(wrapper.text()).toBe(''); // TODO: should be noticed as an error OKTA-361608
+    });
+
   });
 
 });
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -55,6 +55,7 @@ const SecureRoute: React.FC<{`
`55`	`55`	`if(!authState.isAuthenticated && !authState.isPending) {`
`56`	`56`	`handleLogin();`
`57`	`57`	`}`
	`58`	`+`
`58`	`59`	`}, [`
`59`	`60`	`authState.isPending,`
`60`	`61`	`authState.isAuthenticated,`