feat(authenticator): listen to tokenRefresh events (#1809)

* First draft

* Add missing initial state

* Remove unused util

* Add e2e test for token hub events

* Run change detection only on state changes

* Remove unused imports

* Add comment

* Formatting change

* Create two-turkeys-wash.md

* Revert "Remove unused imports"

This reverts commit f94d593.

* Revert "Run change detection only on state changes"

This reverts commit 8def06f.

* Add explicit change detection for Angular

* Add comment

* handle hub event explicitly

* Update comment

* Update comment

* More comment

* Create brave-coins-shave.md

* Update .changeset/two-turkeys-wash.md

* Use single quotes + Use const

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

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

Author: wlee221

.changeset/brave-coins-shave.md

@@ -0,0 +1,5 @@
+---
+"@aws-amplify/ui-angular": patch
+---
+
+Update Angular Authenticator to manually trigger change detection after hub events.

.changeset/two-turkeys-wash.md

@@ -0,0 +1,5 @@
+---
+"@aws-amplify/ui": minor
+---
+
+feat(authenticator): listen to tokenRefresh events

examples/angular/src/app/app.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { Amplify } from 'aws-amplify';
+import { Amplify, Hub } from 'aws-amplify';
 
 @Component({
   selector: 'app-root',
@@ -10,8 +10,10 @@ export class AppComponent {
   title = 'angular';
 
   constructor() {
+    // This exists to expose `Amplify` & its categories on `window` for e2e testing
     if (typeof window !== 'undefined') {
       (window as any)['Amplify'] = Amplify;
+      (window as any)['Hub'] = Hub;
     }
   }
 }

examples/next/pages/_app.page.tsx

@@ -2,11 +2,12 @@
 
 // https://nextjs.org/docs/advanced-features/custom-app
 import App from 'next/app';
-import { Amplify } from 'aws-amplify';
+import { Amplify, Hub } from 'aws-amplify';
 import { Authenticator, AmplifyProvider } from '@aws-amplify/ui-react';
 
 if (typeof window !== 'undefined') {
   window['Amplify'] = Amplify;
+  window['Hub'] = Hub;
 }
 
 export default function MyApp(props) {

examples/vue/src/main.ts

@@ -1,11 +1,12 @@
-import { Amplify } from 'aws-amplify';
+import { Amplify, Hub } from 'aws-amplify';
 import { createApp } from 'vue';
 import App from './App.vue';
 import router from './router';
 
 // This only exists to expose `Amplify` & its categories on `window` for e2e testing
 if (typeof window !== 'undefined') {
   window['Amplify'] = Amplify;
+  window['Hub'] = Hub;
 }
 
 createApp(App).use(router).mount('#app');

packages/angular/projects/ui-angular/src/lib/components/authenticator/components/authenticator/authenticator.component.ts

@@ -1,5 +1,6 @@
 import {
   AfterContentInit,
+  ChangeDetectorRef,
   Component,
   ContentChildren,
   Input,
@@ -11,6 +12,7 @@ import {
 } from '@angular/core';
 import {
   AuthenticatorMachineOptions,
+  listenToAuthHub,
   SocialProvider,
   translate,
 } from '@aws-amplify/ui';
@@ -44,11 +46,14 @@ export class AuthenticatorComponent
   public signUpTitle = translate('Create Account');
 
   private hasInitialized = false;
+  private isHandlingHubEvent = false;
   private unsubscribeMachine: () => void;
+  private unsubscribeHub: ReturnType<typeof listenToAuthHub>;
 
   constructor(
     private authenticator: AuthenticatorService,
-    private contextService: CustomComponentsService
+    private contextService: CustomComponentsService,
+    private changeDetector: ChangeDetectorRef
   ) {}
 
   ngOnInit(): void {
@@ -61,12 +66,47 @@ export class AuthenticatorComponent
       formFields,
     } = this;
 
+    this.unsubscribeHub = listenToAuthHub((event) => {
+      /**
+       * Hub events aren't properly caught by Angular, because they are
+       * synchronous events. Angular tracks async network events and
+       * html events, but not synchronous events like hub.
+       *
+       * On any notable hub events, we run change detection manually.
+       */
+      const state = this.authenticator.authService.send(event);
+      this.changeDetector.detectChanges();
+
+      /**
+       * Hub events that we handle can lead to multiple state changes:
+       * e.g. `authenticated` -> `signOut` -> initialState.
+       *
+       * We want to ensure change detection runs all the way, until
+       * we reach back to the initial state. Setting the below flag
+       * to true to until we reach initial state.
+       */
+      this.isHandlingHubEvent = true;
+      return state;
+    });
+
     /**
      * Subscribes to state machine changes and sends INIT event
      * once machine reaches 'setup' state.
      */
     this.unsubscribeMachine = this.authenticator.subscribe(() => {
       const { route } = this.authenticator;
+
+      if (this.isHandlingHubEvent) {
+        this.changeDetector.detectChanges();
+
+        const initialStateWithDefault = initialState ?? 'signIn';
+
+        // We can stop manual change detection if we're back to the initial state
+        if (route === initialStateWithDefault) {
+          this.isHandlingHubEvent = false;
+        }
+      }
+
       if (!this.hasInitialized && route === 'setup') {
         this.authenticator.send({
           type: 'INIT',
@@ -103,6 +143,7 @@ export class AuthenticatorComponent
 
   ngOnDestroy(): void {
     if (this.unsubscribeMachine) this.unsubscribeMachine();
+    if (this.unsubscribeHub) this.unsubscribeHub();
   }
 
   /**

packages/angular/projects/ui-angular/src/lib/services/authenticator.service.ts

@@ -27,7 +27,6 @@ export class AuthenticatorService implements OnDestroy {
   private _authService: AuthInterpreter;
   private _sendEventAliases: ReturnType<typeof getSendEventAliases>;
   private _machineSubscription: Subscription;
-  private _hubSubscription: ReturnType<typeof listenToAuthHub>;
   private _facade: ReturnType<typeof getServiceContextFacade>;
 
   constructor() {
@@ -40,14 +39,12 @@ export class AuthenticatorService implements OnDestroy {
       this._facade = getServiceContextFacade(state);
     });
 
-    this._hubSubscription = listenToAuthHub(authService.send);
     this._sendEventAliases = getSendEventAliases(authService.send);
     this._authService = authService;
   }
 
   ngOnDestroy(): void {
     if (this._machineSubscription) this._machineSubscription.unsubscribe();
-    if (this._hubSubscription) this._hubSubscription();
   }
 
   /**

packages/e2e/cypress/integration/common/shared.ts

@@ -8,6 +8,28 @@ import { get, escapeRegExp } from 'lodash';
 let language = 'en-US';
 let window = null;
 
+/**
+ * Given dot delimited paths to a method (e.g. Amplify.Auth.signIn) on window,
+ * returns the object that holds the method (Amplify.Auth) and the method (signIn).
+ *
+ * Used for mocking and spying Amplify methods.
+ */
+const getMethodFromWindow = (path: string) => {
+  const paths = path.split('.');
+  const method = paths.pop();
+  const obj = get(window, paths);
+
+  if (!window) {
+    throw new Error('window has not been set in the Cypress tests');
+  }
+
+  if (!obj || !method) {
+    throw new Error(`Could not find "${path}" on the window`);
+  }
+
+  return { obj, method };
+};
+
 Given("I'm running the example {string}", (example: string) => {
   cy.visit(example, {
     // See: https://glebbahmutov.com/blog/cypress-tips-and-tricks/#control-navigatorlanguage
@@ -79,17 +101,7 @@ Given(
 Given(
   'I mock {string} with fixture {string}',
   (path: string, fixture: string) => {
-    let paths = path.split('.');
-    const method = paths.pop();
-    const obj = get(window, paths);
-
-    if (!window) {
-      throw new Error(`window has not been set in the Cypress tests`);
-    }
-
-    if (!obj || !method) {
-      throw new Error(`Could not find "${path}" on the window`);
-    }
+    const { obj, method } = getMethodFromWindow(path);
 
     cy.fixture(fixture).then((result) => {
       console.info('`%s` mocked with %o', path, result);
@@ -135,7 +147,7 @@ When('I click the {string} button', (name: string) => {
 Then('I see the {string} button', (name: string) => {
   cy.findByRole('button', {
     name: new RegExp(`^${escapeRegExp(name)}$`, 'i'),
-  }).should('be.visible');
+  }).should('exist');
 });
 
 When('I click the {string} checkbox', (label: string) => {
@@ -291,6 +303,28 @@ When('I see {string} as the {string} input', (custom, order) => {
   // cy.findByLabelText(custom).type(Cypress.env('VALID_PASSWORD'));
 });
 
+When('I mock {string} event', (eventName: string) => {
+  if (!window) {
+    throw new Error('window has not been set in the Cypress tests');
+  }
+
+  const Hub = window['Hub'];
+  if (!Hub) {
+    throw new Error('Hub is not available on the window.');
+  }
+
+  Hub.dispatch('auth', { event: eventName });
+});
+
+Given('I spy {string} method', (path) => {
+  const { obj, method } = getMethodFromWindow(path);
+  cy.spy(obj, method).as(path);
+});
+
+Then('{string} method is called', (path) => {
+  cy.get(`@${path}`).should('have.been.calledOnce');
+});
+
 When('I type a valid code', () => {
   /**
    * Confirmation code differs on React/Vue vs Angular. Testing for both for

packages/e2e/features/ui/components/authenticator/hub-events.feature

@@ -15,3 +15,21 @@ Feature: Hub Events
     And I click the "Sign out" button
     Then I see "Sign in"
 
+  @angular @react @vue
+  Scenario: Unsuccessful token refresh logs out the user
+    When I type my "email" with status "CONFIRMED"
+    And I type my password
+    And I click the "Sign in" button
+    Then I see "Sign out"
+    When I mock "tokenRefresh_failure" event
+    Then I see "Sign in"
+    
+  @angular @react @vue
+  Scenario: Successful token refresh calls currentAuthenticatedUser
+    When I type my "email" with status "CONFIRMED"
+    And I type my password
+    And I click the "Sign in" button
+    Then I see "Sign out"
+    Given I spy "Amplify.Auth.currentAuthenticatedUser" method
+    When I mock "tokenRefresh" event
+    And "Amplify.Auth.currentAuthenticatedUser" method is called

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

@@ -45,7 +45,11 @@ export const listenToAuthHub = (send: AuthMachineSend) => {
     switch (data.payload.event) {
       // TODO: We can add more cases here, according to
       // https://docs.amplify.aws/lib/auth/auth-events/q/platform/js/
+      case 'tokenRefresh':
+        send('TOKEN_REFRESH');
+        break;
       case 'signOut':
+      case 'tokenRefresh_failure':
         send('SIGN_OUT');
         break;
     }