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);
  };
 

.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);
  };
 

.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);
  };
 

.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);
  };
 

.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);
  };
 

.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);
  };
 

.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);
  };
 

.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);
  };