fix(clerk-js): Do not switch after-auth screens on org invites revalidation (#6191)

Author: LauraBeatris

.changeset/warm-parents-take.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Do not display create organization form after accepting organization invitation on after-auth flow

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

@@ -1,6 +1,6 @@
 import { useOrganizationList } from '@clerk/shared/react/index';
 import type { PropsWithChildren } from 'react';
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import { OrganizationListContext } from '@/ui/contexts';
 import { Card } from '@/ui/elements/Card';
@@ -16,6 +16,8 @@ import { organizationListParams } from '../../OrganizationSwitcher/utils';
  */
 export const ForceOrganizationSelectionTask = withCardStateProvider(() => {
   const { userMemberships, userInvitations, userSuggestions } = useOrganizationList(organizationListParams);
+  const currentFlow = useRef<'create-organization' | 'organization-selection'>();
+
   const isLoading = userMemberships?.isLoading || userInvitations?.isLoading || userSuggestions?.isLoading;
   const hasData = !!(userMemberships?.count || userInvitations?.count || userSuggestions?.count);
 
@@ -27,16 +29,27 @@ export const ForceOrganizationSelectionTask = withCardStateProvider(() => {
     );
   }
 
-  if (hasData) {
-    return <OrganizationSelectionPage />;
+  // Only show the organization selection page if organizations exist when the component first mounts.
+  // This prevents unwanted screen transitions that could occur from data revalidation,
+  // such as when a user accepts an organization invitation and the membership list updates.
+  if (hasData || currentFlow.current === 'organization-selection') {
+    return <OrganizationSelectionPage currentFlow={currentFlow} />;
   }
 
-  return <CreateOrganizationPage />;
+  return <CreateOrganizationPage currentFlow={currentFlow} />;
 });
 
-const OrganizationSelectionPage = () => {
+type CommonPageProps = {
+  currentFlow: React.MutableRefObject<'create-organization' | 'organization-selection' | undefined>;
+};
+
+const OrganizationSelectionPage = ({ currentFlow }: CommonPageProps) => {
   const [showCreateOrganizationForm, setShowCreateOrganizationForm] = useState(false);
 
+  useEffect(() => {
+    currentFlow.current = 'organization-selection';
+  }, [currentFlow]);
+
   return (
     <OrganizationListContext.Provider
       value={{
@@ -66,7 +79,11 @@ const OrganizationSelectionPage = () => {
   );
 };
 
-const CreateOrganizationPage = () => {
+const CreateOrganizationPage = ({ currentFlow }: CommonPageProps) => {
+  useEffect(() => {
+    currentFlow.current = 'create-organization';
+  }, [currentFlow]);
+
   return (
     <FlowCard>
       <Box