fix(clerk-js): Move signup id check into an effect within continue st…

…ep (#4711)

.changeset/clean-rivers-sleep.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Fixes an issue during sign-up flow where a user lands on the continue step, and proceeds successfully through the sign-up process and gets redirected to AP sign-up due to signUp.id being undefined.

packages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx

@@ -1,5 +1,5 @@
 import { useClerk } from '@clerk/shared/react';
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo } from 'react';
 
 import { useCoreSignUp, useEnvironment, useSignUpContext } from '../../contexts';
 import { descriptors, Flex, Flow, localizationKeys } from '../../customizables';
@@ -84,9 +84,15 @@ function _SignUpContinue() {
     [signUp.missingFields],
   );
 
-  // Redirect to sign-up if there is no persisted sign-up
+  useEffect(() => {
+    // Redirect to sign-up if there is no persisted sign-up
+    if (!signUp.id) {
+      void navigate(displayConfig.signUpUrl);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   if (!signUp.id) {
-    void navigate(displayConfig.signUpUrl);
     return <LoadingCard />;
   }