feat(clerk-js,types): Navigate to session task on after sign-in/sign-up

.changeset/old-cherries-laugh.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Navigate to session tasks on after sign-in/sign-up

integration/.keys.json.sample

@@ -46,5 +46,9 @@
  "with-waitlist-mode": {
  "pk": "",
  "sk": ""
+ },
+ "with-session-tasks": {
+ "pk": "",
+ "sk": ""
  }
 }

integration/presets/envs.ts

@@ -42,6 +42,13 @@ const withEmailCodes = base
  .setEnvVariable('public', 'CLERK_PUBLISHABLE_KEY', instanceKeys.get('with-email-codes').pk)
  .setEnvVariable('private', 'CLERK_ENCRYPTION_KEY', constants.E2E_CLERK_ENCRYPTION_KEY || 'a-key');
 
+const withSessionTasks = base
+ .clone()
+ .setId('withSessionTasks')
+ .setEnvVariable('private', 'CLERK_SECRET_KEY', instanceKeys.get('with-session-tasks').sk)
+ .setEnvVariable('public', 'CLERK_PUBLISHABLE_KEY', instanceKeys.get('with-session-tasks').pk)
+ .setEnvVariable('private', 'CLERK_ENCRYPTION_KEY', constants.E2E_CLERK_ENCRYPTION_KEY || 'a-key');
+
 const withEmailCodes_destroy_client = withEmailCodes
  .clone()
  .setEnvVariable('public', 'EXPERIMENTAL_PERSIST_CLIENT', 'false');
@@ -157,4 +164,5 @@ export const envs = {
  withSignInOrUpFlow,
  withSignInOrUpEmailLinksFlow,
  withSignInOrUpwithRestrictedModeFlow,
+ withSessionTasks,
 } as const;

integration/presets/longRunningApps.ts

@@ -37,6 +37,11 @@ export const createLongRunningApps = () => {
  config: next.appRouter,
  env: envs.withSignInOrUpEmailLinksFlow,
  },
+ {
+ id: 'next.appRouter.withSessionTasks',
+ config: next.appRouter,
+ env: envs.withSessionTasks,
+ },
  { id: 'quickstart.next.appRouter', config: next.appRouterQuickstart, env: envs.withEmailCodesQuickstart },
  { id: 'elements.next.appRouter', config: elements.nextAppRouter, env: envs.withEmailCodes },
  { id: 'astro.node.withCustomRoles', config: astro.node, env: envs.withCustomRoles },

integration/tests/session-tasks-multi-session.test.ts

@@ -0,0 +1 @@
+// TODO - add tests

integration/tests/session-tasks-sign-in.test.ts

@@ -0,0 +1,72 @@
+import { expect, test } from '@playwright/test';
+
+import type { Application } from '../models/application';
+import { appConfigs } from '../presets';
+import type { FakeUser } from '../testUtils';
+import { createTestUtils } from '../testUtils';
+
+test.describe('session tasks sign in flow @nextjs', () => {
+ test.describe.configure({ mode: 'serial' });
+ let app: Application;
+ let fakeUser: FakeUser;
+
+ test.beforeAll(async () => {
+ app = await appConfigs.next.appRouter.clone().commit();
+ await app.setup();
+ await app.withEnv(appConfigs.envs.withSessionTasks);
+ await app.dev();
+
+ const m = createTestUtils({ app });
+ fakeUser = m.services.users.createFakeUser({
+ withPhoneNumber: true,
+ withUsername: true,
+ });
+ await m.services.users.createBapiUser(fakeUser);
+ });
+
+ test.afterAll(async () => {
+ await fakeUser.deleteIfExists();
+ await app.teardown();
+ });
+
+ test('on after sign-in, navigates to tasks', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.po.signIn.goTo();
+ await u.po.signIn.setIdentifier(fakeUser.email);
+ await u.po.signIn.continue();
+ await u.po.signIn.setPassword(fakeUser.password);
+ await u.po.signIn.continue();
+ await u.po.expect.toBeSignedIn();
+ await expect(u.page.getByRole('heading', { name: 'Create Organization' })).toBeVisible();
+ expect(u.page.url()).toContain('/sign-in/add-organization');
+ });
+
+ test.fixme('redirects to after sign-in url when session tasks has been resolved', () => {
+ // todo
+ });
+
+ test.fixme('redirects to after sign-in url when accessing root sign in with a active session', {
+ // todo
+ });
+
+ test('redirects back to tasks when accessing root sign in', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.po.signIn.goTo();
+ await u.po.signIn.setIdentifier(fakeUser.email);
+ await u.po.signIn.continue();
+ await u.po.signIn.setPassword(fakeUser.password);
+ await u.po.signIn.continue();
+ await u.po.expect.toBeSignedIn();
+ await expect(u.page.getByRole('heading', { name: 'Create Organization' })).toBeVisible();
+ expect(u.page.url()).toContain('/sign-in/add-organization');
+ await u.po.signIn.goTo();
+ await expect(u.page.getByRole('heading', { name: 'Create Organization' })).toBeVisible();
+ expect(u.page.url()).toContain('/sign-in/add-organization');
+ });
+
+ test('without a session, does not allow to access tasks', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.page.goto('/sign-in/add-organization');
+ expect(u.page.url()).not.toContain('/sign-in/add-organization');
+ });
+});

integration/tests/session-tasks-sign-up.test.ts

@@ -0,0 +1,73 @@
+import { expect, test } from '@playwright/test';
+
+import type { Application } from '../models/application';
+import { appConfigs } from '../presets';
+import { createTestUtils } from '../testUtils';
+
+test.describe('session tasks sign in flow @nextjs', () => {
+ test.describe.configure({ mode: 'serial' });
+ let app: Application;
+
+ test.beforeAll(async () => {
+ app = await appConfigs.next.appRouter.clone().commit();
+ await app.setup();
+ await app.withEnv(appConfigs.envs.withSessionTasks);
+ await app.dev();
+ });
+
+ test.afterAll(async () => {
+ await app.teardown();
+ });
+
+ test('on after sign-up, navigates to tasks', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+ const fakeUser = u.services.users.createFakeUser({
+ fictionalEmail: true,
+ });
+ await u.po.signUp.goTo();
+ await u.po.signUp.signUpWithEmailAndPassword({
+ email: fakeUser.email,
+ password: fakeUser.password,
+ });
+ await u.po.signUp.enterTestOtpCode();
+ await u.po.expect.toBeSignedIn();
+
+ await expect(u.page.getByRole('heading', { name: 'Create Organization' })).toBeVisible();
+ expect(u.page.url()).toContain('/sign-up/add-organization');
+
+ await fakeUser.deleteIfExists();
+ });
+
+ test.fixme('redirects to after sign-up url when session tasks has been resolved', () => {
+ // todo
+ });
+
+ test.fixme('redirects to after sign-up url when accessing root sign in with a active session', {
+ // todo
+ });
+
+ test('redirects back to tasks when accessing root sign in', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+ const fakeUser = u.services.users.createFakeUser({
+ fictionalEmail: true,
+ });
+ await u.po.signUp.goTo();
+ await u.po.signUp.signUpWithEmailAndPassword({
+ email: fakeUser.email,
+ password: fakeUser.password,
+ });
+ await u.po.signUp.enterTestOtpCode();
+ await u.po.expect.toBeSignedIn();
+ await expect(u.page.getByRole('heading', { name: 'Create Organization' })).toBeVisible();
+ expect(u.page.url()).toContain('/sign-up/add-organization');
+ await u.po.signIn.goTo();
+ await expect(u.page.getByRole('heading', { name: 'Create Organization' })).toBeVisible();
+ expect(u.page.url()).toContain('/sign-up/add-organization');
+ });
+
+ test('without a session, does not allow to access tasks', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.page.goto('/sign-up/add-organization');
+ expect(u.page.url()).not.toContain('/sign-up/add-organization');
+ });
+});

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

@@ -23,6 +23,7 @@ import type {
  CreateOrganizationParams,
  CreateOrganizationProps,
  CredentialReturn,
+ CustomNavigation,
  DomainOrProxyUrl,
  EnvironmentJSON,
  EnvironmentJSONSnapshot,
@@ -45,6 +46,7 @@ import type {
  RedirectOptions,
  Resources,
  SDKMetadata,
+ SessionTask,
  SetActiveParams,
  SignedInSessionResource,
  SignInProps,
@@ -65,6 +67,7 @@ import type {
  WaitlistResource,
  Web3Provider,
 } from '@clerk/types';
+import type { SessionTaskRoutePath } from 'ui/common/tasks';
 
 import type { MountComponentRenderer } from '../ui/Components';
 import {
@@ -946,7 +949,10 @@ export class Clerk implements ClerkInterface {
  beforeUnloadTracker?.stopTracking();
  }
 
- if (redirectUrl && !beforeEmit) {
+ // Overrides the default behavior of redirects to `afterSignInUrl`
+ // or `afterSignUpUrl` to redirect the user to their assigned tasks
+ const hasSessionToResolve = newSession?.currentTask;
+ if (redirectUrl && !beforeEmit && !hasSessionToResolve) {
  beforeUnloadTracker?.startTracking();
  this.#setTransitiveState();
 
@@ -1728,6 +1734,8 @@ export class Clerk implements ClerkInterface {
  if (this.session) {
  const session = this.#getSessionFromClient(this.session.id);
 
+ this.maybeNavigateToTaskResolution(this.navigate);
+
  // Note: this might set this.session to null
  this.#setAccessors(session);
 
@@ -2260,4 +2268,33 @@ export class Clerk implements ClerkInterface {
 
  return allowedProtocols;
  }
+
+ maybeNavigateToTaskResolution(customNavigate?: (to: string) => Promise<unknown>) {
+ if (!this.session?.currentTask || !inBrowser()) {
+ return;
+ }
+
+ const isOnTaskResolutionPath = window.location.href.includes('navigate-to-task');
+ if (isOnTaskResolutionPath) {
+ return;
+ }
+
+ const url = buildURL({ base: `${this.#options.signInUrl}/navigate-to-task` }, { stringify: true });
+
+ void customNavigate?.(url);
+ }
+
+ navigateToTaskPath(customNavigate?: CustomNavigation) {
+ if (!this.session?.currentTask || !inBrowser()) {
+ return;
+ }
+
+ const taskKeyToRoutePaths: Record<SessionTask['key'], SessionTaskRoutePath> = {
+ org: 'add-organization',
+ };
+
+ const routePath = taskKeyToRoutePaths[this.session.currentTask.key];
+
+ void customNavigate?.(routePath);
+ }
 }

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

@@ -303,4 +303,8 @@ export class Session extends BaseResource implements SessionResource {
  return token.getRawString() || null;
  });
  }
+
+ get currentTask(): SessionTask | undefined {
+ return (this.tasks ?? [])[0];
+ }
 }

packages/clerk-js/src/ui/common/TaskNavigation.tsx

@@ -0,0 +1,23 @@
+import { Flow } from '../customizables';
+import { Card, LoadingCardContainer, withCardStateProvider } from '../elements';
+
+export const TaskNavigation = withCardStateProvider(() => {
+ return (
+ <Flow.Part part='taskNavigation'>
+ <TaskNavigationCard />
+ </Flow.Part>
+ );
+});
+
+export const TaskNavigationCard = () => {
+ return (
+ <Flow.Part part='taskNavigation'>
+ <Card.Root>
+ <Card.Content>
+ <LoadingCardContainer />
+ </Card.Content>
+ <Card.Footer />
+ </Card.Root>
+ </Flow.Part>
+ );
+};

packages/clerk-js/src/ui/common/index.ts

@@ -13,6 +13,7 @@ export * from './QRCode';
 export * from './redirects';
 export * from './RemoveResourceForm';
 export * from './SSOCallback';
+export * from './TaskNavigation';
 export * from './verification';
 export * from './withRedirect';
 export * from './Wizard';

packages/clerk-js/src/ui/common/tasks.ts

@@ -0,0 +1,3 @@
+export const sessionTaskRoutePaths = ['add-organization'] as const;
+
+export type SessionTaskRoutePath = (typeof sessionTaskRoutePaths)[number];

packages/clerk-js/src/ui/common/withRedirect.tsx

@@ -28,8 +28,16 @@ export function withRedirect<P extends AvailableComponentProps>(
  const environment = useEnvironment();
  const options = useOptions();
 
- const shouldRedirect = condition(clerk, environment, options);
+ const hasTasksAndSingleSessionMode = clerk.session?.currentTask && environment?.authConfig.singleSessionMode;
+ const shouldRedirect =
+ // Overrides default redirect guards to not lead with race conditions on redirection for session tasks
+ hasTasksAndSingleSessionMode ? false : condition(clerk, environment, options);
  React.useEffect(() => {
+ if (hasTasksAndSingleSessionMode) {
+ void clerk.maybeNavigateToTaskResolution(navigate);
+ return;
+ }
+
  if (shouldRedirect) {
  if (warning && isDevelopmentFromPublishableKey(clerk.publishableKey)) {
  console.info(warning);
@@ -38,7 +46,7 @@ export function withRedirect<P extends AvailableComponentProps>(
  // eslint-disable-next-line @typescript-eslint/no-floating-promises
  navigate(redirectUrl({ clerk, environment, options }));
  }
- }, []);
+ }, [hasTasksAndSingleSessionMode]);
 
  if (shouldRedirect) {
  return null;

packages/clerk-js/src/ui/components/SignIn/SignIn.tsx

@@ -2,6 +2,7 @@ import { useClerk } from '@clerk/shared/react';
 import type { SignInModalProps, SignInProps } from '@clerk/types';
 import React from 'react';
 
+import { sessionTaskRoutePaths } from '../../../ui/common/tasks';
 import { normalizeRoutingOptions } from '../../../utils/normalizeRoutingOptions';
 import { SignInEmailLinkFlowComplete, SignUpEmailLinkFlowComplete } from '../../common/EmailLinkCompleteFlowCard';
 import type { SignUpContextType } from '../../contexts';
@@ -19,13 +20,15 @@ import { SignUpSSOCallback } from '../SignUp/SignUpSSOCallback';
 import { SignUpStart } from '../SignUp/SignUpStart';
 import { SignUpVerifyEmail } from '../SignUp/SignUpVerifyEmail';
 import { SignUpVerifyPhone } from '../SignUp/SignUpVerifyPhone';
+import { Task } from '../Task';
 import { ResetPassword } from './ResetPassword';
 import { ResetPasswordSuccess } from './ResetPasswordSuccess';
 import { SignInAccountSwitcher } from './SignInAccountSwitcher';
 import { SignInFactorOne } from './SignInFactorOne';
 import { SignInFactorTwo } from './SignInFactorTwo';
 import { SignInSSOCallback } from './SignInSSOCallback';
 import { SignInStart } from './SignInStart';
+import { SignInTaskNavigation } from './SignInTaskNavigation';
 
 function RedirectToSignIn() {
  const clerk = useClerk();
@@ -132,6 +135,17 @@ function SignInRoutes(): JSX.Element {
  </Route>
  </Route>
  )}
+ <Route path='navigate-to-task'>
+ <SignInTaskNavigation />
+ </Route>
+ {sessionTaskRoutePaths.map(path => (
+ <Route
+ key={path}
+ path={path}
+ >
+ <Task />
+ </Route>
+ ))}
  <Route index>
  <SignInStart />
  </Route>

packages/clerk-js/src/ui/components/SignIn/SignInTaskNavigation.tsx

@@ -0,0 +1,3 @@
+import { TaskNavigation, withRedirectToAfterSignIn } from '../../common';
+
+export const SignInTaskNavigation = withRedirectToAfterSignIn(TaskNavigation);

.changeset/old-cherries-laugh.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Navigate to session tasks on after sign-in/sign-up

integration/.keys.json.sample

@@ -46,5 +46,9 @@
  "with-waitlist-mode": {
  "pk": "",
  "sk": ""
+ },
+ "with-session-tasks": {
+ "pk": "",
+ "sk": ""
  }
 }

integration/presets/envs.ts

@@ -42,6 +42,13 @@ const withEmailCodes = base
  .setEnvVariable('public', 'CLERK_PUBLISHABLE_KEY', instanceKeys.get('with-email-codes').pk)
  .setEnvVariable('private', 'CLERK_ENCRYPTION_KEY', constants.E2E_CLERK_ENCRYPTION_KEY || 'a-key');
 
+const withSessionTasks = base
+ .clone()
+ .setId('withSessionTasks')
+ .setEnvVariable('private', 'CLERK_SECRET_KEY', instanceKeys.get('with-session-tasks').sk)
+ .setEnvVariable('public', 'CLERK_PUBLISHABLE_KEY', instanceKeys.get('with-session-tasks').pk)
+ .setEnvVariable('private', 'CLERK_ENCRYPTION_KEY', constants.E2E_CLERK_ENCRYPTION_KEY || 'a-key');
+
 const withEmailCodes_destroy_client = withEmailCodes
  .clone()
  .setEnvVariable('public', 'EXPERIMENTAL_PERSIST_CLIENT', 'false');
@@ -157,4 +164,5 @@ export const envs = {
  withSignInOrUpFlow,
  withSignInOrUpEmailLinksFlow,
  withSignInOrUpwithRestrictedModeFlow,
+ withSessionTasks,
 } as const;

integration/presets/longRunningApps.ts

@@ -37,6 +37,11 @@ export const createLongRunningApps = () => {
  config: next.appRouter,
  env: envs.withSignInOrUpEmailLinksFlow,
  },
+ {
+ id: 'next.appRouter.withSessionTasks',
+ config: next.appRouter,
+ env: envs.withSessionTasks,
+ },
  { id: 'quickstart.next.appRouter', config: next.appRouterQuickstart, env: envs.withEmailCodesQuickstart },
  { id: 'elements.next.appRouter', config: elements.nextAppRouter, env: envs.withEmailCodes },
  { id: 'astro.node.withCustomRoles', config: astro.node, env: envs.withCustomRoles },

integration/tests/session-tasks-multi-session.test.ts

@@ -0,0 +1 @@
+// TODO - add tests

integration/tests/session-tasks-sign-in.test.ts

@@ -0,0 +1,72 @@
+import { expect, test } from '@playwright/test';
+
+import type { Application } from '../models/application';
+import { appConfigs } from '../presets';
+import type { FakeUser } from '../testUtils';
+import { createTestUtils } from '../testUtils';
+
+test.describe('session tasks sign in flow @nextjs', () => {
+ test.describe.configure({ mode: 'serial' });
+ let app: Application;
+ let fakeUser: FakeUser;
+
+ test.beforeAll(async () => {
+ app = await appConfigs.next.appRouter.clone().commit();
+ await app.setup();
+ await app.withEnv(appConfigs.envs.withSessionTasks);
+ await app.dev();
+
+ const m = createTestUtils({ app });
+ fakeUser = m.services.users.createFakeUser({
+ withPhoneNumber: true,
+ withUsername: true,
+ });
+ await m.services.users.createBapiUser(fakeUser);
+ });
+
+ test.afterAll(async () => {
+ await fakeUser.deleteIfExists();
+ await app.teardown();
+ });
+
+ test('on after sign-in, navigates to tasks', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.po.signIn.goTo();
+ await u.po.signIn.setIdentifier(fakeUser.email);
+ await u.po.signIn.continue();
+ await u.po.signIn.setPassword(fakeUser.password);
+ await u.po.signIn.continue();
+ await u.po.expect.toBeSignedIn();
+ await expect(u.page.getByRole('heading', { name: 'Create Organization' })).toBeVisible();
+ expect(u.page.url()).toContain('/sign-in/add-organization');
+ });
+
+ test.fixme('redirects to after sign-in url when session tasks has been resolved', () => {
+ // todo
+ });
+
+ test.fixme('redirects to after sign-in url when accessing root sign in with a active session', {
+ // todo
+ });
+
+ test('redirects back to tasks when accessing root sign in', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.po.signIn.goTo();
+ await u.po.signIn.setIdentifier(fakeUser.email);
+ await u.po.signIn.continue();
+ await u.po.signIn.setPassword(fakeUser.password);
+ await u.po.signIn.continue();
+ await u.po.expect.toBeSignedIn();
+ await expect(u.page.getByRole('heading', { name: 'Create Organization' })).toBeVisible();
+ expect(u.page.url()).toContain('/sign-in/add-organization');
+ await u.po.signIn.goTo();
+ await expect(u.page.getByRole('heading', { name: 'Create Organization' })).toBeVisible();
+ expect(u.page.url()).toContain('/sign-in/add-organization');
+ });
+
+ test('without a session, does not allow to access tasks', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.page.goto('/sign-in/add-organization');
+ expect(u.page.url()).not.toContain('/sign-in/add-organization');
+ });
+});

integration/tests/session-tasks-sign-up.test.ts

@@ -0,0 +1,73 @@
+import { expect, test } from '@playwright/test';
+
+import type { Application } from '../models/application';
+import { appConfigs } from '../presets';
+import { createTestUtils } from '../testUtils';
+
+test.describe('session tasks sign in flow @nextjs', () => {
+ test.describe.configure({ mode: 'serial' });
+ let app: Application;
+
+ test.beforeAll(async () => {
+ app = await appConfigs.next.appRouter.clone().commit();
+ await app.setup();
+ await app.withEnv(appConfigs.envs.withSessionTasks);
+ await app.dev();
+ });
+
+ test.afterAll(async () => {
+ await app.teardown();
+ });
+
+ test('on after sign-up, navigates to tasks', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+ const fakeUser = u.services.users.createFakeUser({
+ fictionalEmail: true,
+ });
+ await u.po.signUp.goTo();
+ await u.po.signUp.signUpWithEmailAndPassword({
+ email: fakeUser.email,
+ password: fakeUser.password,
+ });
+ await u.po.signUp.enterTestOtpCode();
+ await u.po.expect.toBeSignedIn();
+
+ await expect(u.page.getByRole('heading', { name: 'Create Organization' })).toBeVisible();
+ expect(u.page.url()).toContain('/sign-up/add-organization');
+
+ await fakeUser.deleteIfExists();
+ });
+
+ test.fixme('redirects to after sign-up url when session tasks has been resolved', () => {
+ // todo
+ });
+
+ test.fixme('redirects to after sign-up url when accessing root sign in with a active session', {
+ // todo
+ });
+
+ test('redirects back to tasks when accessing root sign in', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+ const fakeUser = u.services.users.createFakeUser({
+ fictionalEmail: true,
+ });
+ await u.po.signUp.goTo();
+ await u.po.signUp.signUpWithEmailAndPassword({
+ email: fakeUser.email,
+ password: fakeUser.password,
+ });
+ await u.po.signUp.enterTestOtpCode();
+ await u.po.expect.toBeSignedIn();
+ await expect(u.page.getByRole('heading', { name: 'Create Organization' })).toBeVisible();
+ expect(u.page.url()).toContain('/sign-up/add-organization');
+ await u.po.signIn.goTo();
+ await expect(u.page.getByRole('heading', { name: 'Create Organization' })).toBeVisible();
+ expect(u.page.url()).toContain('/sign-up/add-organization');
+ });
+
+ test('without a session, does not allow to access tasks', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.page.goto('/sign-up/add-organization');
+ expect(u.page.url()).not.toContain('/sign-up/add-organization');
+ });
+});

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

