fix: Prevents useEffect double render in React18 StrictMode (#266)

OKTA-635977 Prevents useEffect double render in React18 StrictMode

CHANGELOG.md

@@ -1,3 +1,9 @@
+# 6.8.0
+
+### Bug Fixes
+
+-[#266](https://github.com/okta/okta-react/pull/266) Fixes useEffect double render in React18 StrictMode
+
 # 6.7.0
 
 -[#248](https://github.com/okta/okta-react/pull/248) Adds support for `@okta/okta-auth-js` `7.x`

jest.config.js

@@ -9,13 +9,7 @@ module.exports = {
     AUTH_JS: { minSupportedVersion: '5.3.1' },
     PACKAGE_NAME: 'okta-react-test',
     PACKAGE_VERSION: '3.14.15',
-    SKIP_VERSION_CHECK: '1',
-    'ts-jest': {
-      diagnostics: {
-        warnOnly: true
-      },
-      tsconfig: '<rootDir>/test/jest/tsconfig.json'
-    }
+    SKIP_VERSION_CHECK: '1'
   },
   reporters: [
     'default',
@@ -35,5 +29,13 @@ module.exports = {
     './test/jest/setup.ts'
   ],
   testEnvironment: 'jsdom',
-  transform: { '^.+\\.tsx?$': 'ts-jest' },
+  transform: { 
+    '^.+\\.tsx?$': ['ts-jest', {
+      diagnostics: {
+        warnOnly: true
+      },
+      tsconfig: '<rootDir>/test/jest/tsconfig.json',
+      isolatedModules: true
+    }] 
+  },
 };

package.json

@@ -68,7 +68,7 @@
     "@testing-library/react": "^12.1.3",
     "@types/enzyme": "^3.10.8",
     "@types/enzyme-adapter-react-16": "^1.0.6",
-    "@types/jest": "^27.4.1",
+    "@types/jest": "^29.5.4",
     "@types/react": "^16.9.0",
     "@types/react-dom": "^16.9.0",
     "@types/react-router-dom": "^5.1.6",
@@ -91,7 +91,8 @@
     "globby": "^11.0.1",
     "jasmine-core": "~2.6.2",
     "jasmine-spec-reporter": "~4.1.0",
-    "jest": "^27.5.1",
+    "jest": "^29.6.4",
+    "jest-environment-jsdom": "^29.6.4",
     "jest-junit": "^13.0.0",
     "polished": "^1.7.0",
     "prop-types": "^15.5.10",
@@ -104,7 +105,7 @@
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.29.0",
     "shelljs": "^0.8.5",
-    "ts-jest": "^27.1.4",
+    "ts-jest": "^29.1.1",
     "typescript": "^4.0.5"
   },
   "jest-junit": {

scripts/lint.sh

@@ -1,4 +1,4 @@
-#!/bin/bash -xe
+#!/bin/bash -x
 
 source ${OKTA_HOME}/${REPO}/scripts/setup.sh
 

scripts/publish.sh

@@ -1,4 +1,4 @@
-#!/bin/bash -xe
+#!/bin/bash -x
 
 source ${OKTA_HOME}/${REPO}/scripts/setup.sh
 

scripts/setup.sh

@@ -1,4 +1,4 @@
-#!/bin/bash -xe
+#!/bin/bash -x
 
 DIR=$(cd -- "$( dirname -- "${BASH_SOURCE[0]}" )" &> /dev/null && pwd)
 source $DIR/utils/local.sh

src/LoginCallback.tsx

@@ -20,6 +20,8 @@ interface LoginCallbackProps {
   loadingElement?: React.ReactElement;
 }
 
+let handledRedirect = false;
+
 const LoginCallback: React.FC<LoginCallbackProps> = ({ errorComponent, loadingElement = null, onAuthResume }) => { 
   const { oktaAuth, authState } = useOktaAuth();
   const [callbackError, setCallbackError] = React.useState(null);
@@ -33,9 +35,14 @@ const LoginCallback: React.FC<LoginCallbackProps> = ({ errorComponent, loadingEl
       onAuthResume();
       return;
     }
-    oktaAuth.handleLoginRedirect().catch(e => {
-      setCallbackError(e);
-    });
+    // OKTA-635977: Prevents multiple calls of handleLoginRedirect() in React18 StrictMode
+    // Top-level variable solution follows: https://react.dev/learn/you-might-not-need-an-effect#initializing-the-application
+    if (!handledRedirect) {
+      oktaAuth.handleLoginRedirect().catch(e => {
+        setCallbackError(e);
+      })
+      handledRedirect = true;
+    }
   }, [oktaAuth]);
 
   const authError = authState?.error;

test/apps/test-harness-app/.env.development

@@ -0,0 +1,2 @@
+# Forces Vite to run a development build: https://vitejs.dev/guide/env-and-mode.html#modes
+NODE_ENV=development

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

@@ -4,21 +4,23 @@
   "version": "0.0.0",
   "scripts": {
     "prestart": "vite build",
-    "start": "vite preview --port 8080", 
+    "start": "vite preview --port 8080",
+    "start:dev": "vite build --mode development && vite preview --port 8080",
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-router-dom": "5.2.0",
     "@okta/okta-auth-js": "*",
     "@okta/okta-react": "*"
   },
   "devDependencies": {
-    "@types/react": "^17.0.33",
-    "@types/react-dom": "^17.0.10",
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
+    "@types/react-router-dom": "^5.3.3",
     "@vitejs/plugin-react": "^1.3.2",
     "typescript": "^4.5.4",
     "vite": "^2.8.0"

test/apps/test-harness-app/src/App.tsx

@@ -59,6 +59,14 @@ const App: React.FC<{
               {...props} 
               onAuthResume={ onAuthResume } 
               loadingElement={ <p id='login-callback-loading'>Loading...</p> }
+              errorComponent={(props: any) => {
+                const { error } = props;
+                return (
+                  <p id='login-callback-error'>
+                    {error?.name}:{error?.message}
+                  </p>
+                );
+              }}
             />
           } />
           <Route path='/' component={Home} />

test/apps/test-harness-app/src/index.tsx

@@ -11,7 +11,7 @@
  */
 
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { OktaAuth } from '@okta/okta-auth-js';
 import './index.css';
 import App from './App';
@@ -35,9 +35,10 @@ const oktaAuth = new OktaAuth({
   pkce
 });
 
-ReactDOM.render(
+const container = document.getElementById('root')
+
+createRoot(container!).render(
   <Router>
     <App oktaAuth={oktaAuth} customLogin={customLogin} baseUrl={baseUrl} />
   </Router>
-  , document.getElementById('root')
 );

test/apps/v6-app/.env.development

@@ -0,0 +1,2 @@
+# Forces Vite to run a development build: https://vitejs.dev/guide/env-and-mode.html#modes
+NODE_ENV=development

test/apps/v6-app/package.json

@@ -5,20 +5,22 @@
   "scripts": {
     "prestart": "vite build",
     "start": "vite preview --port 8080", 
+    "start:dev": "vite build --mode development && vite preview --port 8080",
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-router-dom": "6.3.0",
     "@okta/okta-auth-js": "*",
     "@okta/okta-react": "*"
   },
   "devDependencies": {
-    "@types/react": "^17.0.33",
-    "@types/react-dom": "^17.0.10",
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
+    "@types/react-router-dom": "^5.3.3",
     "@vitejs/plugin-react": "^1.3.2",
     "typescript": "^4.5.4",
     "vite": "^2.8.0"

test/apps/v6-app/src/App.tsx

@@ -55,10 +55,23 @@ const App: React.FC<{
             <Route path='' element={<Protected />} />
           </Route>
           <Route path='/implicit/callback' element={<LoginCallback />} />
-          <Route path='/pkce/callback' element={<LoginCallback 
-              onAuthResume={ onAuthResume } 
-              loadingElement={ <p id='login-callback-loading'>Loading...</p> }
-            />}/>
+          <Route 
+            path='/pkce/callback' 
+            element={
+              <LoginCallback 
+                  onAuthResume={ onAuthResume } 
+                  loadingElement={ <p id='login-callback-loading'>Loading...</p> }
+                  errorComponent={(props: any) => {
+                    const { error } = props;
+                    return (
+                      <p id='login-callback-error'>
+                        {error?.name}:{error?.message}
+                      </p>
+                    );
+                  }}
+                />
+              }
+          />
           <Route path='/' element={<Home />} />
         </Routes>
       </Security>

test/apps/v6-app/src/index.tsx

@@ -11,7 +11,7 @@
  */
 
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { OktaAuth } from '@okta/okta-auth-js';
 import './index.css';
 import App from './App';
@@ -35,9 +35,10 @@ const oktaAuth = new OktaAuth({
   pkce
 });
 
-ReactDOM.render(
+const container = document.getElementById('root')
+
+createRoot(container!).render(
   <Router>
     <App oktaAuth={oktaAuth} customLogin={customLogin} baseUrl={baseUrl} />
   </Router>
-  , document.getElementById('root')
 );

test/e2e/page-objects/test-harness-app/login-callback-page.js

@@ -16,6 +16,7 @@
 class LoginCallbackPage {
 
   get loadingElement () { return $('#login-callback-loading'); }
+  get errorElement () { return $('#login-callback-error'); }
 
   waitForPageLoad() {
     return this.loadingElement.waitForDisplayed();

test/e2e/runner.js

@@ -32,14 +32,17 @@ function runNextTask(tasks) {
 
 function runWithConfig(sampleConfig) {
   return new Promise((resolve) => {
-    const { name } = sampleConfig;
+    const { name, mode } = sampleConfig;
     const port = sampleConfig.port || 8080;
+    // OKTA-635977: Adds a mode flag to configs to determine whether to build in prod or dev, can be extended from a ternary
+    // if testing against other build modes becomes necessary. Defaults to building in prod via 'yarn start'
+    const command = mode ? `start:${mode}` : 'start'
 
     // 1. start the sample's web server
     const server = spawn('yarn', [
       'workspace',
       name,
-      'start'
+      command
     ], { stdio: 'inherit' });
 
     waitOn({
@@ -79,7 +82,7 @@ function runHarnessTests () {
   const config = {
     name: '@okta/test.app.test-harness-app',
     specs: ['test-harness-app'],
-    port: 8080
+    mode: 'dev'
   }
 
   return runWithConfig(config);

test/e2e/specs/test-harness-app.js

@@ -108,6 +108,29 @@ describe('React + Okta App', () => {
     });
   });
 
+  describe('React18 StrictMode double render', () => {
+    it('should only call handleLoginRedirect() once on render', async () => {
+      await AppPage.open('/?pkce=1');
+
+      await AppPage.waitForPageLoad();
+      expect(await AppPage.loginFlow.getText()).toBe('PKCE');
+      await AppPage.loginButton.click();
+
+      await OktaSignInPage.waitForPageLoad();
+      await OktaSignInPage.login(USERNAME, PASSWORD);
+
+      // OKTA-635977: Expect that the loading element in LoginCallback gets rendered to the page instead of the ErrorComponent
+      await LoginCallbackPage.waitForPageLoad();
+      expect (await LoginCallbackPage.errorElement.waitForExist({ reverse: true })).toBeTruthy();
+
+      await AppPage.waitForPageLoad();
+      expect(await AppPage.logoutButton.isExisting()).toBeTruthy();
+
+      await AppPage.logoutButton.click();
+      await AppPage.waitForLogout();
+    })
+  })
+
   describe('Okta session token flow', () => {
 
     it('should allow passing sessionToken to skip Okta login', async () => {