fix(angular,vue): Fix unsubscription timing issues in Vue/Angular (#1592

) * Fix unscription timing issues in Vue/Angular * Create healthy-zoos-ring.md
aws-amplify · Mar 25, 2022 · fc0acac · fc0acac
1 parent 6d3981c
commit fc0acac
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 9 deletions.
diff --git a/.changeset/healthy-zoos-ring.md b/.changeset/healthy-zoos-ring.md
@@ -0,0 +1,6 @@
+---
+"@aws-amplify/ui-vue": patch
+"@aws-amplify/ui-angular": patch
+---
+
+Fix unscription timing issues in Vue/Angular
diff --git a/...ular/src/lib/components/authenticator/components/authenticator/authenticator.component.ts b/...ular/src/lib/components/authenticator/components/authenticator/authenticator.component.ts
@@ -3,6 +3,7 @@ import {
   Component,
   ContentChildren,
   Input,
+  OnDestroy,
   OnInit,
   QueryList,
   TemplateRef,
@@ -23,7 +24,9 @@ import { AuthenticatorService } from '../../../../services/authenticator.service
   providers: [CustomComponentsService], // make sure custom components are scoped to this authenticator only
   encapsulation: ViewEncapsulation.None,
 })
-export class AuthenticatorComponent implements OnInit, AfterContentInit {
+export class AuthenticatorComponent
+  implements OnInit, AfterContentInit, OnDestroy
+{
   @Input() formFields: AuthenticatorMachineOptions['formFields'];
   @Input() initialState: AuthenticatorMachineOptions['initialState'];
   @Input() loginMechanisms: AuthenticatorMachineOptions['loginMechanisms'];
@@ -41,6 +44,7 @@ export class AuthenticatorComponent implements OnInit, AfterContentInit {
   public signUpTitle = translate('Create Account');
 
   private hasInitialized = false;
+  private unsubscribeMachine: () => void;
 
   constructor(
     private authenticator: AuthenticatorService,
@@ -57,8 +61,11 @@ export class AuthenticatorComponent implements OnInit, AfterContentInit {
       formFields,
     } = this;
 
-    // send INIT event once machine is at 'setup' state
-    const { unsubscribe } = this.authenticator.subscribe(() => {
+    /**
+     * 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.hasInitialized && route === 'setup') {
         this.authenticator.send({
@@ -74,9 +81,8 @@ export class AuthenticatorComponent implements OnInit, AfterContentInit {
         });
 
         this.hasInitialized = true;
-        unsubscribe();
       }
-    });
+    }).unsubscribe;
 
     /**
      * handling translations after content init, because authenticator and its
@@ -95,6 +101,10 @@ export class AuthenticatorComponent implements OnInit, AfterContentInit {
     );
   }
 
+  ngOnDestroy(): void {
+    if (this.unsubscribeMachine) this.unsubscribeMachine();
+  }
+
   /**
    * Class Functions
    */

diff --git a/packages/vue/src/components/authenticator.vue b/packages/vue/src/components/authenticator.vue
@@ -75,14 +75,19 @@ const emit = defineEmits([
 const machine = createAuthenticatorMachine();
 
 const service = useInterpret(machine);
-let unsubscribeHub: ReturnType<typeof listenToAuthHub>;
+let unsubscribeHub: () => void;
+let unsubscribeMachine: () => void;
 
 const { state, send } = useActor(service);
 useAuth(service);
 
 const hasInitialized = ref(false);
 
-const { unsubscribe } = service.subscribe((newState) => {
+/**
+ * Subscribes to state machine changes and sends INIT event
+ * once machine reaches 'setup' state.
+ */
+unsubscribeMachine = service.subscribe((newState) => {
   if (newState.matches('setup') && !hasInitialized.value) {
     send({
       type: 'INIT',
@@ -96,16 +101,16 @@ const { unsubscribe } = service.subscribe((newState) => {
       },
     });
     hasInitialized.value = true;
-    unsubscribe();
   }
-});
+}).unsubscribe;
 
 onMounted(() => {
   unsubscribeHub = listenToAuthHub(send);
 });
 
 onUnmounted(() => {
   if (unsubscribeHub) unsubscribeHub();
+  if (unsubscribeMachine) unsubscribeMachine();
 });
 
 const actorState = computed(() => getActorState(state.value));