@@ -23,6 +23,7 @@ import type {
  CreateOrganizationParams,
  CreateOrganizationProps,
  CredentialReturn,
+ CustomNavigation,
  DomainOrProxyUrl,
  EnvironmentJSON,
  EnvironmentJSONSnapshot,
@@ -45,6 +46,7 @@ import type {
  RedirectOptions,
  Resources,
  SDKMetadata,
+ SessionTask,
  SetActiveParams,
  SignedInSessionResource,
  SignInProps,
@@ -65,6 +67,7 @@ import type {
  WaitlistResource,
  Web3Provider,
 } from '@clerk/types';
+import type { SessionTaskRoutePath } from 'ui/common/tasks';
 
 import type { MountComponentRenderer } from '../ui/Components';
 import {
@@ -946,7 +949,10 @@ export class Clerk implements ClerkInterface {
  beforeUnloadTracker?.stopTracking();
  }
 
- if (redirectUrl && !beforeEmit) {
+ // Overrides the default behavior of redirects to `afterSignInUrl`
+ // or `afterSignUpUrl` to redirect the user to their assigned tasks
+ const hasSessionToResolve = newSession?.currentTask;
+ if (redirectUrl && !beforeEmit && !hasSessionToResolve) {
  beforeUnloadTracker?.startTracking();
  this.#setTransitiveState();
 
@@ -1728,6 +1734,8 @@ export class Clerk implements ClerkInterface {
  if (this.session) {
  const session = this.#getSessionFromClient(this.session.id);
 
+ this.maybeNavigateToTaskResolution(this.navigate);
+
  // Note: this might set this.session to null
  this.#setAccessors(session);
 
@@ -2260,4 +2268,33 @@ export class Clerk implements ClerkInterface {
 
  return allowedProtocols;
  }
+
+ maybeNavigateToTaskResolution(customNavigate?: (to: string) => Promise<unknown>) {
+ if (!this.session?.currentTask || !inBrowser()) {
+ return;
+ }
+
+ const isOnTaskResolutionPath = window.location.href.includes('navigate-to-task');
+ if (isOnTaskResolutionPath) {
+ return;
+ }
+
+ const url = buildURL({ base: `${this.#options.signInUrl}/navigate-to-task` }, { stringify: true });
+
+ void customNavigate?.(url);
+ }
+
+ navigateToTaskPath(customNavigate?: CustomNavigation) {
+ if (!this.session?.currentTask || !inBrowser()) {
+ return;
+ }
+
+ const taskKeyToRoutePaths: Record<SessionTask['key'], SessionTaskRoutePath> = {
+ org: 'add-organization',
+ };
+
+ const routePath = taskKeyToRoutePaths[this.session.currentTask.key];
+
+ void customNavigate?.(routePath);
+ }
 }

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

@@ -303,4 +303,8 @@ export class Session extends BaseResource implements SessionResource {
  return token.getRawString() || null;
  });
  }
+
+ get currentTask(): SessionTask | undefined {
+ return (this.tasks ?? [])[0];
+ }
 }

packages/clerk-js/src/ui/common/TaskNavigation.tsx

@@ -0,0 +1,23 @@
+import { Flow } from '../customizables';
+import { Card, LoadingCardContainer, withCardStateProvider } from '../elements';
+
+export const TaskNavigation = withCardStateProvider(() => {
+ return (
+ <Flow.Part part='taskNavigation'>
+ <TaskNavigationCard />
+ </Flow.Part>
+ );
+});
+
+export const TaskNavigationCard = () => {
+ return (
+ <Flow.Part part='taskNavigation'>
+ <Card.Root>
+ <Card.Content>
+ <LoadingCardContainer />
+ </Card.Content>
+ <Card.Footer />
+ </Card.Root>
+ </Flow.Part>
+ );
+};

packages/clerk-js/src/ui/common/index.ts

@@ -13,6 +13,7 @@ export * from './QRCode';
 export * from './redirects';
 export * from './RemoveResourceForm';
 export * from './SSOCallback';
+export * from './TaskNavigation';
 export * from './verification';
 export * from './withRedirect';
 export * from './Wizard';

packages/clerk-js/src/ui/common/tasks.ts

@@ -0,0 +1,3 @@
+export const sessionTaskRoutePaths = ['add-organization'] as const;
+
+export type SessionTaskRoutePath = (typeof sessionTaskRoutePaths)[number];

packages/clerk-js/src/ui/common/withRedirect.tsx

@@ -28,8 +28,16 @@ export function withRedirect<P extends AvailableComponentProps>(
  const environment = useEnvironment();
  const options = useOptions();
 
- const shouldRedirect = condition(clerk, environment, options);
+ const hasTasksAndSingleSessionMode = clerk.session?.currentTask && environment?.authConfig.singleSessionMode;
+ const shouldRedirect =
+ // Overrides default redirect guards to not lead with race conditions on redirection for session tasks
+ hasTasksAndSingleSessionMode ? false : condition(clerk, environment, options);
  React.useEffect(() => {
+ if (hasTasksAndSingleSessionMode) {
+ void clerk.maybeNavigateToTaskResolution(navigate);
+ return;
+ }
+
  if (shouldRedirect) {
  if (warning && isDevelopmentFromPublishableKey(clerk.publishableKey)) {
  console.info(warning);
@@ -38,7 +46,7 @@ export function withRedirect<P extends AvailableComponentProps>(
  // eslint-disable-next-line @typescript-eslint/no-floating-promises
  navigate(redirectUrl({ clerk, environment, options }));
  }
- }, []);
+ }, [hasTasksAndSingleSessionMode]);
 
  if (shouldRedirect) {
  return null;

packages/clerk-js/src/ui/components/SignIn/SignIn.tsx

@@ -2,6 +2,7 @@ import { useClerk } from '@clerk/shared/react';
 import type { SignInModalProps, SignInProps } from '@clerk/types';
 import React from 'react';
 
+import { sessionTaskRoutePaths } from '../../../ui/common/tasks';
 import { normalizeRoutingOptions } from '../../../utils/normalizeRoutingOptions';
 import { SignInEmailLinkFlowComplete, SignUpEmailLinkFlowComplete } from '../../common/EmailLinkCompleteFlowCard';
 import type { SignUpContextType } from '../../contexts';
@@ -19,13 +20,15 @@ import { SignUpSSOCallback } from '../SignUp/SignUpSSOCallback';
 import { SignUpStart } from '../SignUp/SignUpStart';
 import { SignUpVerifyEmail } from '../SignUp/SignUpVerifyEmail';
 import { SignUpVerifyPhone } from '../SignUp/SignUpVerifyPhone';
+import { Task } from '../Task';
 import { ResetPassword } from './ResetPassword';
 import { ResetPasswordSuccess } from './ResetPasswordSuccess';
 import { SignInAccountSwitcher } from './SignInAccountSwitcher';
 import { SignInFactorOne } from './SignInFactorOne';
 import { SignInFactorTwo } from './SignInFactorTwo';
 import { SignInSSOCallback } from './SignInSSOCallback';
 import { SignInStart } from './SignInStart';
+import { SignInTaskNavigation } from './SignInTaskNavigation';
 
 function RedirectToSignIn() {
  const clerk = useClerk();
@@ -132,6 +135,17 @@ function SignInRoutes(): JSX.Element {
  </Route>
  </Route>
  )}
+ <Route path='navigate-to-task'>
+ <SignInTaskNavigation />
+ </Route>
+ {sessionTaskRoutePaths.map(path => (
+ <Route
+ key={path}
+ path={path}
+ >
+ <Task />
+ </Route>
+ ))}
  <Route index>
  <SignInStart />
  </Route>

packages/clerk-js/src/ui/components/SignIn/SignInTaskNavigation.tsx

@@ -0,0 +1,3 @@
+import { TaskNavigation, withRedirectToAfterSignIn } from '../../common';
+
+export const SignInTaskNavigation = withRedirectToAfterSignIn(TaskNavigation);

.changeset/old-cherries-laugh.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Navigate to session tasks on after sign-in/sign-up

integration/.keys.json.sample

@@ -46,5 +46,9 @@
  "with-waitlist-mode": {
  "pk": "",
  "sk": ""
+ },
+ "with-session-tasks": {
+ "pk": "",
+ "sk": ""
  }
 }

integration/presets/envs.ts

@@ -42,6 +42,13 @@ const withEmailCodes = base
  .setEnvVariable('public', 'CLERK_PUBLISHABLE_KEY', instanceKeys.get('with-email-codes').pk)
  .setEnvVariable('private', 'CLERK_ENCRYPTION_KEY', constants.E2E_CLERK_ENCRYPTION_KEY || 'a-key');
 
+const withSessionTasks = base
+ .clone()
+ .setId('withSessionTasks')
+ .setEnvVariable('private', 'CLERK_SECRET_KEY', instanceKeys.get('with-session-tasks').sk)
+ .setEnvVariable('public', 'CLERK_PUBLISHABLE_KEY', instanceKeys.get('with-session-tasks').pk)
+ .setEnvVariable('private', 'CLERK_ENCRYPTION_KEY', constants.E2E_CLERK_ENCRYPTION_KEY || 'a-key');
+
 const withEmailCodes_destroy_client = withEmailCodes
  .clone()
  .setEnvVariable('public', 'EXPERIMENTAL_PERSIST_CLIENT', 'false');
@@ -157,4 +164,5 @@ export const envs = {
  withSignInOrUpFlow,
  withSignInOrUpEmailLinksFlow,
  withSignInOrUpwithRestrictedModeFlow,
+ withSessionTasks,
 } as const;

integration/presets/longRunningApps.ts

@@ -37,6 +37,11 @@ export const createLongRunningApps = () => {
  config: next.appRouter,
  env: envs.withSignInOrUpEmailLinksFlow,
  },
+ {
+ id: 'next.appRouter.withSessionTasks',
+ config: next.appRouter,
+ env: envs.withSessionTasks,
+ },
  { id: 'quickstart.next.appRouter', config: next.appRouterQuickstart, env: envs.withEmailCodesQuickstart },
  { id: 'elements.next.appRouter', config: elements.nextAppRouter, env: envs.withEmailCodes },
  { id: 'astro.node.withCustomRoles', config: astro.node, env: envs.withCustomRoles },

integration/tests/session-tasks-multi-session.test.ts

@@ -0,0 +1 @@
+// TODO - add tests

integration/tests/session-tasks-sign-in.test.ts

@@ -0,0 +1,72 @@
+import { expect, test } from '@playwright/test';
+
+import type { Application } from '../models/application';
+import { appConfigs } from '../presets';
+import type { FakeUser } from '../testUtils';
+import { createTestUtils } from '../testUtils';
+
+test.describe('session tasks sign in flow @nextjs', () => {
+ test.describe.configure({ mode: 'serial' });
+ let app: Application;
+ let fakeUser: FakeUser;
+
+ test.beforeAll(async () => {
+ app = await appConfigs.next.appRouter.clone().commit();
+ await app.setup();
+ await app.withEnv(appConfigs.envs.withSessionTasks);
+ await app.dev();
+
+ const m = createTestUtils({ app });
+ fakeUser = m.services.users.createFakeUser({
+ withPhoneNumber: true,
+ withUsername: true,
+ });
+ await m.services.users.createBapiUser(fakeUser);
+ });
+
+ test.afterAll(async () => {
+ await fakeUser.deleteIfExists();
+ await app.teardown();
+ });
+
+ test('on after sign-in, navigates to tasks', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.po.signIn.goTo();
+ await u.po.signIn.setIdentifier(fakeUser.email);
+ await u.po.signIn.continue();
+ await u.po.signIn.setPassword(fakeUser.password);
+ await u.po.signIn.continue();
+ await u.po.expect.toBeSignedIn();
+ await expect(u.page.getByRole('heading', { name: 'Create Organization' })).toBeVisible();
+ expect(u.page.url()).toContain('/sign-in/add-organization');
+ });
+
+ test.fixme('redirects to after sign-in url when session tasks has been resolved', () => {
+ // todo
+ });
+
+ test.fixme('redirects to after sign-in url when accessing root sign in with a active session', {
+ // todo
+ });
+
+ test('redirects back to tasks when accessing root sign in', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.po.signIn.goTo();
+ await u.po.signIn.setIdentifier(fakeUser.email);
+ await u.po.signIn.continue();
+ await u.po.signIn.setPassword(fakeUser.password);
+ await u.po.signIn.continue();
+ await u.po.expect.toBeSignedIn();
+ await expect(u.page.getByRole('heading', { name: 'Create Organization' })).toBeVisible();
+ expect(u.page.url()).toContain('/sign-in/add-organization');
+ await u.po.signIn.goTo();
+ await expect(u.page.getByRole('heading', { name: 'Create Organization' })).toBeVisible();
+ expect(u.page.url()).toContain('/sign-in/add-organization');
+ });
+
+ test('without a session, does not allow to access tasks', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.page.goto('/sign-in/add-organization');
+ expect(u.page.url()).not.toContain('/sign-in/add-organization');
+ });
+});

integration/tests/session-tasks-sign-up.test.ts

@@ -0,0 +1,73 @@
+import { expect, test } from '@playwright/test';
+
+import type { Application } from '../models/application';
+import { appConfigs } from '../presets';
+import { createTestUtils } from '../testUtils';
+
+test.describe('session tasks sign in flow @nextjs', () => {
+ test.describe.configure({ mode: 'serial' });
+ let app: Application;
+
+ test.beforeAll(async () => {
+ app = await appConfigs.next.appRouter.clone().commit();
+ await app.setup();
+ await app.withEnv(appConfigs.envs.withSessionTasks);
+ await app.dev();
+ });
+
+ test.afterAll(async () => {
+ await app.teardown();
+ });
+
+ test('on after sign-up, navigates to tasks', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+ const fakeUser = u.services.users.createFakeUser({
+ fictionalEmail: true,
+ });
+ await u.po.signUp.goTo();
+ await u.po.signUp.signUpWithEmailAndPassword({
+ email: fakeUser.email,
+ password: fakeUser.password,
+ });
+ await u.po.signUp.enterTestOtpCode();
+ await u.po.expect.toBeSignedIn();
+
+ await expect(u.page.getByRole('heading', { name: 'Create Organization' })).toBeVisible();
+ expect(u.page.url()).toContain('/sign-up/add-organization');
+
+ await fakeUser.deleteIfExists();
+ });
+
+ test.fixme('redirects to after sign-up url when session tasks has been resolved', () => {
+ // todo
+ });
+
+ test.fixme('redirects to after sign-up url when accessing root sign in with a active session', {
+ // todo
+ });
+
+ test('redirects back to tasks when accessing root sign in', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+ const fakeUser = u.services.users.createFakeUser({
+ fictionalEmail: true,
+ });
+ await u.po.signUp.goTo();
+ await u.po.signUp.signUpWithEmailAndPassword({
+ email: fakeUser.email,
+ password: fakeUser.password,
+ });
+ await u.po.signUp.enterTestOtpCode();
+ await u.po.expect.toBeSignedIn();
+ await expect(u.page.getByRole('heading', { name: 'Create Organization' })).toBeVisible();
+ expect(u.page.url()).toContain('/sign-up/add-organization');
+ await u.po.signIn.goTo();
+ await expect(u.page.getByRole('heading', { name: 'Create Organization' })).toBeVisible();
+ expect(u.page.url()).toContain('/sign-up/add-organization');
+ });
+
+ test('without a session, does not allow to access tasks', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.page.goto('/sign-up/add-organization');
+ expect(u.page.url()).not.toContain('/sign-up/add-organization');
+ });
+});

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

