diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx index 7a6e5352688..d24ae2addd7 100644 --- a/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx +++ b/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx @@ -173,9 +173,13 @@ export function _SignInStart(): JSX.Element { } if (clerkStatus === 'sign_up') { + const paramsToForward = new URLSearchParams(); + if (organizationTicket) { + paramsToForward.set('__clerk_ticket', organizationTicket); + } // We explicitly navigate to 'create' in the combined flow to trigger a client-side navigation. Navigating to // signUpUrl triggers a full page reload when used with the hash router. - navigate(isCombinedFlow ? 'create' : signUpUrl); + void navigate(isCombinedFlow ? `create` : signUpUrl, { searchParams: paramsToForward }); return; } @@ -374,10 +378,6 @@ export function _SignInStart(): JSX.Element { } clerk.client.signUp[attribute] = identifierField.value; - const paramsToForward = new URLSearchParams(); - if (organizationTicket) { - paramsToForward.set('__clerk_ticket', organizationTicket); - } const redirectUrl = buildSSOCallbackURL(ctx, displayConfig.signUpUrl); const redirectUrlComplete = ctx.afterSignUpUrl || '/'; diff --git a/packages/clerk-js/src/ui/components/SignIn/handleCombinedFlowTransfer.ts b/packages/clerk-js/src/ui/components/SignIn/handleCombinedFlowTransfer.ts index 60ff47cb996..1337057372b 100644 --- a/packages/clerk-js/src/ui/components/SignIn/handleCombinedFlowTransfer.ts +++ b/packages/clerk-js/src/ui/components/SignIn/handleCombinedFlowTransfer.ts @@ -1,13 +1,14 @@ import type { LoadedClerk, SignUpModes, SignUpResource } from '@clerk/types'; import { SIGN_UP_MODES } from '../../../core/constants'; +import type { RouteContextValue } from '../../router/RouteContext'; import { completeSignUpFlow } from '../SignUp/util'; type HandleCombinedFlowTransferProps = { identifierAttribute: 'emailAddress' | 'phoneNumber' | 'username'; identifierValue: string; signUpMode: SignUpModes; - navigate: (to: string) => Promise; + navigate: RouteContextValue['navigate']; organizationTicket?: string; afterSignUpUrl: string; clerk: LoadedClerk; @@ -78,7 +79,7 @@ export function handleCombinedFlowTransfer({ .catch(err => handleError(err)); } - return navigate(`create?${paramsToForward.toString()}`); + return navigate(`create`, { searchParams: paramsToForward }); } function hasOptionalFields(signUp: SignUpResource) { diff --git a/packages/clerk-js/src/ui/router/Route.tsx b/packages/clerk-js/src/ui/router/Route.tsx index c68ab28c4e4..1e0e046f75c 100644 --- a/packages/clerk-js/src/ui/router/Route.tsx +++ b/packages/clerk-js/src/ui/router/Route.tsx @@ -58,8 +58,11 @@ export function Route(props: RouteProps): JSX.Element | null { const [indexPath, fullPath] = newPaths(router.indexPath, router.fullPath, props.path, props.index); - const resolve = (to: string) => { + const resolve = (to: string, { searchParams }: { searchParams?: URLSearchParams } = {}) => { const url = new URL(to, window.location.origin + fullPath + '/'); + if (searchParams) { + url.search = searchParams.toString(); + } url.pathname = trimTrailingSlash(url.pathname); return url; }; @@ -109,8 +112,8 @@ export function Route(props: RouteProps): JSX.Element | null { return newGetMatchData(path, index) ? true : false; }, resolve: resolve, - navigate: (to: string) => { - const toURL = resolve(to); + navigate: (to: string, { searchParams } = {}) => { + const toURL = resolve(to, { searchParams }); return router.baseNavigate(toURL); }, refresh: router.refresh, diff --git a/packages/clerk-js/src/ui/router/RouteContext.tsx b/packages/clerk-js/src/ui/router/RouteContext.tsx index 8496c211856..08da052e9c0 100644 --- a/packages/clerk-js/src/ui/router/RouteContext.tsx +++ b/packages/clerk-js/src/ui/router/RouteContext.tsx @@ -9,7 +9,7 @@ export interface RouteContextValue { currentPath: string; matches: (path?: string, index?: boolean) => boolean; baseNavigate: (toURL: URL) => Promise; - navigate: (to: string) => Promise; + navigate: (to: string, options?: { searchParams?: URLSearchParams }) => Promise; resolve: (to: string) => URL; refresh: () => void; params: { [key: string]: string };