fix(react): Prevent props from leaking to child elements in SignUpButton & SignInButton

.changeset/two-aliens-glow.md

@@ -0,0 +1,5 @@
+---
+'@clerk/react': patch
+---
+
+Prevent props from leaking to child elements in SignUpButton & SignInButton

packages/react/src/components/SignInButton.tsx

@@ -8,6 +8,8 @@ import { withClerk } from './withClerk';
 export const SignInButton = withClerk(
   ({ clerk, children, ...props }: WithClerkProp<React.PropsWithChildren<SignInButtonProps>>) => {
     const {
+      // @ts-expect-error - appearance is a valid prop for SignInProps & SignInButtonPropsModal
+      appearance,
       signUpFallbackRedirectUrl,
       forceRedirectUrl,
       fallbackRedirectUrl,
@@ -33,7 +35,7 @@ export const SignInButton = withClerk(
       };
 
       if (mode === 'modal') {
-        return clerk.openSignIn({ ...opts, appearance: props.appearance });
+        return clerk.openSignIn({ ...opts, appearance });
       }
       return clerk.redirectToSignIn({
         ...opts,

packages/react/src/components/SignUpButton.tsx

@@ -8,6 +8,10 @@ import { withClerk } from './withClerk';
 export const SignUpButton = withClerk(
   ({ clerk, children, ...props }: WithClerkProp<React.PropsWithChildren<SignUpButtonProps>>) => {
     const {
+      // @ts-expect-error - appearance is a valid prop for SignUpProps & SignUpButtonPropsModal
+      appearance,
+      // @ts-expect-error - unsafeMetadata is a valid prop for SignUpProps & SignUpButtonPropsModal
+      unsafeMetadata,
       fallbackRedirectUrl,
       forceRedirectUrl,
       signInFallbackRedirectUrl,
@@ -34,8 +38,8 @@ export const SignUpButton = withClerk(
       if (mode === 'modal') {
         return clerk.openSignUp({
           ...opts,
-          appearance: props.appearance,
-          unsafeMetadata: props.unsafeMetadata,
+          appearance,
+          unsafeMetadata,
         });
       }
 

packages/react/src/components/__tests__/SignInButton.test.tsx

@@ -105,4 +105,18 @@ describe('<SignInButton/>', () => {
       );
     }).toThrow();
   });
+
+  it('does not pass appearance prop to child element', () => {
+    const { container } = render(
+      <SignInButton
+        mode='modal'
+        appearance={{ elements: { rootBox: 'test' } }}
+      >
+        <button type='button'>Sign in</button>
+      </SignInButton>,
+    );
+
+    const button = container.querySelector('button');
+    expect(button?.hasAttribute('appearance')).toBe(false);
+  });
 });

packages/react/src/components/__tests__/SignUpButton.test.tsx

@@ -109,4 +109,29 @@ describe('<SignUpButton/>', () => {
       );
     }).toThrow();
   });
+
+  it('does not pass unsafeMetadata prop to child element', () => {
+    const { container } = render(
+      <SignUpButton unsafeMetadata={{ customField: 'test' }}>
+        <button type='button'>Sign up</button>
+      </SignUpButton>,
+    );
+
+    const button = container.querySelector('button');
+    expect(button?.hasAttribute('unsafeMetadata')).toBe(false);
+  });
+
+  it('does not pass appearance prop to child element', () => {
+    const { container } = render(
+      <SignUpButton
+        mode='modal'
+        appearance={{ elements: { rootBox: 'test' } }}
+      >
+        <button type='button'>Sign up</button>
+      </SignUpButton>,
+    );
+
+    const button = container.querySelector('button');
+    expect(button?.hasAttribute('appearance')).toBe(false);
+  });
 });