chore(types,clerk-react,astro,vue): Share Protect component prop type between SDKs

.changeset/wet-foxes-attend.md

@@ -0,0 +1,8 @@
+---
+"@clerk/astro": patch
+"@clerk/clerk-react": patch
+"@clerk/types": patch
+"@clerk/vue": patch
+---
+
+Extract internal `ProtectProps` type to shared types to eliminate duplication across SDKs

.typedoc/__tests__/__snapshots__/file-structure.test.ts.snap

@@ -45,6 +45,7 @@ exports[`Typedoc output > should have a deliberate file structure 1`] = `
  "types/path-value.mdx",
  "types/pending-session-options.mdx",
  "types/pending-session-resource.mdx",
+ "types/protect-props.mdx",
  "types/record-to-path.mdx",
  "types/redirect-options.mdx",
  "types/reverification-config.mdx",

packages/astro/src/types.ts

@@ -1,12 +1,9 @@
 import type {
- Autocomplete,
- CheckAuthorizationWithCustomPermissions,
  Clerk,
  ClerkOptions,
  ClientResource,
  MultiDomainAndOrProxyPrimitives,
- OrganizationCustomPermissionKey,
- OrganizationCustomRoleKey,
+ ProtectProps,
  Without,
 } from '@clerk/types';
 
@@ -48,50 +45,6 @@ declare global {
  }
 }
 
-type ProtectProps =
- | {
- condition?: never;
- role: OrganizationCustomRoleKey;
- permission?: never;
- feature?: never;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- feature?: never;
- plan?: never;
- permission: OrganizationCustomPermissionKey;
- }
- | {
- condition: (has: CheckAuthorizationWithCustomPermissions) => boolean;
- role?: never;
- permission?: never;
- feature?: never;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature: Autocomplete<`user:${string}` | `org:${string}`>;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature?: never;
- plan: Autocomplete<`user:${string}` | `org:${string}`>;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature?: never;
- plan?: never;
- };
-
 export type { AstroClerkUpdateOptions, AstroClerkIntegrationParams, AstroClerkCreateInstanceParams, ProtectProps };
 
 export type ButtonProps<Tag> = {

packages/react/src/components/controlComponents.tsx

@@ -1,12 +1,5 @@
 import { deprecated } from '@clerk/shared/deprecated';
-import type {
- Autocomplete,
- CheckAuthorizationWithCustomPermissions,
- HandleOAuthCallbackParams,
- OrganizationCustomPermissionKey,
- OrganizationCustomRoleKey,
- PendingSessionOptions,
-} from '@clerk/types';
+import type { HandleOAuthCallbackParams, PendingSessionOptions, ProtectProps as _ProtectProps } from '@clerk/types';
 import React from 'react';
 
 import { useIsomorphicClerkContext } from '../contexts/IsomorphicClerkContext';
@@ -77,50 +70,7 @@ export const ClerkDegraded = ({ children }: React.PropsWithChildren<unknown>) =>
 };
 
 export type ProtectProps = React.PropsWithChildren<
- (
- | {
- condition?: never;
- role: OrganizationCustomRoleKey;
- permission?: never;
- feature?: never;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- feature?: never;
- plan?: never;
- permission: OrganizationCustomPermissionKey;
- }
- | {
- condition: (has: CheckAuthorizationWithCustomPermissions) => boolean;
- role?: never;
- permission?: never;
- feature?: never;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature: Autocomplete<`user:${string}` | `org:${string}`>;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature?: never;
- plan: Autocomplete<`user:${string}` | `org:${string}`>;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature?: never;
- plan?: never;
- }
- ) & {
+ _ProtectProps & {
  fallback?: React.ReactNode;
  } & PendingSessionOptions
 >;

packages/types/src/index.ts

@@ -37,6 +37,7 @@ export * from './organizationSuggestion';
 export * from './passwords';
 export * from './permission';
 export * from './phoneNumber';
+export * from './protect';
 export * from './redirects';
 export * from './resource';
 export * from './role';

packages/types/src/protect.ts

@@ -0,0 +1,70 @@
+import type { OrganizationCustomPermissionKey, OrganizationCustomRoleKey } from './organizationMembership';
+import type { CheckAuthorizationWithCustomPermissions } from './session';
+import type { Autocomplete } from './utils';
+
+/**
+ * Props for the `<Protect />` component, which restricts access to its children based on authentication and authorization.
+ *
+ * Use `ProtectProps` to specify the required role, permission, feature, or plan for access.
+ *
+ * @example
+ * ```tsx
+ * // Require a specific permission
+ * <Protect permission="a_permission_key" />
+ *
+ * // Require a specific role
+ * <Protect role="a_role_key" />
+ *
+ * // Use a custom condition callback
+ * <Protect condition={(has) => has({ permission: "a_permission_key" })} />
+ *
+ * // Require a specific feature
+ * <Protect feature="a_feature_key" />
+ *
+ * // Require a specific plan
+ * <Protect plan=a_plan_key" />
+ * ```
+ */
+export type ProtectProps =
+ | {
+ condition?: never;
+ role: OrganizationCustomRoleKey;
+ permission?: never;
+ feature?: never;
+ plan?: never;
+ }
+ | {
+ condition?: never;
+ role?: never;
+ feature?: never;
+ plan?: never;
+ permission: OrganizationCustomPermissionKey;
+ }
+ | {
+ condition: (has: CheckAuthorizationWithCustomPermissions) => boolean;
+ role?: never;
+ permission?: never;
+ feature?: never;
+ plan?: never;
+ }
+ | {
+ condition?: never;
+ role?: never;
+ permission?: never;
+ feature: Autocomplete<`user:${string}` | `org:${string}`>;
+ plan?: never;
+ }
+ | {
+ condition?: never;
+ role?: never;
+ permission?: never;
+ feature?: never;
+ plan: Autocomplete<`user:${string}` | `org:${string}`>;
+ }
+ | {
+ condition?: never;
+ role?: never;
+ permission?: never;
+ feature?: never;
+ plan?: never;
+ };

packages/vue/src/components/controlComponents.ts

@@ -1,11 +1,8 @@
 import { deprecated } from '@clerk/shared/deprecated';
 import type {
- Autocomplete,
- CheckAuthorizationWithCustomPermissions,
  HandleOAuthCallbackParams,
- OrganizationCustomPermissionKey,
- OrganizationCustomRoleKey,
  PendingSessionOptions,
+ ProtectProps as _ProtectProps,
  RedirectOptions,
 } from '@clerk/types';
 import { defineComponent } from 'vue';
@@ -107,51 +104,7 @@ export const AuthenticateWithRedirectCallback = defineComponent((props: HandleOA
  return () => null;
 });
 
-export type ProtectProps = (
- | {
- condition?: never;
- role: OrganizationCustomRoleKey;
- permission?: never;
- feature?: never;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- feature?: never;
- plan?: never;
- permission: OrganizationCustomPermissionKey;
- }
- | {
- condition: (has: CheckAuthorizationWithCustomPermissions) => boolean;
- role?: never;
- permission?: never;
- feature?: never;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature: Autocomplete<`user:${string}` | `org:${string}`>;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature?: never;
- plan: Autocomplete<`user:${string}` | `org:${string}`>;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature?: never;
- plan?: never;
- }
-) &
- PendingSessionOptions;
+export type ProtectProps = _ProtectProps & PendingSessionOptions;
 
 export const Protect = defineComponent((props: ProtectProps, { slots }) => {
  const { isLoaded, has, userId } = useAuth({ treatPendingAsSignedOut: props.treatPendingAsSignedOut });

.changeset/wet-foxes-attend.md

@@ -0,0 +1,8 @@
+---
+"@clerk/astro": patch
+"@clerk/clerk-react": patch
+"@clerk/types": patch
+"@clerk/vue": patch
+---
+
+Extract internal `ProtectProps` type to shared types to eliminate duplication across SDKs

.typedoc/__tests__/__snapshots__/file-structure.test.ts.snap

@@ -45,6 +45,7 @@ exports[`Typedoc output > should have a deliberate file structure 1`] = `
  "types/path-value.mdx",
  "types/pending-session-options.mdx",
  "types/pending-session-resource.mdx",
