fix(ui): Add missing noop methods to unsafeMetadata field in SignUpStart

.changeset/wild-insects-design.md

@@ -0,0 +1,5 @@
+---
+"@clerk/ui": patch
+---
+
+Fixed unhandled TypeError when `unsafeMetadata` is passed to `<SignUp />`

packages/ui/src/components/SignUp/SignUpStart.tsx

@@ -259,7 +259,15 @@ function SignUpStartInternal(): JSX.Element {
     }, [] as Array<FormControlState>);
 
     if (unsafeMetadata) {
-      fieldsToSubmit.push({ id: 'unsafeMetadata', value: unsafeMetadata } as any);
+      const noop = () => {};
+      fieldsToSubmit.push({
+        id: 'unsafeMetadata',
+        value: unsafeMetadata,
+        clearFeedback: noop,
+        setValue: noop,
+        onChange: noop,
+        setError: noop,
+      } as any);
     }
 
     if (fields.ticket || hasExistingSignUpWithTicket) {

packages/ui/src/components/SignUp/__tests__/SignUpStart.test.tsx

@@ -1,3 +1,4 @@
+import { ClerkAPIResponseError } from '@clerk/shared/error';
 import { OAUTH_PROVIDERS } from '@clerk/shared/oauth';
 import type { SignUpResource } from '@clerk/shared/types';
 import { describe, expect, it, vi } from 'vitest';
@@ -452,6 +453,45 @@ describe('SignUpStart', () => {
       );
     });
 
+    it('does not throw when unsafeMetadata is set and signUp.create rejects with an API error', async () => {
+      const { wrapper, fixtures, props } = await createFixtures(f => {
+        f.withEmailAddress();
+        f.withPassword();
+      });
+      fixtures.signUp.create.mockRejectedValueOnce(
+        new ClerkAPIResponseError('Error', {
+          data: [
+            {
+              code: 'form_password_pwned',
+              long_message: 'Password has been found in an online data breach.',
+              message: 'Password has been found in an online data breach.',
+              meta: { param_name: 'password' },
+            },
+          ],
+          status: 422,
+        }),
+      );
+      props.setProps({ unsafeMetadata: { foo: 'bar' } });
+
+      Object.defineProperty(window, 'location', {
+        writable: true,
+        value: { href: 'http://localhost/sign-up?__clerk_ticket=test_ticket' },
+      });
+      Object.defineProperty(window, 'history', {
+        writable: true,
+        value: { replaceState: vi.fn() },
+      });
+
+      render(
+        <CardStateProvider>
+          <SignUpStart />
+        </CardStateProvider>,
+        { wrapper },
+      );
+
+      await waitFor(() => expect(fixtures.signUp.create).toHaveBeenCalled());
+    });
+
     it('removes the ticket from the url when completing the sign up', async () => {
       const { wrapper, fixtures } = await createFixtures(f => {
         f.withEmailAddress();