Avoid potential multiple invocations of loginWithRedirect (#311)

* Avoid potential multiple invocations of loginWithRedirect Resolves auth0/auth0-react#309 * add test to assert single call * remove comment
rahat862 · Dec 23, 2021 · 2739605 · 2739605
1 parent dc73c75
commit 2739605
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 2 deletions.
diff --git a/__tests__/with-authentication-required.test.tsx b/__tests__/with-authentication-required.test.tsx
@@ -189,4 +189,27 @@ describe('withAuthenticationRequired', () => {
       )
     );
   });
+
+  it('should call loginWithRedirect only once even if parent state changes', async () => {
+    mockClient.getUser.mockResolvedValue(undefined);
+    const MyComponent = (): JSX.Element => <>Private</>;
+    const WrappedComponent = withAuthenticationRequired(MyComponent);
+    const App = ({ foo }: { foo: number }): JSX.Element => (
+      <div>
+        {foo}
+        <Auth0Provider clientId="__test_client_id__" domain="__test_domain__">
+          <WrappedComponent />
+        </Auth0Provider>
+      </div>
+    );
+    const { rerender } = render(<App foo={1} />);
+    await waitFor(() =>
+      expect(mockClient.loginWithRedirect).toHaveBeenCalled()
+    );
+    mockClient.loginWithRedirect.mockClear();
+    rerender(<App foo={2} />);
+    await waitFor(() =>
+      expect(mockClient.loginWithRedirect).not.toHaveBeenCalled()
+    );
+  });
 });
diff --git a/src/with-authentication-required.tsx b/src/with-authentication-required.tsx
@@ -84,8 +84,8 @@ const withAuthenticationRequired = <P extends object>(
     const {
       returnTo = defaultReturnTo,
       onRedirecting = defaultOnRedirecting,
-      loginOptions = {},
       claimCheck = (): boolean => true,
+      loginOptions,
     } = options;
 
     /**
@@ -101,7 +101,7 @@ const withAuthenticationRequired = <P extends object>(
       const opts = {
         ...loginOptions,
         appState: {
-          ...loginOptions.appState,
+          ...(loginOptions && loginOptions.appState),
           returnTo: typeof returnTo === 'function' ? returnTo() : returnTo,
         },
       };