fix(types): Ensure unsafeMetadata prop is only allowed in valid circumstances (#6340)

Author: tmilewski

.changeset/cyan-pots-attack.md

@@ -0,0 +1,7 @@
+---
+'@clerk/astro': patch
+'@clerk/clerk-react': patch
+'@clerk/types': patch
+---
+
+Ensure proper typing for `SignUpButton` and only allow `unsafeMetadata={...}` when `mode="modal"`

packages/astro/src/react/SignUpButton.tsx

@@ -7,15 +7,8 @@ export type { SignUpButtonProps };
 
 export const SignUpButton = withClerk(
   ({ clerk, children, ...props }: WithClerkProp<React.PropsWithChildren<SignUpButtonProps>>) => {
-    const {
-      fallbackRedirectUrl,
-      forceRedirectUrl,
-      signInFallbackRedirectUrl,
-      signInForceRedirectUrl,
-      mode,
-      unsafeMetadata,
-      ...rest
-    } = props;
+    const { fallbackRedirectUrl, forceRedirectUrl, signInFallbackRedirectUrl, signInForceRedirectUrl, mode, ...rest } =
+      props;
 
     children = normalizeWithDefaultValue(children, 'Sign up');
     const child = assertSingleChild(children)('SignUpButton');
@@ -26,15 +19,18 @@ export const SignUpButton = withClerk(
         forceRedirectUrl,
         signInFallbackRedirectUrl,
         signInForceRedirectUrl,
-        unsafeMetadata,
       };
 
       if (!clerk) {
         return;
       }
 
       if (mode === 'modal') {
-        return clerk.openSignUp({ ...opts, appearance: props.appearance });
+        return clerk.openSignUp({
+          ...opts,
+          appearance: props.appearance,
+          unsafeMetadata: props.unsafeMetadata,
+        });
       }
 
       return clerk.redirectToSignUp({

packages/react/src/components/SignUpButton.tsx

@@ -13,7 +13,6 @@ export const SignUpButton = withClerk(
       signInFallbackRedirectUrl,
       signInForceRedirectUrl,
       mode,
-      unsafeMetadata,
       initialValues,
       oauthFlow,
       ...rest
@@ -28,13 +27,16 @@ export const SignUpButton = withClerk(
         forceRedirectUrl,
         signInFallbackRedirectUrl,
         signInForceRedirectUrl,
-        unsafeMetadata,
         initialValues,
         oauthFlow,
       };
 
       if (mode === 'modal') {
-        return clerk.openSignUp({ ...opts, appearance: props.appearance });
+        return clerk.openSignUp({
+          ...opts,
+          appearance: props.appearance,
+          unsafeMetadata: props.unsafeMetadata,
+        });
       }
 
       return clerk.redirectToSignUp({

packages/types/src/clerk.ts

@@ -1900,18 +1900,22 @@ export interface HandleEmailLinkVerificationParams {
   onVerifiedOnOtherDevice?: () => void;
 }
 
-type ButtonPropsModal<T extends SignInProps | SignUpProps> = {
+type SignInButtonPropsModal = {
   mode: 'modal';
-  appearance?: T['appearance'];
+  appearance?: SignInProps['appearance'];
+};
+
+type SignUpButtonPropsModal = {
+  mode: 'modal';
+  appearance?: SignUpProps['appearance'];
+  unsafeMetadata?: SignUpUnsafeMetadata;
 };
 
 type ButtonPropsRedirect = {
   mode?: 'redirect';
 };
 
-type ButtonProps<T extends SignInProps | SignUpProps> = ButtonPropsModal<T> | ButtonPropsRedirect;
-
-export type SignInButtonProps = ButtonProps<SignInProps> &
+export type SignInButtonProps = (SignInButtonPropsModal | ButtonPropsRedirect) &
   Pick<
     SignInProps,
     | 'fallbackRedirectUrl'
@@ -1923,9 +1927,7 @@ export type SignInButtonProps = ButtonProps<SignInProps> &
     | 'oauthFlow'
   >;
 
-export type SignUpButtonProps = {
-  unsafeMetadata?: SignUpUnsafeMetadata;
-} & ButtonProps<SignUpProps> &
+export type SignUpButtonProps = (SignUpButtonPropsModal | ButtonPropsRedirect) &
   Pick<
     SignUpProps,
     | 'fallbackRedirectUrl'