Pass treatPendingAsSignedOut to server components on Next

Author: LauraBeatris

.changeset/tender-brooms-look.md

@@ -0,0 +1,15 @@
+---
+'@clerk/nextjs': patch
+---
+
+Introduce `treatPendingAsSignedOut` to `auth` and server-side control components
+
+```ts
+const { userId } = auth({ treatPendingAsSignedOut: false })
+```
+
+```tsx
+<SignedIn treatPendingAsSignedOut={false}>
+  User has a session that is either pending (requires tasks resolution) or active
+</SignedIn>
+```

packages/clerk-js/src/core/__tests__/clerk.test.ts

@@ -2284,7 +2284,7 @@ describe('Clerk singleton', () => {
         await sut.load(mockedLoadOptions);
 
         await sut.setActive({ session: mockResource as any as PendingSessionResource });
-        await sut.__experimental_navigateToTask();
+        await sut.__experimental_nextTask();
 
         expect(mockNavigate.mock.calls[0][0]).toBe('/sign-in#/tasks/add-organization');
       });
@@ -2328,7 +2328,7 @@ describe('Clerk singleton', () => {
         await sut.setActive({ session: mockSession as any as ActiveSessionResource });
 
         const redirectUrlComplete = '/welcome-to-app';
-        await sut.__experimental_navigateToTask({ redirectUrlComplete });
+        await sut.__experimental_nextTask({ redirectUrlComplete });
 
         console.log(mockNavigate.mock.calls);
 

packages/clerk-js/src/core/clerk.ts

@@ -1188,7 +1188,7 @@ export class Clerk implements ClerkInterface {
     this.#emit();
   };
 
-  public __experimental_navigateToTask = async ({ redirectUrlComplete }: NextTaskParams = {}): Promise<void> => {
+  public __experimental_nextTask = async ({ redirectUrlComplete }: NextTaskParams = {}): Promise<void> => {
     const session = await this.session?.reload();
     if (!session || !this.environment) {
       return;
@@ -1205,7 +1205,7 @@ export class Clerk implements ClerkInterface {
     }
 
     const tracker = createBeforeUnloadTracker(this.#options.standardBrowser);
-    const defaultRedirectUrlComplete = this.client?.signUp ? this.buildAfterSignUpUrl() : this.buildAfterSignInUrl();
+    const defaultRedirectUrlComplete = this.client?.signUp ? this.buildAfterSignUpUrl() : this.buildAfterSignUpUrl();
 
     this.#setTransitiveState();
 

packages/clerk-js/src/ui/components/SessionTasks/index.tsx

@@ -21,7 +21,7 @@ const SessionTasksStart = withCardStateProvider(() => {
   useEffect(() => {
     // Simulates additional latency to avoid a abrupt UI transition when navigating to the next task
     const timeoutId = setTimeout(() => {
-      void clerk.__experimental_navigateToTask({ redirectUrlComplete });
+      void clerk.__experimental_nextTask({ redirectUrlComplete });
     }, 500);
     return () => clearTimeout(timeoutId);
   }, [navigate, clerk, redirectUrlComplete]);
@@ -80,7 +80,7 @@ export function SessionTask(): JSX.Element {
   }, [clerk, navigate, redirectUrlComplete]);
 
   const nextTask = useCallback(
-    () => clerk.__experimental_navigateToTask({ redirectUrlComplete }),
+    () => clerk.__experimental_nextTask({ redirectUrlComplete }),
     [clerk, redirectUrlComplete],
   );
 

packages/nextjs/src/app-router/server/controlComponents.tsx

@@ -1,17 +1,22 @@
 import type { ProtectProps } from '@clerk/clerk-react';
+import type { PendingSessionOptions } from '@clerk/types';
 import React from 'react';
 
 import { auth } from './auth';
 
-export async function SignedIn(props: React.PropsWithChildren): Promise<React.JSX.Element | null> {
+export async function SignedIn(
+  props: React.PropsWithChildren<PendingSessionOptions>,
+): Promise<React.JSX.Element | null> {
   const { children } = props;
-  const { userId } = await auth();
+  const { userId } = await auth({ treatPendingAsSignedOut: props.treatPendingAsSignedOut });
   return userId ? <>{children}</> : null;
 }
 
-export async function SignedOut(props: React.PropsWithChildren): Promise<React.JSX.Element | null> {
+export async function SignedOut(
+  props: React.PropsWithChildren<PendingSessionOptions>,
+): Promise<React.JSX.Element | null> {
   const { children } = props;
-  const { userId } = await auth();
+  const { userId } = await auth({ treatPendingAsSignedOut: props.treatPendingAsSignedOut });
   return userId ? null : <>{children}</>;
 }
 
@@ -29,7 +34,7 @@ export async function SignedOut(props: React.PropsWithChildren): Promise<React.J
  */
 export async function Protect(props: ProtectProps): Promise<React.JSX.Element | null> {
   const { children, fallback, ...restAuthorizedParams } = props;
-  const { has, userId } = await auth();
+  const { has, userId } = await auth({ treatPendingAsSignedOut: props.treatPendingAsSignedOut });
 
   /**
    * Fallback to UI provided by user or `null` if authorization checks failed

packages/react/src/isomorphicClerk.ts

@@ -693,9 +693,9 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
     }
   };
 
-  __experimental_navigateToTask = async (params?: NextTaskParams): Promise<void> => {
+  __experimental_nextTask = async (params?: NextTaskParams): Promise<void> => {
     if (this.clerkjs) {
-      return this.clerkjs.__experimental_navigateToTask(params);
+      return this.clerkjs.__experimental_nextTask(params);
     } else {
       return Promise.reject();
     }

packages/types/src/clerk.ts

@@ -706,10 +706,10 @@ export interface Clerk {
   /**
    * Navigates to the next task or redirects to completion URL.
    * If the current session has pending tasks, it navigates to the next task.
-   * If all tasks are complete, it navigates to the provided completion URL or defaults to the origin redirect URL (either from sign-in or sign-up).
+   * If all tasks are complete, it navigates to the provided completion URL.
    * @experimental
    */
-  __experimental_navigateToTask: (params?: NextTaskParams) => Promise<void>;
+  __experimental_nextTask: (params?: NextTaskParams) => Promise<void>;
 
   /**
    * This is an optional function.