@@ -23,6 +23,7 @@ import type {
  CreateOrganizationParams,
  CreateOrganizationProps,
  CredentialReturn,
+ CustomNavigation,
  DomainOrProxyUrl,
  EnvironmentJSON,
  EnvironmentJSONSnapshot,
@@ -45,6 +46,7 @@ import type {
  RedirectOptions,
  Resources,
  SDKMetadata,
+ SessionTask,
  SetActiveParams,
  SignedInSessionResource,
  SignInProps,
@@ -65,6 +67,7 @@ import type {
  WaitlistResource,
  Web3Provider,
 } from '@clerk/types';
+import type { SessionTaskRoutePath } from 'ui/common/tasks';
 
 import type { MountComponentRenderer } from '../ui/Components';
 import {
@@ -946,7 +949,10 @@ export class Clerk implements ClerkInterface {
  beforeUnloadTracker?.stopTracking();
  }
 
- if (redirectUrl && !beforeEmit) {
+ // Overrides the default behavior of redirects to `afterSignInUrl`
+ // or `afterSignUpUrl` to redirect the user to their assigned tasks
+ const hasSessionToResolve = newSession?.currentTask;
+ if (redirectUrl && !beforeEmit && !hasSessionToResolve) {
  beforeUnloadTracker?.startTracking();
  this.#setTransitiveState();
 
@@ -1728,6 +1734,8 @@ export class Clerk implements ClerkInterface {
  if (this.session) {
  const session = this.#getSessionFromClient(this.session.id);
 
+ this.maybeNavigateToTaskResolution(this.navigate);
+
  // Note: this might set this.session to null
  this.#setAccessors(session);
 
@@ -2260,4 +2268,33 @@ export class Clerk implements ClerkInterface {
 
  return allowedProtocols;
  }
+
+ maybeNavigateToTaskResolution(customNavigate?: (to: string) => Promise<unknown>) {
+ if (!this.session?.currentTask || !inBrowser()) {
+ return;
+ }
+
+ const isOnTaskResolutionPath = window.location.href.includes('navigate-to-task');
+ if (isOnTaskResolutionPath) {
+ return;
+ }
+
+ const url = buildURL({ base: `${this.#options.signInUrl}/navigate-to-task` }, { stringify: true });
+
+ void customNavigate?.(url);
+ }
+
+ navigateToTaskPath(customNavigate?: CustomNavigation) {
+ if (!this.session?.currentTask || !inBrowser()) {
+ return;
+ }
+
+ const taskKeyToRoutePaths: Record<SessionTask['key'], SessionTaskRoutePath> = {
+ org: 'add-organization',
+ };
+
+ const routePath = taskKeyToRoutePaths[this.session.currentTask.key];
+
+ void customNavigate?.(routePath);
+ }
 }

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

@@ -303,4 +303,8 @@ export class Session extends BaseResource implements SessionResource {
  return token.getRawString() || null;
  });
  }
+
+ get currentTask(): SessionTask | undefined {
+ return (this.tasks ?? [])[0];
+ }
 }

packages/clerk-js/src/ui/common/TaskNavigation.tsx

@@ -0,0 +1,23 @@
+import { Flow } from '../customizables';
+import { Card, LoadingCardContainer, withCardStateProvider } from '../elements';
+
+export const TaskNavigation = withCardStateProvider(() => {
+ return (
+ <Flow.Part part='taskNavigation'>
+ <TaskNavigationCard />
+ </Flow.Part>
+ );
+});
+
+export const TaskNavigationCard = () => {
+ return (
+ <Flow.Part part='taskNavigation'>
+ <Card.Root>
+ <Card.Content>
+ <LoadingCardContainer />
+ </Card.Content>
+ <Card.Footer />
+ </Card.Root>
+ </Flow.Part>
+ );
+};

packages/clerk-js/src/ui/common/index.ts

@@ -13,6 +13,7 @@ export * from './QRCode';
 export * from './redirects';
 export * from './RemoveResourceForm';
 export * from './SSOCallback';
+export * from './TaskNavigation';
 export * from './verification';
 export * from './withRedirect';
 export * from './Wizard';

packages/clerk-js/src/ui/common/tasks.ts

@@ -0,0 +1,3 @@
+export const sessionTaskRoutePaths = ['add-organization'] as const;
+
+export type SessionTaskRoutePath = (typeof sessionTaskRoutePaths)[number];

packages/clerk-js/src/ui/common/withRedirect.tsx

@@ -28,8 +28,16 @@ export function withRedirect<P extends AvailableComponentProps>(
  const environment = useEnvironment();
  const options = useOptions();
 
- const shouldRedirect = condition(clerk, environment, options);
+ const hasTasksAndSingleSessionMode = clerk.session?.currentTask && environment?.authConfig.singleSessionMode;
+ const shouldRedirect =
+ // Overrides default redirect guards to not lead with race conditions on redirection for session tasks
+ hasTasksAndSingleSessionMode ? false : condition(clerk, environment, options);
  React.useEffect(() => {
+ if (hasTasksAndSingleSessionMode) {
+ void clerk.maybeNavigateToTaskResolution(navigate);
+ return;
+ }
+
  if (shouldRedirect) {
  if (warning && isDevelopmentFromPublishableKey(clerk.publishableKey)) {
  console.info(warning);
@@ -38,7 +46,7 @@ export function withRedirect<P extends AvailableComponentProps>(
  // eslint-disable-next-line @typescript-eslint/no-floating-promises
  navigate(redirectUrl({ clerk, environment, options }));
  }
- }, []);
+ }, [hasTasksAndSingleSessionMode]);
 
  if (shouldRedirect) {
  return null;

packages/clerk-js/src/ui/components/SignIn/SignIn.tsx

@@ -2,6 +2,7 @@ import { useClerk } from '@clerk/shared/react';
 import type { SignInModalProps, SignInProps } from '@clerk/types';
 import React from 'react';
 
+import { sessionTaskRoutePaths } from '../../../ui/common/tasks';
 import { normalizeRoutingOptions } from '../../../utils/normalizeRoutingOptions';
 import { SignInEmailLinkFlowComplete, SignUpEmailLinkFlowComplete } from '../../common/EmailLinkCompleteFlowCard';
 import type { SignUpContextType } from '../../contexts';
@@ -19,13 +20,15 @@ import { SignUpSSOCallback } from '../SignUp/SignUpSSOCallback';
 import { SignUpStart } from '../SignUp/SignUpStart';
 import { SignUpVerifyEmail } from '../SignUp/SignUpVerifyEmail';
 import { SignUpVerifyPhone } from '../SignUp/SignUpVerifyPhone';
+import { Task } from '../Task';
 import { ResetPassword } from './ResetPassword';
 import { ResetPasswordSuccess } from './ResetPasswordSuccess';
 import { SignInAccountSwitcher } from './SignInAccountSwitcher';
 import { SignInFactorOne } from './SignInFactorOne';
 import { SignInFactorTwo } from './SignInFactorTwo';
 import { SignInSSOCallback } from './SignInSSOCallback';
 import { SignInStart } from './SignInStart';
+import { SignInTaskNavigation } from './SignInTaskNavigation';
 
 function RedirectToSignIn() {
  const clerk = useClerk();
@@ -132,6 +135,17 @@ function SignInRoutes(): JSX.Element {
  </Route>
  </Route>
  )}
+ <Route path='navigate-to-task'>
+ <SignInTaskNavigation />
+ </Route>
+ {sessionTaskRoutePaths.map(path => (
+ <Route
+ key={path}
+ path={path}
+ >
+ <Task />
+ </Route>
+ ))}
  <Route index>
  <SignInStart />
  </Route>

packages/clerk-js/src/ui/components/SignIn/SignInTaskNavigation.tsx

@@ -0,0 +1,3 @@
+import { TaskNavigation, withRedirectToAfterSignIn } from '../../common';
+
+export const SignInTaskNavigation = withRedirectToAfterSignIn(TaskNavigation);

.changeset/old-cherries-laugh.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Navigate to session tasks on after sign-in/sign-up

integration/.keys.json.sample

@@ -46,5 +46,9 @@
  "with-waitlist-mode": {
  "pk": "",
  "sk": ""
+ },
+ "with-session-tasks": {
+ "pk": "",
+ "sk": ""
  }
 }

integration/presets/envs.ts

@@ -42,6 +42,13 @@ const withEmailCodes = base
  .setEnvVariable('public', 'CLERK_PUBLISHABLE_KEY', instanceKeys.get('with-email-codes').pk)
  .setEnvVariable('private', 'CLERK_ENCRYPTION_KEY', constants.E2E_CLERK_ENCRYPTION_KEY || 'a-key');
 
+const withSessionTasks = base
+ .clone()
+ .setId('withSessionTasks')
+ .setEnvVariable('private', 'CLERK_SECRET_KEY', instanceKeys.get('with-session-tasks').sk)
+ .setEnvVariable('public', 'CLERK_PUBLISHABLE_KEY', instanceKeys.get('with-session-tasks').pk)
+ .setEnvVariable('private', 'CLERK_ENCRYPTION_KEY', constants.E2E_CLERK_ENCRYPTION_KEY || 'a-key');
+
 const withEmailCodes_destroy_client = withEmailCodes
  .clone()
  .setEnvVariable('public', 'EXPERIMENTAL_PERSIST_CLIENT', 'false');
@@ -157,4 +164,5 @@ export const envs = {
  withSignInOrUpFlow,
  withSignInOrUpEmailLinksFlow,
  withSignInOrUpwithRestrictedModeFlow,
+ withSessionTasks,
 } as const;

integration/presets/longRunningApps.ts

@@ -37,6 +37,11 @@ export const createLongRunningApps = () => {
  config: next.appRouter,
  env: envs.withSignInOrUpEmailLinksFlow,
  },
+ {
+ id: 'next.appRouter.withSessionTasks',
+ config: next.appRouter,
+ env: envs.withSessionTasks,
+ },
  { id: 'quickstart.next.appRouter', config: next.appRouterQuickstart, env: envs.withEmailCodesQuickstart },
  { id: 'elements.next.appRouter', config: elements.nextAppRouter, env: envs.withEmailCodes },
  { id: 'astro.node.withCustomRoles', config: astro.node, env: envs.withCustomRoles },

integration/tests/session-tasks-multi-session.test.ts

@@ -0,0 +1 @@
+// TODO - add tests

integration/tests/session-tasks-sign-in.test.ts

@@ -0,0 +1,72 @@
+import { expect, test } from '@playwright/test';
+
+import type { Application } from '../models/application';
+import { appConfigs } from '../presets';
+import type { FakeUser } from '../testUtils';
+import { createTestUtils } from '../testUtils';
+
+test.describe('session tasks sign in flow @nextjs', () => {
+ test.describe.configure({ mode: 'serial' });
+ let app: Application;
+ let fakeUser: FakeUser;
+
+ test.beforeAll(async () => {
+ app = await appConfigs.next.appRouter.clone().commit();
+ await app.setup();
+ await app.withEnv(appConfigs.envs.withSessionTasks);
+ await app.dev();
+
+ const m = createTestUtils({ app });
+ fakeUser = m.services.users.createFakeUser({
+ withPhoneNumber: true,
+ withUsername: true,
+ });
+ await m.services.users.createBapiUser(fakeUser);
+ });
+
+ test.afterAll(async () => {
+ await fakeUser.deleteIfExists();
+ await app.teardown();
+ });
+
+ test('on after sign-in, navigates to tasks', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.po.signIn.goTo();
+ await u.po.signIn.setIdentifier(fakeUser.email);
+ await u.po.signIn.continue();
+ await u.po.signIn.setPassword(fakeUser.password);
+ await u.po.signIn.continue();
+ await u.po.expect.toBeSignedIn();
+ await expect(u.page.getByRole('heading', { name: 'Create Organization' })).toBeVisible();
+ expect(u.page.url()).toContain('/sign-in/add-organization');
+ });
+
+ test.fixme('redirects to after sign-in url when session tasks has been resolved', () => {
+ // todo
+ });
+
+ test.fixme('redirects to after sign-in url when accessing root sign in with a active session', {
+ // todo
+ });
+
+ test('redirects back to tasks when accessing root sign in', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.po.signIn.goTo();
+ await u.po.signIn.setIdentifier(fakeUser.email);
+ await u.po.signIn.continue();
+ await u.po.signIn.setPassword(fakeUser.password);
+ await u.po.signIn.continue();
+ await u.po.expect.toBeSignedIn();
+ await expect(u.page.getByRole('heading', { name: 'Create Organization' })).toBeVisible();
+ expect(u.page.url()).toContain('/sign-in/add-organization');
+ await u.po.signIn.goTo();
+ await expect(u.page.getByRole('heading', { name: 'Create Organization' })).toBeVisible();
+ expect(u.page.url()).toContain('/sign-in/add-organization');
+ });
+
+ test('without a session, does not allow to access tasks', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.page.goto('/sign-in/add-organization');
+ expect(u.page.url()).not.toContain('/sign-in/add-organization');
+ });
+});

integration/tests/session-tasks-sign-up.test.ts

@@ -0,0 +1,73 @@
+import { expect, test } from '@playwright/test';
+
+import type { Application } from '../models/application';
+import { appConfigs } from '../presets';
+import { createTestUtils } from '../testUtils';
+
+test.describe('session tasks sign in flow @nextjs', () => {
+ test.describe.configure({ mode: 'serial' });
+ let app: Application;
+
+ test.beforeAll(async () => {
+ app = await appConfigs.next.appRouter.clone().commit();
+ await app.setup();
+ await app.withEnv(appConfigs.envs.withSessionTasks);
+ await app.dev();
+ });
+
+ test.afterAll(async () => {
+ await app.teardown();
+ });
+
+ test('on after sign-up, navigates to tasks', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+ const fakeUser = u.services.users.createFakeUser({
+ fictionalEmail: true,
+ });
+ await u.po.signUp.goTo();
+ await u.po.signUp.signUpWithEmailAndPassword({
+ email: fakeUser.email,
+ password: fakeUser.password,
+ });
+ await u.po.signUp.enterTestOtpCode();
+ await u.po.expect.toBeSignedIn();
+
+ await expect(u.page.getByRole('heading', { name: 'Create Organization' })).toBeVisible();
+ expect(u.page.url()).toContain('/sign-up/add-organization');
+
+ await fakeUser.deleteIfExists();
+ });
+
+ test.fixme('redirects to after sign-up url when session tasks has been resolved', () => {
+ // todo
+ });
+
+ test.fixme('redirects to after sign-up url when accessing root sign in with a active session', {
+ // todo
+ });
+
+ test('redirects back to tasks when accessing root sign in', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+ const fakeUser = u.services.users.createFakeUser({
+ fictionalEmail: true,
+ });
+ await u.po.signUp.goTo();
+ await u.po.signUp.signUpWithEmailAndPassword({
+ email: fakeUser.email,
+ password: fakeUser.password,
+ });
+ await u.po.signUp.enterTestOtpCode();
+ await u.po.expect.toBeSignedIn();
+ await expect(u.page.getByRole('heading', { name: 'Create Organization' })).toBeVisible();
+ expect(u.page.url()).toContain('/sign-up/add-organization');
+ await u.po.signIn.goTo();
+ await expect(u.page.getByRole('heading', { name: 'Create Organization' })).toBeVisible();
+ expect(u.page.url()).toContain('/sign-up/add-organization');
+ });
+
+ test('without a session, does not allow to access tasks', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.page.goto('/sign-up/add-organization');
+ expect(u.page.url()).not.toContain('/sign-up/add-organization');
+ });
+});

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

