fix(clerk-js,types): Reuse existing sign-up if available (#4720)

Author: kostaspt

.changeset/purple-foxes-develop.md

@@ -0,0 +1,7 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/types': minor
+---
+
+- Introduced an `upsert` method to the `SignUp` resource, which reuses the existing sign-up attempt ID if it exists.
+- Fix a ticket flow issue on `<SignUp />` component, where in some rare cases the initial ticket/context is lost, because of creating a new sign-up attempt ID.

packages/clerk-js/src/core/resources/SignUp.ts

@@ -339,6 +339,10 @@ export class SignUp extends BaseResource implements SignUpResource {
     });
   };
 
+  upsert = (params: SignUpCreateParams | SignUpUpdateParams): Promise<SignUpResource> => {
+    return this.id ? this.update(params) : this.create(params);
+  };
+
   validatePassword: ReturnType<typeof createValidatePassword> = (password, cb) => {
     if (SignUp.clerk.__unstable__environment?.userSettings.passwordSettings) {
       return createValidatePassword({

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

@@ -218,7 +218,14 @@ function _SignUpStart(): JSX.Element {
     if (fields.ticket) {
       const noop = () => {};
       // fieldsToSubmit: Constructing a fake fields object for strategy.
-      fieldsToSubmit.push({ id: 'strategy', value: 'ticket', setValue: noop, onChange: noop, setError: noop } as any);
+      fieldsToSubmit.push({
+        id: 'strategy',
+        value: 'ticket',
+        clearFeedback: noop,
+        setValue: noop,
+        onChange: noop,
+        setError: noop,
+      } as any);
     }
 
     // In case of emailOrPhone (both email & phone are optional) and neither of them is provided,
@@ -238,7 +245,7 @@ function _SignUpStart(): JSX.Element {
     const redirectUrlComplete = ctx.afterSignUpUrl || '/';
 
     return signUp
-      .create(buildRequest(fieldsToSubmit))
+      .upsert(buildRequest(fieldsToSubmit))
       .then(res =>
         completeSignUpFlow({
           signUp: res,

packages/types/src/signUp.ts

@@ -67,6 +67,8 @@ export interface SignUpResource extends ClerkResource {
 
   update: (params: SignUpUpdateParams) => Promise<SignUpResource>;
 
+  upsert: (params: SignUpCreateParams | SignUpUpdateParams) => Promise<SignUpResource>;
+
   prepareVerification: (params: PrepareVerificationParams) => Promise<SignUpResource>;
 
   attemptVerification: (params: AttemptVerificationParams) => Promise<SignUpResource>;