+ "types/protect-props.mdx",
  "types/record-to-path.mdx",
  "types/redirect-options.mdx",
  "types/reverification-config.mdx",

packages/astro/src/types.ts

@@ -1,12 +1,9 @@
 import type {
- Autocomplete,
- CheckAuthorizationWithCustomPermissions,
  Clerk,
  ClerkOptions,
  ClientResource,
  MultiDomainAndOrProxyPrimitives,
- OrganizationCustomPermissionKey,
- OrganizationCustomRoleKey,
+ ProtectProps,
  Without,
 } from '@clerk/types';
 
@@ -48,50 +45,6 @@ declare global {
  }
 }
 
-type ProtectProps =
- | {
- condition?: never;
- role: OrganizationCustomRoleKey;
- permission?: never;
- feature?: never;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- feature?: never;
- plan?: never;
- permission: OrganizationCustomPermissionKey;
- }
- | {
- condition: (has: CheckAuthorizationWithCustomPermissions) => boolean;
- role?: never;
- permission?: never;
- feature?: never;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature: Autocomplete<`user:${string}` | `org:${string}`>;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature?: never;
- plan: Autocomplete<`user:${string}` | `org:${string}`>;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature?: never;
- plan?: never;
- };
-
 export type { AstroClerkUpdateOptions, AstroClerkIntegrationParams, AstroClerkCreateInstanceParams, ProtectProps };
 
 export type ButtonProps<Tag> = {

packages/react/src/components/controlComponents.tsx

@@ -1,12 +1,5 @@
 import { deprecated } from '@clerk/shared/deprecated';
-import type {
- Autocomplete,
- CheckAuthorizationWithCustomPermissions,
- HandleOAuthCallbackParams,
- OrganizationCustomPermissionKey,
- OrganizationCustomRoleKey,
- PendingSessionOptions,
-} from '@clerk/types';
+import type { HandleOAuthCallbackParams, PendingSessionOptions, ProtectProps as _ProtectProps } from '@clerk/types';
 import React from 'react';
 
 import { useIsomorphicClerkContext } from '../contexts/IsomorphicClerkContext';
@@ -77,50 +70,7 @@ export const ClerkDegraded = ({ children }: React.PropsWithChildren<unknown>) =>
 };
 
 export type ProtectProps = React.PropsWithChildren<