@@ -23,6 +23,7 @@ import type {
  CreateOrganizationParams,
  CreateOrganizationProps,
  CredentialReturn,
+ CustomNavigation,
  DomainOrProxyUrl,
  EnvironmentJSON,
  EnvironmentJSONSnapshot,
@@ -45,6 +46,7 @@ import type {
  RedirectOptions,
  Resources,
  SDKMetadata,
+ SessionTask,
  SetActiveParams,
  SignedInSessionResource,
  SignInProps,
@@ -65,6 +67,7 @@ import type {
  WaitlistResource,
  Web3Provider,
 } from '@clerk/types';
+import type { SessionTaskRoutePath } from 'ui/common/tasks';
 
 import type { MountComponentRenderer } from '../ui/Components';
 import {
@@ -946,7 +949,10 @@ export class Clerk implements ClerkInterface {
  beforeUnloadTracker?.stopTracking();
  }
 
- if (redirectUrl && !beforeEmit) {
+ // Overrides the default behavior of redirects to `afterSignInUrl`
+ // or `afterSignUpUrl` to redirect the user to their assigned tasks
+ const hasSessionToResolve = newSession?.currentTask;
+ if (redirectUrl && !beforeEmit && !hasSessionToResolve) {
  beforeUnloadTracker?.startTracking();
  this.#setTransitiveState();
 
@@ -1728,6 +1734,8 @@ export class Clerk implements ClerkInterface {
  if (this.session) {
  const session = this.#getSessionFromClient(this.session.id);
 
+ this.maybeNavigateToTaskResolution(this.navigate);
+
  // Note: this might set this.session to null
  this.#setAccessors(session);
 
@@ -2260,4 +2268,33 @@ export class Clerk implements ClerkInterface {
 
  return allowedProtocols;
  }
+
+ maybeNavigateToTaskResolution(customNavigate?: (to: string) => Promise<unknown>) {
+ if (!this.session?.currentTask || !inBrowser()) {
+ return;
+ }
+
+ const isOnTaskResolutionPath = window.location.href.includes('navigate-to-task');
+ if (isOnTaskResolutionPath) {
+ return;
+ }
+
+ const url = buildURL({ base: `${this.#options.signInUrl}/navigate-to-task` }, { stringify: true });
+
+ void customNavigate?.(url);
+ }
+
+ navigateToTaskPath(customNavigate?: CustomNavigation) {
+ if (!this.session?.currentTask || !inBrowser()) {
+ return;
+ }
+
+ const taskKeyToRoutePaths: Record<SessionTask['key'], SessionTaskRoutePath> = {
+ org: 'add-organization',
+ };
+
+ const routePath = taskKeyToRoutePaths[this.session.currentTask.key];
+
+ void customNavigate?.(routePath);
+ }
 }

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

@@ -303,4 +303,8 @@ export class Session extends BaseResource implements SessionResource {
  return token.getRawString() || null;
  });
  }
+
+ get currentTask(): SessionTask | undefined {
+ return (this.tasks ?? [])[0];
+ }
 }

packages/clerk-js/src/ui/common/TaskNavigation.tsx

@@ -0,0 +1,23 @@
+import { Flow } from '../customizables';
+import { Card, LoadingCardContainer, withCardStateProvider } from '../elements';
+
+export const TaskNavigation = withCardStateProvider(() => {
+ return (
+ <Flow.Part part='taskNavigation'>
+ <TaskNavigationCard />
+ </Flow.Part>
+ );
+});
+
+export const TaskNavigationCard = () => {
+ return (
+ <Flow.Part part='taskNavigation'>
+ <Card.Root>
+ <Card.Content>
+ <LoadingCardContainer />
+ </Card.Content>
+ <Card.Footer />
+ </Card.Root>
+ </Flow.Part>
+ );
+};

packages/clerk-js/src/ui/common/index.ts

@@ -13,6 +13,7 @@ export * from './QRCode';
 export * from './redirects';
 export * from './RemoveResourceForm';
 export * from './SSOCallback';
+export * from './TaskNavigation';
 export * from './verification';
 export * from './withRedirect';
 export * from './Wizard';

packages/clerk-js/src/ui/common/tasks.ts

@@ -0,0 +1,3 @@
+export const sessionTaskRoutePaths = ['add-organization'] as const;
+
+export type SessionTaskRoutePath = (typeof sessionTaskRoutePaths)[number];

packages/clerk-js/src/ui/common/withRedirect.tsx

@@ -28,8 +28,16 @@ export function withRedirect<P extends AvailableComponentProps>(
  const environment = useEnvironment();
  const options = useOptions();
 
- const shouldRedirect = condition(clerk, environment, options);
+ const hasTasksAndSingleSessionMode = clerk.session?.currentTask && environment?.authConfig.singleSessionMode;
+ const shouldRedirect =
+ // Overrides default redirect guards to not lead with race conditions on redirection for session tasks
+ hasTasksAndSingleSessionMode ? false : condition(clerk, environment, options);
  React.useEffect(() => {
+ if (hasTasksAndSingleSessionMode) {
+ void clerk.maybeNavigateToTaskResolution(navigate);
+ return;
+ }
+
  if (shouldRedirect) {
  if (warning && isDevelopmentFromPublishableKey(clerk.publishableKey)) {
  console.info(warning);
@@ -38,7 +46,7 @@ export function withRedirect<P extends AvailableComponentProps>(
  // eslint-disable-next-line @typescript-eslint/no-floating-promises
  navigate(redirectUrl({ clerk, environment, options }));
  }
- }, []);
+ }, [hasTasksAndSingleSessionMode]);
 
  if (shouldRedirect) {
  return null;

packages/clerk-js/src/ui/components/SignIn/SignIn.tsx

@@ -2,6 +2,7 @@ import { useClerk } from '@clerk/shared/react';
 import type { SignInModalProps, SignInProps } from '@clerk/types';
 import React from 'react';
 
+import { sessionTaskRoutePaths } from '../../../ui/common/tasks';
 import { normalizeRoutingOptions } from '../../../utils/normalizeRoutingOptions';
 import { SignInEmailLinkFlowComplete, SignUpEmailLinkFlowComplete } from '../../common/EmailLinkCompleteFlowCard';
 import type { SignUpContextType } from '../../contexts';
@@ -19,13 +20,15 @@ import { SignUpSSOCallback } from '../SignUp/SignUpSSOCallback';
 import { SignUpStart } from '../SignUp/SignUpStart';
 import { SignUpVerifyEmail } from '../SignUp/SignUpVerifyEmail';
 import { SignUpVerifyPhone } from '../SignUp/SignUpVerifyPhone';
+import { Task } from '../Task';
 import { ResetPassword } from './ResetPassword';
 import { ResetPasswordSuccess } from './ResetPasswordSuccess';
 import { SignInAccountSwitcher } from './SignInAccountSwitcher';
 import { SignInFactorOne } from './SignInFactorOne';
 import { SignInFactorTwo } from './SignInFactorTwo';
 import { SignInSSOCallback } from './SignInSSOCallback';
 import { SignInStart } from './SignInStart';
+import { SignInTaskNavigation } from './SignInTaskNavigation';
 
 function RedirectToSignIn() {
  const clerk = useClerk();
@@ -132,6 +135,17 @@ function SignInRoutes(): JSX.Element {
  </Route>
  </Route>
  )}
+ <Route path='navigate-to-task'>
+ <SignInTaskNavigation />
+ </Route>
+ {sessionTaskRoutePaths.map(path => (
+ <Route
+ key={path}
+ path={path}
+ >
+ <Task />
+ </Route>
+ ))}
  <Route index>
  <SignInStart />
  </Route>

packages/clerk-js/src/ui/components/SignIn/SignInTaskNavigation.tsx

@@ -0,0 +1,3 @@
+import { TaskNavigation, withRedirectToAfterSignIn } from '../../common';
+
+export const SignInTaskNavigation = withRedirectToAfterSignIn(TaskNavigation);

.changeset/old-cherries-laugh.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Navigate to session tasks on after sign-in/sign-up

integration/.keys.json.sample

@@ -46,5 +46,9 @@
  "with-waitlist-mode": {
  "pk": "",
  "sk": ""
+ },
+ "with-session-tasks": {
+ "pk": "",
+ "sk": ""
  }
 }

integration/presets/envs.ts

@@ -42,6 +42,13 @@ const withEmailCodes = base
  .setEnvVariable('public', 'CLERK_PUBLISHABLE_KEY', instanceKeys.get('with-email-codes').pk)
  .setEnvVariable('private', 'CLERK_ENCRYPTION_KEY', constants.E2E_CLERK_ENCRYPTION_KEY || 'a-key');
 
+const withSessionTasks = base
+ .clone()
+ .setId('withSessionTasks')
+ .setEnvVariable('private', 'CLERK_SECRET_KEY', instanceKeys.get('with-session-tasks').sk)
+ .setEnvVariable('public', 'CLERK_PUBLISHABLE_KEY', instanceKeys.get('with-session-tasks').pk)
+ .setEnvVariable('private', 'CLERK_ENCRYPTION_KEY', constants.E2E_CLERK_ENCRYPTION_KEY || 'a-key');
+
 const withEmailCodes_destroy_client = withEmailCodes
  .clone()
  .setEnvVariable('public', 'EXPERIMENTAL_PERSIST_CLIENT', 'false');
@@ -157,4 +164,5 @@ export const envs = {
  withSignInOrUpFlow,
  withSignInOrUpEmailLinksFlow,
  withSignInOrUpwithRestrictedModeFlow,
+ withSessionTasks,
 } as const;

integration/presets/longRunningApps.ts

@@ -37,6 +37,11 @@ export const createLongRunningApps = () => {
  config: next.appRouter,
  env: envs.withSignInOrUpEmailLinksFlow,
  },
+ {
+ id: 'next.appRouter.withSessionTasks',
+ config: next.appRouter,
+ env: envs.withSessionTasks,
+ },
  { id: 'quickstart.next.appRouter', config: next.appRouterQuickstart, env: envs.withEmailCodesQuickstart },
  { id: 'elements.next.appRouter', config: elements.nextAppRouter, env: envs.withEmailCodes },
  { id: 'astro.node.withCustomRoles', config: astro.node, env: envs.withCustomRoles },

integration/tests/session-tasks-multi-session.test.ts

@@ -0,0 +1 @@
+// TODO - add tests

integration/tests/session-tasks-sign-in.test.ts

@@ -0,0 +1,72 @@
+import { expect, test } from '@playwright/test';
+
+import type { Application } from '../models/application';
+import { appConfigs } from '../presets';
+import type { FakeUser } from '../testUtils';
+import { createTestUtils } from '../testUtils';
+
+test.describe('session tasks sign in flow @nextjs', () => {
+ test.describe.configure({ mode: 'serial' });
+ let app: Application;
+ let fakeUser: FakeUser;
+
+ test.beforeAll(async () => {
+ app = await appConfigs.next.appRouter.clone().commit();
+ await app.setup();
+ await app.withEnv(appConfigs.envs.withSessionTasks);
+ await app.dev();
+
+ const m = createTestUtils({ app });
+ fakeUser = m.services.users.createFakeUser({
+ withPhoneNumber: true,
+ withUsername: true,
+ });
+ await m.services.users.createBapiUser(fakeUser);
+ });
+
+ test.afterAll(async () => {
+ await fakeUser.deleteIfExists();
+ await app.teardown();
+ });
+
+ test('on after sign-in, navigates to tasks', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.po.signIn.goTo();
+ await u.po.signIn.setIdentifier(fakeUser.email);
+ await u.po.signIn.continue();
+ await u.po.signIn.setPassword(fakeUser.password);
+ await u.po.signIn.continue();
+ await u.po.expect.toBeSignedIn();
+ await expect(u.page.getByRole('heading', { name: 'Create Organization' })).toBeVisible();
+ expect(u.page.url()).toContain('/sign-in/add-organization');
+ });
+
+ test.fixme('redirects to after sign-in url when session tasks has been resolved', () => {
+ // todo
+ });
+
+ test.fixme('redirects to after sign-in url when accessing root sign in with a active session', {
+ // todo
+ });
+
+ test('redirects back to tasks when accessing root sign in', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.po.signIn.goTo();
+ await u.po.signIn.setIdentifier(fakeUser.email);
+ await u.po.signIn.continue();
+ await u.po.signIn.setPassword(fakeUser.password);
+ await u.po.signIn.continue();
+ await u.po.expect.toBeSignedIn();
+ await expect(u.page.getByRole('heading', { name: 'Create Organization' })).toBeVisible();
+ expect(u.page.url()).toContain('/sign-in/add-organization');
+ await u.po.signIn.goTo();
+ await expect(u.page.getByRole('heading', { name: 'Create Organization' })).toBeVisible();
+ expect(u.page.url()).toContain('/sign-in/add-organization');
+ });
+
+ test('without a session, does not allow to access tasks', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.page.goto('/sign-in/add-organization');
+ expect(u.page.url()).not.toContain('/sign-in/add-organization');
+ });
+});

integration/tests/session-tasks-sign-up.test.ts

@@ -0,0 +1,73 @@
+import { expect, test } from '@playwright/test';
+
+import type { Application } from '../models/application';
+import { appConfigs } from '../presets';
+import { createTestUtils } from '../testUtils';
+
+test.describe('session tasks sign in flow @nextjs', () => {
+ test.describe.configure({ mode: 'serial' });
+ let app: Application;
+
+ test.beforeAll(async () => {
+ app = await appConfigs.next.appRouter.clone().commit();
+ await app.setup();
+ await app.withEnv(appConfigs.envs.withSessionTasks);
+ await app.dev();
+ });
+
+ test.afterAll(async () => {
+ await app.teardown();
+ });
+
+ test('on after sign-up, navigates to tasks', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+ const fakeUser = u.services.users.createFakeUser({
+ fictionalEmail: true,
+ });
+ await u.po.signUp.goTo();
+ await u.po.signUp.signUpWithEmailAndPassword({
+ email: fakeUser.email,
+ password: fakeUser.password,
+ });
+ await u.po.signUp.enterTestOtpCode();
+ await u.po.expect.toBeSignedIn();
+
+ await expect(u.page.getByRole('heading', { name: 'Create Organization' })).toBeVisible();
+ expect(u.page.url()).toContain('/sign-up/add-organization');
+
+ await fakeUser.deleteIfExists();
+ });
+
+ test.fixme('redirects to after sign-up url when session tasks has been resolved', () => {
+ // todo
+ });
+
+ test.fixme('redirects to after sign-up url when accessing root sign in with a active session', {
+ // todo
+ });
+
+ test('redirects back to tasks when accessing root sign in', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+ const fakeUser = u.services.users.createFakeUser({
+ fictionalEmail: true,
+ });
+ await u.po.signUp.goTo();
+ await u.po.signUp.signUpWithEmailAndPassword({
+ email: fakeUser.email,
+ password: fakeUser.password,
+ });
+ await u.po.signUp.enterTestOtpCode();
+ await u.po.expect.toBeSignedIn();
+ await expect(u.page.getByRole('heading', { name: 'Create Organization' })).toBeVisible();
+ expect(u.page.url()).toContain('/sign-up/add-organization');
+ await u.po.signIn.goTo();
+ await expect(u.page.getByRole('heading', { name: 'Create Organization' })).toBeVisible();
+ expect(u.page.url()).toContain('/sign-up/add-organization');
+ });
+
+ test('without a session, does not allow to access tasks', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.page.goto('/sign-up/add-organization');
+ expect(u.page.url()).not.toContain('/sign-up/add-organization');
+ });
+});

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

