@clerk/react 6.0.0-snapshot.v20251218183643 → 6.0.0-snapshot.v20260105214115

package/dist/{chunk-4F7CSI4T.mjs → chunk-RG4XQAGC.mjs}

@@ -15,22 +15,6 @@ import React from "react";
 import { SessionContext, useSessionContext } from "@clerk/shared/react";
 
 // src/components/controlComponents.tsx
-var SignedIn = ({ children, treatPendingAsSignedOut }) => {
-  useAssertWrappedByClerkProvider("SignedIn");
-  const { userId } = useAuth({ treatPendingAsSignedOut });
-  if (userId) {
-    return children;
-  }
-  return null;
-};
-var SignedOut = ({ children, treatPendingAsSignedOut }) => {
-  useAssertWrappedByClerkProvider("SignedOut");
-  const { userId } = useAuth({ treatPendingAsSignedOut });
-  if (userId === null) {
-    return children;
-  }
-  return null;
-};
 var ClerkLoaded = ({ children }) => {
   useAssertWrappedByClerkProvider("ClerkLoaded");
   const isomorphicClerk = useIsomorphicClerkContext();
@@ -63,31 +47,35 @@ var ClerkDegraded = ({ children }) => {
   }
   return children;
 };
-var Protect = ({ children, fallback, treatPendingAsSignedOut, ...restAuthorizedParams }) => {
-  useAssertWrappedByClerkProvider("Protect");
-  const { isLoaded, has, userId } = useAuth({ treatPendingAsSignedOut });
+var Show = ({ children, fallback, treatPendingAsSignedOut, when }) => {
+  useAssertWrappedByClerkProvider("Show");
+  const { has, isLoaded, userId } = useAuth({ treatPendingAsSignedOut });
   if (!isLoaded) {
     return null;
   }
-  const unauthorized = fallback != null ? fallback : null;
+  const resolvedWhen = when;
   const authorized = children;
+  const unauthorized = fallback != null ? fallback : null;
+  if (resolvedWhen === "signed-out") {
+    return userId ? unauthorized : authorized;
+  }
   if (!userId) {
     return unauthorized;
   }
-  if (typeof restAuthorizedParams.condition === "function") {
-    if (restAuthorizedParams.condition(has)) {
-      return authorized;
-    }
-    return unauthorized;
+  if (resolvedWhen === "signed-in") {
+    return authorized;
   }
-  if (restAuthorizedParams.role || restAuthorizedParams.permission || restAuthorizedParams.feature || restAuthorizedParams.plan) {
-    if (has(restAuthorizedParams)) {
-      return authorized;
-    }
-    return unauthorized;
+  if (checkAuthorization(resolvedWhen, has)) {
+    return authorized;
   }
-  return authorized;
+  return unauthorized;
 };
+function checkAuthorization(when, has) {
+  if (typeof when === "function") {
+    return when(has);
+  }
+  return has(when);
+}
 var RedirectToSignIn = withClerk(({ clerk, ...props }) => {
   var _a, _b;
   const { client, session } = clerk;
@@ -150,13 +138,11 @@ var MultisessionAppSupport = ({ children }) => {
 };
 
 export {
-  SignedIn,
-  SignedOut,
   ClerkLoaded,
   ClerkLoading,
   ClerkFailed,
   ClerkDegraded,
-  Protect,
+  Show,
   RedirectToSignIn,
   RedirectToSignUp,
   RedirectToTasks,
@@ -166,4 +152,4 @@ export {
   AuthenticateWithRedirectCallback,
   MultisessionAppSupport
 };
-//# sourceMappingURL=chunk-4F7CSI4T.mjs.map
+//# sourceMappingURL=chunk-RG4XQAGC.mjs.map

package/dist/chunk-RG4XQAGC.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/controlComponents.tsx","../src/contexts/SessionContext.tsx"],"sourcesContent":["import { deprecated } from '@clerk/shared/deprecated';\nimport type { HandleOAuthCallbackParams, PendingSessionOptions, ShowWhenCondition } from '@clerk/shared/types';\nimport React from 'react';\n\nimport { useIsomorphicClerkContext } from '../contexts/IsomorphicClerkContext';\nimport { useSessionContext } from '../contexts/SessionContext';\nimport { useAuth } from '../hooks';\nimport { useAssertWrappedByClerkProvider } from '../hooks/useAssertWrappedByClerkProvider';\nimport type { RedirectToSignInProps, RedirectToSignUpProps, RedirectToTasksProps, WithClerkProp } from '../types';\nimport { withClerk } from './withClerk';\n\nexport const ClerkLoaded = ({ children }: React.PropsWithChildren<unknown>) => {\n  useAssertWrappedByClerkProvider('ClerkLoaded');\n\n  const isomorphicClerk = useIsomorphicClerkContext();\n  if (!isomorphicClerk.loaded) {\n    return null;\n  }\n  return children;\n};\n\nexport const ClerkLoading = ({ children }: React.PropsWithChildren<unknown>) => {\n  useAssertWrappedByClerkProvider('ClerkLoading');\n\n  const isomorphicClerk = useIsomorphicClerkContext();\n  if (isomorphicClerk.status !== 'loading') {\n    return null;\n  }\n  return children;\n};\n\nexport const ClerkFailed = ({ children }: React.PropsWithChildren<unknown>) => {\n  useAssertWrappedByClerkProvider('ClerkFailed');\n\n  const isomorphicClerk = useIsomorphicClerkContext();\n  if (isomorphicClerk.status !== 'error') {\n    return null;\n  }\n  return children;\n};\n\nexport const ClerkDegraded = ({ children }: React.PropsWithChildren<unknown>) => {\n  useAssertWrappedByClerkProvider('ClerkDegraded');\n\n  const isomorphicClerk = useIsomorphicClerkContext();\n  if (isomorphicClerk.status !== 'degraded') {\n    return null;\n  }\n  return children;\n};\n\nexport type ShowProps = React.PropsWithChildren<\n  {\n    fallback?: React.ReactNode;\n    when: ShowWhenCondition;\n  } & PendingSessionOptions\n>;\n\n/**\n * Use `<Show/>` to conditionally render content based on user authorization or sign-in state.\n * Returns `null` while auth is loading. Set `treatPendingAsSignedOut` to treat\n * pending sessions as signed out during that period.\n *\n * The `when` prop supports:\n * - `\"signed-in\"` or `\"signed-out\"` shorthands\n * - Authorization descriptors (e.g., `{ permission: \"org:billing:manage\" }`, `{ role: \"admin\" }`)\n * - A predicate function `(has) => boolean` that receives the `has` helper\n *\n * @example\n * ```tsx\n * <Show when={{ permission: \"org:billing:manage\" }} fallback={<p>Unauthorized</p>}>\n *   <BillingSettings />\n * </Show>\n *\n * <Show when={{ role: \"admin\" }}>\n *   <AdminPanel />\n * </Show>\n *\n * <Show when={(has) => has({ permission: \"org:read\" }) && isFeatureEnabled}>\n *   <ProtectedFeature />\n * </Show>\n * ```\n *\n */\nexport const Show = ({ children, fallback, treatPendingAsSignedOut, when }: ShowProps) => {\n  useAssertWrappedByClerkProvider('Show');\n\n  const { has, isLoaded, userId } = useAuth({ treatPendingAsSignedOut });\n\n  if (!isLoaded) {\n    return null;\n  }\n\n  const resolvedWhen = when;\n  const authorized = children;\n  const unauthorized = fallback ?? null;\n\n  if (resolvedWhen === 'signed-out') {\n    return userId ? unauthorized : authorized;\n  }\n\n  if (!userId) {\n    return unauthorized;\n  }\n\n  if (resolvedWhen === 'signed-in') {\n    return authorized;\n  }\n\n  if (checkAuthorization(resolvedWhen, has)) {\n    return authorized;\n  }\n\n  return unauthorized;\n};\n\nfunction checkAuthorization(\n  when: Exclude<ShowWhenCondition, 'signed-in' | 'signed-out'>,\n  has: NonNullable<ReturnType<typeof useAuth>['has']>,\n): boolean {\n  if (typeof when === 'function') {\n    return when(has);\n  }\n  return has(when);\n}\n\nexport const RedirectToSignIn = withClerk(({ clerk, ...props }: WithClerkProp<RedirectToSignInProps>) => {\n  const { client, session } = clerk;\n\n  const hasSignedInSessions = (client.signedInSessions?.length ?? 0) > 0;\n\n  React.useEffect(() => {\n    if (session === null && hasSignedInSessions) {\n      void clerk.redirectToAfterSignOut();\n    } else {\n      void clerk.redirectToSignIn(props);\n    }\n  }, []);\n\n  return null;\n}, 'RedirectToSignIn');\n\nexport const RedirectToSignUp = withClerk(({ clerk, ...props }: WithClerkProp<RedirectToSignUpProps>) => {\n  React.useEffect(() => {\n    void clerk.redirectToSignUp(props);\n  }, []);\n\n  return null;\n}, 'RedirectToSignUp');\n\nexport const RedirectToTasks = withClerk(({ clerk, ...props }: WithClerkProp<RedirectToTasksProps>) => {\n  React.useEffect(() => {\n    void clerk.redirectToTasks(props);\n  }, []);\n\n  return null;\n}, 'RedirectToTasks');\n\n/**\n * @function\n * @deprecated Use [`redirectToUserProfile()`](https://clerk.com/docs/reference/javascript/clerk#redirect-to-user-profile) instead.\n */\nexport const RedirectToUserProfile = withClerk(({ clerk }) => {\n  React.useEffect(() => {\n    deprecated('RedirectToUserProfile', 'Use the `redirectToUserProfile()` method instead.');\n    void clerk.redirectToUserProfile();\n  }, []);\n\n  return null;\n}, 'RedirectToUserProfile');\n\n/**\n * @function\n * @deprecated Use [`redirectToOrganizationProfile()`](https://clerk.com/docs/reference/javascript/clerk#redirect-to-organization-profile) instead.\n */\nexport const RedirectToOrganizationProfile = withClerk(({ clerk }) => {\n  React.useEffect(() => {\n    deprecated('RedirectToOrganizationProfile', 'Use the `redirectToOrganizationProfile()` method instead.');\n    void clerk.redirectToOrganizationProfile();\n  }, []);\n\n  return null;\n}, 'RedirectToOrganizationProfile');\n\n/**\n * @function\n * @deprecated Use [`redirectToCreateOrganization()`](https://clerk.com/docs/reference/javascript/clerk#redirect-to-create-organization) instead.\n */\nexport const RedirectToCreateOrganization = withClerk(({ clerk }) => {\n  React.useEffect(() => {\n    deprecated('RedirectToCreateOrganization', 'Use the `redirectToCreateOrganization()` method instead.');\n    void clerk.redirectToCreateOrganization();\n  }, []);\n\n  return null;\n}, 'RedirectToCreateOrganization');\n\nexport const AuthenticateWithRedirectCallback = withClerk(\n  ({ clerk, ...handleRedirectCallbackParams }: WithClerkProp<HandleOAuthCallbackParams>) => {\n    React.useEffect(() => {\n      void clerk.handleRedirectCallback(handleRedirectCallbackParams);\n    }, []);\n\n    return null;\n  },\n  'AuthenticateWithRedirectCallback',\n);\n\nexport const MultisessionAppSupport = ({ children }: React.PropsWithChildren<unknown>) => {\n  useAssertWrappedByClerkProvider('MultisessionAppSupport');\n\n  const session = useSessionContext();\n  return <React.Fragment key={session ? session.id : 'no-users'}>{children}</React.Fragment>;\n};\n","export { SessionContext, useSessionContext } from '@clerk/shared/react';\n"],"mappings":"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","names":[]}

package/dist/experimental.d.mts

@@ -8,27 +8,26 @@ import '@clerk/shared/ui';
 import '@clerk/ui/internal';
 
 /**
- * A button component that opens the Clerk Checkout drawer when clicked. This component must be rendered
- * inside a `<SignedIn />` component to ensure the user is authenticated.
+ * A button component that opens the Clerk Checkout drawer when clicked. Render only when the user is signed in (e.g., wrap with `<Show when="signed-in">`).
  *
  * @example
  * ```tsx
- * import { SignedIn } from '@clerk/react';
+ * import { Show } from '@clerk/react';
  * import { CheckoutButton } from '@clerk/react/experimental';
  *
  * // Basic usage with default "Checkout" text
  * function BasicCheckout() {
  *   return (
- *     <SignedIn>
+ *     <Show when="signed-in">
  *       <CheckoutButton planId="plan_123" />
- *     </SignedIn>
+ *     </Show>
  *   );
  * }
  *
  * // Custom button with organization subscription
  * function OrganizationCheckout() {
  *   return (
- *     <SignedIn>
+ *     <Show when="signed-in">
  *       <CheckoutButton
  *         planId="plan_123"
  *         planPeriod="month"
@@ -37,12 +36,12 @@ import '@clerk/ui/internal';
  *       >
  *         <button className="custom-button">Subscribe Now</button>
  *       </CheckoutButton>
- *     </SignedIn>
+ *     </Show>
  *   );
  * }
  * ```
  *
- * @throws {Error} When rendered outside of a `<SignedIn />` component
+ * @throws {Error} When rendered while the user is signed out
  * @throws {Error} When `for="organization"` is used without an active organization context
  *
  * @experimental This is an experimental API for the Billing feature that is available under a public beta, and the API is subject to change. It is advised to [pin](https://clerk.com/docs/pinning) the SDK version and the clerk-js version to avoid breaking changes.
@@ -58,22 +57,22 @@ declare const CheckoutButton: {
  *
  * @example
  * ```tsx
- * import { SignedIn } from '@clerk/react';
+ * import { Show } from '@clerk/react';
  * import { PlanDetailsButton } from '@clerk/react/experimental';
  *
  * // Basic usage with default "Plan details" text
  * function BasicPlanDetails() {
- *   return (
- *     <PlanDetailsButton planId="plan_123" />
- *   );
+ *   return <PlanDetailsButton planId="plan_123" />;
  * }
  *
  * // Custom button with custom text
  * function CustomPlanDetails() {
  *   return (
- *     <PlanDetailsButton planId="plan_123">
- *       <button>View Plan Details</button>
- *     </PlanDetailsButton>
+ *     <Show when="signed-in">
+ *       <PlanDetailsButton planId="plan_123">
+ *         <button>View Plan Details</button>
+ *       </PlanDetailsButton>
+ *     </Show>
  *   );
  * }
  * ```
@@ -86,34 +85,38 @@ declare const PlanDetailsButton: {
 };
 
 /**
- * A button component that opens the Clerk Subscription Details drawer when clicked. This component must be rendered inside a `<SignedIn />` component to ensure the user is authenticated.
+ * A button component that opens the Clerk Subscription Details drawer when clicked. Render only when the user is signed in (e.g., wrap with `<Show when="signed-in">`).
  *
  * @example
  * ```tsx
- * import { SignedIn } from '@clerk/react';
+ * import { Show } from '@clerk/react';
  * import { SubscriptionDetailsButton } from '@clerk/react/experimental';
  *
  * // Basic usage with default "Subscription details" text
  * function BasicSubscriptionDetails() {
  *   return (
- *     <SubscriptionDetailsButton />
+ *     <Show when="signed-in">
+ *       <SubscriptionDetailsButton />
+ *     </Show>
  *   );
  * }
  *
  * // Custom button with Organization Subscription
  * function OrganizationSubscriptionDetails() {
  *   return (
- *     <SubscriptionDetailsButton
- *       for="organization"
- *       onSubscriptionCancel={() => console.log('Subscription canceled')}
- *     >
- *       <button>View Organization Subscription</button>
- *     </SubscriptionDetailsButton>
+ *     <Show when="signed-in">
+ *       <SubscriptionDetailsButton
+ *         for="organization"
+ *         onSubscriptionCancel={() => console.log('Subscription canceled')}
+ *       >
+ *         <button>View Organization Subscription</button>
+ *       </SubscriptionDetailsButton>
+ *     </Show>
  *   );
  * }
  * ```
  *
- * @throws {Error} When rendered outside of a `<SignedIn />` component
+ * @throws {Error} When rendered while the user is signed out
  * @throws {Error} When `for="organization"` is used without an Active Organization context
  *
  * @experimental This is an experimental API for the Billing feature that is available under a public beta, and the API is subject to change. It is advised to [pin](https://clerk.com/docs/pinning) the SDK version and the clerk-js version to avoid breaking changes.

package/dist/experimental.d.ts

@@ -8,27 +8,26 @@ import '@clerk/shared/ui';
 import '@clerk/ui/internal';
 
 /**
- * A button component that opens the Clerk Checkout drawer when clicked. This component must be rendered
- * inside a `<SignedIn />` component to ensure the user is authenticated.
+ * A button component that opens the Clerk Checkout drawer when clicked. Render only when the user is signed in (e.g., wrap with `<Show when="signed-in">`).
  *
  * @example
  * ```tsx
- * import { SignedIn } from '@clerk/react';
+ * import { Show } from '@clerk/react';
  * import { CheckoutButton } from '@clerk/react/experimental';
  *
  * // Basic usage with default "Checkout" text
  * function BasicCheckout() {
  *   return (
- *     <SignedIn>
+ *     <Show when="signed-in">
  *       <CheckoutButton planId="plan_123" />
- *     </SignedIn>
+ *     </Show>
  *   );
  * }
  *
  * // Custom button with organization subscription
  * function OrganizationCheckout() {
  *   return (
- *     <SignedIn>
+ *     <Show when="signed-in">
  *       <CheckoutButton
  *         planId="plan_123"
  *         planPeriod="month"
@@ -37,12 +36,12 @@ import '@clerk/ui/internal';
  *       >
  *         <button className="custom-button">Subscribe Now</button>
  *       </CheckoutButton>
- *     </SignedIn>
+ *     </Show>
  *   );
  * }
  * ```
  *
- * @throws {Error} When rendered outside of a `<SignedIn />` component
+ * @throws {Error} When rendered while the user is signed out
  * @throws {Error} When `for="organization"` is used without an active organization context
  *
  * @experimental This is an experimental API for the Billing feature that is available under a public beta, and the API is subject to change. It is advised to [pin](https://clerk.com/docs/pinning) the SDK version and the clerk-js version to avoid breaking changes.
@@ -58,22 +57,22 @@ declare const CheckoutButton: {
  *
  * @example
  * ```tsx
- * import { SignedIn } from '@clerk/react';
+ * import { Show } from '@clerk/react';
  * import { PlanDetailsButton } from '@clerk/react/experimental';
  *
  * // Basic usage with default "Plan details" text
  * function BasicPlanDetails() {
- *   return (
- *     <PlanDetailsButton planId="plan_123" />
- *   );
+ *   return <PlanDetailsButton planId="plan_123" />;
  * }
  *
  * // Custom button with custom text
  * function CustomPlanDetails() {
  *   return (
- *     <PlanDetailsButton planId="plan_123">
- *       <button>View Plan Details</button>
- *     </PlanDetailsButton>
+ *     <Show when="signed-in">
+ *       <PlanDetailsButton planId="plan_123">
+ *         <button>View Plan Details</button>
+ *       </PlanDetailsButton>
+ *     </Show>
  *   );
  * }
  * ```
@@ -86,34 +85,38 @@ declare const PlanDetailsButton: {
 };
 
 /**
- * A button component that opens the Clerk Subscription Details drawer when clicked. This component must be rendered inside a `<SignedIn />` component to ensure the user is authenticated.
+ * A button component that opens the Clerk Subscription Details drawer when clicked. Render only when the user is signed in (e.g., wrap with `<Show when="signed-in">`).
  *
  * @example
  * ```tsx
- * import { SignedIn } from '@clerk/react';
+ * import { Show } from '@clerk/react';
  * import { SubscriptionDetailsButton } from '@clerk/react/experimental';
  *
  * // Basic usage with default "Subscription details" text
  * function BasicSubscriptionDetails() {
  *   return (
- *     <SubscriptionDetailsButton />
+ *     <Show when="signed-in">
+ *       <SubscriptionDetailsButton />
+ *     </Show>
  *   );
  * }
  *
  * // Custom button with Organization Subscription
  * function OrganizationSubscriptionDetails() {
  *   return (
- *     <SubscriptionDetailsButton
- *       for="organization"
- *       onSubscriptionCancel={() => console.log('Subscription canceled')}
- *     >
- *       <button>View Organization Subscription</button>
- *     </SubscriptionDetailsButton>
+ *     <Show when="signed-in">
+ *       <SubscriptionDetailsButton
+ *         for="organization"
+ *         onSubscriptionCancel={() => console.log('Subscription canceled')}
+ *       >
+ *         <button>View Organization Subscription</button>
+ *       </SubscriptionDetailsButton>
+ *     </Show>
  *   );
  * }
  * ```
  *
- * @throws {Error} When rendered outside of a `<SignedIn />` component
+ * @throws {Error} When rendered while the user is signed out
  * @throws {Error} When `for="organization"` is used without an Active Organization context
  *
  * @experimental This is an experimental API for the Billing feature that is available under a public beta, and the API is subject to change. It is advised to [pin](https://clerk.com/docs/pinning) the SDK version and the clerk-js version to avoid breaking changes.

package/dist/experimental.js

@@ -1194,7 +1194,9 @@ var CheckoutButton = withClerk(
     } = props;
     const { userId, orgId } = useAuth();
     if (userId === null) {
-      throw new Error("Clerk: Ensure that `<CheckoutButton />` is rendered inside a `<SignedIn />` component.");
+      throw new Error(
+        'Clerk: Ensure that `<CheckoutButton />` is rendered only when the user is signed in (wrap with `<Show when="signed-in">` or guard with `useAuth()`).'
+      );
     }
     if (orgId === null && _for === "organization") {
       throw new Error(
@@ -1272,7 +1274,7 @@ var SubscriptionDetailsButton = withClerk(
     const { userId, orgId } = useAuth();
     if (userId === null) {
       throw new Error(
-        "Clerk: Ensure that `<SubscriptionDetailsButton />` is rendered inside a `<SignedIn />` component."
+        'Clerk: Ensure that `<SubscriptionDetailsButton />` is rendered only when the user is signed in (wrap with `<Show when="signed-in">` or guard with `useAuth()`).'
       );
     }
     if (orgId === null && _for === "organization") {