feat(clerk-js,types): Add support for additional fields for SignUp (#6716)

Co-authored-by: Nikos Douvlis <nikosdouvlis@gmail.com>

Author: dstaley

.changeset/pink-cows-stop.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/types': minor
+---
+
+[Experimental] Add support for additional params for SignUp

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

@@ -25,6 +25,7 @@ import type {
   SignUpFuturePhoneCodeVerifyParams,
   SignUpFutureResource,
   SignUpFutureSSOParams,
+  SignUpFutureUpdateParams,
   SignUpIdentificationField,
   SignUpJSON,
   SignUpJSONSnapshot,
@@ -132,6 +133,14 @@ export class SignUp extends BaseResource implements SignUpResource {
    */
   __internal_basePost = this._basePost.bind(this);
 
+  /**
+   * @internal Only used for internal purposes, and is not intended to be used directly.
+   *
+   * This property is used to provide access to underlying Client methods to `SignUpFuture`, which wraps an instance
+   * of `SignUp`.
+   */
+  __internal_basePatch = this._basePatch.bind(this);
+
   constructor(data: SignUpJSON | SignUpJSONSnapshot | null = null) {
     super();
     this.fromJSON(data);
@@ -584,12 +593,62 @@ class SignUpFuture implements SignUpFutureResource {
   }
 
   async create(params: SignUpFutureCreateParams): Promise<{ error: unknown }> {
-    const { transfer } = params;
     return runAsyncResourceTask(this.resource, async () => {
       const { captchaToken, captchaWidgetType, captchaError } = await this.getCaptchaToken();
+
+      const body: Record<string, unknown> = {
+        transfer: params.transfer,
+        captchaToken,
+        captchaWidgetType,
+        captchaError,
+      };
+
+      if (params.firstName) {
+        body.firstName = params.firstName;
+      }
+
+      if (params.lastName) {
+        body.lastName = params.lastName;
+      }
+
+      if (params.unsafeMetadata) {
+        body.unsafeMetadata = normalizeUnsafeMetadata(params.unsafeMetadata);
+      }
+
+      if (typeof params.legalAccepted !== 'undefined') {
+        body.legalAccepted = params.legalAccepted;
+      }
+
       await this.resource.__internal_basePost({
         path: this.resource.pathRoot,
-        body: { transfer, captchaToken, captchaWidgetType, captchaError },
+        body,
+      });
+    });
+  }
+
+  async update(params: SignUpFutureUpdateParams): Promise<{ error: unknown }> {
+    return runAsyncResourceTask(this.resource, async () => {
+      const body: Record<string, unknown> = {};
+
+      if (params.firstName) {
+        body.firstName = params.firstName;
+      }
+
+      if (params.lastName) {
+        body.lastName = params.lastName;
+      }
+
+      if (params.unsafeMetadata) {
+        body.unsafeMetadata = normalizeUnsafeMetadata(params.unsafeMetadata);
+      }
+
+      if (typeof params.legalAccepted !== 'undefined') {
+        body.legalAccepted = params.legalAccepted;
+      }
+
+      await this.resource.__internal_basePatch({
+        path: this.resource.pathRoot,
+        body,
       });
     });
   }
@@ -618,7 +677,26 @@ class SignUpFuture implements SignUpFutureResource {
         body.username = params.username;
       }
 
-      await this.resource.__internal_basePost({ path: this.resource.pathRoot, body });
+      if (params.firstName) {
+        body.firstName = params.firstName;
+      }
+
+      if (params.lastName) {
+        body.lastName = params.lastName;
+      }
+
+      if (params.unsafeMetadata) {
+        body.unsafeMetadata = normalizeUnsafeMetadata(params.unsafeMetadata);
+      }
+
+      if (typeof params.legalAccepted !== 'undefined') {
+        body.legalAccepted = params.legalAccepted;
+      }
+
+      await this.resource.__internal_basePost({
+        path: this.resource.pathRoot,
+        body,
+      });
     });
   }
 

packages/react/src/stateProxy.ts

@@ -88,6 +88,7 @@ export class StateProxy implements State {
         },
 
         create: gateMethod(target, 'create'),
+        update: gateMethod(target, 'update'),
         sso: gateMethod(target, 'sso'),
         password: gateMethod(target, 'password'),
         finalize: gateMethod(target, 'finalize'),

packages/types/src/signUpFuture.ts

@@ -2,21 +2,32 @@ import type { SetActiveNavigate } from './clerk';
 import type { PhoneCodeChannel } from './phoneCodeChannel';
 import type { SignUpIdentificationField, SignUpStatus } from './signUpCommon';
 
-export interface SignUpFutureCreateParams {
+interface SignUpFutureAdditionalParams {
+  firstName?: string;
+  lastName?: string;
+  unsafeMetadata?: SignUpUnsafeMetadata;
+  legalAccepted?: boolean;
+}
+
+export interface SignUpFutureCreateParams extends SignUpFutureAdditionalParams {
   transfer?: boolean;
 }
 
+// This will likely get more properties
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface SignUpFutureUpdateParams extends SignUpFutureAdditionalParams {}
+
 export interface SignUpFutureEmailCodeVerifyParams {
   code: string;
 }
 
-export type SignUpFuturePasswordParams = {
+export type SignUpFuturePasswordParams = SignUpFutureAdditionalParams & {
   password: string;
 } & (
-  | { emailAddress: string; phoneNumber?: string; username?: string }
-  | { emailAddress?: string; phoneNumber: string; username?: string }
-  | { emailAddress?: string; phoneNumber?: string; username: string }
-);
+    | { emailAddress: string; phoneNumber?: string; username?: string }
+    | { emailAddress?: string; phoneNumber: string; username?: string }
+    | { emailAddress?: string; phoneNumber?: string; username: string }
+  );
 
 export interface SignUpFuturePhoneCodeSendParams {
   phoneNumber?: string;
@@ -67,6 +78,8 @@ export interface SignUpFutureResource {
 
   create: (params: SignUpFutureCreateParams) => Promise<{ error: unknown }>;
 
+  update: (params: SignUpFutureUpdateParams) => Promise<{ error: unknown }>;
+
   /**
    *
    */