@@ -23,6 +23,7 @@ import type {
  CreateOrganizationParams,
  CreateOrganizationProps,
  CredentialReturn,
+ CustomNavigation,
  DomainOrProxyUrl,
  EnvironmentJSON,
  EnvironmentJSONSnapshot,
@@ -45,6 +46,7 @@ import type {
  RedirectOptions,
  Resources,
  SDKMetadata,
+ SessionTask,
  SetActiveParams,
  SignedInSessionResource,
  SignInProps,
@@ -65,6 +67,7 @@ import type {
  WaitlistResource,
  Web3Provider,
 } from '@clerk/types';
+import type { SessionTaskRoutePath } from 'ui/common/tasks';
 
 import type { MountComponentRenderer } from '../ui/Components';
 import {
@@ -946,7 +949,10 @@ export class Clerk implements ClerkInterface {
  beforeUnloadTracker?.stopTracking();
  }
 
- if (redirectUrl && !beforeEmit) {
+ // Overrides the default behavior of redirects to `afterSignInUrl`
+ // or `afterSignUpUrl` to redirect the user to their assigned tasks
+ const hasSessionToResolve = newSession?.currentTask;
+ if (redirectUrl && !beforeEmit && !hasSessionToResolve) {
  beforeUnloadTracker?.startTracking();
  this.#setTransitiveState();
 
@@ -1728,6 +1734,8 @@ export class Clerk implements ClerkInterface {
  if (this.session) {
  const session = this.#getSessionFromClient(this.session.id);
 
+ this.maybeNavigateToTaskResolution(this.navigate);
+
  // Note: this might set this.session to null
  this.#setAccessors(session);
 
@@ -2260,4 +2268,33 @@ export class Clerk implements ClerkInterface {
 
  return allowedProtocols;
  }
+
+ maybeNavigateToTaskResolution(customNavigate?: (to: string) => Promise<unknown>) {
+ if (!this.session?.currentTask || !inBrowser()) {
+ return;
+ }
+
+ const isOnTaskResolutionPath = window.location.href.includes('navigate-to-task');
+ if (isOnTaskResolutionPath) {
+ return;
+ }
+
+ const url = buildURL({ base: `${this.#options.signInUrl}/navigate-to-task` }, { stringify: true });
+
+ void customNavigate?.(url);
+ }
+
+ navigateToTaskPath(customNavigate?: CustomNavigation) {
+ if (!this.session?.currentTask || !inBrowser()) {
+ return;
+ }
+
+ const taskKeyToRoutePaths: Record<SessionTask['key'], SessionTaskRoutePath> = {
+ org: 'add-organization',
+ };
+
+ const routePath = taskKeyToRoutePaths[this.session.currentTask.key];
+
+ void customNavigate?.(routePath);
+ }
 }

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

@@ -303,4 +303,8 @@ export class Session extends BaseResource implements SessionResource {
  return token.getRawString() || null;
  });
  }
+
+ get currentTask(): SessionTask | undefined {
+ return (this.tasks ?? [])[0];
+ }
 }

packages/clerk-js/src/ui/common/TaskNavigation.tsx

@@ -0,0 +1,23 @@
+import { Flow } from '../customizables';
+import { Card, LoadingCardContainer, withCardStateProvider } from '../elements';
+
+export const TaskNavigation = withCardStateProvider(() => {
+ return (
+ <Flow.Part part='taskNavigation'>
+ <TaskNavigationCard />
+ </Flow.Part>
+ );
+});
+
+export const TaskNavigationCard = () => {
+ return (
+ <Flow.Part part='taskNavigation'>
+ <Card.Root>
+ <Card.Content>
+ <LoadingCardContainer />
+ </Card.Content>
+ <Card.Footer />
+ </Card.Root>
+ </Flow.Part>
+ );
+};

packages/clerk-js/src/ui/common/index.ts

@@ -13,6 +13,7 @@ export * from './QRCode';
 export * from './redirects';
 export * from './RemoveResourceForm';
 export * from './SSOCallback';
+export * from './TaskNavigation';
 export * from './verification';
 export * from './withRedirect';
 export * from './Wizard';

packages/clerk-js/src/ui/common/tasks.ts

@@ -0,0 +1,3 @@
+export const sessionTaskRoutePaths = ['add-organization'] as const;
+
+export type SessionTaskRoutePath = (typeof sessionTaskRoutePaths)[number];

packages/clerk-js/src/ui/common/withRedirect.tsx

@@ -28,8 +28,16 @@ export function withRedirect<P extends AvailableComponentProps>(
  const environment = useEnvironment();
  const options = useOptions();
 
- const shouldRedirect = condition(clerk, environment, options);
+ const hasTasksAndSingleSessionMode = clerk.session?.currentTask && environment?.authConfig.singleSessionMode;
+ const shouldRedirect =
+ // Overrides default redirect guards to not lead with race conditions on redirection for session tasks
+ hasTasksAndSingleSessionMode ? false : condition(clerk, environment, options);
  React.useEffect(() => {
+ if (hasTasksAndSingleSessionMode) {
+ void clerk.maybeNavigateToTaskResolution(navigate);
+ return;
+ }
+
  if (shouldRedirect) {
  if (warning && isDevelopmentFromPublishableKey(clerk.publishableKey)) {
  console.info(warning);
@@ -38,7 +46,7 @@ export function withRedirect<P extends AvailableComponentProps>(
  // eslint-disable-next-line @typescript-eslint/no-floating-promises
  navigate(redirectUrl({ clerk, environment, options }));
  }
- }, []);
+ }, [hasTasksAndSingleSessionMode]);
 
  if (shouldRedirect) {
  return null;

packages/clerk-js/src/ui/components/SignIn/SignIn.tsx

@@ -2,6 +2,7 @@ import { useClerk } from '@clerk/shared/react';
 import type { SignInModalProps, SignInProps } from '@clerk/types';
 import React from 'react';
 
+import { sessionTaskRoutePaths } from '../../../ui/common/tasks';
 import { normalizeRoutingOptions } from '../../../utils/normalizeRoutingOptions';
 import { SignInEmailLinkFlowComplete, SignUpEmailLinkFlowComplete } from '../../common/EmailLinkCompleteFlowCard';
 import type { SignUpContextType } from '../../contexts';
@@ -19,13 +20,15 @@ import { SignUpSSOCallback } from '../SignUp/SignUpSSOCallback';
 import { SignUpStart } from '../SignUp/SignUpStart';
 import { SignUpVerifyEmail } from '../SignUp/SignUpVerifyEmail';
 import { SignUpVerifyPhone } from '../SignUp/SignUpVerifyPhone';
+import { Task } from '../Task';
 import { ResetPassword } from './ResetPassword';
 import { ResetPasswordSuccess } from './ResetPasswordSuccess';
 import { SignInAccountSwitcher } from './SignInAccountSwitcher';
 import { SignInFactorOne } from './SignInFactorOne';
 import { SignInFactorTwo } from './SignInFactorTwo';
 import { SignInSSOCallback } from './SignInSSOCallback';
 import { SignInStart } from './SignInStart';
+import { SignInTaskNavigation } from './SignInTaskNavigation';
 
 function RedirectToSignIn() {
  const clerk = useClerk();
@@ -132,6 +135,17 @@ function SignInRoutes(): JSX.Element {
  </Route>
  </Route>
  )}
+ <Route path='navigate-to-task'>
+ <SignInTaskNavigation />
+ </Route>
+ {sessionTaskRoutePaths.map(path => (
+ <Route
+ key={path}
+ path={path}
+ >
+ <Task />
+ </Route>
+ ))}
  <Route index>
  <SignInStart />
  </Route>

packages/clerk-js/src/ui/components/SignIn/SignInTaskNavigation.tsx

@@ -0,0 +1,3 @@
+import { TaskNavigation, withRedirectToAfterSignIn } from '../../common';
+
+export const SignInTaskNavigation = withRedirectToAfterSignIn(TaskNavigation);

.changeset/old-cherries-laugh.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Navigate to session tasks on after sign-in/sign-up

integration/.keys.json.sample

@@ -46,5 +46,9 @@
  "with-waitlist-mode": {
  "pk": "",
  "sk": ""
+ },
+ "with-session-tasks": {
+ "pk": "",
+ "sk": ""
  }
 }

integration/presets/envs.ts

@@ -42,6 +42,13 @@ const withEmailCodes = base
  .setEnvVariable('public', 'CLERK_PUBLISHABLE_KEY', instanceKeys.get('with-email-codes').pk)
  .setEnvVariable('private', 'CLERK_ENCRYPTION_KEY', constants.E2E_CLERK_ENCRYPTION_KEY || 'a-key');
 
+const withSessionTasks = base
+ .clone()
+ .setId('withSessionTasks')
+ .setEnvVariable('private', 'CLERK_SECRET_KEY', instanceKeys.get('with-session-tasks').sk)
+ .setEnvVariable('public', 'CLERK_PUBLISHABLE_KEY', instanceKeys.get('with-session-tasks').pk)
+ .setEnvVariable('private', 'CLERK_ENCRYPTION_KEY', constants.E2E_CLERK_ENCRYPTION_KEY || 'a-key');
+
 const withEmailCodes_destroy_client = withEmailCodes
  .clone()
  .setEnvVariable('public', 'EXPERIMENTAL_PERSIST_CLIENT', 'false');
@@ -157,4 +164,5 @@ export const envs = {
  withSignInOrUpFlow,
  withSignInOrUpEmailLinksFlow,
  withSignInOrUpwithRestrictedModeFlow,
+ withSessionTasks,
 } as const;

integration/presets/longRunningApps.ts

@@ -37,6 +37,11 @@ export const createLongRunningApps = () => {
  config: next.appRouter,
  env: envs.withSignInOrUpEmailLinksFlow,
  },
+ {
+ id: 'next.appRouter.withSessionTasks',
+ config: next.appRouter,
+ env: envs.withSessionTasks,
+ },
  { id: 'quickstart.next.appRouter', config: next.appRouterQuickstart, env: envs.withEmailCodesQuickstart },
  { id: 'elements.next.appRouter', config: elements.nextAppRouter, env: envs.withEmailCodes },
  { id: 'astro.node.withCustomRoles', config: astro.node, env: envs.withCustomRoles },

integration/tests/session-tasks-multi-session.test.ts

@@ -0,0 +1 @@
+// TODO - add tests

integration/tests/session-tasks-sign-in.test.ts

@@ -0,0 +1,72 @@
+import { expect, test } from '@playwright/test';
+
+import type { Application } from '../models/application';
+import { appConfigs } from '../presets';
+import type { FakeUser } from '../testUtils';
+import { createTestUtils } from '../testUtils';
+
+test.describe('session tasks sign in flow @nextjs', () => {
+ test.describe.configure({ mode: 'serial' });
+ let app: Application;
+ let fakeUser: FakeUser;
+
+ test.beforeAll(async () => {
+ app = await appConfigs.next.appRouter.clone().commit();
+ await app.setup();
+ await app.withEnv(appConfigs.envs.withSessionTasks);
+ await app.dev();
+
+ const m = createTestUtils({ app });
+ fakeUser = m.services.users.createFakeUser({
+ withPhoneNumber: true,
+ withUsername: true,
+ });
+ await m.services.users.createBapiUser(fakeUser);
+ });
+
+ test.afterAll(async () => {
+ await fakeUser.deleteIfExists();
+ await app.teardown();
+ });
+
+ test('on after sign-in, navigates to tasks', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.po.signIn.goTo();
+ await u.po.signIn.setIdentifier(fakeUser.email);
+ await u.po.signIn.continue();
+ await u.po.signIn.setPassword(fakeUser.password);
+ await u.po.signIn.continue();
+ await u.po.expect.toBeSignedIn();
+ await expect(u.page.getByRole('heading', { name: 'Create Organization' })).toBeVisible();
+ expect(u.page.url()).toContain('/sign-in/add-organization');
+ });
+
+ test.fixme('redirects to after sign-in url when session tasks has been resolved', () => {
+ // todo
+ });
+
+ test.fixme('redirects to after sign-in url when accessing root sign in with a active session', {
+ // todo
+ });
+
+ test('redirects back to tasks when accessing root sign in', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.po.signIn.goTo();
+ await u.po.signIn.setIdentifier(fakeUser.email);
+ await u.po.signIn.continue();
+ await u.po.signIn.setPassword(fakeUser.password);
+ await u.po.signIn.continue();
+ await u.po.expect.toBeSignedIn();
+ await expect(u.page.getByRole('heading', { name: 'Create Organization' })).toBeVisible();
+ expect(u.page.url()).toContain('/sign-in/add-organization');
+ await u.po.signIn.goTo();
+ await expect(u.page.getByRole('heading', { name: 'Create Organization' })).toBeVisible();
+ expect(u.page.url()).toContain('/sign-in/add-organization');
+ });
+
+ test('without a session, does not allow to access tasks', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.page.goto('/sign-in/add-organization');
+ expect(u.page.url()).not.toContain('/sign-in/add-organization');
+ });
+});

integration/tests/session-tasks-sign-up.test.ts

@@ -0,0 +1,73 @@
+import { expect, test } from '@playwright/test';
+
+import type { Application } from '../models/application';
+import { appConfigs } from '../presets';
+import { createTestUtils } from '../testUtils';
+
+test.describe('session tasks sign in flow @nextjs', () => {
+ test.describe.configure({ mode: 'serial' });
+ let app: Application;
+
+ test.beforeAll(async () => {
+ app = await appConfigs.next.appRouter.clone().commit();
+ await app.setup();
+ await app.withEnv(appConfigs.envs.withSessionTasks);
+ await app.dev();
+ });
+
+ test.afterAll(async () => {
+ await app.teardown();
+ });
+
+ test('on after sign-up, navigates to tasks', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+ const fakeUser = u.services.users.createFakeUser({
+ fictionalEmail: true,
+ });
+ await u.po.signUp.goTo();
+ await u.po.signUp.signUpWithEmailAndPassword({
+ email: fakeUser.email,
+ password: fakeUser.password,
+ });
+ await u.po.signUp.enterTestOtpCode();
+ await u.po.expect.toBeSignedIn();
+
+ await expect(u.page.getByRole('heading', { name: 'Create Organization' })).toBeVisible();
+ expect(u.page.url()).toContain('/sign-up/add-organization');
+
+ await fakeUser.deleteIfExists();
+ });
+
+ test.fixme('redirects to after sign-up url when session tasks has been resolved', () => {
+ // todo
+ });
+
+ test.fixme('redirects to after sign-up url when accessing root sign in with a active session', {
+ // todo
+ });
+
+ test('redirects back to tasks when accessing root sign in', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+ const fakeUser = u.services.users.createFakeUser({
+ fictionalEmail: true,
+ });
+ await u.po.signUp.goTo();
+ await u.po.signUp.signUpWithEmailAndPassword({
+ email: fakeUser.email,
+ password: fakeUser.password,
+ });
+ await u.po.signUp.enterTestOtpCode();
+ await u.po.expect.toBeSignedIn();
+ await expect(u.page.getByRole('heading', { name: 'Create Organization' })).toBeVisible();
+ expect(u.page.url()).toContain('/sign-up/add-organization');
+ await u.po.signIn.goTo();
+ await expect(u.page.getByRole('heading', { name: 'Create Organization' })).toBeVisible();
+ expect(u.page.url()).toContain('/sign-up/add-organization');
+ });
+
+ test('without a session, does not allow to access tasks', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.page.goto('/sign-up/add-organization');
+ expect(u.page.url()).not.toContain('/sign-up/add-organization');
+ });
+});

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

