fix(authenticator): fetch current user on routed apps after refresh

.changeset/five-crabs-help.md

@@ -0,0 +1,8 @@
+---
+"@aws-amplify/ui-react": patch
+"@aws-amplify/ui": patch
+"@aws-amplify/ui-vue": patch
+"@aws-amplify/ui-angular": patch
+---
+
+fix(authenticator): look for current user on routed apps whenever app refreshes

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

@@ -40,6 +40,8 @@ export class AuthenticatorComponent implements OnInit, AfterContentInit {
   public signInTitle = translate('Sign In');
   public signUpTitle = translate('Create Account');
 
+  private hasInitialized = false;
+
   constructor(
     private authenticator: AuthenticatorService,
     private contextService: CustomComponentsService
@@ -54,13 +56,24 @@ export class AuthenticatorComponent implements OnInit, AfterContentInit {
       socialProviders,
       formFields,
     } = this;
-    this.authenticator.startMachine({
-      initialState,
-      loginMechanisms,
-      services,
-      signUpAttributes,
-      socialProviders,
-      formFields,
+
+    // send INIT event once machine is at 'setup' state
+    this.authenticator.subscribe(() => {
+      const { route } = this.authenticator;
+      if (!this.hasInitialized && route === 'setup') {
+        this.authenticator.send({
+          type: 'INIT',
+          data: {
+            initialState,
+            loginMechanisms,
+            services,
+            signUpAttributes,
+            socialProviders,
+            formFields,
+          },
+        });
+        this.hasInitialized = true;
+      }
     });
 
     /**

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

@@ -2,7 +2,6 @@ import { Injectable, OnDestroy } from '@angular/core';
 import { Logger } from '@aws-amplify/core';
 import {
   AuthContext,
-  AuthenticatorMachineOptions,
   AuthEvent,
   AuthInterpreter,
   AuthMachineState,
@@ -31,30 +30,11 @@ export class AuthenticatorService implements OnDestroy {
   private _hubSubscription: ReturnType<typeof listenToAuthHub>;
   private _facade: ReturnType<typeof getServiceContextFacade>;
 
-  public startMachine({
-    initialState,
-    loginMechanisms,
-    services,
-    signUpAttributes,
-    socialProviders,
-    formFields,
-  }: AuthenticatorMachineOptions) {
+  constructor() {
     const machine = createAuthenticatorMachine();
 
     const authService = interpret(machine).start();
 
-    authService.send({
-      type: 'INIT',
-      data: {
-        initialState,
-        loginMechanisms,
-        socialProviders,
-        signUpAttributes,
-        services,
-        formFields,
-      },
-    });
-
     this._machineSubscription = authService.subscribe((state) => {
       this._authState = state;
       this._facade = getServiceContextFacade(state);

packages/react/src/components/Authenticator/Authenticator.tsx

@@ -27,7 +27,7 @@ function InitMachine({ children, ...data }) {
   const hasInitialized = React.useRef(false);
 
   React.useEffect(() => {
-    if (!hasInitialized.current && route === 'idle') {
+    if (!hasInitialized.current && route === 'setup') {
       _send({
         type: 'INIT',
         data,

packages/ui/src/machines/authenticator/index.ts

@@ -25,47 +25,58 @@ export function createAuthenticatorMachine() {
       context: {
         user: undefined,
         config: {},
-        services: {},
+        services: { ...defaultServices },
         actorRef: undefined,
       },
       states: {
         // See: https://xstate.js.org/docs/guides/communication.html#invoking-promises
         idle: {
-          on: {
-            INIT: {
+          invoke: {
+            src: 'getCurrentUser',
+            onDone: {
+              actions: 'setUser',
+              target: 'authenticated',
+            },
+            onError: {
               target: 'setup',
-              actions: 'configure',
             },
           },
         },
         setup: {
-          invoke: [
-            {
-              // TODO Wait for Auth to be configured
-              src: 'getCurrentUser',
-              onDone: {
-                actions: 'setUser',
-                target: 'authenticated',
+          initial: 'waitConfig',
+          states: {
+            waitConfig: {
+              on: {
+                INIT: {
+                  actions: 'configure',
+                  target: 'applyConfig',
+                },
               },
-              onError: [
+            },
+            applyConfig: {
+              invoke: {
+                // TODO Wait for Auth to be configured
+                src: 'getAmplifyConfig',
+                onDone: {
+                  actions: 'applyAmplifyConfig',
+                  target: 'goToInitialState',
+                },
+              },
+            },
+            goToInitialState: {
+              always: [
                 {
-                  target: 'signUp',
+                  target: '#authenticator.signUp',
                   cond: 'isInitialStateSignUp',
                 },
                 {
-                  target: 'resetPassword',
+                  target: '#authenticator.resetPassword',
                   cond: 'isInitialStateResetPassword',
                 },
-                { target: 'signIn' },
+                { target: '#authenticator.signIn' },
               ],
             },
-            {
-              src: 'getAmplifyConfig',
-              onDone: {
-                actions: 'applyAmplifyConfig',
-              },
-            },
-          ],
+          },
         },
         signIn: {
           initial: 'spawnActor',
@@ -220,7 +231,6 @@ export function createAuthenticatorMachine() {
             }
 
             // Prefer explicitly configured settings over default CLI values\
-
             const {
               loginMechanisms,
               signUpAttributes,

packages/vue/src/components/authenticator.vue

@@ -80,19 +80,29 @@ let unsubscribeHub: ReturnType<typeof listenToAuthHub>;
 const { state, send } = useActor(service);
 useAuth(service);
 
+const hasInitialized = ref(false);
+
+service.subscribe((newState) => {
+  if (newState.matches('setup')) {
+    if (!hasInitialized.value) {
+      send({
+        type: 'INIT',
+        data: {
+          initialState,
+          loginMechanisms,
+          socialProviders,
+          signUpAttributes,
+          services,
+          formFields,
+        },
+      });
+      hasInitialized.value = true;
+    }
+  }
+});
+
 onMounted(() => {
   unsubscribeHub = listenToAuthHub(send);
-  send({
-    type: 'INIT',
-    data: {
-      initialState,
-      loginMechanisms,
-      socialProviders,
-      signUpAttributes,
-      services,
-      formFields,
-    },
-  });
 });
 
 onUnmounted(() => {