- (
- | {
- condition?: never;
- role: OrganizationCustomRoleKey;
- permission?: never;
- feature?: never;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- feature?: never;
- plan?: never;
- permission: OrganizationCustomPermissionKey;
- }
- | {
- condition: (has: CheckAuthorizationWithCustomPermissions) => boolean;
- role?: never;
- permission?: never;
- feature?: never;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature: Autocomplete<`user:${string}` | `org:${string}`>;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature?: never;
- plan: Autocomplete<`user:${string}` | `org:${string}`>;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature?: never;
- plan?: never;
- }
- ) & {
+ _ProtectProps & {
  fallback?: React.ReactNode;
  } & PendingSessionOptions
 >;

packages/types/src/index.ts

@@ -37,6 +37,7 @@ export * from './organizationSuggestion';
 export * from './passwords';
 export * from './permission';
 export * from './phoneNumber';
+export * from './protect';
 export * from './redirects';
 export * from './resource';
 export * from './role';

packages/types/src/protect.ts

@@ -0,0 +1,70 @@
+import type { OrganizationCustomPermissionKey, OrganizationCustomRoleKey } from './organizationMembership';
+import type { CheckAuthorizationWithCustomPermissions } from './session';
+import type { Autocomplete } from './utils';
+
+/**
+ * Props for the `<Protect />` component, which restricts access to its children based on authentication and authorization.
+ *
+ * Use `ProtectProps` to specify the required role, permission, feature, or plan for access.
+ *
+ * @example
+ * ```tsx
+ * // Require a specific permission
+ * <Protect permission="a_permission_key" />
+ *
+ * // Require a specific role
+ * <Protect role="a_role_key" />
+ *
+ * // Use a custom condition callback
+ * <Protect condition={(has) => has({ permission: "a_permission_key" })} />
+ *
+ * // Require a specific feature
+ * <Protect feature="a_feature_key" />
+ *
+ * // Require a specific plan
+ * <Protect plan=a_plan_key" />
+ * ```
+ */
+export type ProtectProps =
+ | {
+ condition?: never;
+ role: OrganizationCustomRoleKey;
+ permission?: never;
+ feature?: never;
+ plan?: never;
+ }
+ | {
+ condition?: never;
+ role?: never;
+ feature?: never;
+ plan?: never;
+ permission: OrganizationCustomPermissionKey;
+ }
+ | {
+ condition: (has: CheckAuthorizationWithCustomPermissions) => boolean;
+ role?: never;
+ permission?: never;
+ feature?: never;
+ plan?: never;
+ }
+ | {
+ condition?: never;
+ role?: never;
+ permission?: never;
+ feature: Autocomplete<`user:${string}` | `org:${string}`>;
+ plan?: never;
+ }
+ | {
+ condition?: never;
+ role?: never;
+ permission?: never;
+ feature?: never;
+ plan: Autocomplete<`user:${string}` | `org:${string}`>;
+ }
+ | {
+ condition?: never;
+ role?: never;
+ permission?: never;
+ feature?: never;
+ plan?: never;
+ };

packages/vue/src/components/controlComponents.ts

@@ -1,11 +1,8 @@
 import { deprecated } from '@clerk/shared/deprecated';
 import type {
- Autocomplete,
- CheckAuthorizationWithCustomPermissions,
  HandleOAuthCallbackParams,
- OrganizationCustomPermissionKey,
- OrganizationCustomRoleKey,
  PendingSessionOptions,
+ ProtectProps as _ProtectProps,
  RedirectOptions,
 } from '@clerk/types';
 import { defineComponent } from 'vue';
@@ -107,51 +104,7 @@ export const AuthenticateWithRedirectCallback = defineComponent((props: HandleOA
  return () => null;
 });
 
-export type ProtectProps = (
- | {
- condition?: never;
- role: OrganizationCustomRoleKey;
- permission?: never;
- feature?: never;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- feature?: never;
- plan?: never;
- permission: OrganizationCustomPermissionKey;
- }
- | {
- condition: (has: CheckAuthorizationWithCustomPermissions) => boolean;
- role?: never;
- permission?: never;
- feature?: never;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature: Autocomplete<`user:${string}` | `org:${string}`>;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature?: never;
- plan: Autocomplete<`user:${string}` | `org:${string}`>;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature?: never;
- plan?: never;
- }
-) &
- PendingSessionOptions;
+export type ProtectProps = _ProtectProps & PendingSessionOptions;
 
 export const Protect = defineComponent((props: ProtectProps, { slots }) => {
  const { isLoaded, has, userId } = useAuth({ treatPendingAsSignedOut: props.treatPendingAsSignedOut });

.changeset/wet-foxes-attend.md

@@ -0,0 +1,8 @@
+---
+"@clerk/astro": patch
+"@clerk/clerk-react": patch
+"@clerk/types": patch
+"@clerk/vue": patch
+---
+
+Extract internal `ProtectProps` type to shared types to eliminate duplication across SDKs

.typedoc/__tests__/__snapshots__/file-structure.test.ts.snap

@@ -45,6 +45,7 @@ exports[`Typedoc output > should have a deliberate file structure 1`] = `
  "types/path-value.mdx",
  "types/pending-session-options.mdx",
  "types/pending-session-resource.mdx",
+ "types/protect-props.mdx",
  "types/record-to-path.mdx",
  "types/redirect-options.mdx",
  "types/reverification-config.mdx",

packages/astro/src/types.ts

@@ -1,12 +1,9 @@
 import type {
- Autocomplete,
- CheckAuthorizationWithCustomPermissions,
  Clerk,
  ClerkOptions,
  ClientResource,
  MultiDomainAndOrProxyPrimitives,
- OrganizationCustomPermissionKey,
- OrganizationCustomRoleKey,
+ ProtectProps,
  Without,
 } from '@clerk/types';
 
@@ -48,50 +45,6 @@ declare global {
  }
 }
 
-type ProtectProps =
- | {
- condition?: never;
- role: OrganizationCustomRoleKey;
- permission?: never;
- feature?: never;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- feature?: never;
- plan?: never;
- permission: OrganizationCustomPermissionKey;
- }
- | {
- condition: (has: CheckAuthorizationWithCustomPermissions) => boolean;
- role?: never;
- permission?: never;
- feature?: never;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature: Autocomplete<`user:${string}` | `org:${string}`>;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature?: never;
- plan: Autocomplete<`user:${string}` | `org:${string}`>;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature?: never;
- plan?: never;
- };
-
 export type { AstroClerkUpdateOptions, AstroClerkIntegrationParams, AstroClerkCreateInstanceParams, ProtectProps };
 
 export type ButtonProps<Tag> = {

packages/react/src/components/controlComponents.tsx

@@ -1,12 +1,5 @@
 import { deprecated } from '@clerk/shared/deprecated';
-import type {
- Autocomplete,
- CheckAuthorizationWithCustomPermissions,
- HandleOAuthCallbackParams,
- OrganizationCustomPermissionKey,
- OrganizationCustomRoleKey,
- PendingSessionOptions,
-} from '@clerk/types';
+import type { HandleOAuthCallbackParams, PendingSessionOptions, ProtectProps as _ProtectProps } from '@clerk/types';
 import React from 'react';
 
 import { useIsomorphicClerkContext } from '../contexts/IsomorphicClerkContext';
@@ -77,50 +70,7 @@ export const ClerkDegraded = ({ children }: React.PropsWithChildren<unknown>) =>
 };
 
 export type ProtectProps = React.PropsWithChildren<
- (
- | {
- condition?: never;
- role: OrganizationCustomRoleKey;
- permission?: never;
- feature?: never;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- feature?: never;
- plan?: never;
- permission: OrganizationCustomPermissionKey;
- }
- | {
- condition: (has: CheckAuthorizationWithCustomPermissions) => boolean;
- role?: never;
- permission?: never;
- feature?: never;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature: Autocomplete<`user:${string}` | `org:${string}`>;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature?: never;
- plan: Autocomplete<`user:${string}` | `org:${string}`>;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature?: never;
- plan?: never;
- }
- ) & {
+ _ProtectProps & {
  fallback?: React.ReactNode;
  } & PendingSessionOptions
 >;

packages/types/src/index.ts

@@ -37,6 +37,7 @@ export * from './organizationSuggestion';
 export * from './passwords';
 export * from './permission';
 export * from './phoneNumber';
+export * from './protect';
 export * from './redirects';
 export * from './resource';
 export * from './role';

packages/types/src/protect.ts

@@ -0,0 +1,70 @@
+import type { OrganizationCustomPermissionKey, OrganizationCustomRoleKey } from './organizationMembership';
+import type { CheckAuthorizationWithCustomPermissions } from './session';
+import type { Autocomplete } from './utils';
+
+/**
+ * Props for the `<Protect />` component, which restricts access to its children based on authentication and authorization.
+ *
+ * Use `ProtectProps` to specify the required role, permission, feature, or plan for access.
+ *
+ * @example
+ * ```tsx
+ * // Require a specific permission
+ * <Protect permission="a_permission_key" />
+ *
+ * // Require a specific role
+ * <Protect role="a_role_key" />
+ *
+ * // Use a custom condition callback
+ * <Protect condition={(has) => has({ permission: "a_permission_key" })} />
+ *
+ * // Require a specific feature
+ * <Protect feature="a_feature_key" />
+ *
+ * // Require a specific plan
+ * <Protect plan=a_plan_key" />
+ * ```
+ */
+export type ProtectProps =
+ | {
+ condition?: never;
+ role: OrganizationCustomRoleKey;
+ permission?: never;
+ feature?: never;
+ plan?: never;
+ }
+ | {
+ condition?: never;
+ role?: never;
+ feature?: never;
+ plan?: never;
+ permission: OrganizationCustomPermissionKey;
+ }
+ | {
+ condition: (has: CheckAuthorizationWithCustomPermissions) => boolean;
+ role?: never;
+ permission?: never;
+ feature?: never;
+ plan?: never;
+ }
+ | {
+ condition?: never;
+ role?: never;
+ permission?: never;
+ feature: Autocomplete<`user:${string}` | `org:${string}`>;
+ plan?: never;
+ }
+ | {
+ condition?: never;
+ role?: never;
+ permission?: never;
+ feature?: never;
+ plan: Autocomplete<`user:${string}` | `org:${string}`>;
+ }
+ | {
+ condition?: never;
+ role?: never;
+ permission?: never;
+ feature?: never;
+ plan?: never;
+ };

packages/vue/src/components/controlComponents.ts

@@ -1,11 +1,8 @@
 import { deprecated } from '@clerk/shared/deprecated';
 import type {
- Autocomplete,
- CheckAuthorizationWithCustomPermissions,
  HandleOAuthCallbackParams,
- OrganizationCustomPermissionKey,
- OrganizationCustomRoleKey,
  PendingSessionOptions,
+ ProtectProps as _ProtectProps,
  RedirectOptions,
 } from '@clerk/types';
 import { defineComponent } from 'vue';
@@ -107,51 +104,7 @@ export const AuthenticateWithRedirectCallback = defineComponent((props: HandleOA
  return () => null;
 });
 
-export type ProtectProps = (
- | {
- condition?: never;
- role: OrganizationCustomRoleKey;
- permission?: never;
- feature?: never;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- feature?: never;
- plan?: never;
- permission: OrganizationCustomPermissionKey;
- }
- | {
- condition: (has: CheckAuthorizationWithCustomPermissions) => boolean;
- role?: never;
- permission?: never;
- feature?: never;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature: Autocomplete<`user:${string}` | `org:${string}`>;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature?: never;
- plan: Autocomplete<`user:${string}` | `org:${string}`>;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature?: never;
- plan?: never;
- }
-) &
- PendingSessionOptions;
+export type ProtectProps = _ProtectProps & PendingSessionOptions;
 
 export const Protect = defineComponent((props: ProtectProps, { slots }) => {
  const { isLoaded, has, userId } = useAuth({ treatPendingAsSignedOut: props.treatPendingAsSignedOut });

.changeset/wet-foxes-attend.md

@@ -0,0 +1,8 @@
+---
+"@clerk/astro": patch
+"@clerk/clerk-react": patch
+"@clerk/types": patch
+"@clerk/vue": patch
+---
+
+Extract internal `ProtectProps` type to shared types to eliminate duplication across SDKs

.typedoc/__tests__/__snapshots__/file-structure.test.ts.snap

@@ -45,6 +45,7 @@ exports[`Typedoc output > should have a deliberate file structure 1`] = `
  "types/path-value.mdx",
  "types/pending-session-options.mdx",
  "types/pending-session-resource.mdx",
+ "types/protect-props.mdx",
  "types/record-to-path.mdx",
  "types/redirect-options.mdx",
  "types/reverification-config.mdx",

packages/astro/src/types.ts

@@ -1,12 +1,9 @@
 import type {
- Autocomplete,
- CheckAuthorizationWithCustomPermissions,
  Clerk,
  ClerkOptions,
  ClientResource,
  MultiDomainAndOrProxyPrimitives,
- OrganizationCustomPermissionKey,
- OrganizationCustomRoleKey,
+ ProtectProps,
  Without,
 } from '@clerk/types';
 
@@ -48,50 +45,6 @@ declare global {
  }
 }
 
-type ProtectProps =
- | {
- condition?: never;
- role: OrganizationCustomRoleKey;
- permission?: never;
- feature?: never;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- feature?: never;
- plan?: never;
- permission: OrganizationCustomPermissionKey;
- }
- | {
- condition: (has: CheckAuthorizationWithCustomPermissions) => boolean;
- role?: never;
- permission?: never;
- feature?: never;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature: Autocomplete<`user:${string}` | `org:${string}`>;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature?: never;
- plan: Autocomplete<`user:${string}` | `org:${string}`>;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature?: never;
- plan?: never;
- };
-
 export type { AstroClerkUpdateOptions, AstroClerkIntegrationParams, AstroClerkCreateInstanceParams, ProtectProps };
 
 export type ButtonProps<Tag> = {

packages/react/src/components/controlComponents.tsx

@@ -1,12 +1,5 @@
 import { deprecated } from '@clerk/shared/deprecated';
-import type {
- Autocomplete,
- CheckAuthorizationWithCustomPermissions,
- HandleOAuthCallbackParams,
- OrganizationCustomPermissionKey,
- OrganizationCustomRoleKey,
- PendingSessionOptions,
-} from '@clerk/types';
+import type { HandleOAuthCallbackParams, PendingSessionOptions, ProtectProps as _ProtectProps } from '@clerk/types';
 import React from 'react';
 
 import { useIsomorphicClerkContext } from '../contexts/IsomorphicClerkContext';
@@ -77,50 +70,7 @@ export const ClerkDegraded = ({ children }: React.PropsWithChildren<unknown>) =>
 };
 
 export type ProtectProps = React.PropsWithChildren<
- (
- | {
- condition?: never;
- role: OrganizationCustomRoleKey;
- permission?: never;
- feature?: never;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- feature?: never;
- plan?: never;
- permission: OrganizationCustomPermissionKey;
- }
- | {
- condition: (has: CheckAuthorizationWithCustomPermissions) => boolean;
- role?: never;
- permission?: never;
- feature?: never;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature: Autocomplete<`user:${string}` | `org:${string}`>;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature?: never;
- plan: Autocomplete<`user:${string}` | `org:${string}`>;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature?: never;
- plan?: never;
- }
- ) & {
+ _ProtectProps & {
  fallback?: React.ReactNode;
  } & PendingSessionOptions
 >;

packages/types/src/index.ts

@@ -37,6 +37,7 @@ export * from './organizationSuggestion';
 export * from './passwords';
 export * from './permission';
 export * from './phoneNumber';
+export * from './protect';
 export * from './redirects';
 export * from './resource';
 export * from './role';

packages/types/src/protect.ts

@@ -0,0 +1,70 @@
+import type { OrganizationCustomPermissionKey, OrganizationCustomRoleKey } from './organizationMembership';
+import type { CheckAuthorizationWithCustomPermissions } from './session';
+import type { Autocomplete } from './utils';
+
+/**
+ * Props for the `<Protect />` component, which restricts access to its children based on authentication and authorization.
+ *
+ * Use `ProtectProps` to specify the required role, permission, feature, or plan for access.
+ *
+ * @example
+ * ```tsx
+ * // Require a specific permission
+ * <Protect permission="a_permission_key" />
+ *
+ * // Require a specific role
+ * <Protect role="a_role_key" />
+ *
+ * // Use a custom condition callback
+ * <Protect condition={(has) => has({ permission: "a_permission_key" })} />
+ *
+ * // Require a specific feature
+ * <Protect feature="a_feature_key" />
+ *
+ * // Require a specific plan
+ * <Protect plan=a_plan_key" />
+ * ```
+ */
+export type ProtectProps =
+ | {
+ condition?: never;
+ role: OrganizationCustomRoleKey;
+ permission?: never;
+ feature?: never;
+ plan?: never;
+ }
+ | {
+ condition?: never;
+ role?: never;
+ feature?: never;
+ plan?: never;
+ permission: OrganizationCustomPermissionKey;
+ }
+ | {
+ condition: (has: CheckAuthorizationWithCustomPermissions) => boolean;
+ role?: never;
+ permission?: never;
+ feature?: never;
+ plan?: never;
+ }
+ | {
+ condition?: never;
+ role?: never;
+ permission?: never;
+ feature: Autocomplete<`user:${string}` | `org:${string}`>;
+ plan?: never;
+ }
+ | {
+ condition?: never;
+ role?: never;
+ permission?: never;
+ feature?: never;
+ plan: Autocomplete<`user:${string}` | `org:${string}`>;
+ }
+ | {
+ condition?: never;
+ role?: never;
+ permission?: never;
+ feature?: never;
+ plan?: never;
+ };

packages/vue/src/components/controlComponents.ts

@@ -1,11 +1,8 @@
 import { deprecated } from '@clerk/shared/deprecated';
 import type {
- Autocomplete,
- CheckAuthorizationWithCustomPermissions,
  HandleOAuthCallbackParams,
- OrganizationCustomPermissionKey,
- OrganizationCustomRoleKey,
  PendingSessionOptions,
+ ProtectProps as _ProtectProps,
  RedirectOptions,
 } from '@clerk/types';
 import { defineComponent } from 'vue';
@@ -107,51 +104,7 @@ export const AuthenticateWithRedirectCallback = defineComponent((props: HandleOA
  return () => null;
 });
 
-export type ProtectProps = (
- | {
- condition?: never;
- role: OrganizationCustomRoleKey;
- permission?: never;
- feature?: never;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- feature?: never;
- plan?: never;
- permission: OrganizationCustomPermissionKey;
- }
- | {
- condition: (has: CheckAuthorizationWithCustomPermissions) => boolean;
- role?: never;
- permission?: never;
- feature?: never;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature: Autocomplete<`user:${string}` | `org:${string}`>;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature?: never;
- plan: Autocomplete<`user:${string}` | `org:${string}`>;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature?: never;
- plan?: never;
- }
-) &
- PendingSessionOptions;
+export type ProtectProps = _ProtectProps & PendingSessionOptions;
 
 export const Protect = defineComponent((props: ProtectProps, { slots }) => {
  const { isLoaded, has, userId } = useAuth({ treatPendingAsSignedOut: props.treatPendingAsSignedOut });

.changeset/wet-foxes-attend.md

@@ -0,0 +1,8 @@
+---
+"@clerk/astro": patch
+"@clerk/clerk-react": patch
+"@clerk/types": patch
+"@clerk/vue": patch
+---
+
+Extract internal `ProtectProps` type to shared types to eliminate duplication across SDKs

.typedoc/__tests__/__snapshots__/file-structure.test.ts.snap

@@ -45,6 +45,7 @@ exports[`Typedoc output > should have a deliberate file structure 1`] = `
  "types/path-value.mdx",
  "types/pending-session-options.mdx",
  "types/pending-session-resource.mdx",
+ "types/protect-props.mdx",
  "types/record-to-path.mdx",
  "types/redirect-options.mdx",
  "types/reverification-config.mdx",

packages/astro/src/types.ts

@@ -1,12 +1,9 @@
 import type {
- Autocomplete,
- CheckAuthorizationWithCustomPermissions,
  Clerk,
  ClerkOptions,
  ClientResource,
  MultiDomainAndOrProxyPrimitives,
- OrganizationCustomPermissionKey,
- OrganizationCustomRoleKey,
+ ProtectProps,
  Without,
 } from '@clerk/types';
 
@@ -48,50 +45,6 @@ declare global {
  }
 }
 
-type ProtectProps =
- | {
- condition?: never;
- role: OrganizationCustomRoleKey;
- permission?: never;
- feature?: never;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- feature?: never;
- plan?: never;
- permission: OrganizationCustomPermissionKey;
- }
- | {
- condition: (has: CheckAuthorizationWithCustomPermissions) => boolean;
- role?: never;
- permission?: never;
- feature?: never;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature: Autocomplete<`user:${string}` | `org:${string}`>;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature?: never;
- plan: Autocomplete<`user:${string}` | `org:${string}`>;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature?: never;
- plan?: never;
- };
-
 export type { AstroClerkUpdateOptions, AstroClerkIntegrationParams, AstroClerkCreateInstanceParams, ProtectProps };
 
 export type ButtonProps<Tag> = {

packages/react/src/components/controlComponents.tsx

@@ -1,12 +1,5 @@
 import { deprecated } from '@clerk/shared/deprecated';
-import type {
- Autocomplete,
- CheckAuthorizationWithCustomPermissions,
- HandleOAuthCallbackParams,
- OrganizationCustomPermissionKey,
- OrganizationCustomRoleKey,
- PendingSessionOptions,
-} from '@clerk/types';
+import type { HandleOAuthCallbackParams, PendingSessionOptions, ProtectProps as _ProtectProps } from '@clerk/types';
 import React from 'react';
 
 import { useIsomorphicClerkContext } from '../contexts/IsomorphicClerkContext';
@@ -77,50 +70,7 @@ export const ClerkDegraded = ({ children }: React.PropsWithChildren<unknown>) =>
 };
 
 export type ProtectProps = React.PropsWithChildren<
- (
- | {
- condition?: never;
- role: OrganizationCustomRoleKey;
- permission?: never;
- feature?: never;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- feature?: never;
- plan?: never;
- permission: OrganizationCustomPermissionKey;
- }
- | {
- condition: (has: CheckAuthorizationWithCustomPermissions) => boolean;
- role?: never;
- permission?: never;
- feature?: never;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature: Autocomplete<`user:${string}` | `org:${string}`>;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature?: never;
- plan: Autocomplete<`user:${string}` | `org:${string}`>;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature?: never;
- plan?: never;
- }
- ) & {
+ _ProtectProps & {
  fallback?: React.ReactNode;
  } & PendingSessionOptions
 >;

packages/types/src/index.ts

@@ -37,6 +37,7 @@ export * from './organizationSuggestion';
 export * from './passwords';
 export * from './permission';
 export * from './phoneNumber';
+export * from './protect';
 export * from './redirects';
 export * from './resource';
 export * from './role';

packages/types/src/protect.ts

@@ -0,0 +1,70 @@
+import type { OrganizationCustomPermissionKey, OrganizationCustomRoleKey } from './organizationMembership';
+import type { CheckAuthorizationWithCustomPermissions } from './session';
+import type { Autocomplete } from './utils';
+
+/**
+ * Props for the `<Protect />` component, which restricts access to its children based on authentication and authorization.
+ *
+ * Use `ProtectProps` to specify the required role, permission, feature, or plan for access.
+ *
+ * @example
+ * ```tsx
+ * // Require a specific permission
+ * <Protect permission="a_permission_key" />
+ *
+ * // Require a specific role
+ * <Protect role="a_role_key" />
+ *
+ * // Use a custom condition callback
+ * <Protect condition={(has) => has({ permission: "a_permission_key" })} />
+ *
+ * // Require a specific feature
+ * <Protect feature="a_feature_key" />
+ *
+ * // Require a specific plan
+ * <Protect plan=a_plan_key" />
+ * ```
+ */
+export type ProtectProps =
+ | {
+ condition?: never;
+ role: OrganizationCustomRoleKey;
+ permission?: never;
+ feature?: never;
+ plan?: never;
+ }
+ | {
+ condition?: never;
+ role?: never;
+ feature?: never;
+ plan?: never;
+ permission: OrganizationCustomPermissionKey;
+ }
+ | {
+ condition: (has: CheckAuthorizationWithCustomPermissions) => boolean;
+ role?: never;
+ permission?: never;
+ feature?: never;
+ plan?: never;
+ }
+ | {
+ condition?: never;
+ role?: never;
+ permission?: never;
+ feature: Autocomplete<`user:${string}` | `org:${string}`>;
+ plan?: never;
+ }
+ | {
+ condition?: never;
+ role?: never;
+ permission?: never;
+ feature?: never;
+ plan: Autocomplete<`user:${string}` | `org:${string}`>;
+ }
+ | {
+ condition?: never;
+ role?: never;
+ permission?: never;
+ feature?: never;
+ plan?: never;
+ };

packages/vue/src/components/controlComponents.ts

@@ -1,11 +1,8 @@
 import { deprecated } from '@clerk/shared/deprecated';
 import type {
- Autocomplete,
- CheckAuthorizationWithCustomPermissions,
  HandleOAuthCallbackParams,
- OrganizationCustomPermissionKey,
- OrganizationCustomRoleKey,
  PendingSessionOptions,
+ ProtectProps as _ProtectProps,
  RedirectOptions,
 } from '@clerk/types';
 import { defineComponent } from 'vue';
@@ -107,51 +104,7 @@ export const AuthenticateWithRedirectCallback = defineComponent((props: HandleOA
  return () => null;
 });
 
-export type ProtectProps = (
- | {
- condition?: never;
- role: OrganizationCustomRoleKey;
- permission?: never;
- feature?: never;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- feature?: never;
- plan?: never;
- permission: OrganizationCustomPermissionKey;
- }
- | {
- condition: (has: CheckAuthorizationWithCustomPermissions) => boolean;
- role?: never;
- permission?: never;
- feature?: never;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature: Autocomplete<`user:${string}` | `org:${string}`>;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature?: never;
- plan: Autocomplete<`user:${string}` | `org:${string}`>;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature?: never;
- plan?: never;
- }
-) &
- PendingSessionOptions;
+export type ProtectProps = _ProtectProps & PendingSessionOptions;
 
 export const Protect = defineComponent((props: ProtectProps, { slots }) => {
  const { isLoaded, has, userId } = useAuth({ treatPendingAsSignedOut: props.treatPendingAsSignedOut });

.changeset/wet-foxes-attend.md

@@ -0,0 +1,8 @@
+---
+"@clerk/astro": patch
+"@clerk/clerk-react": patch
+"@clerk/types": patch
+"@clerk/vue": patch
+---
+
+Extract internal `ProtectProps` type to shared types to eliminate duplication across SDKs

.typedoc/__tests__/__snapshots__/file-structure.test.ts.snap

@@ -45,6 +45,7 @@ exports[`Typedoc output > should have a deliberate file structure 1`] = `
  "types/path-value.mdx",
  "types/pending-session-options.mdx",
  "types/pending-session-resource.mdx",
+ "types/protect-props.mdx",
  "types/record-to-path.mdx",
  "types/redirect-options.mdx",
  "types/reverification-config.mdx",

packages/astro/src/types.ts

@@ -1,12 +1,9 @@
 import type {
- Autocomplete,
- CheckAuthorizationWithCustomPermissions,
  Clerk,
  ClerkOptions,
  ClientResource,
  MultiDomainAndOrProxyPrimitives,
- OrganizationCustomPermissionKey,
- OrganizationCustomRoleKey,
+ ProtectProps,
  Without,
 } from '@clerk/types';
 
@@ -48,50 +45,6 @@ declare global {
  }
 }
 
-type ProtectProps =
- | {
- condition?: never;
- role: OrganizationCustomRoleKey;
- permission?: never;
- feature?: never;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- feature?: never;
- plan?: never;
- permission: OrganizationCustomPermissionKey;
- }
- | {
- condition: (has: CheckAuthorizationWithCustomPermissions) => boolean;
- role?: never;
- permission?: never;
- feature?: never;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature: Autocomplete<`user:${string}` | `org:${string}`>;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature?: never;
- plan: Autocomplete<`user:${string}` | `org:${string}`>;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature?: never;
- plan?: never;
- };
-
 export type { AstroClerkUpdateOptions, AstroClerkIntegrationParams, AstroClerkCreateInstanceParams, ProtectProps };
 
 export type ButtonProps<Tag> = {

packages/react/src/components/controlComponents.tsx

@@ -1,12 +1,5 @@
 import { deprecated } from '@clerk/shared/deprecated';
-import type {
- Autocomplete,
- CheckAuthorizationWithCustomPermissions,
- HandleOAuthCallbackParams,
- OrganizationCustomPermissionKey,
- OrganizationCustomRoleKey,
- PendingSessionOptions,
-} from '@clerk/types';
+import type { HandleOAuthCallbackParams, PendingSessionOptions, ProtectProps as _ProtectProps } from '@clerk/types';
 import React from 'react';
 
 import { useIsomorphicClerkContext } from '../contexts/IsomorphicClerkContext';
@@ -77,50 +70,7 @@ export const ClerkDegraded = ({ children }: React.PropsWithChildren<unknown>) =>
 };
 
 export type ProtectProps = React.PropsWithChildren<
- (
- | {
- condition?: never;
- role: OrganizationCustomRoleKey;
- permission?: never;
- feature?: never;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- feature?: never;
- plan?: never;
- permission: OrganizationCustomPermissionKey;
- }
- | {
- condition: (has: CheckAuthorizationWithCustomPermissions) => boolean;
- role?: never;
- permission?: never;
- feature?: never;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature: Autocomplete<`user:${string}` | `org:${string}`>;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature?: never;
- plan: Autocomplete<`user:${string}` | `org:${string}`>;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature?: never;
- plan?: never;
- }
- ) & {
+ _ProtectProps & {
  fallback?: React.ReactNode;
  } & PendingSessionOptions
 >;

packages/types/src/index.ts

@@ -37,6 +37,7 @@ export * from './organizationSuggestion';
 export * from './passwords';
 export * from './permission';
 export * from './phoneNumber';
+export * from './protect';
 export * from './redirects';
 export * from './resource';
 export * from './role';

packages/types/src/protect.ts

@@ -0,0 +1,70 @@
+import type { OrganizationCustomPermissionKey, OrganizationCustomRoleKey } from './organizationMembership';
+import type { CheckAuthorizationWithCustomPermissions } from './session';
+import type { Autocomplete } from './utils';
+
+/**
+ * Props for the `<Protect />` component, which restricts access to its children based on authentication and authorization.
+ *
+ * Use `ProtectProps` to specify the required role, permission, feature, or plan for access.
+ *
+ * @example
+ * ```tsx
+ * // Require a specific permission
+ * <Protect permission="a_permission_key" />
+ *
+ * // Require a specific role
+ * <Protect role="a_role_key" />
+ *
+ * // Use a custom condition callback
+ * <Protect condition={(has) => has({ permission: "a_permission_key" })} />
+ *
+ * // Require a specific feature
+ * <Protect feature="a_feature_key" />
+ *
+ * // Require a specific plan
+ * <Protect plan=a_plan_key" />
+ * ```
+ */
+export type ProtectProps =
+ | {
+ condition?: never;
+ role: OrganizationCustomRoleKey;
+ permission?: never;
+ feature?: never;
+ plan?: never;
+ }
+ | {
+ condition?: never;
+ role?: never;
+ feature?: never;
+ plan?: never;
+ permission: OrganizationCustomPermissionKey;
+ }
+ | {
+ condition: (has: CheckAuthorizationWithCustomPermissions) => boolean;
+ role?: never;
+ permission?: never;
+ feature?: never;
+ plan?: never;
+ }
+ | {
+ condition?: never;
+ role?: never;
+ permission?: never;
+ feature: Autocomplete<`user:${string}` | `org:${string}`>;
+ plan?: never;
+ }
+ | {
+ condition?: never;
+ role?: never;
+ permission?: never;
+ feature?: never;
+ plan: Autocomplete<`user:${string}` | `org:${string}`>;
+ }
+ | {
+ condition?: never;
+ role?: never;
+ permission?: never;
+ feature?: never;
+ plan?: never;
+ };

packages/vue/src/components/controlComponents.ts

@@ -1,11 +1,8 @@
 import { deprecated } from '@clerk/shared/deprecated';
 import type {
- Autocomplete,
- CheckAuthorizationWithCustomPermissions,
  HandleOAuthCallbackParams,
- OrganizationCustomPermissionKey,
- OrganizationCustomRoleKey,
  PendingSessionOptions,
+ ProtectProps as _ProtectProps,
  RedirectOptions,
 } from '@clerk/types';
 import { defineComponent } from 'vue';
@@ -107,51 +104,7 @@ export const AuthenticateWithRedirectCallback = defineComponent((props: HandleOA
  return () => null;
 });
 
-export type ProtectProps = (
- | {
- condition?: never;
- role: OrganizationCustomRoleKey;
- permission?: never;
- feature?: never;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- feature?: never;
- plan?: never;
- permission: OrganizationCustomPermissionKey;
- }
- | {
- condition: (has: CheckAuthorizationWithCustomPermissions) => boolean;
- role?: never;
- permission?: never;
- feature?: never;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature: Autocomplete<`user:${string}` | `org:${string}`>;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature?: never;
- plan: Autocomplete<`user:${string}` | `org:${string}`>;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature?: never;
- plan?: never;
- }
-) &
- PendingSessionOptions;
+export type ProtectProps = _ProtectProps & PendingSessionOptions;
 
 export const Protect = defineComponent((props: ProtectProps, { slots }) => {
  const { isLoaded, has, userId } = useAuth({ treatPendingAsSignedOut: props.treatPendingAsSignedOut });

.changeset/wet-foxes-attend.md

@@ -0,0 +1,8 @@
+---
+"@clerk/astro": patch
+"@clerk/clerk-react": patch
+"@clerk/types": patch
+"@clerk/vue": patch
+---
+
+Extract internal `ProtectProps` type to shared types to eliminate duplication across SDKs

.typedoc/__tests__/__snapshots__/file-structure.test.ts.snap

@@ -45,6 +45,7 @@ exports[`Typedoc output > should have a deliberate file structure 1`] = `
  "types/path-value.mdx",
  "types/pending-session-options.mdx",
  "types/pending-session-resource.mdx",
+ "types/protect-props.mdx",
  "types/record-to-path.mdx",
  "types/redirect-options.mdx",
  "types/reverification-config.mdx",

packages/astro/src/types.ts

@@ -1,12 +1,9 @@
 import type {
- Autocomplete,
- CheckAuthorizationWithCustomPermissions,
  Clerk,
  ClerkOptions,
  ClientResource,
  MultiDomainAndOrProxyPrimitives,
- OrganizationCustomPermissionKey,
- OrganizationCustomRoleKey,
+ ProtectProps,
  Without,
 } from '@clerk/types';
 
@@ -48,50 +45,6 @@ declare global {
  }
 }
 
-type ProtectProps =
- | {
- condition?: never;
- role: OrganizationCustomRoleKey;
- permission?: never;
- feature?: never;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- feature?: never;
- plan?: never;
- permission: OrganizationCustomPermissionKey;
- }
- | {
- condition: (has: CheckAuthorizationWithCustomPermissions) => boolean;
- role?: never;
- permission?: never;
- feature?: never;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature: Autocomplete<`user:${string}` | `org:${string}`>;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature?: never;
- plan: Autocomplete<`user:${string}` | `org:${string}`>;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature?: never;
- plan?: never;
- };
-
 export type { AstroClerkUpdateOptions, AstroClerkIntegrationParams, AstroClerkCreateInstanceParams, ProtectProps };
 
 export type ButtonProps<Tag> = {

packages/react/src/components/controlComponents.tsx

@@ -1,12 +1,5 @@
 import { deprecated } from '@clerk/shared/deprecated';
-import type {
- Autocomplete,
- CheckAuthorizationWithCustomPermissions,
- HandleOAuthCallbackParams,
- OrganizationCustomPermissionKey,
- OrganizationCustomRoleKey,
- PendingSessionOptions,
-} from '@clerk/types';
+import type { HandleOAuthCallbackParams, PendingSessionOptions, ProtectProps as _ProtectProps } from '@clerk/types';
 import React from 'react';
 
 import { useIsomorphicClerkContext } from '../contexts/IsomorphicClerkContext';
@@ -77,50 +70,7 @@ export const ClerkDegraded = ({ children }: React.PropsWithChildren<unknown>) =>
 };
 
 export type ProtectProps = React.PropsWithChildren<
- (
- | {
- condition?: never;
- role: OrganizationCustomRoleKey;
- permission?: never;
- feature?: never;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- feature?: never;
- plan?: never;
- permission: OrganizationCustomPermissionKey;
- }
- | {
- condition: (has: CheckAuthorizationWithCustomPermissions) => boolean;
- role?: never;
- permission?: never;
- feature?: never;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature: Autocomplete<`user:${string}` | `org:${string}`>;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature?: never;
- plan: Autocomplete<`user:${string}` | `org:${string}`>;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature?: never;
- plan?: never;
- }
- ) & {
+ _ProtectProps & {
  fallback?: React.ReactNode;
  } & PendingSessionOptions
 >;

packages/types/src/index.ts

@@ -37,6 +37,7 @@ export * from './organizationSuggestion';
 export * from './passwords';
 export * from './permission';
 export * from './phoneNumber';
+export * from './protect';
 export * from './redirects';
 export * from './resource';
 export * from './role';

packages/types/src/protect.ts

@@ -0,0 +1,70 @@
+import type { OrganizationCustomPermissionKey, OrganizationCustomRoleKey } from './organizationMembership';
+import type { CheckAuthorizationWithCustomPermissions } from './session';
+import type { Autocomplete } from './utils';
+
+/**
+ * Props for the `<Protect />` component, which restricts access to its children based on authentication and authorization.
+ *
+ * Use `ProtectProps` to specify the required role, permission, feature, or plan for access.
+ *
+ * @example
+ * ```tsx
+ * // Require a specific permission
+ * <Protect permission="a_permission_key" />
+ *
+ * // Require a specific role
+ * <Protect role="a_role_key" />
+ *
+ * // Use a custom condition callback
+ * <Protect condition={(has) => has({ permission: "a_permission_key" })} />
+ *
+ * // Require a specific feature
+ * <Protect feature="a_feature_key" />
+ *
+ * // Require a specific plan
+ * <Protect plan=a_plan_key" />
+ * ```
+ */
+export type ProtectProps =
+ | {
+ condition?: never;
+ role: OrganizationCustomRoleKey;
+ permission?: never;
+ feature?: never;
+ plan?: never;
+ }
+ | {
+ condition?: never;
+ role?: never;
+ feature?: never;
+ plan?: never;
+ permission: OrganizationCustomPermissionKey;
+ }
+ | {
+ condition: (has: CheckAuthorizationWithCustomPermissions) => boolean;
+ role?: never;
+ permission?: never;
+ feature?: never;
+ plan?: never;
+ }
+ | {
+ condition?: never;
+ role?: never;
+ permission?: never;
+ feature: Autocomplete<`user:${string}` | `org:${string}`>;
+ plan?: never;
+ }
+ | {
+ condition?: never;
+ role?: never;
+ permission?: never;
+ feature?: never;
+ plan: Autocomplete<`user:${string}` | `org:${string}`>;
+ }
+ | {
+ condition?: never;
+ role?: never;
+ permission?: never;
+ feature?: never;
+ plan?: never;
+ };

packages/vue/src/components/controlComponents.ts

@@ -1,11 +1,8 @@
 import { deprecated } from '@clerk/shared/deprecated';
 import type {
- Autocomplete,
- CheckAuthorizationWithCustomPermissions,
  HandleOAuthCallbackParams,
- OrganizationCustomPermissionKey,
- OrganizationCustomRoleKey,
  PendingSessionOptions,
+ ProtectProps as _ProtectProps,
  RedirectOptions,
 } from '@clerk/types';
 import { defineComponent } from 'vue';
@@ -107,51 +104,7 @@ export const AuthenticateWithRedirectCallback = defineComponent((props: HandleOA
  return () => null;
 });
 
-export type ProtectProps = (
- | {
- condition?: never;
- role: OrganizationCustomRoleKey;
- permission?: never;
- feature?: never;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- feature?: never;
- plan?: never;
- permission: OrganizationCustomPermissionKey;
- }
- | {
- condition: (has: CheckAuthorizationWithCustomPermissions) => boolean;
- role?: never;
- permission?: never;
- feature?: never;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature: Autocomplete<`user:${string}` | `org:${string}`>;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature?: never;
- plan: Autocomplete<`user:${string}` | `org:${string}`>;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature?: never;
- plan?: never;
- }
-) &
- PendingSessionOptions;
+export type ProtectProps = _ProtectProps & PendingSessionOptions;
 
 export const Protect = defineComponent((props: ProtectProps, { slots }) => {
  const { isLoaded, has, userId } = useAuth({ treatPendingAsSignedOut: props.treatPendingAsSignedOut });

.changeset/wet-foxes-attend.md

@@ -0,0 +1,8 @@
+---
+"@clerk/astro": patch
+"@clerk/clerk-react": patch
+"@clerk/types": patch
+"@clerk/vue": patch
+---
+
+Extract internal `ProtectProps` type to shared types to eliminate duplication across SDKs

.typedoc/__tests__/__snapshots__/file-structure.test.ts.snap

@@ -45,6 +45,7 @@ exports[`Typedoc output > should have a deliberate file structure 1`] = `
  "types/path-value.mdx",
  "types/pending-session-options.mdx",
  "types/pending-session-resource.mdx",
+ "types/protect-props.mdx",
  "types/record-to-path.mdx",
  "types/redirect-options.mdx",
  "types/reverification-config.mdx",

packages/astro/src/types.ts

@@ -1,12 +1,9 @@
 import type {
- Autocomplete,
- CheckAuthorizationWithCustomPermissions,
  Clerk,
  ClerkOptions,
  ClientResource,
  MultiDomainAndOrProxyPrimitives,
- OrganizationCustomPermissionKey,
- OrganizationCustomRoleKey,
+ ProtectProps,
  Without,
 } from '@clerk/types';
 
@@ -48,50 +45,6 @@ declare global {
  }
 }
 
-type ProtectProps =
- | {
- condition?: never;
- role: OrganizationCustomRoleKey;
- permission?: never;
- feature?: never;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- feature?: never;
- plan?: never;
- permission: OrganizationCustomPermissionKey;
- }
- | {
- condition: (has: CheckAuthorizationWithCustomPermissions) => boolean;
- role?: never;
- permission?: never;
- feature?: never;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature: Autocomplete<`user:${string}` | `org:${string}`>;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature?: never;
- plan: Autocomplete<`user:${string}` | `org:${string}`>;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature?: never;
- plan?: never;
- };
-
 export type { AstroClerkUpdateOptions, AstroClerkIntegrationParams, AstroClerkCreateInstanceParams, ProtectProps };
 
 export type ButtonProps<Tag> = {

packages/react/src/components/controlComponents.tsx

@@ -1,12 +1,5 @@
 import { deprecated } from '@clerk/shared/deprecated';
-import type {
- Autocomplete,
- CheckAuthorizationWithCustomPermissions,
- HandleOAuthCallbackParams,
- OrganizationCustomPermissionKey,
- OrganizationCustomRoleKey,
- PendingSessionOptions,
-} from '@clerk/types';
+import type { HandleOAuthCallbackParams, PendingSessionOptions, ProtectProps as _ProtectProps } from '@clerk/types';
 import React from 'react';
 
 import { useIsomorphicClerkContext } from '../contexts/IsomorphicClerkContext';
@@ -77,50 +70,7 @@ export const ClerkDegraded = ({ children }: React.PropsWithChildren<unknown>) =>
 };
 
 export type ProtectProps = React.PropsWithChildren<
- (
- | {
- condition?: never;
- role: OrganizationCustomRoleKey;
- permission?: never;
- feature?: never;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- feature?: never;
- plan?: never;
- permission: OrganizationCustomPermissionKey;
- }
- | {
- condition: (has: CheckAuthorizationWithCustomPermissions) => boolean;
- role?: never;
- permission?: never;
- feature?: never;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature: Autocomplete<`user:${string}` | `org:${string}`>;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature?: never;
- plan: Autocomplete<`user:${string}` | `org:${string}`>;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature?: never;
- plan?: never;
- }
- ) & {
+ _ProtectProps & {
  fallback?: React.ReactNode;
  } & PendingSessionOptions
 >;

packages/types/src/index.ts

@@ -37,6 +37,7 @@ export * from './organizationSuggestion';
 export * from './passwords';
 export * from './permission';
 export * from './phoneNumber';
+export * from './protect';
 export * from './redirects';
 export * from './resource';
 export * from './role';

packages/types/src/protect.ts

@@ -0,0 +1,70 @@
+import type { OrganizationCustomPermissionKey, OrganizationCustomRoleKey } from './organizationMembership';
+import type { CheckAuthorizationWithCustomPermissions } from './session';
+import type { Autocomplete } from './utils';
+
+/**
+ * Props for the `<Protect />` component, which restricts access to its children based on authentication and authorization.
+ *
+ * Use `ProtectProps` to specify the required role, permission, feature, or plan for access.
+ *
+ * @example
+ * ```tsx
+ * // Require a specific permission
+ * <Protect permission="a_permission_key" />
+ *
+ * // Require a specific role
+ * <Protect role="a_role_key" />
+ *
+ * // Use a custom condition callback
+ * <Protect condition={(has) => has({ permission: "a_permission_key" })} />
+ *
+ * // Require a specific feature
+ * <Protect feature="a_feature_key" />
+ *
+ * // Require a specific plan
+ * <Protect plan=a_plan_key" />
+ * ```
+ */
+export type ProtectProps =
+ | {
+ condition?: never;
+ role: OrganizationCustomRoleKey;
+ permission?: never;
+ feature?: never;
+ plan?: never;
+ }
+ | {
+ condition?: never;
+ role?: never;
+ feature?: never;
+ plan?: never;
+ permission: OrganizationCustomPermissionKey;
+ }
+ | {
+ condition: (has: CheckAuthorizationWithCustomPermissions) => boolean;
+ role?: never;
+ permission?: never;
+ feature?: never;
+ plan?: never;
+ }
+ | {
+ condition?: never;
+ role?: never;
+ permission?: never;
+ feature: Autocomplete<`user:${string}` | `org:${string}`>;
+ plan?: never;
+ }
+ | {
+ condition?: never;
+ role?: never;
+ permission?: never;
+ feature?: never;
+ plan: Autocomplete<`user:${string}` | `org:${string}`>;
+ }
+ | {
+ condition?: never;
+ role?: never;
+ permission?: never;
+ feature?: never;
+ plan?: never;
+ };

packages/vue/src/components/controlComponents.ts

@@ -1,11 +1,8 @@
 import { deprecated } from '@clerk/shared/deprecated';
 import type {
- Autocomplete,
- CheckAuthorizationWithCustomPermissions,
  HandleOAuthCallbackParams,
- OrganizationCustomPermissionKey,
- OrganizationCustomRoleKey,
  PendingSessionOptions,
+ ProtectProps as _ProtectProps,
  RedirectOptions,
 } from '@clerk/types';
 import { defineComponent } from 'vue';
@@ -107,51 +104,7 @@ export const AuthenticateWithRedirectCallback = defineComponent((props: HandleOA
  return () => null;
 });
 
-export type ProtectProps = (
- | {
- condition?: never;
- role: OrganizationCustomRoleKey;
- permission?: never;
- feature?: never;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- feature?: never;
- plan?: never;
- permission: OrganizationCustomPermissionKey;
- }
- | {
- condition: (has: CheckAuthorizationWithCustomPermissions) => boolean;
- role?: never;
- permission?: never;
- feature?: never;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature: Autocomplete<`user:${string}` | `org:${string}`>;
- plan?: never;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature?: never;
- plan: Autocomplete<`user:${string}` | `org:${string}`>;
- }
- | {
- condition?: never;
- role?: never;
- permission?: never;
- feature?: never;
- plan?: never;
- }
-) &
- PendingSessionOptions;
+export type ProtectProps = _ProtectProps & PendingSessionOptions;
 
 export const Protect = defineComponent((props: ProtectProps, { slots }) => {
  const { isLoaded, has, userId } = useAuth({ treatPendingAsSignedOut: props.treatPendingAsSignedOut });