@@ -23,6 +23,7 @@ import type {
  CreateOrganizationParams,
  CreateOrganizationProps,
  CredentialReturn,
+ CustomNavigation,
  DomainOrProxyUrl,
  EnvironmentJSON,
  EnvironmentJSONSnapshot,
@@ -45,6 +46,7 @@ import type {
  RedirectOptions,
  Resources,
  SDKMetadata,
+ SessionTask,
  SetActiveParams,
  SignedInSessionResource,
  SignInProps,
@@ -65,6 +67,7 @@ import type {
  WaitlistResource,
  Web3Provider,
 } from '@clerk/types';
+import type { SessionTaskRoutePath } from 'ui/common/tasks';
 
 import type { MountComponentRenderer } from '../ui/Components';
 import {
@@ -946,7 +949,10 @@ export class Clerk implements ClerkInterface {
  beforeUnloadTracker?.stopTracking();
  }
 
- if (redirectUrl && !beforeEmit) {
+ // Overrides the default behavior of redirects to `afterSignInUrl`
+ // or `afterSignUpUrl` to redirect the user to their assigned tasks
+ const hasSessionToResolve = newSession?.currentTask;
+ if (redirectUrl && !beforeEmit && !hasSessionToResolve) {
  beforeUnloadTracker?.startTracking();
  this.#setTransitiveState();
 
@@ -1728,6 +1734,8 @@ export class Clerk implements ClerkInterface {
  if (this.session) {
  const session = this.#getSessionFromClient(this.session.id);
 
+ this.maybeNavigateToTaskResolution(this.navigate);
+
  // Note: this might set this.session to null
  this.#setAccessors(session);
 
@@ -2260,4 +2268,33 @@ export class Clerk implements ClerkInterface {
 
  return allowedProtocols;
  }
+
+ maybeNavigateToTaskResolution(customNavigate?: (to: string) => Promise<unknown>) {
+ if (!this.session?.currentTask || !inBrowser()) {
+ return;
+ }
+
+ const isOnTaskResolutionPath = window.location.href.includes('navigate-to-task');
+ if (isOnTaskResolutionPath) {
+ return;
+ }
+
+ const url = buildURL({ base: `${this.#options.signInUrl}/navigate-to-task` }, { stringify: true });
+
+ void customNavigate?.(url);
+ }
+
+ navigateToTaskPath(customNavigate?: CustomNavigation) {
+ if (!this.session?.currentTask || !inBrowser()) {
+ return;
+ }
+
+ const taskKeyToRoutePaths: Record<SessionTask['key'], SessionTaskRoutePath> = {
+ org: 'add-organization',
+ };
+
+ const routePath = taskKeyToRoutePaths[this.session.currentTask.key];
+
+ void customNavigate?.(routePath);
+ }
 }

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

@@ -303,4 +303,8 @@ export class Session extends BaseResource implements SessionResource {
  return token.getRawString() || null;
  });
  }
+
+ get currentTask(): SessionTask | undefined {
+ return (this.tasks ?? [])[0];
+ }
 }

packages/clerk-js/src/ui/common/TaskNavigation.tsx

@@ -0,0 +1,23 @@
+import { Flow } from '../customizables';
+import { Card, LoadingCardContainer, withCardStateProvider } from '../elements';
+
+export const TaskNavigation = withCardStateProvider(() => {
+ return (
+ <Flow.Part part='taskNavigation'>
+ <TaskNavigationCard />
+ </Flow.Part>
+ );
+});
+
+export const TaskNavigationCard = () => {
+ return (
+ <Flow.Part part='taskNavigation'>
+ <Card.Root>
+ <Card.Content>
+ <LoadingCardContainer />
+ </Card.Content>
+ <Card.Footer />
+ </Card.Root>
+ </Flow.Part>
+ );
+};

packages/clerk-js/src/ui/common/index.ts

@@ -13,6 +13,7 @@ export * from './QRCode';
 export * from './redirects';
 export * from './RemoveResourceForm';
 export * from './SSOCallback';
+export * from './TaskNavigation';
 export * from './verification';
 export * from './withRedirect';
 export * from './Wizard';

packages/clerk-js/src/ui/common/tasks.ts

@@ -0,0 +1,3 @@
+export const sessionTaskRoutePaths = ['add-organization'] as const;
+
+export type SessionTaskRoutePath = (typeof sessionTaskRoutePaths)[number];

packages/clerk-js/src/ui/common/withRedirect.tsx

@@ -28,8 +28,16 @@ export function withRedirect<P extends AvailableComponentProps>(
  const environment = useEnvironment();
  const options = useOptions();
 
- const shouldRedirect = condition(clerk, environment, options);
+ const hasTasksAndSingleSessionMode = clerk.session?.currentTask && environment?.authConfig.singleSessionMode;
+ const shouldRedirect =
+ // Overrides default redirect guards to not lead with race conditions on redirection for session tasks
+ hasTasksAndSingleSessionMode ? false : condition(clerk, environment, options);
  React.useEffect(() => {
+ if (hasTasksAndSingleSessionMode) {
+ void clerk.maybeNavigateToTaskResolution(navigate);
+ return;
+ }
+
  if (shouldRedirect) {
  if (warning && isDevelopmentFromPublishableKey(clerk.publishableKey)) {
  console.info(warning);
@@ -38,7 +46,7 @@ export function withRedirect<P extends AvailableComponentProps>(
  // eslint-disable-next-line @typescript-eslint/no-floating-promises
  navigate(redirectUrl({ clerk, environment, options }));
  }
- }, []);
+ }, [hasTasksAndSingleSessionMode]);
 
  if (shouldRedirect) {
  return null;

packages/clerk-js/src/ui/components/SignIn/SignIn.tsx

@@ -2,6 +2,7 @@ import { useClerk } from '@clerk/shared/react';
 import type { SignInModalProps, SignInProps } from '@clerk/types';
 import React from 'react';
 
+import { sessionTaskRoutePaths } from '../../../ui/common/tasks';
 import { normalizeRoutingOptions } from '../../../utils/normalizeRoutingOptions';
 import { SignInEmailLinkFlowComplete, SignUpEmailLinkFlowComplete } from '../../common/EmailLinkCompleteFlowCard';
 import type { SignUpContextType } from '../../contexts';
@@ -19,13 +20,15 @@ import { SignUpSSOCallback } from '../SignUp/SignUpSSOCallback';
 import { SignUpStart } from '../SignUp/SignUpStart';
 import { SignUpVerifyEmail } from '../SignUp/SignUpVerifyEmail';
 import { SignUpVerifyPhone } from '../SignUp/SignUpVerifyPhone';
+import { Task } from '../Task';
 import { ResetPassword } from './ResetPassword';
 import { ResetPasswordSuccess } from './ResetPasswordSuccess';
 import { SignInAccountSwitcher } from './SignInAccountSwitcher';
 import { SignInFactorOne } from './SignInFactorOne';
 import { SignInFactorTwo } from './SignInFactorTwo';
 import { SignInSSOCallback } from './SignInSSOCallback';
 import { SignInStart } from './SignInStart';
+import { SignInTaskNavigation } from './SignInTaskNavigation';
 
 function RedirectToSignIn() {
  const clerk = useClerk();
@@ -132,6 +135,17 @@ function SignInRoutes(): JSX.Element {
  </Route>
  </Route>
  )}
+ <Route path='navigate-to-task'>
+ <SignInTaskNavigation />
+ </Route>
+ {sessionTaskRoutePaths.map(path => (
+ <Route
+ key={path}
+ path={path}
+ >
+ <Task />
+ </Route>
+ ))}
  <Route index>
  <SignInStart />
  </Route>

packages/clerk-js/src/ui/components/SignIn/SignInTaskNavigation.tsx

@@ -0,0 +1,3 @@
+import { TaskNavigation, withRedirectToAfterSignIn } from '../../common';
+
+export const SignInTaskNavigation = withRedirectToAfterSignIn(TaskNavigation);

.changeset/old-cherries-laugh.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Navigate to session tasks on after sign-in/sign-up

integration/.keys.json.sample

@@ -46,5 +46,9 @@
  "with-waitlist-mode": {
  "pk": "",
  "sk": ""
+ },
+ "with-session-tasks": {
+ "pk": "",
+ "sk": ""
  }
 }

integration/presets/envs.ts

@@ -42,6 +42,13 @@ const withEmailCodes = base
  .setEnvVariable('public', 'CLERK_PUBLISHABLE_KEY', instanceKeys.get('with-email-codes').pk)
  .setEnvVariable('private', 'CLERK_ENCRYPTION_KEY', constants.E2E_CLERK_ENCRYPTION_KEY || 'a-key');
 
+const withSessionTasks = base
+ .clone()
+ .setId('withSessionTasks')
+ .setEnvVariable('private', 'CLERK_SECRET_KEY', instanceKeys.get('with-session-tasks').sk)
+ .setEnvVariable('public', 'CLERK_PUBLISHABLE_KEY', instanceKeys.get('with-session-tasks').pk)
+ .setEnvVariable('private', 'CLERK_ENCRYPTION_KEY', constants.E2E_CLERK_ENCRYPTION_KEY || 'a-key');
+
 const withEmailCodes_destroy_client = withEmailCodes
  .clone()
  .setEnvVariable('public', 'EXPERIMENTAL_PERSIST_CLIENT', 'false');
@@ -157,4 +164,5 @@ export const envs = {
  withSignInOrUpFlow,
  withSignInOrUpEmailLinksFlow,
  withSignInOrUpwithRestrictedModeFlow,
+ withSessionTasks,
 } as const;

integration/presets/longRunningApps.ts

@@ -37,6 +37,11 @@ export const createLongRunningApps = () => {
  config: next.appRouter,
  env: envs.withSignInOrUpEmailLinksFlow,
  },
+ {
+ id: 'next.appRouter.withSessionTasks',
+ config: next.appRouter,
+ env: envs.withSessionTasks,
+ },
  { id: 'quickstart.next.appRouter', config: next.appRouterQuickstart, env: envs.withEmailCodesQuickstart },
  { id: 'elements.next.appRouter', config: elements.nextAppRouter, env: envs.withEmailCodes },
  { id: 'astro.node.withCustomRoles', config: astro.node, env: envs.withCustomRoles },

integration/tests/session-tasks-multi-session.test.ts

@@ -0,0 +1 @@
+// TODO - add tests

integration/tests/session-tasks-sign-in.test.ts

@@ -0,0 +1,72 @@
+import { expect, test } from '@playwright/test';
+
+import type { Application } from '../models/application';
+import { appConfigs } from '../presets';
+import type { FakeUser } from '../testUtils';
+import { createTestUtils } from '../testUtils';
+
+test.describe('session tasks sign in flow @nextjs', () => {
+ test.describe.configure({ mode: 'serial' });
+ let app: Application;
+ let fakeUser: FakeUser;
+
+ test.beforeAll(async () => {
+ app = await appConfigs.next.appRouter.clone().commit();
+ await app.setup();
+ await app.withEnv(appConfigs.envs.withSessionTasks);
+ await app.dev();
+
+ const m = createTestUtils({ app });
+ fakeUser = m.services.users.createFakeUser({
+ withPhoneNumber: true,
+ withUsername: true,
+ });
+ await m.services.users.createBapiUser(fakeUser);
+ });
+
+ test.afterAll(async () => {
+ await fakeUser.deleteIfExists();
+ await app.teardown();
+ });
+
+ test('on after sign-in, navigates to tasks', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.po.signIn.goTo();
+ await u.po.signIn.setIdentifier(fakeUser.email);
+ await u.po.signIn.continue();
+ await u.po.signIn.setPassword(fakeUser.password);
+ await u.po.signIn.continue();
+ await u.po.expect.toBeSignedIn();
+ await expect(u.page.getByRole('heading', { name: 'Create Organization' })).toBeVisible();
+ expect(u.page.url()).toContain('/sign-in/add-organization');
+ });
+
+ test.fixme('redirects to after sign-in url when session tasks has been resolved', () => {
+ // todo
+ });
+
+ test.fixme('redirects to after sign-in url when accessing root sign in with a active session', {
+ // todo
+ });
+
+ test('redirects back to tasks when accessing root sign in', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.po.signIn.goTo();
+ await u.po.signIn.setIdentifier(fakeUser.email);
+ await u.po.signIn.continue();
+ await u.po.signIn.setPassword(fakeUser.password);
+ await u.po.signIn.continue();
+ await u.po.expect.toBeSignedIn();
+ await expect(u.page.getByRole('heading', { name: 'Create Organization' })).toBeVisible();
+ expect(u.page.url()).toContain('/sign-in/add-organization');
+ await u.po.signIn.goTo();
+ await expect(u.page.getByRole('heading', { name: 'Create Organization' })).toBeVisible();
+ expect(u.page.url()).toContain('/sign-in/add-organization');
+ });
+
+ test('without a session, does not allow to access tasks', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.page.goto('/sign-in/add-organization');
+ expect(u.page.url()).not.toContain('/sign-in/add-organization');
+ });
+});

integration/tests/session-tasks-sign-up.test.ts

@@ -0,0 +1,73 @@
+import { expect, test } from '@playwright/test';
+
+import type { Application } from '../models/application';
+import { appConfigs } from '../presets';
+import { createTestUtils } from '../testUtils';
+
+test.describe('session tasks sign in flow @nextjs', () => {
+ test.describe.configure({ mode: 'serial' });
+ let app: Application;
+
+ test.beforeAll(async () => {
+ app = await appConfigs.next.appRouter.clone().commit();
+ await app.setup();
+ await app.withEnv(appConfigs.envs.withSessionTasks);
+ await app.dev();
+ });
+
+ test.afterAll(async () => {
+ await app.teardown();
+ });
+
+ test('on after sign-up, navigates to tasks', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+ const fakeUser = u.services.users.createFakeUser({
+ fictionalEmail: true,
+ });
+ await u.po.signUp.goTo();
+ await u.po.signUp.signUpWithEmailAndPassword({
+ email: fakeUser.email,
+ password: fakeUser.password,
+ });
+ await u.po.signUp.enterTestOtpCode();
+ await u.po.expect.toBeSignedIn();
+
+ await expect(u.page.getByRole('heading', { name: 'Create Organization' })).toBeVisible();
+ expect(u.page.url()).toContain('/sign-up/add-organization');
+
+ await fakeUser.deleteIfExists();
+ });
+
+ test.fixme('redirects to after sign-up url when session tasks has been resolved', () => {
+ // todo
+ });
+
+ test.fixme('redirects to after sign-up url when accessing root sign in with a active session', {
+ // todo
+ });
+
+ test('redirects back to tasks when accessing root sign in', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+ const fakeUser = u.services.users.createFakeUser({
+ fictionalEmail: true,
+ });
+ await u.po.signUp.goTo();
+ await u.po.signUp.signUpWithEmailAndPassword({
+ email: fakeUser.email,
+ password: fakeUser.password,
+ });
+ await u.po.signUp.enterTestOtpCode();
+ await u.po.expect.toBeSignedIn();
+ await expect(u.page.getByRole('heading', { name: 'Create Organization' })).toBeVisible();
+ expect(u.page.url()).toContain('/sign-up/add-organization');
+ await u.po.signIn.goTo();
+ await expect(u.page.getByRole('heading', { name: 'Create Organization' })).toBeVisible();
+ expect(u.page.url()).toContain('/sign-up/add-organization');
+ });
+
+ test('without a session, does not allow to access tasks', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.page.goto('/sign-up/add-organization');
+ expect(u.page.url()).not.toContain('/sign-up/add-organization');
+ });
+});

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

