fix: catch / display error on login callback

OKTA-361608
<<<Jenkins Check-In of Tested SHA: abdaaf9 for [email protected]>>>
Artifact: okta-react

src/LoginCallback.tsx

@@ -19,24 +19,24 @@ const LoginCallback: React.FC<{
   onAuthResume?: OnAuthResumeFunction,
 }> = ({ errorComponent, onAuthResume }) => { 
   const { oktaAuth, authState } = useOktaAuth();
+  const [callbackError, setCallbackError] = React.useState(null);
+
   const authStateReady = !authState.isPending;
   const ErrorReporter = errorComponent || OktaError;
-
   React.useEffect(() => {
-
     if (onAuthResume && oktaAuth.isInteractionRequired?.() ) {
       onAuthResume();
       return;
     }
-    oktaAuth.handleLoginRedirect()
-    .catch( err => { 
-      console.log(err); //TODO: handle these errors OKTA-361608
-    });  
-
+    oktaAuth.handleLoginRedirect().catch(e => {
+      setCallbackError(e);
+    });
   }, [oktaAuth]);
 
-  if(authStateReady && authState.error) { 
-    return <ErrorReporter error={authState.error}/>;
+  const authError = authStateReady ? authState.error : null;
+  const displayError = callbackError || authError;
+  if (displayError) { 
+    return <ErrorReporter error={displayError}/>;
   }
 
   return null;

test/jest/loginCallback.test.tsx

@@ -12,6 +12,7 @@
 
 import * as React from 'react';
 import { mount } from 'enzyme';
+import { act } from 'react-dom/test-utils';
 import LoginCallback from '../../src/LoginCallback';
 import Security from '../../src/Security';
 
@@ -138,16 +139,44 @@ describe('<LoginCallback />', () => {
       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 );
+    it('renders errors caught from handleLoginRedirect', async () => {
+      const errorMsg = 'error on callback';
+      authState.isPending = true;
+      authState.isAuthenticated = false;
+      oktaAuth.handleLoginRedirect.mockImplementation(() => {
+        return Promise.reject(new Error(errorMsg));
+      });
       const wrapper = mount(
         <Security {...mockProps}>
           <LoginCallback />
         </Security>
       );
-      expect(wrapper.text()).toBe(''); // TODO: should be noticed as an error OKTA-361608
+      return await act(async () => {
+        await wrapper.update(); // set state
+        await wrapper.update(); // render error
+        expect(wrapper.text()).toBe('Error: ' + errorMsg);
+      });
     });
 
+    it('will treat isInteractionRequired like a normal error if not onAuthResume is passed', async () => { 
+      oktaAuth.isInteractionRequired = jest.fn().mockImplementation( () => true );
+      const errorMsg = 'error on callback';
+      authState.isPending = true;
+      authState.isAuthenticated = false;
+      oktaAuth.handleLoginRedirect.mockImplementation(() => {
+        return Promise.reject(new Error(errorMsg));
+      });
+      const wrapper = mount(
+        <Security {...mockProps}>
+          <LoginCallback />
+        </Security>
+      );
+      return await act(async () => {
+        await wrapper.update(); // set state
+        await wrapper.update(); // render error
+        expect(wrapper.text()).toBe('Error: ' + errorMsg);
+      });
+    });
   });
 
 });

yarn.lock

@@ -4186,9 +4186,9 @@ create-hmac@^1.1.0, create-hmac@^1.1.4, create-hmac@^1.1.7:
     sha.js "^2.4.8"
 
 cross-fetch@^3.0.6:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.1.3.tgz#b8e7d5f19161c4a0ca916f707978848786043afb"
-  integrity sha512-2i6v88DTqVBNODyjD9U6Ycn/uSZNvyHe25cIbo2fFnAACAsaLTJsd23miRWiR5NuiGXR9wpJ9d40/9WAhjDIrw==
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.1.4.tgz#9723f3a3a247bf8b89039f3a380a9244e8fa2f39"
+  integrity sha512-1eAtFWdIubi6T4XPy6ei9iUFoKpUkIF971QLN8lIvvvwueI65+Nw5haMNKUwfJxabqlIIDODJKGrQ66gxC0PbQ==
   dependencies:
     node-fetch "2.6.1"