feat(clerk-js): Introduce redirect rules

.changeset/plenty-dolls-pick.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': minor
+---
+
+Centralize redirect concerns for SignIn

integration/templates/next-app-router/next.config.js

@@ -1,9 +1,19 @@
+const path = require('path');
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   eslint: {
     ignoreDuringBuilds: true,
   },
-  outputFileTracingRoot: '/',
+  outputFileTracingRoot: path.resolve(__dirname, '../../../'),
+  webpack: config => {
+    // Exclude macOS .Trash directory and other system directories to prevent permission errors
+    config.watchOptions = {
+      ...config.watchOptions,
+      ignored: ['**/.Trash/**', '**/node_modules/**', '**/.git/**'],
+    };
+    return config;
+  },
 };
 
 module.exports = nextConfig;

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

@@ -61,6 +61,11 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withSessionTasks] })(
       // Create second user, to initiate a pending session
       // Don't resolve task and switch to active session afterwards
       await u.po.signIn.goTo();
+      await u.page.waitForURL(/sign-in\/choose/);
+      await u.page.getByText('Add account').click();
+      await u.page.waitForURL(/sign-in$/);
+      await u.po.signIn.waitForMounted();
+      await u.po.signIn.getIdentifierInput().waitFor({ state: 'visible' });
       await u.po.signIn.setIdentifier(user2.email);
       await u.po.signIn.continue();
       await u.po.signIn.setPassword(user2.password);

integration/tests/sign-in-single-session-mode.test.ts

@@ -0,0 +1,79 @@
+import type { FakeUser } from '@clerk/testing/playwright';
+import { test } from '@playwright/test';
+
+import type { Application } from '../models/application';
+import { appConfigs } from '../presets';
+import { createTestUtils, testAgainstRunningApps } from '../testUtils';
+
+/**
+ * Tests for single-session mode behavior using the withBilling environment
+ * which is configured for single-session mode in the Clerk Dashboard.
+ */
+testAgainstRunningApps({ withEnv: [appConfigs.envs.withBilling] })(
+  'sign in with active session in single-session mode @generic @nextjs',
+  ({ app }) => {
+    test.describe.configure({ mode: 'serial' });
+
+    let fakeUser: FakeUser;
+
+    test.beforeAll(async () => {
+      const u = createTestUtils({ app });
+      fakeUser = u.services.users.createFakeUser({
+        withPhoneNumber: true,
+        withUsername: true,
+      });
+      await u.services.users.createBapiUser(fakeUser);
+    });
+
+    test.afterAll(async () => {
+      await fakeUser.deleteIfExists();
+    });
+
+    test('redirects to afterSignIn URL when visiting /sign-in with active session in single-session mode', async ({
+      page,
+      context,
+    }) => {
+      const u = createTestUtils({ app, page, context });
+
+      await u.po.signIn.goTo();
+      await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
+      await u.po.expect.toBeSignedIn();
+      await u.page.waitForAppUrl('/');
+
+      await u.po.signIn.goTo();
+      await u.page.waitForAppUrl('/');
+      await u.po.expect.toBeSignedIn();
+    });
+
+    test('does NOT show account switcher in single-session mode', async ({ page, context }) => {
+      const u = createTestUtils({ app, page, context });
+
+      await u.po.signIn.goTo();
+      await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
+      await u.po.expect.toBeSignedIn();
+
+      await u.page.goToRelative('/sign-in/choose');
+      await u.page.waitForAppUrl('/');
+    });
+
+    test('shows sign-in form when no active session in single-session mode', async ({ page, context }) => {
+      const u = createTestUtils({ app, page, context });
+
+      await u.page.context().clearCookies();
+      await u.po.signIn.goTo();
+      await u.po.signIn.waitForMounted();
+      await u.page.waitForSelector('text=/email address|username|phone/i');
+      await u.page.waitForURL(/sign-in$/);
+    });
+
+    test('can sign in normally when not already authenticated in single-session mode', async ({ page, context }) => {
+      const u = createTestUtils({ app, page, context });
+
+      await u.page.context().clearCookies();
+      await u.po.signIn.goTo();
+      await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
+      await u.po.expect.toBeSignedIn();
+      await u.page.waitForAppUrl('/');
+    });
+  },
+);

packages/ui/src/components/SignIn/SignInStart.tsx

@@ -11,31 +11,20 @@ import type {
   SignInResource,
 } from '@clerk/shared/types';
 import { isWebAuthnAutofillSupported, isWebAuthnSupported } from '@clerk/shared/webauthn';
-import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
-
-import { Card } from '@/ui/elements/Card';
-import { useCardState, withCardStateProvider } from '@/ui/elements/contexts';
-import { Form } from '@/ui/elements/Form';
-import { Header } from '@/ui/elements/Header';
-import { LoadingCard } from '@/ui/elements/LoadingCard';
-import { SocialButtonsReversibleContainerWithDivider } from '@/ui/elements/ReversibleContainer';
-import { handleError } from '@/ui/utils/errorHandler';
-import { isMobileDevice } from '@/ui/utils/isMobileDevice';
-import type { FormControlState } from '@/ui/utils/useFormControl';
-import { buildRequest, useFormControl } from '@/ui/utils/useFormControl';
+import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 
 import type { SignInStartIdentifier } from '../../common';
-import {
-  buildSSOCallbackURL,
-  getIdentifierControlDisplayValues,
-  groupIdentifiers,
-  withRedirectToAfterSignIn,
-  withRedirectToSignInTask,
-} from '../../common';
+import { buildSSOCallbackURL, getIdentifierControlDisplayValues, groupIdentifiers } from '../../common';
 import { useCoreSignIn, useEnvironment, useSignInContext } from '../../contexts';
 import { Col, descriptors, Flow, localizationKeys } from '../../customizables';
 import { CaptchaElement } from '../../elements/CaptchaElement';
-import { useLoadingStatus } from '../../hooks';
+import { Card } from '../../elements/Card';
+import { useCardState, withCardStateProvider } from '../../elements/contexts';
+import { Form } from '../../elements/Form';
+import { Header } from '../../elements/Header';
+import { LoadingCard } from '../../elements/LoadingCard';
+import { SocialButtonsReversibleContainerWithDivider } from '../../elements/ReversibleContainer';
+import { useLoadingStatus, useSignInRedirect } from '../../hooks';
 import { useSupportEmail } from '../../hooks/useSupportEmail';
 import { useTotalEnabledAuthMethods } from '../../hooks/useTotalEnabledAuthMethods';
 import { useRouter } from '../../router';
@@ -48,6 +37,10 @@ import {
   getPreferredAlternativePhoneChannelForCombinedFlow,
   getSignUpAttributeFromIdentifier,
 } from './utils';
+import { handleError } from '@/ui/utils/errorHandler';
+import { isMobileDevice } from '@/ui/utils/isMobileDevice';
+import type { FormControlState } from '@/ui/utils/useFormControl';
+import { buildRequest, useFormControl } from '@/ui/utils/useFormControl';
 
 const useAutoFillPasskey = () => {
   const [isSupported, setIsSupported] = useState(false);
@@ -523,7 +516,12 @@ function SignInStartInternal(): JSX.Element {
     return components[identifierField.type as keyof typeof components];
   }, [identifierField.type]);
 
-  if (status.isLoading || clerkStatus === 'sign_up') {
+  const { isRedirecting } = useSignInRedirect({
+    afterSignInUrl,
+    organizationTicket,
+  });
+
+  if (isRedirecting || status.isLoading || clerkStatus === 'sign_up') {
     // clerkStatus being sign_up will trigger a navigation to the sign up flow, so show a loading card instead of
     // rendering the sign in flow.
     return <LoadingCard />;
@@ -708,6 +706,4 @@ const InstantPasswordRow = ({ field }: { field?: FormControlState<'password'> })
   );
 };
 
-export const SignInStart = withRedirectToSignInTask(
-  withRedirectToAfterSignIn(withCardStateProvider(SignInStartInternal)),
-);
+export const SignInStart = withCardStateProvider(SignInStartInternal);

packages/ui/src/components/UserButton/useMultisessionActions.tsx

@@ -3,6 +3,7 @@ import { windowNavigate } from '@clerk/shared/internal/clerk-js/windowNavigate';
 import { useClerk } from '@clerk/shared/react';
 import type { SignedInSessionResource, UserButtonProps, UserResource } from '@clerk/shared/types';
 
+import { buildURL } from '@clerk/shared/internal/clerk-js/url';
 import { useEnvironment } from '@/ui/contexts';
 import { useCardState } from '@/ui/elements/contexts';
 import { sleep } from '@/ui/utils/sleep';
@@ -25,7 +26,7 @@ export const useMultisessionActions = (opts: UseMultisessionActionsParams) => {
   const { setActive, signOut, openUserProfile } = useClerk();
   const card = useCardState();
   const { signedInSessions, otherSessions } = useMultipleSessions({ user: opts.user });
-  const { navigate } = useRouter();
+  const { navigate, queryParams } = useRouter();
   const { displayConfig } = useEnvironment();
 
   const handleSignOutSessionClicked = (session: SignedInSessionResource) => () => {
@@ -99,7 +100,15 @@ export const useMultisessionActions = (opts: UseMultisessionActionsParams) => {
   };
 
   const handleAddAccountClicked = () => {
-    windowNavigate(opts.signInUrl || window.location.href);
+    const baseUrl = opts.signInUrl || (typeof window !== 'undefined' ? window.location.href : '');
+    const url = buildURL(
+      {
+        base: baseUrl,
+        searchParams: new URLSearchParams({ ...queryParams, __clerk_add_account: 'true' }),
+      },
+      { stringify: true },
+    );
+    windowNavigate(url);
     return sleep(2000);
   };