fix(authenticator): add handling for external sign up events (#5006)

Author: calebpollman

Diff for: .changeset/sweet-dodos-thank.md

@@ -0,0 +1,5 @@
+---
+"@aws-amplify/ui": patch
+---
+
+fix(authenticator): add handling for external sign up events

Diff for: packages/ui/jest.config.ts

@@ -2,24 +2,25 @@ import { Config } from 'jest';
 
 const config: Config = {
   collectCoverage: true,
-  collectCoverageFrom: ['<rootDir>/src/**/*.ts'],
-  coveragePathIgnorePatterns: [
+  collectCoverageFrom: [
+    '<rootDir>/src/**/*.ts',
     // ignore coverage for top level "export"
-    '<rootDir>/src/index.ts',
+    '!<rootDir>/src/index.ts',
+    // ignore internal `debugUtils` from coverage thresholds
+    '!<rootDir>/**/debugUtils.ts',
     // ignore coverage for style-dictionary type declaration file
-    '<rootDir>/src/theme/types/style-dictionary.d.ts',
+    '!<rootDir>/src/theme/types/style-dictionary.d.ts',
   ],
   coverageThreshold: {
     global: {
-      branches: 77,
-      functions: 70,
-      lines: 87,
-      statements: 88,
+      branches: 80,
       // @todo-migration: put back after fixing tests
-      // branches: 80,
       // functions: 85,
+      functions: 70,
+      // @todo-migration: put back after fixing tests
       // lines: 90,
-      // statements: 90,
+      lines: 87,
+      statements: 90,
     },
   },
   preset: 'ts-jest',

Diff for: packages/ui/src/helpers/authenticator/debugUtils.ts

@@ -0,0 +1,50 @@
+import { groupLog } from '../../utils';
+import { GetRoute } from './getRoute';
+
+/**
+ * @internal Not to be used in production
+ * @description Debugging tool for logging `state` and `actorState`
+ *
+ * @example
+ * ```ts
+ * const getRouteWithLogs = logRouteChanges(getRoute);
+ * ```
+ */
+export const logRouteChanges = (fn: GetRoute): GetRoute => {
+  let prevStateValue;
+  let prevActorStateValue;
+  return (state, actorState) => {
+    const stateValue = state?.value ? JSON.stringify(state.value) : undefined;
+    const actorStateValue = actorState?.value
+      ? JSON.stringify(actorState.value)
+      : undefined;
+
+    const bothUpdated =
+      stateValue !== prevStateValue && actorStateValue !== prevActorStateValue;
+
+    const logValues = (label) =>
+      groupLog(
+        label,
+        { 'state.value': state?.value },
+        { 'actorState.value': actorState?.value }
+      );
+
+    if (bothUpdated) {
+      prevStateValue = stateValue;
+      prevActorStateValue = actorStateValue;
+      logValues('state and actorState value updated');
+    }
+
+    if (!bothUpdated && stateValue !== prevStateValue) {
+      prevStateValue = stateValue;
+      logValues('state value updated');
+    }
+
+    if (!bothUpdated && actorStateValue !== prevActorStateValue) {
+      prevActorStateValue = actorStateValue;
+      logValues('actor state value updated');
+    }
+
+    return fn(state, actorState);
+  };
+};

Diff for: packages/ui/src/helpers/authenticator/getRoute.ts

@@ -2,11 +2,17 @@ import {
   AuthActorState,
   AuthMachineState,
 } from '../../machines/authenticator/types';
+import { AuthenticatorRoute } from './facade';
+
+export type GetRoute = (
+  state: AuthMachineState,
+  actorState: AuthActorState
+) => AuthenticatorRoute;
 
 export const getRoute = (
   state: AuthMachineState,
   actorState: AuthActorState
-) => {
+): AuthenticatorRoute => {
   // 'federatedSignIn' exists as a state on both the 'signInActor' and 'signUpActor',
   // match against the `actorState` initially to determine if the federated sign in flow
   // has begun, then which actor has begun the flow and return the corresponding `route`

Diff for: packages/ui/src/machines/authenticator/index.ts

@@ -51,7 +51,7 @@ const stopActor = (machineId: string) => stop(machineId);
 const LEGACY_WAIT_CONFIG = {
   on: {
     INIT: {
-      actions: ['configure'],
+      actions: 'configure',
       target: 'getConfig',
     },
     SIGN_OUT: '#authenticator.signOut',
@@ -60,7 +60,7 @@ const LEGACY_WAIT_CONFIG = {
 
 // setup step proceeds directly to configure
 const NEXT_WAIT_CONFIG = {
-  always: { actions: ['configure'], target: 'getConfig' },
+  always: { actions: 'configure', target: 'getConfig' },
 };
 
 export function createAuthenticatorMachine(
@@ -192,6 +192,11 @@ export function createAuthenticatorMachine(
                 cond: 'hasCompletedAttributeConfirmation',
                 target: '#authenticator.getCurrentUser',
               },
+              {
+                cond: 'isShouldConfirmUserAttributeStep',
+                actions: 'setActorDoneData',
+                target: '#authenticator.verifyUserAttributesActor',
+              },
               {
                 cond: 'isConfirmUserAttributeStep',
                 target: '#authenticator.verifyUserAttributesActor',