feat(clerk-js): Filter undefined values from request body (#6776)

Author: nikosdouvlis

.changeset/fuzzy-books-win.md

@@ -0,0 +1,2 @@
+---
+---

packages/clerk-js/src/core/__tests__/fapiClient.spec.ts

@@ -252,6 +252,136 @@ describe('request', () => {
     it.todo('sets the __clerk_db_jwt cookie from the response Clerk-Cookie header');
   });
 
+  describe('request body filtering', () => {
+    it('filters out undefined values from request body objects', async () => {
+      const requestBody = {
+        definedValue: 'test',
+        undefinedValue: undefined,
+        nullValue: null,
+        falseValue: false,
+        zeroValue: 0,
+        emptyString: '',
+      } as any;
+
+      await fapiClient.request({
+        path: '/foo',
+        method: 'POST',
+        body: requestBody,
+      });
+
+      expect(fetch).toHaveBeenCalledWith(
+        expect.any(URL),
+        expect.objectContaining({
+          body: 'defined_value=test&null_value=&false_value=false&zero_value=0&empty_string=',
+        }),
+      );
+    });
+
+    it('preserves FormData objects without filtering', async () => {
+      const formData = new FormData();
+      formData.append('key', 'value');
+      formData.append('undefinedKey', 'undefined'); // FormData doesn't have undefined values
+
+      await fapiClient.request({
+        path: '/foo',
+        method: 'POST',
+        body: formData,
+      });
+
+      expect(fetch).toHaveBeenCalledWith(
+        expect.any(URL),
+        expect.objectContaining({
+          body: formData,
+        }),
+      );
+    });
+
+    it('preserves non-object bodies without filtering', async () => {
+      const stringBody = 'raw string body';
+
+      await fapiClient.request({
+        path: '/foo',
+        method: 'POST',
+        body: stringBody,
+        headers: {
+          'content-type': 'text/plain',
+        },
+      });
+
+      expect(fetch).toHaveBeenCalledWith(
+        expect.any(URL),
+        expect.objectContaining({
+          body: stringBody,
+        }),
+      );
+    });
+
+    it('handles empty objects', async () => {
+      await fapiClient.request({
+        path: '/foo',
+        method: 'POST',
+        body: {} as any,
+      });
+
+      expect(fetch).toHaveBeenCalledWith(
+        expect.any(URL),
+        expect.objectContaining({
+          body: '',
+        }),
+      );
+    });
+
+    it('handles objects with only undefined values', async () => {
+      const requestBody = {
+        undefinedValue1: undefined,
+        undefinedValue2: undefined,
+      } as any;
+
+      await fapiClient.request({
+        path: '/foo',
+        method: 'POST',
+        body: requestBody,
+      });
+
+      expect(fetch).toHaveBeenCalledWith(
+        expect.any(URL),
+        expect.objectContaining({
+          body: '',
+        }),
+      );
+    });
+
+    it('does not perform deep filtering - preserves nested undefined values', async () => {
+      const requestBody = {
+        topLevel: 'value',
+        topLevelUndefined: undefined,
+        nested: {
+          nestedDefined: 'nested value',
+          nestedUndefined: undefined,
+        },
+      } as any;
+
+      await fapiClient.request({
+        path: '/foo',
+        method: 'POST',
+        body: requestBody,
+      });
+
+      // The nested object should be JSON stringified with undefined values preserved
+      // Note: JSON.stringify removes undefined values, so we expect only the defined nested value
+      const expectedNestedJson = JSON.stringify({
+        nestedDefined: 'nested value',
+      } as any);
+
+      expect(fetch).toHaveBeenCalledWith(
+        expect.any(URL),
+        expect.objectContaining({
+          body: `top_level=value&nested=${encodeURIComponent(expectedNestedJson).replace(/%20/g, '+')}`,
+        }),
+      );
+    });
+  });
+
   describe('retry logic', () => {
     it('does not send retry query parameter on initial request', async () => {
       await fapiClient.request({

packages/clerk-js/src/core/fapiClient.ts

@@ -5,7 +5,12 @@ import type { ClerkAPIErrorJSON, ClientJSON, InstanceType } from '@clerk/types';
 
 import { debugLogger } from '@/utils/debug';
 
-import { buildEmailAddress as buildEmailAddressUtil, buildURL as buildUrlUtil, stringifyQueryParams } from '../utils';
+import {
+  buildEmailAddress as buildEmailAddressUtil,
+  buildURL as buildUrlUtil,
+  filterUndefinedValues,
+  stringifyQueryParams,
+} from '../utils';
 import { SUPPORTED_FAPI_VERSION } from './constants';
 import { clerkNetworkError } from './errors';
 
@@ -195,6 +200,10 @@ export function createFapiClient(options: FapiClientOptions): FapiClient {
     const requestInit = { ..._requestInit };
     const { method = 'GET', body } = requestInit;
 
+    if (body && typeof body === 'object' && !(body instanceof FormData)) {
+      requestInit.body = filterUndefinedValues(body);
+    }
+
     requestInit.url = buildUrl({
       ...requestInit,
       // TODO: Pass these values to the FAPI client instead of calculating them on the spot
@@ -214,7 +223,6 @@ export function createFapiClient(options: FapiClientOptions): FapiClient {
     // Massage the body depending on the content type if needed.
     // Currently, this is needed only for form-urlencoded, so that the values reach the server in the form
     // foo=bar&baz=bar&whatever=1
-
     if (requestInit.headers.get('content-type') === 'application/x-www-form-urlencoded') {
       // The native BodyInit type is too wide for our use case,
       // so we're casting it to a more specific type here.

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

@@ -603,55 +603,22 @@ class SignUpFuture implements SignUpFutureResource {
         captchaToken,
         captchaWidgetType,
         captchaError,
+        ...params,
+        unsafeMetadata: params.unsafeMetadata ? normalizeUnsafeMetadata(params.unsafeMetadata) : undefined,
       };
 
-      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,
-      });
+      await this.resource.__internal_basePost({ path: this.resource.pathRoot, 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;
-      }
+      const body: Record<string, unknown> = {
+        ...params,
+        unsafeMetadata: params.unsafeMetadata ? normalizeUnsafeMetadata(params.unsafeMetadata) : undefined,
+      };
 
-      await this.resource.__internal_basePatch({
-        path: this.resource.pathRoot,
-        body,
-      });
+      await this.resource.__internal_basePatch({ path: this.resource.pathRoot, body });
     });
   }
 
@@ -661,44 +628,14 @@ class SignUpFuture implements SignUpFutureResource {
 
       const body: Record<string, unknown> = {
         strategy: 'password',
-        password: params.password,
         captchaToken,
         captchaWidgetType,
         captchaError,
+        ...params,
+        unsafeMetadata: params.unsafeMetadata ? normalizeUnsafeMetadata(params.unsafeMetadata) : undefined,
       };
 
-      if (params.phoneNumber) {
-        body.phoneNumber = params.phoneNumber;
-      }
-
-      if (params.emailAddress) {
-        body.emailAddress = params.emailAddress;
-      }
-
-      if (params.username) {
-        body.username = params.username;
-      }
-
-      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,
-      });
+      await this.resource.__internal_basePost({ path: this.resource.pathRoot, body });
     });
   }