From 7d8bbb425680e03f47ba919592751765eee0120f Mon Sep 17 00:00:00 2001
From: Tom Milewski <me@tm.codes>
Date: Thu, 16 May 2024 01:03:09 -0400
Subject: [PATCH] fix(elements): Sign Up setActive not firing

---
 .changeset/ninety-geese-knock.md              |  5 ++
 .../machines/sign-up/router.machine.ts        | 68 ++++++++++---------
 2 files changed, 41 insertions(+), 32 deletions(-)
 create mode 100644 .changeset/ninety-geese-knock.md

diff --git a/.changeset/ninety-geese-knock.md b/.changeset/ninety-geese-knock.md
new file mode 100644
index 00000000000..213895691ad
--- /dev/null
+++ b/.changeset/ninety-geese-knock.md
@@ -0,0 +1,5 @@
+---
+'@clerk/elements': patch
+---
+
+Fix `setActive` not firing upon a successful sign up.
diff --git a/packages/elements/src/internals/machines/sign-up/router.machine.ts b/packages/elements/src/internals/machines/sign-up/router.machine.ts
index 8659db35265..88845dd2168 100644
--- a/packages/elements/src/internals/machines/sign-up/router.machine.ts
+++ b/packages/elements/src/internals/machines/sign-up/router.machine.ts
@@ -1,7 +1,7 @@
 import { joinURL } from '@clerk/shared/url';
 import type { SignUpStatus, VerificationStatus } from '@clerk/types';
 import type { NonReducibleUnknown } from 'xstate';
-import { and, assign, enqueueActions, log, not, or, raise, sendTo, setup, spawnChild } from 'xstate';
+import { and, assign, enqueueActions, log, not, or, raise, sendTo, setup } from 'xstate';
 
 import {
   ERROR_CODES,
@@ -59,20 +59,18 @@ export const SignUpRouterMachine = setup({
     },
     navigateExternal: ({ context }, { path }: { path: string }) => context.router?.push(path),
     raiseNext: raise({ type: 'NEXT' }),
-    setActive: (_, params?: { sessionId?: string; useLastActiveSession?: boolean }) =>
-      enqueueActions(({ enqueue, check, context, event }) => {
-        if (check('isExampleMode')) return;
-
-        const session =
-          params?.sessionId ||
-          (params?.useLastActiveSession && context.clerk.client.lastActiveSessionId) ||
-          ((event as SignUpRouterNextEvent)?.resource || context.clerk.client.signUp).createdSessionId;
+    setActive: ({ context, event }, params?: { sessionId?: string; useLastActiveSession?: boolean }) => {
+      if (context.exampleMode) return;
 
-        const beforeEmit = () => context.router?.push(context.clerk.buildAfterSignUpUrl());
-        void context.clerk.setActive({ session, beforeEmit });
+      const session =
+        params?.sessionId ||
+        (params?.useLastActiveSession && context.clerk.client.lastActiveSessionId) ||
+        ((event as SignUpRouterNextEvent)?.resource || context.clerk.client.signUp).createdSessionId;
 
-        enqueue.raise({ type: 'RESET' }, { delay: 2000 }); // Reset machine after 2s delay.
-      }),
+      const beforeEmit = () => context.router?.push(context.clerk.buildAfterSignUpUrl());
+      void context.clerk.setActive({ session, beforeEmit });
+    },
+    delayedReset: raise({ type: 'RESET' }, { delay: 3000 }), // Reset machine after 3s delay.
     setError: assign({
       error: (_, { error }: { error?: ClerkElementsError }) => {
         if (error) return error;
@@ -208,16 +206,19 @@ export const SignUpRouterMachine = setup({
       },
     },
     Init: {
-      entry: spawnChild('thirdPartyMachine', {
-        id: ThirdPartyMachineId,
-        systemId: ThirdPartyMachineId,
-        input: ({ context, self }) => ({
-          basePath: context.router?.basePath ?? SIGN_UP_DEFAULT_BASE_PATH,
-          environment: context.clerk.__unstable__environment,
-          flow: 'signUp',
-          formRef: context.formRef,
-          parent: self,
-        }),
+      entry: enqueueActions(({ context, enqueue, self }) => {
+        if (!self.getSnapshot().children[ThirdPartyMachineId]) {
+          enqueue.spawnChild('thirdPartyMachine', {
+            id: ThirdPartyMachineId,
+            systemId: ThirdPartyMachineId,
+            input: {
+              basePath: context.router?.basePath ?? SIGN_UP_DEFAULT_BASE_PATH,
+              flow: 'signUp',
+              formRef: context.formRef,
+              parent: self,
+            },
+          });
+        }
       }),
       always: [
         {
@@ -269,7 +270,7 @@ export const SignUpRouterMachine = setup({
         NEXT: [
           {
             guard: 'isStatusComplete',
-            actions: 'setActive',
+            actions: ['setActive', 'delayedReset'],
           },
           {
             guard: 'statusNeedsVerification',
@@ -302,7 +303,7 @@ export const SignUpRouterMachine = setup({
         NEXT: [
           {
             guard: 'isStatusComplete',
-            actions: 'setActive',
+            actions: ['setActive', 'delayedReset'],
           },
           {
             guard: 'statusNeedsVerification',
@@ -329,10 +330,13 @@ export const SignUpRouterMachine = setup({
       always: [
         {
           guard: 'hasCreatedSession',
-          actions: ({ context }) => ({
-            type: 'setActive',
-            params: { sessionId: context.router?.searchParams().get(SEARCH_PARAMS.createdSession) },
-          }),
+          actions: [
+            ({ context }) => ({
+              type: 'setActive',
+              params: { sessionId: context.router?.searchParams().get(SEARCH_PARAMS.createdSession) },
+            }),
+            'delayedReset',
+          ],
         },
         {
           guard: { type: 'hasClerkStatus', params: { status: 'verified' } },
@@ -347,7 +351,7 @@ export const SignUpRouterMachine = setup({
         NEXT: [
           {
             guard: 'isStatusComplete',
-            actions: 'setActive',
+            actions: ['setActive', 'delayedReset'],
           },
           {
             guard: 'statusNeedsContinue',
@@ -364,12 +368,12 @@ export const SignUpRouterMachine = setup({
         NEXT: [
           {
             guard: 'isStatusComplete',
-            actions: 'setActive',
+            actions: ['setActive', 'delayedReset'],
           },
           {
             description: 'Handle a case where the user has already been authenticated via ClerkJS',
             guard: 'hasAuthenticatedViaClerkJS',
-            actions: { type: 'setActive', params: { useLastActiveSession: true } },
+            actions: [{ type: 'setActive', params: { useLastActiveSession: true } }, 'delayedReset'],
           },
           {
             guard: 'statusNeedsVerification',