From c86f73be382d01ec5f0ff5922ad907f429e63a58 Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Tue, 5 Mar 2024 19:00:35 +0200
Subject: [PATCH] chore(clerk-react): Stricter types for custom pages (#2939)

---
 .changeset/rotten-ligers-move.md |  5 +++++
 packages/react/src/types.ts      | 21 +++++++++++++++------
 2 files changed, 20 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/rotten-ligers-move.md

diff --git a/.changeset/rotten-ligers-move.md b/.changeset/rotten-ligers-move.md
new file mode 100644
index 0000000000..6bd991c0c8
--- /dev/null
+++ b/.changeset/rotten-ligers-move.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-react': patch
+---
+
+Introducing stricter types for custom pages for UserProfile and OrganizationProfile.
diff --git a/packages/react/src/types.ts b/packages/react/src/types.ts
index ab4766e200..b13c8336bc 100644
--- a/packages/react/src/types.ts
+++ b/packages/react/src/types.ts
@@ -82,6 +82,7 @@ type ButtonProps = {
 };
 
 export type SignInButtonProps = ButtonProps;
+
 export interface SignUpButtonProps extends ButtonProps {
   unsafeMetadata?: SignUpUnsafeMetadata;
 }
@@ -91,11 +92,19 @@ export type SignInWithMetamaskButtonProps = Pick<ButtonProps, 'redirectUrl' | 'c
 export type RedirectToSignInProps = SignInRedirectOptions;
 export type RedirectToSignUpProps = SignUpRedirectOptions;
 
-export type UserProfilePageProps = {
-  url?: string;
-  label: string;
-  labelIcon?: React.ReactNode;
-};
+type PageProps<T extends string> =
+  | {
+      label: string;
+      url: string;
+      labelIcon: React.ReactNode;
+    }
+  | {
+      label: T;
+      url?: never;
+      labelIcon?: never;
+    };
+
+export type UserProfilePageProps = PageProps<'account' | 'security'>;
 
 export type UserProfileLinkProps = {
   url: string;
@@ -103,5 +112,5 @@ export type UserProfileLinkProps = {
   labelIcon: React.ReactNode;
 };
 
-export type OrganizationProfilePageProps = UserProfilePageProps;
+export type OrganizationProfilePageProps = PageProps<'general' | 'members'>;
 export type OrganizationProfileLinkProps = UserProfileLinkProps;