fix(react): hub listener fix (#2183)

* Add logs

* [REVERT] Enable publish to experimental

* trigger ci

* Add logger inside the hub.listen

* Add name to the listner

* Add more logging around useAuthenticator effect

* Disable terser

* Add isListening logger

* Revert "Add isListening logger"

This reverts commit 6b8a77f.

* Add isListening logger

* Add mount console logs

* Remove useRef

* Remove POC scripts

* Remove debug statements

* Unit test attempt

* Add test for listenToAuthHub

* Create yellow-apricots-divide.md

Co-authored-by: Caleb Pollman <[email protected]>

Author: wlee221

.changeset/yellow-apricots-divide.md

@@ -0,0 +1,5 @@
+---
+"@aws-amplify/ui-react": patch
+---
+
+Ensure hub listener is correctly attached on React 18 Strict Mode. 

packages/react/src/components/Authenticator/hooks/useAuthenticator/__tests__/Provider.test.tsx

@@ -0,0 +1,24 @@
+import { render } from '@testing-library/react';
+import * as React from 'react';
+import { Hub } from 'aws-amplify';
+
+import { Provider } from '../';
+
+const hubListenSpy = jest.spyOn(Hub, 'listen');
+
+describe('Authenticator.Provider', () => {
+  it('listens to Auth Hub events on init', () => {
+    render(
+      <Provider>
+        <></>
+      </Provider>
+    );
+
+    expect(hubListenSpy).toBeCalledTimes(1);
+    expect(hubListenSpy).toHaveBeenCalledWith(
+      'auth',
+      expect.any(Function),
+      'authenticator-hub-handler'
+    );
+  });
+});

packages/react/src/components/Authenticator/hooks/useAuthenticator/index.tsx

@@ -106,11 +106,7 @@ export const Provider = ({
 
   const { service: activeService } = value;
 
-  const isListening = React.useRef(false);
   React.useEffect(() => {
-    if (isListening.current) return;
-
-    isListening.current = true;
     return listenToAuthHub(activeService);
   }, [activeService]);
 

packages/ui/src/helpers/authenticator/__tests__/listenToAuthHub.test.ts

@@ -0,0 +1,80 @@
+import { listenToAuthHub } from '../utils';
+import { Hub } from 'aws-amplify';
+
+const authenticatedStateMachine = {
+  getSnapshot: () => ({
+    // this is the state.matches function
+    matches: (state: string) => state === 'authenticated.idle',
+  }),
+  send: jest.fn(),
+};
+
+const unauthenticatedStateMachine = {
+  getSnapshot: () => ({
+    // this is the state.matches function
+    matches: (state: string) => state === 'signIn',
+  }),
+  send: jest.fn(),
+};
+
+const sendSpy = jest.spyOn(authenticatedStateMachine, 'send');
+
+describe('listenToAuthHub', () => {
+  beforeEach(() => {
+    sendSpy.mockClear();
+  });
+
+  it('responds to token refresh event when state is authenticated', () => {
+    const unsubscribe = listenToAuthHub(authenticatedStateMachine as any);
+
+    Hub.dispatch('auth', { event: 'tokenRefresh' });
+    expect(sendSpy).toBeCalledWith('TOKEN_REFRESH');
+
+    unsubscribe();
+  });
+
+  it('ignores token refresh event when state is unauthenticated', () => {
+    const unsubscribe = listenToAuthHub(unauthenticatedStateMachine as any);
+
+    Hub.dispatch('auth', { event: 'tokenRefresh' });
+    expect(sendSpy).not.toHaveBeenCalled();
+
+    unsubscribe();
+  });
+
+  it('responds to signOut event when state is authenticated', () => {
+    const unsubscribe = listenToAuthHub(authenticatedStateMachine as any);
+
+    Hub.dispatch('auth', { event: 'signOut' });
+    expect(sendSpy).toBeCalledWith('SIGN_OUT');
+
+    unsubscribe();
+  });
+
+  it('ignores token refresh event when state is unauthenticated', () => {
+    const unsubscribe = listenToAuthHub(unauthenticatedStateMachine as any);
+
+    Hub.dispatch('auth', { event: 'signOut' });
+    expect(sendSpy).not.toHaveBeenCalled();
+
+    unsubscribe();
+  });
+
+  it('signs user out when token refresh failed in authenticated state', () => {
+    const unsubscribe = listenToAuthHub(authenticatedStateMachine as any);
+
+    Hub.dispatch('auth', { event: 'tokenRefresh_failure' });
+    expect(sendSpy).toBeCalledWith('SIGN_OUT');
+
+    unsubscribe();
+  });
+
+  it('ignores token refresh failure event when state is unauthenticated', () => {
+    const unsubscribe = listenToAuthHub(unauthenticatedStateMachine as any);
+
+    Hub.dispatch('auth', { event: 'tokenRefresh_failure' });
+    expect(sendSpy).not.toHaveBeenCalled();
+
+    unsubscribe();
+  });
+});

packages/ui/src/helpers/authenticator/utils.ts

@@ -68,9 +68,13 @@ export const listenToAuthHub = (
   service: AuthInterpreter,
   handler: HubHandler = defaultAuthHubHandler
 ) => {
-  return Hub.listen('auth', (data) => {
-    handler(data, service);
-  });
+  return Hub.listen(
+    'auth',
+    (data) => {
+      handler(data, service);
+    },
+    'authenticator-hub-handler'
+  );
 };
 
 export const hasSpecialChars = (password: string) =>