Add guard for active session

Author: LauraBeatris

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

@@ -28,6 +28,8 @@ const warnings = {
     'The <SignUp/> component cannot render when a user is already signed in, unless the application allows multiple sessions. Since a user is signed in and this application only allows a single session, Clerk is redirecting to the value set in `afterSignUp` URL instead.',
   cannotRenderSignUpComponentWhenTaskExists:
     'The <SignUp/> component cannot render when a user has a pending task, unless the application allows multiple sessions. Since a user is signed in and this application only allows a single session, Clerk is redirecting to the task instead.',
+  cannotRenderComponentWhenTaskDoesNotExist:
+    '<TaskSelectOrganization/> cannot render unless a session task is pending. Clerk is redirecting to the value set in `redirectUrlComplete` instead.',
   cannotRenderSignInComponentWhenSessionExists:
     'The <SignIn/> component cannot render when a user is already signed in, unless the application allows multiple sessions. Since a user is signed in and this application only allows a single session, Clerk is redirecting to the `afterSignIn` URL instead.',
   cannotRenderSignInComponentWhenTaskExists:

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

@@ -3,8 +3,9 @@ import { useTaskSelectOrganizationContext } from '@/ui/contexts/components/Sessi
 import { withCardStateProvider } from '@/ui/elements/contexts';
 
 import { OrganizationList } from '../../OrganizationList';
+import { withTaskGuard } from './withTaskGuard';
 
-export const TaskSelectOrganization = withCardStateProvider(() => {
+const TaskSelectOrganizationInternal = () => {
   const ctx = useTaskSelectOrganizationContext();
 
   return (
@@ -18,4 +19,6 @@ export const TaskSelectOrganization = withCardStateProvider(() => {
       <OrganizationList />
     </OrganizationListContext.Provider>
   );
-});
+};
+
+export const TaskSelectOrganization = withTaskGuard(withCardStateProvider(TaskSelectOrganizationInternal));

packages/clerk-js/src/ui/components/SessionTasks/tasks/withTaskGuard.ts

@@ -0,0 +1,25 @@
+import type { ComponentType } from 'react';
+
+import { warnings } from '@/core/warnings';
+import { withRedirect } from '@/ui/common';
+import { useTaskSelectOrganizationContext } from '@/ui/contexts/components/SessionTasks';
+import type { AvailableComponentProps } from '@/ui/types';
+
+export const withTaskGuard = <P extends AvailableComponentProps>(Component: ComponentType<P>) => {
+  const displayName = Component.displayName || Component.name || 'Component';
+  Component.displayName = displayName;
+
+  const HOC = (props: P) => {
+    const ctx = useTaskSelectOrganizationContext();
+    return withRedirect(
+      Component,
+      clerk => !!clerk.session && !clerk.session?.currentTask,
+      ({ clerk }) => ctx.redirectUrlComplete || clerk.buildAfterSignInUrl(),
+      warnings.cannotRenderComponentWhenTaskDoesNotExist,
+    )(props);
+  };
+
+  HOC.displayName = `withTaskGuard(${displayName})`;
+
+  return HOC;
+};