Add changeset

Author: LauraBeatris

.changeset/lazy-impalas-clean.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Load tasks based on environment settings

packages/clerk-js/src/ui/components/OrganizationList/OrganizationListPage.tsx

@@ -17,8 +17,6 @@ import { organizationListParams } from './utils';
 const useOrganizationListInView = () => {
   const { userMemberships, userInvitations, userSuggestions } = useOrganizationList(organizationListParams);
 
-  console.log({ userMemberships });
-
   const { ref } = useInView({
     threshold: 0,
     onChange: inView => {

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

@@ -6,27 +6,25 @@ import { useCallback, useContext, useEffect } from 'react';
 import { SESSION_TASK_ROUTE_BY_KEY } from '../../../core/sessionTasks';
 import { OrganizationListContext, SignInContext, SignUpContext } from '../../../ui/contexts';
 import { Card, LoadingCardContainer, withCardStateProvider } from '../../../ui/elements';
-import { SessionTasksContext as SessionTasksContext } from '../../contexts/components/SessionTasks';
+import {
+  SessionTasksContext as SessionTasksContext,
+  useSessionTasksContext,
+} from '../../contexts/components/SessionTasks';
 import { Route, Switch, useRouter } from '../../router';
 import { OrganizationList } from '../OrganizationList';
 
 const SessionTasksStart = withCardStateProvider(() => {
   const clerk = useClerk();
   const { navigate } = useRouter();
+  const { redirectUrlComplete } = useSessionTasksContext();
 
   useEffect(() => {
+    // Simulates additional latency to avoid a abrupt UI transition when navigating to the next task
     const timeoutId = setTimeout(() => {
-      void clerk.session?.reload().then(session => {
-        if (!session.currentTask?.key) {
-          void navigate(clerk.buildAfterSignInUrl());
-          return;
-        }
-
-        void navigate(SESSION_TASK_ROUTE_BY_KEY[session.currentTask?.key]);
-      });
-    }, 1000);
+      void clerk.__experimental_nextTask({ redirectUrlComplete });
+    }, 500);
     return () => clearTimeout(timeoutId);
-  }, [navigate, clerk]);
+  }, [navigate, clerk, redirectUrlComplete]);
 
   return (
     <Card.Root>
@@ -82,12 +80,12 @@ export function SessionTask(): JSX.Element {
   }, [clerk, navigate, redirectUrlComplete]);
 
   const nextTask = useCallback(
-    () => clerk.__experimental_nextTask({ redirectUrlComplete: redirectUrlComplete }),
+    () => clerk.__experimental_nextTask({ redirectUrlComplete }),
     [clerk, redirectUrlComplete],
   );
 
   return (
-    <SessionTasksContext.Provider value={{ nextTask }}>
+    <SessionTasksContext.Provider value={{ nextTask, redirectUrlComplete }}>
       <SessionTaskRoutes />
     </SessionTasksContext.Provider>
   );

packages/clerk-js/src/ui/contexts/components/SessionTasks.ts

@@ -1,5 +1,15 @@
-import { createContext } from 'react';
+import { createContext, useContext } from 'react';
 
 import type { SessionTasksCtx } from '../../types';
 
 export const SessionTasksContext = createContext<SessionTasksCtx | null>(null);
+
+export const useSessionTasksContext = () => {
+  const context = useContext(SessionTasksContext);
+
+  if (context === null) {
+    throw new Error(`Clerk: useSessionTasksContext called outside of the mounted SessionTasks component.`);
+  }
+
+  return context;
+};

packages/clerk-js/src/ui/types.ts

@@ -114,6 +114,7 @@ export type __experimental_CheckoutCtx = __experimental_CheckoutProps & {
 
 export type SessionTasksCtx = {
   nextTask: () => Promise<void>;
+  redirectUrlComplete?: string;
 };
 
 export type AvailableComponentCtx =

packages/types/src/clerk.ts

@@ -644,7 +644,7 @@ export interface Clerk {
    * If all tasks are complete, it navigates to the provided completion URL.
    * @experimental
    */
-  __experimental_nextTask: (params: NextTaskParams) => Promise<void>;
+  __experimental_nextTask: (params?: NextTaskParams) => Promise<void>;
 
   /**
    * This is an optional function.