Removes oktaAuth.stop() from <Security>

OKTA-492710
<<<Jenkins Check-In of Tested SHA: a418c19 for [email protected]>>>
Artifact: okta-react
Files changed count: 21
PR Link: #233

CHANGELOG.md

@@ -1,3 +1,13 @@
+# 6.5.0
+
+### Others
+
+- [#233](https://github.com/okta/okta-react/pull/233) 
+  - Removes `oktaAuth.stop()` from `<Security>`
+  - Removes `oktaAuth.start()` from `<LoginCallback>` after `handleLoginRedirect()`
+  - Fixes `useEffect` hook in `<Security>` - don't watch for `restoreOriginalUri` prop to perform side effects (start, subscribe, unsubscribe) on `oktaAuth`
+  - Upgrades internal dependencies
+
 # 6.4.3
 
 ### Bug Fixes

README.md

@@ -437,7 +437,7 @@ export default App = () => {
 
 Assuming you have configured your application to allow the `Authorization code` grant type, you can implement the [PKCE flow](https://github.com/okta/okta-auth-js#pkce) with the following steps:
 
-- Initialize [oktaAuth](Okta Auth SDK) instance (with default PKCE configuration as `true`) and pass it to the `Security` component.
+- Initialize [oktaAuth][Okta Auth SDK] instance (with default PKCE configuration as `true`) and pass it to the `Security` component.
 - add `/login/callback` route with [LoginCallback](#logincallback) component to handle login redirect from OKTA.
 
 ```jsx

generator/_templates/samples/config/new/package.json.t

@@ -38,7 +38,7 @@ force: true
     "@okta/okta-react": "*"
   },
   "devDependencies": {
-    "@vitejs/plugin-react": "^1.0.7",
+    "@vitejs/plugin-react": "^1.3.2",
     "vite": "^2.8.0",
     "dotenv": "^16.0.0"
   }

generator/package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "gulp": "^4.0.2",
-    "hygen": "^6.1.0",
+    "hygen": "^6.2.0",
     "gulp-clean": "^0.4.0",
     "gulp-rename": "^2.0.0",
     "merge-stream": "^2.0.0",

package.json

@@ -62,7 +62,7 @@
     "@babel/preset-env": "^7.11.5",
     "@babel/preset-react": "^7.10.4",
     "@babel/register": "^7.12.1",
-    "@okta/okta-auth-js": "^6.1.0",
+    "@okta/okta-auth-js": "^6.5.1",
     "@rollup/plugin-babel": "^5.2.1",
     "@rollup/plugin-replace": "^2.3.4",
     "@testing-library/jest-dom": "^5.16.2",
@@ -83,7 +83,7 @@
     "enzyme-adapter-react-16": "^1.4.0",
     "eslint": "^7.10.0",
     "eslint-import-resolver-typescript": "^2.5.0",
-    "eslint-plugin-import": "^2.7.0",
+    "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jest": "^24.0.2",
     "eslint-plugin-jsx-a11y": "^6.0.2",
     "eslint-plugin-node": "^11.1.0",

src/LoginCallback.tsx

@@ -33,11 +33,7 @@ const LoginCallback: React.FC<LoginCallbackProps> = ({ errorComponent, loadingEl
       onAuthResume();
       return;
     }
-    oktaAuth.handleLoginRedirect().then(() => {
-      // In `<Security>` component service was not started in case of login redirect.
-      // Start it now after `restoreOriginalUri` has been called and route changed.
-      oktaAuth.start();
-    }).catch(e => {
+    oktaAuth.handleLoginRedirect().catch(e => {
       setCallbackError(e);
     });
   }, [oktaAuth]);

src/Security.tsx

@@ -55,6 +55,13 @@ const Security: React.FC<{
       restoreOriginalUri(oktaAuth as OktaAuth, originalUri);
     }) as ((oktaAuth: OktaAuth, originalUri?: string) => Promise<void>);
 
+  }, [oktaAuth, restoreOriginalUri]);
+
+  React.useEffect(() => {
+    if (!oktaAuth) {
+      return;
+    }
+
     // Add okta-react userAgent
     if (oktaAuth._oktaUserAgent) {
       oktaAuth._oktaUserAgent.addEnvironment(`${PACKAGE_NAME}/${PACKAGE_VERSION}`);
@@ -63,6 +70,10 @@ const Security: React.FC<{
     }
 
     // Update Security provider with latest authState
+    const currentAuthState = oktaAuth.authStateManager.getAuthState();
+    if (currentAuthState !== authState) {
+      setAuthState(currentAuthState);
+    }
     const handler = (authState: AuthState) => {
       setAuthState(authState);
     };
@@ -73,9 +84,8 @@ const Security: React.FC<{
 
     return () => {
       oktaAuth.authStateManager.unsubscribe(handler);
-      oktaAuth.stop();
     };
-  }, [oktaAuth, restoreOriginalUri]);
+  }, [oktaAuth]);
 
   if (!oktaAuth) {
     const err = new AuthSdkError('No oktaAuth instance passed to Security Component.');

test/apps/test-harness-app/package.json

@@ -13,13 +13,13 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "5.2.0",
-    "@okta/okta-auth-js": "^6.1.0",
+    "@okta/okta-auth-js": "^6.5.1",
     "@okta/okta-react": "*"
   },
   "devDependencies": {
     "@types/react": "^17.0.33",
     "@types/react-dom": "^17.0.10",
-    "@vitejs/plugin-react": "^1.0.7",
+    "@vitejs/plugin-react": "^1.3.2",
     "typescript": "^4.5.4",
     "vite": "^2.8.0"
   }

test/jest/loginCallback.test.tsx

@@ -59,7 +59,7 @@ describe('<LoginCallback />', () => {
     expect(wrapper.text()).toBe('');
   });
 
-  it('calls handleLoginRedirect when authState is resolved', () => {
+  it('calls handleLoginRedirect when authState is resolved', async () => {
     authState = {
       isAuthorized: true
     }
@@ -70,6 +70,8 @@ describe('<LoginCallback />', () => {
       </Security>
     );
     expect(oktaAuth.handleLoginRedirect).toHaveBeenCalledTimes(1);
+    await Promise.resolve();
+    expect(oktaAuth.start).toHaveBeenCalledTimes(1);
   });
 
   describe('shows errors', () => {