@@ -23,6 +23,7 @@ import type {
  CreateOrganizationParams,
  CreateOrganizationProps,
  CredentialReturn,
+ CustomNavigation,
  DomainOrProxyUrl,
  EnvironmentJSON,
  EnvironmentJSONSnapshot,
@@ -45,6 +46,7 @@ import type {
  RedirectOptions,
  Resources,
  SDKMetadata,
+ SessionTask,
  SetActiveParams,
  SignedInSessionResource,
  SignInProps,
@@ -65,6 +67,7 @@ import type {
  WaitlistResource,
  Web3Provider,
 } from '@clerk/types';
+import type { SessionTaskRoutePath } from 'ui/common/tasks';
 
 import type { MountComponentRenderer } from '../ui/Components';
 import {
@@ -946,7 +949,10 @@ export class Clerk implements ClerkInterface {
  beforeUnloadTracker?.stopTracking();
  }
 
- if (redirectUrl && !beforeEmit) {
+ // Overrides the default behavior of redirects to `afterSignInUrl`
+ // or `afterSignUpUrl` to redirect the user to their assigned tasks
+ const hasSessionToResolve = newSession?.currentTask;
+ if (redirectUrl && !beforeEmit && !hasSessionToResolve) {
  beforeUnloadTracker?.startTracking();
  this.#setTransitiveState();
 
@@ -1728,6 +1734,8 @@ export class Clerk implements ClerkInterface {
  if (this.session) {
  const session = this.#getSessionFromClient(this.session.id);
 
+ this.maybeNavigateToTaskResolution(this.navigate);
+
  // Note: this might set this.session to null
  this.#setAccessors(session);
 
@@ -2260,4 +2268,33 @@ export class Clerk implements ClerkInterface {
 
  return allowedProtocols;
  }
+
+ maybeNavigateToTaskResolution(customNavigate?: (to: string) => Promise<unknown>) {
+ if (!this.session?.currentTask || !inBrowser()) {
+ return;
+ }
+
+ const isOnTaskResolutionPath = window.location.href.includes('navigate-to-task');
+ if (isOnTaskResolutionPath) {
+ return;
+ }
+
+ const url = buildURL({ base: `${this.#options.signInUrl}/navigate-to-task` }, { stringify: true });
+
+ void customNavigate?.(url);
+ }
+
+ navigateToTaskPath(customNavigate?: CustomNavigation) {
+ if (!this.session?.currentTask || !inBrowser()) {
+ return;
+ }
+
+ const taskKeyToRoutePaths: Record<SessionTask['key'], SessionTaskRoutePath> = {
+ org: 'add-organization',
+ };
+
+ const routePath = taskKeyToRoutePaths[this.session.currentTask.key];
+
+ void customNavigate?.(routePath);
+ }
 }

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

@@ -303,4 +303,8 @@ export class Session extends BaseResource implements SessionResource {
  return token.getRawString() || null;
  });
  }
+
+ get currentTask(): SessionTask | undefined {
+ return (this.tasks ?? [])[0];
+ }
 }

packages/clerk-js/src/ui/common/TaskNavigation.tsx

@@ -0,0 +1,23 @@
+import { Flow } from '../customizables';
+import { Card, LoadingCardContainer, withCardStateProvider } from '../elements';
+
+export const TaskNavigation = withCardStateProvider(() => {
+ return (
+ <Flow.Part part='taskNavigation'>
+ <TaskNavigationCard />
+ </Flow.Part>
+ );
+});
+
+export const TaskNavigationCard = () => {
+ return (
+ <Flow.Part part='taskNavigation'>
+ <Card.Root>
+ <Card.Content>
+ <LoadingCardContainer />
+ </Card.Content>
+ <Card.Footer />
+ </Card.Root>
+ </Flow.Part>
+ );
+};

packages/clerk-js/src/ui/common/index.ts

@@ -13,6 +13,7 @@ export * from './QRCode';
 export * from './redirects';
 export * from './RemoveResourceForm';
 export * from './SSOCallback';
+export * from './TaskNavigation';
 export * from './verification';
 export * from './withRedirect';
 export * from './Wizard';

packages/clerk-js/src/ui/common/tasks.ts

@@ -0,0 +1,3 @@
+export const sessionTaskRoutePaths = ['add-organization'] as const;
+
+export type SessionTaskRoutePath = (typeof sessionTaskRoutePaths)[number];

packages/clerk-js/src/ui/common/withRedirect.tsx

@@ -28,8 +28,16 @@ export function withRedirect<P extends AvailableComponentProps>(
  const environment = useEnvironment();
  const options = useOptions();
 
- const shouldRedirect = condition(clerk, environment, options);
+ const hasTasksAndSingleSessionMode = clerk.session?.currentTask && environment?.authConfig.singleSessionMode;
+ const shouldRedirect =
+ // Overrides default redirect guards to not lead with race conditions on redirection for session tasks
+ hasTasksAndSingleSessionMode ? false : condition(clerk, environment, options);
  React.useEffect(() => {
+ if (hasTasksAndSingleSessionMode) {
+ void clerk.maybeNavigateToTaskResolution(navigate);
+ return;
+ }
+
  if (shouldRedirect) {
  if (warning && isDevelopmentFromPublishableKey(clerk.publishableKey)) {
  console.info(warning);
@@ -38,7 +46,7 @@ export function withRedirect<P extends AvailableComponentProps>(
  // eslint-disable-next-line @typescript-eslint/no-floating-promises
  navigate(redirectUrl({ clerk, environment, options }));
  }
- }, []);
+ }, [hasTasksAndSingleSessionMode]);
 
  if (shouldRedirect) {
  return null;

packages/clerk-js/src/ui/components/SignIn/SignIn.tsx

@@ -2,6 +2,7 @@ import { useClerk } from '@clerk/shared/react';
 import type { SignInModalProps, SignInProps } from '@clerk/types';
 import React from 'react';
 
+import { sessionTaskRoutePaths } from '../../../ui/common/tasks';
 import { normalizeRoutingOptions } from '../../../utils/normalizeRoutingOptions';
 import { SignInEmailLinkFlowComplete, SignUpEmailLinkFlowComplete } from '../../common/EmailLinkCompleteFlowCard';
 import type { SignUpContextType } from '../../contexts';
@@ -19,13 +20,15 @@ import { SignUpSSOCallback } from '../SignUp/SignUpSSOCallback';
 import { SignUpStart } from '../SignUp/SignUpStart';
 import { SignUpVerifyEmail } from '../SignUp/SignUpVerifyEmail';
 import { SignUpVerifyPhone } from '../SignUp/SignUpVerifyPhone';
+import { Task } from '../Task';
 import { ResetPassword } from './ResetPassword';
 import { ResetPasswordSuccess } from './ResetPasswordSuccess';
 import { SignInAccountSwitcher } from './SignInAccountSwitcher';
 import { SignInFactorOne } from './SignInFactorOne';
 import { SignInFactorTwo } from './SignInFactorTwo';
 import { SignInSSOCallback } from './SignInSSOCallback';
 import { SignInStart } from './SignInStart';
+import { SignInTaskNavigation } from './SignInTaskNavigation';
 
 function RedirectToSignIn() {
  const clerk = useClerk();
@@ -132,6 +135,17 @@ function SignInRoutes(): JSX.Element {
  </Route>
  </Route>
  )}
+ <Route path='navigate-to-task'>
+ <SignInTaskNavigation />
+ </Route>
+ {sessionTaskRoutePaths.map(path => (
+ <Route
+ key={path}
+ path={path}
+ >
+ <Task />
+ </Route>
+ ))}
  <Route index>
  <SignInStart />
  </Route>

packages/clerk-js/src/ui/components/SignIn/SignInTaskNavigation.tsx

@@ -0,0 +1,3 @@
+import { TaskNavigation, withRedirectToAfterSignIn } from '../../common';
+
+export const SignInTaskNavigation = withRedirectToAfterSignIn(TaskNavigation);

.changeset/old-cherries-laugh.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Navigate to session tasks on after sign-in/sign-up

integration/.keys.json.sample

@@ -46,5 +46,9 @@
  "with-waitlist-mode": {
  "pk": "",
  "sk": ""
+ },
+ "with-session-tasks": {
+ "pk": "",
+ "sk": ""
  }
 }

integration/presets/envs.ts

@@ -42,6 +42,13 @@ const withEmailCodes = base
  .setEnvVariable('public', 'CLERK_PUBLISHABLE_KEY', instanceKeys.get('with-email-codes').pk)
  .setEnvVariable('private', 'CLERK_ENCRYPTION_KEY', constants.E2E_CLERK_ENCRYPTION_KEY || 'a-key');
 
+const withSessionTasks = base
+ .clone()
+ .setId('withSessionTasks')
+ .setEnvVariable('private', 'CLERK_SECRET_KEY', instanceKeys.get('with-session-tasks').sk)
+ .setEnvVariable('public', 'CLERK_PUBLISHABLE_KEY', instanceKeys.get('with-session-tasks').pk)
+ .setEnvVariable('private', 'CLERK_ENCRYPTION_KEY', constants.E2E_CLERK_ENCRYPTION_KEY || 'a-key');
+
 const withEmailCodes_destroy_client = withEmailCodes
  .clone()
  .setEnvVariable('public', 'EXPERIMENTAL_PERSIST_CLIENT', 'false');
@@ -157,4 +164,5 @@ export const envs = {
  withSignInOrUpFlow,
  withSignInOrUpEmailLinksFlow,
  withSignInOrUpwithRestrictedModeFlow,
+ withSessionTasks,
 } as const;

integration/presets/longRunningApps.ts

@@ -37,6 +37,11 @@ export const createLongRunningApps = () => {
  config: next.appRouter,
  env: envs.withSignInOrUpEmailLinksFlow,
  },
+ {
+ id: 'next.appRouter.withSessionTasks',
+ config: next.appRouter,
+ env: envs.withSessionTasks,
+ },
  { id: 'quickstart.next.appRouter', config: next.appRouterQuickstart, env: envs.withEmailCodesQuickstart },
  { id: 'elements.next.appRouter', config: elements.nextAppRouter, env: envs.withEmailCodes },
  { id: 'astro.node.withCustomRoles', config: astro.node, env: envs.withCustomRoles },

integration/tests/session-tasks-multi-session.test.ts

@@ -0,0 +1 @@
+// TODO - add tests

integration/tests/session-tasks-sign-in.test.ts

@@ -0,0 +1,72 @@
+import { expect, test } from '@playwright/test';
+
+import type { Application } from '../models/application';
+import { appConfigs } from '../presets';
+import type { FakeUser } from '../testUtils';
+import { createTestUtils } from '../testUtils';
+
+test.describe('session tasks sign in flow @nextjs', () => {
+ test.describe.configure({ mode: 'serial' });
+ let app: Application;
+ let fakeUser: FakeUser;
+
+ test.beforeAll(async () => {
+ app = await appConfigs.next.appRouter.clone().commit();
+ await app.setup();
+ await app.withEnv(appConfigs.envs.withSessionTasks);
+ await app.dev();
+
+ const m = createTestUtils({ app });
+ fakeUser = m.services.users.createFakeUser({
+ withPhoneNumber: true,
+ withUsername: true,
+ });
+ await m.services.users.createBapiUser(fakeUser);
+ });
+
+ test.afterAll(async () => {
+ await fakeUser.deleteIfExists();
+ await app.teardown();
+ });
+
+ test('on after sign-in, navigates to tasks', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.po.signIn.goTo();
+ await u.po.signIn.setIdentifier(fakeUser.email);
+ await u.po.signIn.continue();
+ await u.po.signIn.setPassword(fakeUser.password);
+ await u.po.signIn.continue();
+ await u.po.expect.toBeSignedIn();
+ await expect(u.page.getByRole('heading', { name: 'Create Organization' })).toBeVisible();
+ expect(u.page.url()).toContain('/sign-in/add-organization');
+ });
+
+ test.fixme('redirects to after sign-in url when session tasks has been resolved', () => {
+ // todo
+ });
+
+ test.fixme('redirects to after sign-in url when accessing root sign in with a active session', {
+ // todo
+ });
+
+ test('redirects back to tasks when accessing root sign in', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.po.signIn.goTo();
+ await u.po.signIn.setIdentifier(fakeUser.email);
+ await u.po.signIn.continue();
+ await u.po.signIn.setPassword(fakeUser.password);
+ await u.po.signIn.continue();
+ await u.po.expect.toBeSignedIn();
+ await expect(u.page.getByRole('heading', { name: 'Create Organization' })).toBeVisible();
+ expect(u.page.url()).toContain('/sign-in/add-organization');
+ await u.po.signIn.goTo();
+ await expect(u.page.getByRole('heading', { name: 'Create Organization' })).toBeVisible();
+ expect(u.page.url()).toContain('/sign-in/add-organization');
+ });
+
+ test('without a session, does not allow to access tasks', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.page.goto('/sign-in/add-organization');
+ expect(u.page.url()).not.toContain('/sign-in/add-organization');
+ });
+});

integration/tests/session-tasks-sign-up.test.ts

@@ -0,0 +1,73 @@
+import { expect, test } from '@playwright/test';
+
+import type { Application } from '../models/application';
+import { appConfigs } from '../presets';
+import { createTestUtils } from '../testUtils';
+
+test.describe('session tasks sign in flow @nextjs', () => {
+ test.describe.configure({ mode: 'serial' });
+ let app: Application;
+
+ test.beforeAll(async () => {
+ app = await appConfigs.next.appRouter.clone().commit();
+ await app.setup();
+ await app.withEnv(appConfigs.envs.withSessionTasks);
+ await app.dev();
+ });
+
+ test.afterAll(async () => {
+ await app.teardown();
+ });
+
+ test('on after sign-up, navigates to tasks', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+ const fakeUser = u.services.users.createFakeUser({
+ fictionalEmail: true,
+ });
+ await u.po.signUp.goTo();
+ await u.po.signUp.signUpWithEmailAndPassword({
+ email: fakeUser.email,
+ password: fakeUser.password,
+ });
+ await u.po.signUp.enterTestOtpCode();
+ await u.po.expect.toBeSignedIn();
+
+ await expect(u.page.getByRole('heading', { name: 'Create Organization' })).toBeVisible();
+ expect(u.page.url()).toContain('/sign-up/add-organization');
+
+ await fakeUser.deleteIfExists();
+ });
+
+ test.fixme('redirects to after sign-up url when session tasks has been resolved', () => {
+ // todo
+ });
+
+ test.fixme('redirects to after sign-up url when accessing root sign in with a active session', {
+ // todo
+ });
+
+ test('redirects back to tasks when accessing root sign in', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+ const fakeUser = u.services.users.createFakeUser({
+ fictionalEmail: true,
+ });
+ await u.po.signUp.goTo();
+ await u.po.signUp.signUpWithEmailAndPassword({
+ email: fakeUser.email,
+ password: fakeUser.password,
+ });
+ await u.po.signUp.enterTestOtpCode();
+ await u.po.expect.toBeSignedIn();
+ await expect(u.page.getByRole('heading', { name: 'Create Organization' })).toBeVisible();
+ expect(u.page.url()).toContain('/sign-up/add-organization');
+ await u.po.signIn.goTo();
+ await expect(u.page.getByRole('heading', { name: 'Create Organization' })).toBeVisible();
+ expect(u.page.url()).toContain('/sign-up/add-organization');
+ });
+
+ test('without a session, does not allow to access tasks', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.page.goto('/sign-up/add-organization');
+ expect(u.page.url()).not.toContain('/sign-up/add-organization');
+ });
+});

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

