fix(authenticator): apply UI config when signing out before init (#7083)

* fix(authenticator): apply UI config when signing out before init

The machine parks in `setup.initConfig` until the UI sends `INIT`, which
carries the `config` and `services` passed to the `Authenticator`.
`initConfig` also handles `SIGN_OUT`, and the sign out actor completing
targeted `setup.getConfig` unconditionally, skipping `initConfig` and the
`configure` action. The machine then settled on `signIn`, so
`useAuthenticatorInitMachine` never sent `INIT` and every prop passed to
the `Authenticator` was dropped.

Return to `setup` when setup has not completed, so the machine waits for
`INIT` again. `hasSetup` is only set after `getConfig` resolves, so the
normal sign out path is unchanged.

Fixes #6967

* fix(authenticator): accept INIT after setup instead of rerouting sign out

Returning to `setup.initConfig` after signing out before init broke headless
usage. `examples/svelte` .../useAuthenticator/home navigates off
`route === 'signIn'`, which the machine no longer reached, so the e2e
`Headless Usage` scenario timed out waiting for the sign in form.

Leave the sign out transition alone and fix the initialization path instead.
`configure` now records that the UI has configured the machine, and `INIT` is
accepted at the root until it has, so an `Authenticator` rendered after the
machine has already moved past setup can still apply its `config` and
`services`. `useAuthenticatorInitMachine` sends `INIT` on any route other than
`idle`, which has to resolve `handleGetCurrentUser` first.

---------

Co-authored-by: Philipp Andreas Paul <phandpau@amazon.de>

Author: vishwakt

.changeset/soft-pugs-invite.md

@@ -0,0 +1,8 @@
+---
+'@aws-amplify/ui-react-core': patch
+'@aws-amplify/ui': patch
+---
+
+fix(authenticator): apply UI provided `config` and `services` when signing out before the Authenticator is rendered
+
+`setup.initConfig` handles `SIGN_OUT`, so signing out before the UI sends `INIT` moved the machine past setup configured with defaults, and it settled on `signIn`. `useAuthenticatorInitMachine` only sent `INIT` on the `setup` route, so every prop passed to the `Authenticator` was ignored. The machine now accepts `INIT` until the UI has configured it, and the UI sends `INIT` on any route other than `idle`.

packages/react-core/src/Authenticator/hooks/useAuthenticatorInitMachine/__tests__/useAuthenticatorInitMachine.spec.tsx

@@ -38,7 +38,7 @@ describe('useAuthenticatorInitMachine', () => {
     expect(initializeMachine).toHaveBeenCalledTimes(1);
   });
 
-  it('does not call initializeMachine when the route !== "setup"', () => {
+  it('does not call initializeMachine when the route === "idle"', () => {
     const route = 'idle';
     const data = {};
 
@@ -51,6 +51,22 @@ describe('useAuthenticatorInitMachine', () => {
 
     expect(initializeMachine).toHaveBeenCalledTimes(0);
   });
+
+  // the machine moves past `setup` on its own when signed out before the
+  // `Authenticator` is rendered, it accepts `INIT` until it has been configured
+  it('calls initializeMachine when the route is past "setup"', () => {
+    const route = 'signIn';
+    const data = {};
+
+    (useAuthenticator as jest.Mock).mockReturnValue({
+      initializeMachine,
+      route,
+    } as unknown as UseAuthenticator);
+
+    renderHook(() => useAuthenticatorInitMachine(data));
+
+    expect(initializeMachine).toHaveBeenCalledTimes(1);
+  });
 });
 
 describe('routeSelector', () => {

packages/react-core/src/Authenticator/hooks/useAuthenticatorInitMachine/useAuthenticatorInitMachine.tsx

@@ -14,7 +14,11 @@ export default function useAuthenticatorInitMachine(
 
   const hasInitialized = React.useRef(false);
   React.useEffect(() => {
-    if (!hasInitialized.current && route === 'setup') {
+    // `setup` is the usual route on first render, but signing out before the
+    // `Authenticator` is rendered moves the machine past setup on its own. Send
+    // `INIT` on any route other than `idle`, which resolves the current user
+    // before the machine can accept it.
+    if (!hasInitialized.current && route !== 'idle') {
       initializeMachine(data);
 
       hasInitialized.current = true;

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

@@ -11,6 +11,16 @@ const flushPromises = () => new Promise(setImmediate);
 
 let service;
 
+// `configure` replaces `services` with the values sent on `INIT`, so overrides
+// have to be provided on the event as well as the initial context
+const mockServices = {
+  getCurrentUser: () => Promise.reject(),
+  getAmplifyConfig: () =>
+    Promise.resolve({}) as ReturnType<
+      (typeof defaultServices)['getAmplifyConfig']
+    >,
+};
+
 describe('authenticator', () => {
   afterEach(() => {
     jest.clearAllMocks();
@@ -486,51 +496,136 @@ describe('authenticator', () => {
     });
   });
 
-  // @todo-migration
-  //    - Expected  - 1
-  //   + Received  + 1
-
-  //   Object {
-  // -   "signOut": "runActor",
-  // +   "setup": "initConfig",
-  //   }
-  it.skip('should spawn the signOutActor', async () => {
+  it('should spawn the signOutActor and return to getConfig after setup', async () => {
     service = interpret(
-      createAuthenticatorMachine().withConfig({
-        actions: {
-          setUser: jest.fn(() => Promise.resolve),
-          configure: jest.fn(() => Promise.resolve),
-          setHasSetup: jest.fn(() => Promise.resolve),
-        },
-        services: {
-          getCurrentUser: jest.fn(async () => Promise.resolve),
-        },
-        guards: {},
-      })
+      createAuthenticatorMachine()
+        .withContext({
+          config: {},
+          services: {
+            getAmplifyConfig: () =>
+              Promise.resolve({}) as ReturnType<
+                (typeof defaultServices)['getAmplifyConfig']
+              >,
+          },
+        })
+        .withConfig({
+          actions: {
+            clearUser: jest.fn(() => Promise.resolve),
+            clearActorDoneData: jest.fn(() => Promise.resolve),
+            applyAmplifyConfig: jest.fn(() => Promise.resolve),
+            setUser: jest.fn(() => Promise.resolve),
+            spawnSignOutActor: jest.fn(() => Promise.resolve),
+            stopSignOutActor: jest.fn(() => Promise.resolve),
+            configure: jest.fn(() => Promise.resolve),
+          },
+          services: {
+            handleGetCurrentUser: jest.fn(async () => Promise.resolve),
+          },
+          guards: { hasUser: () => true },
+        })
     );
 
     service.start();
 
     expect(service.getSnapshot().value).toStrictEqual('idle');
 
+    await flushPromises();
+    expect(service.getSnapshot().value).toStrictEqual({ setup: 'initConfig' });
+
+    service.send({ type: 'INIT' });
     await flushPromises();
     expect(service.getSnapshot().value).toStrictEqual({
       authenticated: 'idle',
     });
 
+    service.send({ type: 'SIGN_OUT' });
+    await flushPromises();
+    expect(service.getSnapshot().value).toStrictEqual({ signOut: 'runActor' });
+
+    // `setHasSetup` is not mocked, so `INIT` has already been handled and there
+    // is no need to wait for the UI to send it a second time
+    service.send({ type: 'done.invoke.signOutActor' });
+    expect(service.getSnapshot().value).toStrictEqual({ setup: 'getConfig' });
+  });
+
+  it('should accept INIT after signing out before the UI has initialized the machine', async () => {
+    service = interpret(
+      createAuthenticatorMachine()
+        .withContext({ config: {}, services: mockServices })
+        .withConfig({
+          actions: {
+            clearUser: jest.fn(() => Promise.resolve),
+            clearActorDoneData: jest.fn(() => Promise.resolve),
+            setUser: jest.fn(() => Promise.resolve),
+            spawnSignUpActor: jest.fn(() => Promise.resolve),
+            spawnSignInActor: jest.fn(() => Promise.resolve),
+            spawnSignOutActor: jest.fn(() => Promise.resolve),
+            stopSignOutActor: jest.fn(() => Promise.resolve),
+          },
+        })
+    );
+
+    service.start();
+
+    await flushPromises();
+    expect(service.getSnapshot().value).toStrictEqual({ setup: 'initConfig' });
+
+    // external `signOut` calls are forwarded to the machine as `SIGN_OUT` by the
+    // Hub listener, which can happen before the UI has sent `INIT`
+    service.send({ type: 'SIGN_OUT' });
+    await flushPromises();
+    expect(service.getSnapshot().value).toStrictEqual({ signOut: 'runActor' });
+
+    // headless usage relies on reaching `signIn` without the UI sending `INIT`
+    service.send({ type: 'done.invoke.signOutActor' });
+    await flushPromises();
+    expect(service.getSnapshot().value).toStrictEqual({
+      signInActor: 'runActor',
+    });
+    expect(service.getSnapshot().context.hasInitialized).toBeUndefined();
+
+    // a UI rendered after the sign out can still apply its `config`
     service.send({
-      type: 'SIGN_OUT',
+      type: 'INIT',
+      data: { initialState: 'signUp', services: mockServices },
     });
     await flushPromises();
     expect(service.getSnapshot().value).toStrictEqual({
-      signOut: 'runActor',
+      signUpActor: 'runActor',
     });
+    expect(service.getSnapshot().context.config.initialState).toBe('signUp');
+  });
 
-    service.send({
-      type: 'done.invoke.signOutActor',
+  it('should ignore INIT once the UI has initialized the machine', async () => {
+    service = interpret(
+      createAuthenticatorMachine()
+        .withContext({ config: {}, services: mockServices })
+        .withConfig({
+          actions: {
+            clearActorDoneData: jest.fn(() => Promise.resolve),
+            setUser: jest.fn(() => Promise.resolve),
+            spawnSignUpActor: jest.fn(() => Promise.resolve),
+            spawnSignInActor: jest.fn(() => Promise.resolve),
+          },
+        })
+    );
+
+    service.start();
+
+    await flushPromises();
+    service.send({ type: 'INIT', data: { services: mockServices } });
+    await flushPromises();
+    expect(service.getSnapshot().value).toStrictEqual({
+      signInActor: 'runActor',
     });
 
+    service.send({
+      type: 'INIT',
+      data: { initialState: 'signUp', services: mockServices },
+    });
     await flushPromises();
-    expect(service.getSnapshot().value).toStrictEqual({ setup: 'initConfig' });
+    expect(service.getSnapshot().value).toStrictEqual({
+      signInActor: 'runActor',
+    });
   });
 });

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

@@ -309,6 +309,14 @@ export function createAuthenticatorMachine(
         },
       },
       on: {
+        // `SIGN_OUT` handled by `setup.initConfig` moves the machine past setup without
+        // the UI ever sending `INIT`, leaving it configured with defaults. Accept `INIT`
+        // late so a subsequently rendered UI can still apply its `config` and `services`.
+        INIT: {
+          cond: 'shouldInitialize',
+          actions: 'configure',
+          target: '#authenticator.setup.getConfig',
+        },
         SIGN_IN_WITH_REDIRECT: { target: '#authenticator.getCurrentUser' },
         CHANGE: { actions: 'forwardToActor' },
         BLUR: { actions: 'forwardToActor' },
@@ -424,6 +432,7 @@ export function createAuthenticatorMachine(
           return {
             services: { ...defaultServices, ...customServices },
             config,
+            hasInitialized: true,
           };
         }),
         setHasSetup: assign({ hasSetup: true }),
@@ -435,6 +444,10 @@ export function createAuthenticatorMachine(
         isInitialStateResetPassword: ({ config }) =>
           config.initialState === 'forgotPassword',
         shouldSetup: ({ hasSetup }) => !hasSetup,
+        // `hasSetup` prevents the late `INIT` from interrupting `idle`, which must
+        // resolve `handleGetCurrentUser` before the machine leaves it
+        shouldInitialize: ({ hasSetup, hasInitialized }) =>
+          hasSetup && !hasInitialized,
         hasUser: ({ user }) => {
           return !!user;
         },

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

@@ -165,6 +165,8 @@ export interface AuthContext {
   // data returned from actors when they finish and reach their final state
   actorDoneData?: ActorDoneData;
   hasSetup?: boolean;
+  // whether the UI has sent `INIT`, applying its `config` and `services`
+  hasInitialized?: boolean;
   passwordlessCapabilities?: PasswordlessCapabilities;
 }