Display error in development if orgs is disabled

Author: LauraBeatris

.changeset/bright-cats-lay.md

@@ -1,6 +1,6 @@
 ---
-'@clerk/clerk-js': patch
-'@clerk/types': patch
+'@clerk/clerk-js': minor
+'@clerk/types': minor
 ---
 
 Export `<TaskSelectOrganization />` component.

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

@@ -76,6 +76,7 @@ import type {
   SignUpProps,
   SignUpRedirectOptions,
   SignUpResource,
+  TaskSelectOrganizationProps,
   UnsubscribeCallback,
   UserButtonProps,
   UserProfileProps,
@@ -1164,9 +1165,18 @@ export class Clerk implements ClerkInterface {
     void this.#componentControls.ensureMounted().then(controls => controls.unmountComponent({ node }));
   };
 
-  public mountTaskSelectOrganization = (node: HTMLDivElement, props?: APIKeysProps) => {
+  public mountTaskSelectOrganization = (node: HTMLDivElement, props?: TaskSelectOrganizationProps) => {
     this.assertComponentsReady(this.#componentControls);
 
+    if (disabledOrganizationsFeature(this, this.environment)) {
+      if (this.#instanceType === 'development') {
+        throw new ClerkRuntimeError(warnings.cannotRenderAnyOrganizationComponent('TaskSelectOrganization'), {
+          code: CANNOT_RENDER_ORGANIZATIONS_DISABLED_ERROR_CODE,
+        });
+      }
+      return;
+    }
+
     void this.#componentControls.ensureMounted({ preloadHint: 'TaskSelectOrganization' }).then(controls =>
       controls.mountComponent({
         name: 'TaskSelectOrganization',

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

@@ -5,7 +5,12 @@ const formatWarning = (msg: string) => {
 };
 
 const createMessageForDisabledOrganizations = (
-  componentName: 'OrganizationProfile' | 'OrganizationSwitcher' | 'OrganizationList' | 'CreateOrganization',
+  componentName:
+    | 'OrganizationProfile'
+    | 'OrganizationSwitcher'
+    | 'OrganizationList'
+    | 'CreateOrganization'
+    | 'TaskSelectOrganization',
 ) => {
   return formatWarning(
     `The <${componentName}/> cannot be rendered when the feature is turned off. Visit 'dashboard.clerk.com' to enable the feature. Since the feature is turned off, this is no-op.`,

packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationForm.tsx

@@ -1,8 +1,8 @@
-import { useOrganization, useOrganizationList } from '@clerk/shared/react';
+import { useClerk, useOrganization, useOrganizationList } from '@clerk/shared/react';
 import type { CreateOrganizationParams, OrganizationResource } from '@clerk/types';
-import React from 'react';
+import React, { useContext } from 'react';
 
-import { useSessionTasksContext } from '@/ui/contexts/components/SessionTasks';
+import { SessionTasksContext } from '@/ui/contexts/components/SessionTasks';
 import { useCardState, withCardStateProvider } from '@/ui/elements/contexts';
 import { Form } from '@/ui/elements/Form';
 import { FormButtonContainer } from '@/ui/elements/FormButtons';
@@ -40,7 +40,8 @@ type CreateOrganizationFormProps = {
 export const CreateOrganizationForm = withCardStateProvider((props: CreateOrganizationFormProps) => {
   const card = useCardState();
   const wizard = useWizard({ onNextStep: () => card.setError(undefined) });
-  const sessionTasksContext = useSessionTasksContext();
+  const sessionTasksContext = useContext(SessionTasksContext);
+  const clerk = useClerk();
 
   const lastCreatedOrganizationRef = React.useRef<OrganizationResource | null>(null);
   const { createOrganization, isLoaded, setActive, userMemberships } = useOrganizationList({
@@ -92,7 +93,9 @@ export const CreateOrganizationForm = withCardStateProvider((props: CreateOrgani
       void userMemberships.revalidate?.();
 
       if (sessionTasksContext) {
-        await sessionTasksContext.navigateToTaskIfAvailable();
+        await clerk.__internal_navigateToTaskIfAvailable({
+          redirectUrlComplete: sessionTasksContext.redirectUrlComplete,
+        });
         return;
       }
 

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

@@ -1,20 +1,22 @@
-import { useOrganizationList, useUser } from '@clerk/shared/react';
+import { useClerk, useOrganizationList, useUser } from '@clerk/shared/react';
 import type { OrganizationResource } from '@clerk/types';
+import { useContext } from 'react';
 
 import { useCardState, withCardStateProvider } from '@/ui/elements/contexts';
 import { OrganizationPreview } from '@/ui/elements/OrganizationPreview';
 import { PersonalWorkspacePreview } from '@/ui/elements/PersonalWorkspacePreview';
 
 import { useOrganizationListContext } from '../../contexts';
-import { useSessionTasksContext } from '../../contexts/components/SessionTasks';
+import { SessionTasksContext } from '../../contexts/components/SessionTasks';
 import { localizationKeys } from '../../localization';
 import { OrganizationListPreviewButton, sharedMainIdentifierSx } from './shared';
 
 export const MembershipPreview = withCardStateProvider((props: { organization: OrganizationResource }) => {
   const card = useCardState();
   const { navigateAfterSelectOrganization } = useOrganizationListContext();
   const { isLoaded, setActive } = useOrganizationList();
-  const sessionTasksContext = useSessionTasksContext();
+  const clerk = useClerk();
+  const sessionTasksContext = useContext(SessionTasksContext);
 
   if (!isLoaded) {
     return null;
@@ -25,8 +27,10 @@ export const MembershipPreview = withCardStateProvider((props: { organization: O
         organization,
       });
 
-      if (sessionTasksContext?.navigateToTaskIfAvailable) {
-        return sessionTasksContext?.navigateToTaskIfAvailable();
+      if (sessionTasksContext) {
+        return clerk.__internal_navigateToTaskIfAvailable({
+          redirectUrlComplete: sessionTasksContext.redirectUrlComplete,
+        });
       }
 
       await navigateAfterSelectOrganization(organization);

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

@@ -10,18 +10,20 @@ import { INTERNAL_SESSION_TASK_ROUTE_BY_KEY } from '../../../core/sessionTasks';
 import { SignInContext, SignUpContext } from '../../../ui/contexts';
 import { SessionTasksContext, useSessionTasksContext } from '../../contexts/components/SessionTasks';
 import { Route, Switch, useRouter } from '../../router';
-import { TaskSelectOrganization } from './tasks/ForceOrganizationSelection';
+import { TaskSelectOrganization } from './tasks/TaskSelectOrganization';
 
 const SessionTasksStart = () => {
-  const { navigateToTaskIfAvailable } = useSessionTasksContext();
+  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 navigateToTaskIfAvailable();
+      void clerk.__internal_navigateToTaskIfAvailable({ redirectUrlComplete });
     }, 500);
     return () => clearTimeout(timeoutId);
-  }, [navigateToTaskIfAvailable]);
+  }, [navigate, clerk, redirectUrlComplete]);
 
   return (
     <Card.Root>
@@ -91,12 +93,7 @@ export const SessionTask = withCardStateProvider(() => {
   }
 
   return (
-    <SessionTasksContext.Provider
-      value={{
-        redirectUrlComplete,
-        currentTaskContainer,
-      }}
-    >
+    <SessionTasksContext.Provider value={{ redirectUrlComplete, currentTaskContainer }}>
       <SessionTaskRoutes />
     </SessionTasksContext.Provider>
   );

packages/clerk-js/src/ui/components/SessionTasks/tasks/ForceOrganizationSelection.tsx renamed to packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskSelectOrganization.tsx

@@ -1,32 +1,17 @@
-import { useClerk } from '@clerk/shared/react/index';
-import { createContext, useCallback, useContext } from 'react';
+import { createContext, useContext } from 'react';
 
 import type { SessionTasksCtx, TaskSelectOrganizationCtx } from '../../types';
 
 export const SessionTasksContext = createContext<SessionTasksCtx | null>(null);
 
-export type SessionTasksContextType = SessionTasksCtx & {
-  navigateToTaskIfAvailable: () => Promise<void>;
-};
-
-export const useSessionTasksContext = (): SessionTasksContextType => {
-  const clerk = useClerk();
-  const ctx = useContext(SessionTasksContext);
+export const useSessionTasksContext = (): SessionTasksCtx => {
+  const context = useContext(SessionTasksContext);
 
-  if (ctx === null) {
+  if (context === null) {
     throw new Error('Clerk: useSessionTasksContext called outside of the mounted SessionTasks component.');
   }
 
-  const redirectUrlComplete = ctx.redirectUrlComplete;
-
-  const navigateToTaskIfAvailable = useCallback(() => {
-    return clerk.__internal_navigateToTaskIfAvailable({ redirectUrlComplete });
-  }, [clerk, redirectUrlComplete]);
-
-  return {
-    ...ctx,
-    navigateToTaskIfAvailable,
-  };
+  return context;
 };
 
 export const TaskSelectOrganizationContext = createContext<TaskSelectOrganizationCtx | null>(null);

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

@@ -21,9 +21,7 @@ const componentImportPaths = {
   Checkout: () => import(/* webpackChunkName: "checkout" */ '../components/Checkout'),
   SessionTasks: () => import(/* webpackChunkName: "sessionTasks" */ '../components/SessionTasks'),
   TaskSelectOrganization: () =>
-    import(
-      /* webpackChunkName: "taskSelectOrganization" */ '../components/SessionTasks/tasks/ForceOrganizationSelection'
-    ),
+    import(/* webpackChunkName: "taskSelectOrganization" */ '../components/SessionTasks/tasks/TaskSelectOrganization'),
   PlanDetails: () => import(/* webpackChunkName: "planDetails" */ '../components/Plans/PlanDetails'),
   SubscriptionDetails: () => import(/* webpackChunkName: "subscriptionDetails" */ '../components/SubscriptionDetails'),
   APIKeys: () => import(/* webpackChunkName: "apiKeys" */ '../components/ApiKeys/ApiKeys'),