From c84d3160a377ee3ada922a80c384b5907ff28550 Mon Sep 17 00:00:00 2001
From: Tom Milewski <me@tm.codes>
Date: Wed, 16 Jul 2025 18:20:34 -0400
Subject: [PATCH 1/3] fix: Ensure unsafeMetadata prop is only allowed in valid
 circumstances

---
 packages/react/src/components/SignUpButton.tsx | 8 +++++---
 packages/types/src/clerk.ts                    | 5 ++---
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/react/src/components/SignUpButton.tsx b/packages/react/src/components/SignUpButton.tsx
index ccf5ce4f3c9..c2ab4d710ca 100644
--- a/packages/react/src/components/SignUpButton.tsx
+++ b/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({
diff --git a/packages/types/src/clerk.ts b/packages/types/src/clerk.ts
index 49d8cf6e57a..3f8dd5731ac 100644
--- a/packages/types/src/clerk.ts
+++ b/packages/types/src/clerk.ts
@@ -1903,6 +1903,7 @@ export interface HandleEmailLinkVerificationParams {
 type ButtonPropsModal<T extends SignInProps | SignUpProps> = {
   mode: 'modal';
   appearance?: T['appearance'];
+  unsafeMetadata?: T extends SignUpProps ? SignUpUnsafeMetadata : never;
 };
 
 type ButtonPropsRedirect = {
@@ -1923,9 +1924,7 @@ export type SignInButtonProps = ButtonProps<SignInProps> &
     | 'oauthFlow'
   >;
 
-export type SignUpButtonProps = {
-  unsafeMetadata?: SignUpUnsafeMetadata;
-} & ButtonProps<SignUpProps> &
+export type SignUpButtonProps = ButtonProps<SignUpProps> &
   Pick<
     SignUpProps,
     | 'fallbackRedirectUrl'

From 6623f86a14acadccae3e78fe4ea2cc02958bafce Mon Sep 17 00:00:00 2001
From: Tom Milewski <me@tm.codes>
Date: Wed, 16 Jul 2025 19:00:53 -0400
Subject: [PATCH 2/3] fix: Apply changes to Astro components

---
 .changeset/cyan-pots-attack.md            |  7 +++++++
 packages/astro/src/react/SignUpButton.tsx | 18 +++++++-----------
 2 files changed, 14 insertions(+), 11 deletions(-)
 create mode 100644 .changeset/cyan-pots-attack.md

diff --git a/.changeset/cyan-pots-attack.md b/.changeset/cyan-pots-attack.md
new file mode 100644
index 00000000000..0df19c3d7c0
--- /dev/null
+++ b/.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"`
diff --git a/packages/astro/src/react/SignUpButton.tsx b/packages/astro/src/react/SignUpButton.tsx
index 9b54416ae5c..d8cb7d17b8f 100644
--- a/packages/astro/src/react/SignUpButton.tsx
+++ b/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,7 +19,6 @@ export const SignUpButton = withClerk(
         forceRedirectUrl,
         signInFallbackRedirectUrl,
         signInForceRedirectUrl,
-        unsafeMetadata,
       };
 
       if (!clerk) {
@@ -34,7 +26,11 @@ export const SignUpButton = withClerk(
       }
 
       if (mode === 'modal') {
-        return clerk.openSignUp({ ...opts, appearance: props.appearance });
+        return clerk.openSignUp({
+          ...opts,
+          appearance: props.appearance,
+          unsafeMetadata: props.unsafeMetadata,
+        });
       }
 
       return clerk.redirectToSignUp({

From 184c16922613a9dc029065b2d6cdcdb683cbc904 Mon Sep 17 00:00:00 2001
From: Tom Milewski <me@tm.codes>
Date: Thu, 17 Jul 2025 09:58:59 -0400
Subject: [PATCH 3/3] chore: clean up typing

---
 packages/types/src/clerk.ts | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/types/src/clerk.ts b/packages/types/src/clerk.ts
index 3f8dd5731ac..0a69e8af996 100644
--- a/packages/types/src/clerk.ts
+++ b/packages/types/src/clerk.ts
@@ -1900,19 +1900,22 @@ export interface HandleEmailLinkVerificationParams {
   onVerifiedOnOtherDevice?: () => void;
 }
 
-type ButtonPropsModal<T extends SignInProps | SignUpProps> = {
+type SignInButtonPropsModal = {
   mode: 'modal';
-  appearance?: T['appearance'];
-  unsafeMetadata?: T extends SignUpProps ? SignUpUnsafeMetadata : never;
+  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'
@@ -1924,7 +1927,7 @@ export type SignInButtonProps = ButtonProps<SignInProps> &
     | 'oauthFlow'
   >;
 
-export type SignUpButtonProps = ButtonProps<SignUpProps> &
+export type SignUpButtonProps = (SignUpButtonPropsModal | ButtonPropsRedirect) &
   Pick<
     SignUpProps,
     | 'fallbackRedirectUrl'