fix(clerk-js): Pass unsafeMetadata with sign up ticket flows (#7657)

Author: tmilewski

.changeset/bumpy-clowns-nail.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+fix: Ensure unsafeMetadata is passed with Sign Up Ticket flow

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

@@ -146,7 +146,7 @@ function SignUpStartInternal(): JSX.Element {
     status.setLoading();
     card.setLoading();
     signUp
-      .create({ strategy: 'ticket', ticket: formState.ticket.value })
+      .create({ strategy: 'ticket', ticket: formState.ticket.value, unsafeMetadata })
       .then(signUp => {
         formState.emailAddress.setValue(signUp.emailAddress || '');
         // In case we are in a Ticket flow and the sign up is not complete yet, update the state

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

@@ -379,7 +379,11 @@ describe('SignUpStart', () => {
       );
 
       await waitFor(() =>
-        expect(fixtures.signUp.create).toHaveBeenCalledWith({ strategy: 'ticket', ticket: 'test_ticket' }),
+        expect(fixtures.signUp.create).toHaveBeenCalledWith({
+          strategy: 'ticket',
+          ticket: 'test_ticket',
+          unsafeMetadata: undefined,
+        }),
       );
 
       //don't remove the query param quite yet
@@ -390,6 +394,39 @@ describe('SignUpStart', () => {
       );
     });
 
+    it('passes unsafeMetadata to signUp.create when ticket is detected', async () => {
+      const { wrapper, fixtures, props } = await createFixtures(f => {
+        f.withEmailAddress();
+        f.withPassword();
+      });
+      fixtures.signUp.create.mockResolvedValueOnce({} as SignUpResource);
+      props.setProps({ unsafeMetadata: { foo: 'bar', nested: { value: 123 } } });
+
+      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).toHaveBeenCalledWith({
+          strategy: 'ticket',
+          ticket: 'test_ticket',
+          unsafeMetadata: { foo: 'bar', nested: { value: 123 } },
+        }),
+      );
+    });
+
     it('removes the ticket from the url when completing the sign up', async () => {
       const { wrapper, fixtures } = await createFixtures(f => {
         f.withEmailAddress();
@@ -414,7 +451,11 @@ describe('SignUpStart', () => {
       );
 
       await waitFor(() =>
-        expect(fixtures.signUp.create).toHaveBeenCalledWith({ strategy: 'ticket', ticket: 'test_ticket' }),
+        expect(fixtures.signUp.create).toHaveBeenCalledWith({
+          strategy: 'ticket',
+          ticket: 'test_ticket',
+          unsafeMetadata: undefined,
+        }),
       );
 
       expect(window.history.replaceState).toHaveBeenCalledWith(