chore(clerk-react,astro,vue): Introduce treatPendingAsSignedOut prop to client control components (#5512)

Author: LauraBeatris

Diff for: .changeset/red-ducks-hide.md

@@ -0,0 +1,35 @@
+---
+'@clerk/astro': patch
+'@clerk/clerk-react': patch
+'@clerk/vue': patch
+---
+
+Introduce `treatPendingAsSignedOut` prop to client control components
+
+```tsx
+// Children node only mounts when session is active
+// Example: Organization selection must be completed if enforced
+<SignedIn>
+   <p>You have selected an organization!</p>
+</SignedIn>
+```
+```tsx
+// Children node mounts for both active and pending session
+<SignedIn treatPendingAsSignedOut={false}>
+   <p>You might not have an organization selected</p>
+</SignedIn>
+```
+
+```tsx
+// Children node only mounts when session is active
+// Example: Organization selection must be completed if enforced
+<Protect>
+   <p>You have selected an organization!</p>
+</Protect>
+```
+```tsx
+// Children node mounts for both active and pending session
+<Protect treatPendingAsSignedOut={false}>
+   <p>You might not have an organization selected</p>
+</Protect>
+```

Diff for: packages/astro/src/react/controlComponents.tsx

@@ -1,4 +1,4 @@
-import type { CheckAuthorizationWithCustomPermissions, HandleOAuthCallbackParams } from '@clerk/types';
+import type { HandleOAuthCallbackParams, PendingSessionOptions } from '@clerk/types';
 import { computed } from 'nanostores';
 import type { PropsWithChildren } from 'react';
 import React, { useEffect, useState } from 'react';
@@ -9,21 +9,21 @@ import { useAuth } from './hooks';
 import type { WithClerkProp } from './utils';
 import { withClerk } from './utils';
 
-export function SignedOut(props: PropsWithChildren) {
-  const { userId } = useAuth();
+export function SignedOut({ children, treatPendingAsSignedOut }: PropsWithChildren<PendingSessionOptions>) {
+  const { userId } = useAuth({ treatPendingAsSignedOut });
 
   if (userId) {
     return null;
   }
-  return props.children;
+  return children;
 }
 
-export function SignedIn(props: PropsWithChildren) {
-  const { userId } = useAuth();
+export function SignedIn({ children, treatPendingAsSignedOut }: PropsWithChildren<PendingSessionOptions>) {
+  const { userId } = useAuth({ treatPendingAsSignedOut });
   if (!userId) {
     return null;
   }
-  return props.children;
+  return children;
 }
 
 const $isLoadingClerkStore = computed($csrState, state => state.isLoaded);
@@ -69,7 +69,9 @@ export const ClerkLoading = ({ children }: React.PropsWithChildren): JSX.Element
   return <>{children}</>;
 };
 
-export type ProtectProps = React.PropsWithChildren<_ProtectProps & { fallback?: React.ReactNode }>;
+export type ProtectProps = React.PropsWithChildren<
+  _ProtectProps & { fallback?: React.ReactNode } & PendingSessionOptions
+>;
 
 /**
  * Use `<Protect/>` in order to prevent unauthenticated or unauthorized users from accessing the children passed to the component.
@@ -83,8 +85,8 @@ export type ProtectProps = React.PropsWithChildren<_ProtectProps & { fallback?:
  * <Protect fallback={<p>Unauthorized</p>} />
  * ```
  */
-export const Protect = ({ children, fallback, ...restAuthorizedParams }: ProtectProps) => {
-  const { isLoaded, has, userId } = useAuth();
+export const Protect = ({ children, fallback, treatPendingAsSignedOut, ...restAuthorizedParams }: ProtectProps) => {
+  const { isLoaded, has, userId } = useAuth({ treatPendingAsSignedOut });
 
   /**
    * Avoid flickering children or fallback while clerk is loading sessionId or userId
@@ -108,7 +110,7 @@ export const Protect = ({ children, fallback, ...restAuthorizedParams }: Protect
    * Check against the results of `has` called inside the callback
    */
   if (typeof restAuthorizedParams.condition === 'function') {
-    if (restAuthorizedParams.condition(has as CheckAuthorizationWithCustomPermissions)) {
+    if (restAuthorizedParams.condition(has)) {
       return authorized;
     }
     return unauthorized;

Diff for: packages/react/src/components/controlComponents.tsx

@@ -4,31 +4,31 @@ import type {
   HandleOAuthCallbackParams,
   OrganizationCustomPermissionKey,
   OrganizationCustomRoleKey,
+  PendingSessionOptions,
 } from '@clerk/types';
 import React from 'react';
 
-import { useAuthContext } from '../contexts/AuthContext';
 import { useIsomorphicClerkContext } from '../contexts/IsomorphicClerkContext';
 import { useSessionContext } from '../contexts/SessionContext';
 import { useAuth } from '../hooks';
 import { useAssertWrappedByClerkProvider } from '../hooks/useAssertWrappedByClerkProvider';
 import type { RedirectToSignInProps, RedirectToSignUpProps, WithClerkProp } from '../types';
 import { withClerk } from './withClerk';
 
-export const SignedIn = ({ children }: React.PropsWithChildren<unknown>) => {
+export const SignedIn = ({ children, treatPendingAsSignedOut }: React.PropsWithChildren<PendingSessionOptions>) => {
   useAssertWrappedByClerkProvider('SignedIn');
 
-  const { userId } = useAuthContext();
+  const { userId } = useAuth({ treatPendingAsSignedOut });
   if (userId) {
     return children;
   }
   return null;
 };
 
-export const SignedOut = ({ children }: React.PropsWithChildren<unknown>) => {
+export const SignedOut = ({ children, treatPendingAsSignedOut }: React.PropsWithChildren<PendingSessionOptions>) => {
   useAssertWrappedByClerkProvider('SignedOut');
 
-  const { userId } = useAuthContext();
+  const { userId } = useAuth({ treatPendingAsSignedOut });
   if (userId === null) {
     return children;
   }
@@ -79,7 +79,7 @@ export type ProtectProps = React.PropsWithChildren<
       }
   ) & {
     fallback?: React.ReactNode;
-  }
+  } & PendingSessionOptions
 >;
 
 /**
@@ -94,10 +94,10 @@ export type ProtectProps = React.PropsWithChildren<
  * <Protect fallback={<p>Unauthorized</p>} />
  * ```
  */
-export const Protect = ({ children, fallback, ...restAuthorizedParams }: ProtectProps) => {
+export const Protect = ({ children, fallback, treatPendingAsSignedOut, ...restAuthorizedParams }: ProtectProps) => {
   useAssertWrappedByClerkProvider('Protect');
 
-  const { isLoaded, has, userId } = useAuth();
+  const { isLoaded, has, userId } = useAuth({ treatPendingAsSignedOut });
 
   /**
    * Avoid flickering children or fallback while clerk is loading sessionId or userId

Diff for: packages/vue/src/components/controlComponents.ts

@@ -4,6 +4,7 @@ import type {
   HandleOAuthCallbackParams,
   OrganizationCustomPermissionKey,
   OrganizationCustomRoleKey,
+  PendingSessionOptions,
   RedirectOptions,
 } from '@clerk/types';
 import { defineComponent } from 'vue';
@@ -13,14 +14,14 @@ import { useClerk } from '../composables/useClerk';
 import { useClerkContext } from '../composables/useClerkContext';
 import { useClerkLoaded } from '../utils/useClerkLoaded';
 
-export const SignedIn = defineComponent((_, { slots }) => {
-  const { userId } = useAuth();
+export const SignedIn = defineComponent<PendingSessionOptions>(({ treatPendingAsSignedOut }, { slots }) => {
+  const { userId } = useAuth({ treatPendingAsSignedOut });
 
   return () => (userId.value ? slots.default?.() : null);
 });
 
-export const SignedOut = defineComponent((_, { slots }) => {
-  const { userId } = useAuth();
+export const SignedOut = defineComponent<PendingSessionOptions>(({ treatPendingAsSignedOut }, { slots }) => {
+  const { userId } = useAuth({ treatPendingAsSignedOut });
 
   return () => (userId.value === null ? slots.default?.() : null);
 });
@@ -105,7 +106,7 @@ export const AuthenticateWithRedirectCallback = defineComponent((props: HandleOA
   return () => null;
 });
 
-export type ProtectProps =
+export type ProtectProps = (
   | {
       condition?: never;
       role: OrganizationCustomRoleKey;
@@ -125,10 +126,12 @@ export type ProtectProps =
       condition?: never;
       role?: never;
       permission?: never;
-    };
+    }
+) &
+  PendingSessionOptions;
 
 export const Protect = defineComponent((props: ProtectProps, { slots }) => {
-  const { isLoaded, has, userId } = useAuth();
+  const { isLoaded, has, userId } = useAuth({ treatPendingAsSignedOut: props.treatPendingAsSignedOut });
 
   return () => {
     /**