@@ -23,6 +23,7 @@ import type {
  CreateOrganizationParams,
  CreateOrganizationProps,
  CredentialReturn,
+ CustomNavigation,
  DomainOrProxyUrl,
  EnvironmentJSON,
  EnvironmentJSONSnapshot,
@@ -45,6 +46,7 @@ import type {
  RedirectOptions,
  Resources,
  SDKMetadata,
+ SessionTask,
  SetActiveParams,
  SignedInSessionResource,
  SignInProps,
@@ -65,6 +67,7 @@ import type {
  WaitlistResource,
  Web3Provider,
 } from '@clerk/types';
+import type { SessionTaskRoutePath } from 'ui/common/tasks';
 
 import type { MountComponentRenderer } from '../ui/Components';
 import {
@@ -946,7 +949,10 @@ export class Clerk implements ClerkInterface {
  beforeUnloadTracker?.stopTracking();
  }
 
- if (redirectUrl && !beforeEmit) {
+ // Overrides the default behavior of redirects to `afterSignInUrl`
+ // or `afterSignUpUrl` to redirect the user to their assigned tasks
+ const hasSessionToResolve = newSession?.currentTask;
+ if (redirectUrl && !beforeEmit && !hasSessionToResolve) {
  beforeUnloadTracker?.startTracking();
  this.#setTransitiveState();
 
@@ -1728,6 +1734,8 @@ export class Clerk implements ClerkInterface {
  if (this.session) {
  const session = this.#getSessionFromClient(this.session.id);
 
+ this.maybeNavigateToTaskResolution(this.navigate);
+
  // Note: this might set this.session to null
  this.#setAccessors(session);
 
@@ -2260,4 +2268,33 @@ export class Clerk implements ClerkInterface {
 
  return allowedProtocols;
  }
+
+ maybeNavigateToTaskResolution(customNavigate?: (to: string) => Promise<unknown>) {
+ if (!this.session?.currentTask || !inBrowser()) {
+ return;
+ }
+
+ const isOnTaskResolutionPath = window.location.href.includes('navigate-to-task');
+ if (isOnTaskResolutionPath) {
+ return;
+ }
+
+ const url = buildURL({ base: `${this.#options.signInUrl}/navigate-to-task` }, { stringify: true });
+
+ void customNavigate?.(url);
+ }
+
+ navigateToTaskPath(customNavigate?: CustomNavigation) {
+ if (!this.session?.currentTask || !inBrowser()) {
+ return;
+ }
+
+ const taskKeyToRoutePaths: Record<SessionTask['key'], SessionTaskRoutePath> = {
+ org: 'add-organization',
+ };
+
+ const routePath = taskKeyToRoutePaths[this.session.currentTask.key];
+
+ void customNavigate?.(routePath);
+ }
 }

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

@@ -303,4 +303,8 @@ export class Session extends BaseResource implements SessionResource {
  return token.getRawString() || null;
  });
  }
+
+ get currentTask(): SessionTask | undefined {
+ return (this.tasks ?? [])[0];
+ }
 }

packages/clerk-js/src/ui/common/TaskNavigation.tsx

@@ -0,0 +1,23 @@
+import { Flow } from '../customizables';
+import { Card, LoadingCardContainer, withCardStateProvider } from '../elements';
+
+export const TaskNavigation = withCardStateProvider(() => {
+ return (
+ <Flow.Part part='taskNavigation'>
+ <TaskNavigationCard />
+ </Flow.Part>
+ );
+});
+
+export const TaskNavigationCard = () => {
+ return (
+ <Flow.Part part='taskNavigation'>
+ <Card.Root>
+ <Card.Content>
+ <LoadingCardContainer />
+ </Card.Content>
+ <Card.Footer />
+ </Card.Root>
+ </Flow.Part>
+ );
+};

packages/clerk-js/src/ui/common/index.ts

@@ -13,6 +13,7 @@ export * from './QRCode';
 export * from './redirects';
 export * from './RemoveResourceForm';
 export * from './SSOCallback';
+export * from './TaskNavigation';
 export * from './verification';
 export * from './withRedirect';
 export * from './Wizard';

packages/clerk-js/src/ui/common/tasks.ts

@@ -0,0 +1,3 @@
+export const sessionTaskRoutePaths = ['add-organization'] as const;
+
+export type SessionTaskRoutePath = (typeof sessionTaskRoutePaths)[number];

packages/clerk-js/src/ui/common/withRedirect.tsx

@@ -28,8 +28,16 @@ export function withRedirect<P extends AvailableComponentProps>(
  const environment = useEnvironment();
  const options = useOptions();
 
- const shouldRedirect = condition(clerk, environment, options);
+ const hasTasksAndSingleSessionMode = clerk.session?.currentTask && environment?.authConfig.singleSessionMode;
+ const shouldRedirect =
+ // Overrides default redirect guards to not lead with race conditions on redirection for session tasks
+ hasTasksAndSingleSessionMode ? false : condition(clerk, environment, options);
  React.useEffect(() => {
+ if (hasTasksAndSingleSessionMode) {
+ void clerk.maybeNavigateToTaskResolution(navigate);
+ return;
+ }
+
  if (shouldRedirect) {
  if (warning && isDevelopmentFromPublishableKey(clerk.publishableKey)) {
  console.info(warning);
@@ -38,7 +46,7 @@ export function withRedirect<P extends AvailableComponentProps>(
  // eslint-disable-next-line @typescript-eslint/no-floating-promises
  navigate(redirectUrl({ clerk, environment, options }));
  }
- }, []);
+ }, [hasTasksAndSingleSessionMode]);
 
  if (shouldRedirect) {
  return null;

packages/clerk-js/src/ui/components/SignIn/SignIn.tsx

@@ -2,6 +2,7 @@ import { useClerk } from '@clerk/shared/react';
 import type { SignInModalProps, SignInProps } from '@clerk/types';
 import React from 'react';
 
+import { sessionTaskRoutePaths } from '../../../ui/common/tasks';
 import { normalizeRoutingOptions } from '../../../utils/normalizeRoutingOptions';
 import { SignInEmailLinkFlowComplete, SignUpEmailLinkFlowComplete } from '../../common/EmailLinkCompleteFlowCard';
 import type { SignUpContextType } from '../../contexts';
@@ -19,13 +20,15 @@ import { SignUpSSOCallback } from '../SignUp/SignUpSSOCallback';
 import { SignUpStart } from '../SignUp/SignUpStart';
 import { SignUpVerifyEmail } from '../SignUp/SignUpVerifyEmail';
 import { SignUpVerifyPhone } from '../SignUp/SignUpVerifyPhone';
+import { Task } from '../Task';
 import { ResetPassword } from './ResetPassword';
 import { ResetPasswordSuccess } from './ResetPasswordSuccess';
 import { SignInAccountSwitcher } from './SignInAccountSwitcher';
 import { SignInFactorOne } from './SignInFactorOne';
 import { SignInFactorTwo } from './SignInFactorTwo';
 import { SignInSSOCallback } from './SignInSSOCallback';
 import { SignInStart } from './SignInStart';
+import { SignInTaskNavigation } from './SignInTaskNavigation';
 
 function RedirectToSignIn() {
  const clerk = useClerk();
@@ -132,6 +135,17 @@ function SignInRoutes(): JSX.Element {
  </Route>
  </Route>
  )}
+ <Route path='navigate-to-task'>
+ <SignInTaskNavigation />
+ </Route>
+ {sessionTaskRoutePaths.map(path => (
+ <Route
+ key={path}
+ path={path}
+ >
+ <Task />
+ </Route>
+ ))}
  <Route index>
  <SignInStart />
  </Route>

packages/clerk-js/src/ui/components/SignIn/SignInTaskNavigation.tsx

@@ -0,0 +1,3 @@
+import { TaskNavigation, withRedirectToAfterSignIn } from '../../common';
+
+export const SignInTaskNavigation = withRedirectToAfterSignIn(TaskNavigation);