Skip to content

Commit 53bd34f

Browse files
alexcarpenterjacekradkodstaleypanteliselefLekoArts
authoredJan 16, 2025··
feat(clerk-js): Launch sign-in-or-up flow (#4788)
Co-authored-by: Jacek <jacek@clerk.dev> Co-authored-by: Dylan Staley <88163+dstaley@users.noreply.github.com> Co-authored-by: panteliselef <panteliselef@outlook.com> Co-authored-by: Lennart <lekoarts@gmail.com> Co-authored-by: Bryce Kalow <bryce@clerk.dev>
·
@clerk/vue@1.4.6@clerk/agent-toolkit@0.0.6
1 parent 4af3538 commit 53bd34f

30 files changed

+657
-441
lines changed
 

‎.changeset/tough-bugs-vanish.md

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
'@clerk/clerk-js': minor
3+
'@clerk/clerk-react': minor
4+
'@clerk/types': minor
5+
'@clerk/vue': minor
6+
---
7+
8+
Introduce sign-in-or-up flow.

‎integration/presets/envs.ts

+10-8
Original file line numberDiff line numberDiff line change
@@ -113,14 +113,15 @@ const withWaitlistdMode = withEmailCodes
113113
.setEnvVariable('private', 'CLERK_SECRET_KEY', instanceKeys.get('with-waitlist-mode').sk)
114114
.setEnvVariable('public', 'CLERK_PUBLISHABLE_KEY', instanceKeys.get('with-waitlist-mode').pk);
115115

116-
const withCombinedFlow = withEmailCodes
116+
const withSignInOrUpFlow = withEmailCodes
117117
.clone()
118-
.setId('withCombinedFlow')
119-
.setEnvVariable('private', 'CLERK_SECRET_KEY', instanceKeys.get('with-email-codes').sk)
120-
.setEnvVariable('public', 'CLERK_PUBLISHABLE_KEY', instanceKeys.get('with-email-codes').pk)
121-
.setEnvVariable('public', 'EXPERIMENTAL_COMBINED_FLOW', 'true')
122-
.setEnvVariable('public', 'CLERK_SIGN_IN_URL', '/sign-in')
123-
.setEnvVariable('public', 'CLERK_SIGN_UP_URL', '/sign-in');
118+
.setId('withSignInOrUpFlow')
119+
.setEnvVariable('public', 'CLERK_SIGN_UP_URL', undefined);
120+
121+
const withSignInOrUpEmailLinksFlow = withEmailLinks
122+
.clone()
123+
.setId('withSignInOrUpEmailLinksFlow')
124+
.setEnvVariable('public', 'CLERK_SIGN_UP_URL', undefined);
124125

125126
export const envs = {
126127
base,
@@ -138,5 +139,6 @@ export const envs = {
138139
withRestrictedMode,
139140
withLegalConsent,
140141
withWaitlistdMode,
141-
withCombinedFlow,
142+
withSignInOrUpFlow,
143+
withSignInOrUpEmailLinksFlow,
142144
} as const;

‎integration/presets/longRunningApps.ts

+6-1
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,12 @@ export const createLongRunningApps = () => {
3131
},
3232
{ id: 'next.appRouter.withCustomRoles', config: next.appRouter, env: envs.withCustomRoles },
3333
{ id: 'next.appRouter.withReverification', config: next.appRouter, env: envs.withReverification },
34-
{ id: 'next.appRouter.withCombinedFlow', config: next.appRouter, env: envs.withCombinedFlow },
34+
{ id: 'next.appRouter.withSignInOrUpFlow', config: next.appRouter, env: envs.withSignInOrUpFlow },
35+
{
36+
id: 'next.appRouter.withSignInOrUpEmailLinksFlow',
37+
config: next.appRouter,
38+
env: envs.withSignInOrUpEmailLinksFlow,
39+
},
3540
{ id: 'quickstart.next.appRouter', config: next.appRouterQuickstart, env: envs.withEmailCodesQuickstart },
3641
{ id: 'elements.next.appRouter', config: elements.nextAppRouter, env: envs.withEmailCodes },
3742
{ id: 'astro.node.withCustomRoles', config: astro.node, env: envs.withCustomRoles },

‎integration/templates/next-app-router/src/app/layout.tsx

-3
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,6 @@ export default function RootLayout({ children }: { children: React.ReactNode })
1313
return (
1414
<ClerkProvider
1515
experimental={{
16-
combinedFlow: process.env.NEXT_PUBLIC_EXPERIMENTAL_COMBINED_FLOW
17-
? process.env.NEXT_PUBLIC_EXPERIMENTAL_COMBINED_FLOW === 'true'
18-
: undefined,
1916
persistClient: process.env.NEXT_PUBLIC_EXPERIMENTAL_PERSIST_CLIENT
2017
? process.env.NEXT_PUBLIC_EXPERIMENTAL_PERSIST_CLIENT === 'true'
2118
: undefined,

‎integration/templates/next-app-router/src/app/sign-in-or-up/[[...catchall]]/page.tsx

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { SignIn } from '@clerk/nextjs';
2+
3+
export default function Page() {
4+
return (
5+
<div>
6+
<SignIn
7+
routing={'path'}
8+
path={'/sign-in'}
9+
signUpUrl={'/sign-up'}
10+
fallback={<>Loading sign in</>}
11+
withSignUp
12+
/>
13+
</div>
14+
);
15+
}

‎integration/templates/next-app-router/src/app/sign-in/[[...catchall]]/page.tsx

-3
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,6 @@ export default function Page() {
88
path={'/sign-in'}
99
signUpUrl={'/sign-up'}
1010
fallback={<>Loading sign in</>}
11-
__experimental={{
12-
combinedProps: {},
13-
}}
1411
/>
1512
</div>
1613
);

‎integration/tests/combined-sign-in-flow.test.ts

-160
This file was deleted.

‎integration/tests/combined-sign-up-flow.test.ts

-122
This file was deleted.

‎integration/tests/sign-in-or-up-component.test.ts

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { expect, test } from '@playwright/test';
2+
3+
import type { Application } from '../models/application';
4+
import { appConfigs } from '../presets';
5+
import { createTestUtils } from '../testUtils';
6+
7+
test.describe('sign-in-or-up component initialization flow @nextjs', () => {
8+
test.describe.configure({ mode: 'parallel' });
9+
let app: Application;
10+
11+
test.beforeAll(async () => {
12+
app = await appConfigs.next.appRouter.clone().commit();
13+
await app.setup();
14+
await app.withEnv(appConfigs.envs.withEmailCodes);
15+
await app.dev();
16+
});
17+
18+
test.afterAll(async () => {
19+
await app.teardown();
20+
});
21+
22+
test('flows are combined', async ({ page, context }) => {
23+
const u = createTestUtils({ app, page, context });
24+
await u.page.goToRelative('/sign-in-or-up');
25+
await expect(u.page.getByText(`Don’t have an account?`)).toBeHidden();
26+
});
27+
});

‎integration/tests/sign-in-or-up-email-links-flow.test.ts

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import { expect, test } from '@playwright/test';
2+
3+
import type { FakeUser } from '../testUtils';
4+
import { createTestUtils, testAgainstRunningApps } from '../testUtils';
5+
6+
testAgainstRunningApps({ withEnv: [] })('sign-in-or-up email links flow', ({ app }) => {
7+
test.describe.configure({ mode: 'serial' });
8+
9+
let fakeUser: FakeUser;
10+
11+
test.beforeAll(() => {
12+
const u = createTestUtils({ app });
13+
fakeUser = u.services.users.createFakeUser();
14+
});
15+
16+
test.afterAll(async () => {
17+
await app.teardown();
18+
});
19+
20+
test('sign up with email link', async ({ page, context }) => {
21+
const u = createTestUtils({ app, page, context });
22+
await u.po.signIn.goTo();
23+
await u.po.signIn.setIdentifier(fakeUser.email);
24+
await u.po.signIn.continue();
25+
await u.page.waitForAppUrl('/sign-in/create');
26+
27+
const prefilledEmail = await u.po.signUp.getEmailAddressInput().inputValue();
28+
expect(prefilledEmail).toBe(fakeUser.email);
29+
30+
await u.po.signUp.setPassword(fakeUser.password);
31+
await u.po.signUp.continue();
32+
33+
await u.po.signUp.waitForEmailVerificationScreen();
34+
await u.tabs.runInNewTab(async u => {
35+
const verificationLink = await u.services.email.getVerificationLinkForEmailAddress(fakeUser.email);
36+
await u.page.goto(verificationLink);
37+
await u.po.expect.toBeSignedIn();
38+
await u.page.close();
39+
});
40+
await u.po.expect.toBeSignedIn();
41+
});
42+
43+
test('sign in with email link', async ({ page, context }) => {
44+
const u = createTestUtils({ app, page, context });
45+
await u.po.signIn.goTo();
46+
await u.po.signIn.setIdentifier(fakeUser.email);
47+
await u.po.signIn.continue();
48+
await u.page.waitForAppUrl('/sign-in/factor-one');
49+
// Defaults to password, so we need to switch to email link
50+
await u.page.getByRole('link', { name: /Use another method/i }).click();
51+
await u.page.getByRole('button', { name: /Email link to/i }).click();
52+
await page.getByRole('heading', { name: /Check your email/i }).waitFor();
53+
await u.tabs.runInNewTab(async u => {
54+
const verificationLink = await u.services.email.getVerificationLinkForEmailAddress(fakeUser.email);
55+
await u.page.goto(verificationLink);
56+
await u.po.expect.toBeSignedIn();
57+
await u.page.close();
58+
});
59+
await u.po.expect.toBeSignedIn();
60+
await fakeUser.deleteIfExists();
61+
});
62+
});

‎integration/tests/sign-in-or-up-flow.test.ts

+286
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,286 @@
1+
import { expect, test } from '@playwright/test';
2+
3+
import { appConfigs } from '../presets';
4+
import { createTestUtils, type FakeUser, testAgainstRunningApps } from '../testUtils';
5+
6+
testAgainstRunningApps({ withEnv: [appConfigs.envs.withSignInOrUpFlow] })('sign-in-or-up flow @nextjs', ({ app }) => {
7+
test.describe.configure({ mode: 'serial' });
8+
9+
test.afterAll(async () => {
10+
await app.teardown();
11+
});
12+
13+
test.describe('sign-in', () => {
14+
let fakeUser: FakeUser;
15+
16+
test.beforeAll(async () => {
17+
const u = createTestUtils({ app });
18+
fakeUser = u.services.users.createFakeUser({
19+
withPhoneNumber: true,
20+
withUsername: true,
21+
});
22+
await u.services.users.createBapiUser(fakeUser);
23+
});
24+
25+
test.afterAll(async () => {
26+
await fakeUser.deleteIfExists();
27+
});
28+
29+
test('flows are combined', async ({ page, context }) => {
30+
const u = createTestUtils({ app, page, context });
31+
await u.po.signIn.goTo();
32+
33+
await expect(u.page.getByText(`Don’t have an account?`)).toBeHidden();
34+
});
35+
36+
test('sign in with email and password', async ({ page, context }) => {
37+
const u = createTestUtils({ app, page, context });
38+
await u.po.signIn.goTo();
39+
await u.po.signIn.setIdentifier(fakeUser.email);
40+
await u.po.signIn.continue();
41+
await u.po.signIn.setPassword(fakeUser.password);
42+
await u.po.signIn.continue();
43+
await u.po.expect.toBeSignedIn();
44+
});
45+
46+
test('sign in with email and instant password', async ({ page, context }) => {
47+
const u = createTestUtils({ app, page, context });
48+
await u.po.signIn.goTo();
49+
await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
50+
await u.po.expect.toBeSignedIn();
51+
});
52+
53+
test('sign in with email code', async ({ page, context }) => {
54+
const u = createTestUtils({ app, page, context });
55+
await u.po.signIn.goTo();
56+
await u.po.signIn.getIdentifierInput().fill(fakeUser.email);
57+
await u.po.signIn.continue();
58+
await u.po.signIn.getUseAnotherMethodLink().click();
59+
await u.po.signIn.getAltMethodsEmailCodeButton().click();
60+
await u.po.signIn.enterTestOtpCode();
61+
await u.po.expect.toBeSignedIn();
62+
});
63+
64+
test('sign in with phone number and password', async ({ page, context }) => {
65+
const u = createTestUtils({ app, page, context });
66+
await u.po.signIn.goTo();
67+
await u.po.signIn.usePhoneNumberIdentifier().click();
68+
await u.po.signIn.getIdentifierInput().fill(fakeUser.phoneNumber);
69+
await u.po.signIn.setPassword(fakeUser.password);
70+
await u.po.signIn.continue();
71+
await u.po.expect.toBeSignedIn();
72+
});
73+
74+
test('sign in only with phone number', async ({ page, context }) => {
75+
const u = createTestUtils({ app, page, context });
76+
const fakeUserWithoutPassword = u.services.users.createFakeUser({
77+
fictionalEmail: true,
78+
withPassword: false,
79+
withPhoneNumber: true,
80+
});
81+
await u.services.users.createBapiUser(fakeUserWithoutPassword);
82+
await u.po.signIn.goTo();
83+
await u.po.signIn.usePhoneNumberIdentifier().click();
84+
await u.po.signIn.getIdentifierInput().fill(fakeUserWithoutPassword.phoneNumber);
85+
await u.po.signIn.continue();
86+
await u.po.signIn.enterTestOtpCode();
87+
await u.po.expect.toBeSignedIn();
88+
89+
await fakeUserWithoutPassword.deleteIfExists();
90+
});
91+
92+
test('sign in with username and password', async ({ page, context }) => {
93+
const u = createTestUtils({ app, page, context });
94+
await u.po.signIn.goTo();
95+
await u.po.signIn.getIdentifierInput().fill(fakeUser.username);
96+
await u.po.signIn.setPassword(fakeUser.password);
97+
await u.po.signIn.continue();
98+
await u.po.expect.toBeSignedIn();
99+
});
100+
101+
test('can reset password', async ({ page, context }) => {
102+
const u = createTestUtils({ app, page, context });
103+
const fakeUserWithPasword = u.services.users.createFakeUser({
104+
fictionalEmail: true,
105+
withPassword: true,
106+
});
107+
await u.services.users.createBapiUser(fakeUserWithPasword);
108+
109+
await u.po.signIn.goTo();
110+
await u.po.signIn.getIdentifierInput().fill(fakeUserWithPasword.email);
111+
await u.po.signIn.continue();
112+
await u.po.signIn.getForgotPassword().click();
113+
await u.po.signIn.getResetPassword().click();
114+
await u.po.signIn.enterTestOtpCode();
115+
await u.po.signIn.setPassword(`${fakeUserWithPasword.password}_reset`);
116+
await u.po.signIn.setPasswordConfirmation(`${fakeUserWithPasword.password}_reset`);
117+
await u.po.signIn.getResetPassword().click();
118+
await u.po.expect.toBeSignedIn();
119+
120+
await fakeUserWithPasword.deleteIfExists();
121+
});
122+
123+
test('cannot sign in with wrong password', async ({ page, context }) => {
124+
const u = createTestUtils({ app, page, context });
125+
126+
await u.po.signIn.goTo();
127+
await u.po.signIn.getIdentifierInput().fill(fakeUser.email);
128+
await u.po.signIn.continue();
129+
await u.po.signIn.setPassword('wrong-password');
130+
await u.po.signIn.continue();
131+
await expect(u.page.getByText(/password you entered is incorrect/i)).toBeVisible();
132+
133+
await u.po.expect.toBeSignedOut();
134+
});
135+
136+
test('cannot sign in with wrong password but can sign in with email', async ({ page, context }) => {
137+
const u = createTestUtils({ app, page, context });
138+
139+
await u.po.signIn.goTo();
140+
await u.po.signIn.getIdentifierInput().fill(fakeUser.email);
141+
await u.po.signIn.continue();
142+
await u.po.signIn.setPassword('wrong-password');
143+
await u.po.signIn.continue();
144+
145+
await expect(u.page.getByText(/password you entered is incorrect/i)).toBeVisible();
146+
147+
await u.po.signIn.getUseAnotherMethodLink().click();
148+
await u.po.signIn.getAltMethodsEmailCodeButton().click();
149+
await u.po.signIn.enterTestOtpCode();
150+
151+
await u.po.expect.toBeSignedIn();
152+
});
153+
154+
test('access protected page', async ({ page, context }) => {
155+
const u = createTestUtils({ app, page, context });
156+
await u.po.signIn.goTo();
157+
await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
158+
await u.po.expect.toBeSignedIn();
159+
160+
expect(await u.page.locator("data-test-id='protected-api-response'").count()).toEqual(0);
161+
await u.page.goToRelative('/protected');
162+
await u.page.isVisible("data-test-id='protected-api-response'");
163+
});
164+
165+
test('sign up with email and password', async ({ page, context }) => {
166+
const u = createTestUtils({ app, page, context });
167+
const fakeUser = u.services.users.createFakeUser({
168+
fictionalEmail: true,
169+
withPassword: true,
170+
});
171+
172+
// Go to sign in page
173+
await u.po.signIn.goTo();
174+
175+
// Fill in sign in form
176+
await u.po.signIn.setIdentifier(fakeUser.email);
177+
await u.po.signIn.continue();
178+
await u.page.waitForAppUrl('/sign-in/create');
179+
180+
const prefilledEmail = await u.po.signUp.getEmailAddressInput().inputValue();
181+
expect(prefilledEmail).toBe(fakeUser.email);
182+
183+
await u.po.signUp.setPassword(fakeUser.password);
184+
await u.po.signUp.continue();
185+
186+
// Verify email
187+
await u.po.signUp.enterTestOtpCode();
188+
189+
// Check if user is signed in
190+
await u.po.expect.toBeSignedIn();
191+
192+
await fakeUser.deleteIfExists();
193+
});
194+
});
195+
196+
test.describe('sign-up', () => {
197+
test('sign up with username, email, and password', async ({ page, context }) => {
198+
const u = createTestUtils({ app, page, context });
199+
const fakeUser = u.services.users.createFakeUser({
200+
fictionalEmail: true,
201+
withPassword: true,
202+
withUsername: true,
203+
});
204+
205+
await u.po.signIn.goTo();
206+
await u.po.signIn.setIdentifier(fakeUser.username);
207+
await u.po.signIn.continue();
208+
await u.page.waitForAppUrl('/sign-in/create');
209+
210+
const prefilledUsername = await u.po.signUp.getUsernameInput().inputValue();
211+
expect(prefilledUsername).toBe(fakeUser.username);
212+
213+
await u.po.signUp.setEmailAddress(fakeUser.email);
214+
await u.po.signUp.setPassword(fakeUser.password);
215+
await u.po.signUp.continue();
216+
217+
await u.po.signUp.enterTestOtpCode();
218+
219+
await u.po.expect.toBeSignedIn();
220+
221+
await fakeUser.deleteIfExists();
222+
});
223+
224+
test('sign up, sign out and sign in again', async ({ page, context }) => {
225+
const u = createTestUtils({ app, page, context });
226+
const fakeUser = u.services.users.createFakeUser({
227+
fictionalEmail: true,
228+
withPassword: true,
229+
withUsername: true,
230+
});
231+
232+
// Go to sign in page
233+
await u.po.signIn.goTo();
234+
235+
// Fill in sign in form
236+
await u.po.signIn.setIdentifier(fakeUser.email);
237+
await u.po.signIn.continue();
238+
await u.page.waitForAppUrl('/sign-in/create');
239+
240+
const prefilledEmail = await u.po.signUp.getEmailAddressInput().inputValue();
241+
expect(prefilledEmail).toBe(fakeUser.email);
242+
243+
await u.po.signUp.setPassword(fakeUser.password);
244+
await u.po.signUp.continue();
245+
246+
// Verify email
247+
await u.po.signUp.enterTestOtpCode();
248+
249+
// Check if user is signed in
250+
await u.po.expect.toBeSignedIn();
251+
252+
// Toggle user button
253+
await u.po.userButton.toggleTrigger();
254+
await u.po.userButton.waitForPopover();
255+
256+
// Click sign out
257+
await u.po.userButton.triggerSignOut();
258+
259+
// Check if user is signed out
260+
await u.po.expect.toBeSignedOut();
261+
262+
// Go to sign in page
263+
await u.po.signIn.goTo();
264+
265+
// Fill in sign in form
266+
await u.po.signIn.signInWithEmailAndInstantPassword({
267+
email: fakeUser.email,
268+
password: fakeUser.password,
269+
});
270+
271+
// Check if user is signed in
272+
await u.po.expect.toBeSignedIn();
273+
274+
await fakeUser.deleteIfExists();
275+
});
276+
277+
test('sign in with ticket renders sign up', async ({ page, context }) => {
278+
const u = createTestUtils({ app, page, context });
279+
await u.po.signIn.goTo({
280+
searchParams: new URLSearchParams({ __clerk_ticket: '123', __clerk_status: 'sign_up' }),
281+
});
282+
await u.page.waitForAppUrl('/sign-in/create?__clerk_ticket=123');
283+
await expect(u.page.getByText(/Create your account/i)).toBeVisible();
284+
});
285+
});
286+
});

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

+9-5
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { LocalStorageBroadcastChannel } from '@clerk/shared/localStorageBroadcas
66
import { logger } from '@clerk/shared/logger';
77
import { isHttpOrHttps, isValidProxyUrl, proxyUrlToAbsoluteURL } from '@clerk/shared/proxy';
88
import { eventPrebuiltComponentMounted, TelemetryCollector } from '@clerk/shared/telemetry';
9-
import { addClerkPrefix, stripScheme } from '@clerk/shared/url';
9+
import { addClerkPrefix, isAbsoluteUrl, stripScheme } from '@clerk/shared/url';
1010
import { handleValueOrFn, noop } from '@clerk/shared/utils';
1111
import type {
1212
__internal_UserVerificationModalProps,
@@ -365,8 +365,8 @@ export class Clerk implements ClerkInterface {
365365
}
366366
};
367367

368-
#isCombinedFlow(): boolean {
369-
return this.#options.experimental?.combinedFlow && this.#options.signInUrl === this.#options.signUpUrl;
368+
#isCombinedSignInOrUpFlow(): boolean {
369+
return Boolean(!this.#options.signUpUrl && this.#options.signInUrl && !isAbsoluteUrl(this.#options.signInUrl));
370370
}
371371

372372
public signOut: SignOut = async (callbackOrOptions?: SignOutCallback | SignOutOptions, options?: SignOutOptions) => {
@@ -2114,13 +2114,17 @@ export class Clerk implements ClerkInterface {
21142114
return '';
21152115
}
21162116

2117-
const signInOrUpUrl = this.#options[key] || this.environment.displayConfig[key];
2117+
let signInOrUpUrl = this.#options[key] || this.environment.displayConfig[key];
2118+
if (this.#isCombinedSignInOrUpFlow()) {
2119+
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- The isCombinedSignInOrUpFlow() function checks for the existence of signInUrl
2120+
signInOrUpUrl = this.#options.signInUrl!;
2121+
}
21182122
const redirectUrls = new RedirectUrls(this.#options, options).toSearchParams();
21192123
const initValues = new URLSearchParams(_initValues || {});
21202124
const url = buildURL(
21212125
{
21222126
base: signInOrUpUrl,
2123-
hashPath: this.#isCombinedFlow() && key === 'signUpUrl' ? '/create' : '',
2127+
hashPath: this.#isCombinedSignInOrUpFlow() && key === 'signUpUrl' ? '/create' : '',
21242128
hashSearchParams: [initValues, redirectUrls],
21252129
},
21262130
{ stringify: true },

‎packages/clerk-js/src/ui/common/__tests__/redirects.test.ts

+93-47
Original file line numberDiff line numberDiff line change
@@ -2,128 +2,174 @@ import { buildEmailLinkRedirectUrl, buildSSOCallbackURL } from '../redirects';
22

33
describe('buildEmailLinkRedirectUrl(routing, baseUrl)', () => {
44
it('defaults to hash based routing strategy on empty routing', function () {
5-
expect(buildEmailLinkRedirectUrl({ path: '', authQueryString: '' } as any, '')).toBe('http://localhost/#/verify');
5+
expect(
6+
buildEmailLinkRedirectUrl({ ctx: { path: '', authQueryString: '' } as any, baseUrl: '', intent: 'sign-in' }),
7+
).toBe('http://localhost/#/verify');
68
});
79

810
it('returns the magic link redirect url for components using path based routing ', function () {
9-
expect(buildEmailLinkRedirectUrl({ routing: 'path', authQueryString: '' } as any, '')).toBe(
10-
'http://localhost/verify',
11-
);
11+
expect(
12+
buildEmailLinkRedirectUrl({
13+
ctx: { routing: 'path', authQueryString: '' } as any,
14+
baseUrl: '',
15+
intent: 'sign-in',
16+
}),
17+
).toBe('http://localhost/verify');
1218

13-
expect(buildEmailLinkRedirectUrl({ routing: 'path', path: '/sign-in', authQueryString: '' } as any, '')).toBe(
14-
'http://localhost/sign-in/verify',
15-
);
19+
expect(
20+
buildEmailLinkRedirectUrl({
21+
ctx: { routing: 'path', path: '/sign-in', authQueryString: '' } as any,
22+
baseUrl: '',
23+
intent: 'sign-in',
24+
}),
25+
).toBe('http://localhost/sign-in/verify');
1626

1727
expect(
18-
buildEmailLinkRedirectUrl(
19-
{
28+
buildEmailLinkRedirectUrl({
29+
ctx: {
2030
routing: 'path',
2131
path: '',
2232
authQueryString: 'redirectUrl=https://clerk.com',
2333
} as any,
24-
'',
25-
),
34+
baseUrl: '',
35+
intent: 'sign-in',
36+
}),
2637
).toBe('http://localhost/verify?redirectUrl=https://clerk.com');
2738

2839
expect(
29-
buildEmailLinkRedirectUrl(
30-
{
40+
buildEmailLinkRedirectUrl({
41+
ctx: {
3142
routing: 'path',
3243
path: '/sign-in',
3344
authQueryString: 'redirectUrl=https://clerk.com',
3445
} as any,
35-
'',
36-
),
46+
baseUrl: '',
47+
intent: 'sign-in',
48+
}),
3749
).toBe('http://localhost/sign-in/verify?redirectUrl=https://clerk.com');
3850

3951
expect(
40-
buildEmailLinkRedirectUrl(
41-
{
52+
buildEmailLinkRedirectUrl({
53+
ctx: {
4254
routing: 'path',
4355
path: '/sign-in',
4456
authQueryString: 'redirectUrl=https://clerk.com',
4557
} as any,
46-
'https://accounts.clerk.com/sign-in',
47-
),
58+
baseUrl: 'https://accounts.clerk.com/sign-in',
59+
intent: 'sign-in',
60+
}),
4861
).toBe('http://localhost/sign-in/verify?redirectUrl=https://clerk.com');
4962
});
5063

5164
it('returns the magic link redirect url for components using hash based routing ', function () {
5265
expect(
53-
buildEmailLinkRedirectUrl(
54-
{
66+
buildEmailLinkRedirectUrl({
67+
ctx: {
5568
routing: 'hash',
5669
authQueryString: '',
5770
} as any,
58-
'',
59-
),
71+
baseUrl: '',
72+
intent: 'sign-in',
73+
}),
6074
).toBe('http://localhost/#/verify');
6175

6276
expect(
63-
buildEmailLinkRedirectUrl(
64-
{
77+
buildEmailLinkRedirectUrl({
78+
ctx: {
6579
routing: 'hash',
6680
path: '/sign-in',
6781
authQueryString: null,
6882
} as any,
69-
'',
70-
),
83+
baseUrl: '',
84+
intent: 'sign-in',
85+
}),
7186
).toBe('http://localhost/#/verify');
7287

7388
expect(
74-
buildEmailLinkRedirectUrl(
75-
{
89+
buildEmailLinkRedirectUrl({
90+
ctx: {
7691
routing: 'hash',
7792
path: '',
7893
authQueryString: 'redirectUrl=https://clerk.com',
7994
} as any,
80-
'',
81-
),
95+
baseUrl: '',
96+
intent: 'sign-in',
97+
}),
8298
).toBe('http://localhost/#/verify?redirectUrl=https://clerk.com');
8399

84100
expect(
85-
buildEmailLinkRedirectUrl(
86-
{
101+
buildEmailLinkRedirectUrl({
102+
ctx: {
87103
routing: 'hash',
88104
path: '/sign-in',
89105
authQueryString: 'redirectUrl=https://clerk.com',
90106
} as any,
91-
'',
92-
),
107+
baseUrl: '',
108+
intent: 'sign-in',
109+
}),
93110
).toBe('http://localhost/#/verify?redirectUrl=https://clerk.com');
94111

95112
expect(
96-
buildEmailLinkRedirectUrl(
97-
{
113+
buildEmailLinkRedirectUrl({
114+
ctx: {
98115
routing: 'hash',
99116
path: '/sign-in',
100117
authQueryString: 'redirectUrl=https://clerk.com',
101118
} as any,
102-
'https://accounts.clerk.com/sign-in',
103-
),
119+
baseUrl: 'https://accounts.clerk.com/sign-in',
120+
intent: 'sign-in',
121+
}),
104122
).toBe('http://localhost/#/verify?redirectUrl=https://clerk.com');
105123
});
106124

107125
it('returns the magic link redirect url for components using virtual routing ', function () {
108126
expect(
109-
buildEmailLinkRedirectUrl(
110-
{
127+
buildEmailLinkRedirectUrl({
128+
ctx: {
111129
routing: 'virtual',
112130
authQueryString: 'redirectUrl=https://clerk.com',
113131
} as any,
114-
'https://accounts.clerk.com/sign-in',
115-
),
132+
baseUrl: 'https://accounts.clerk.com/sign-in',
133+
intent: 'sign-in',
134+
}),
116135
).toBe('https://accounts.clerk.com/sign-in#/verify?redirectUrl=https://clerk.com');
117136

118137
expect(
119-
buildEmailLinkRedirectUrl(
120-
{
138+
buildEmailLinkRedirectUrl({
139+
ctx: {
121140
routing: 'virtual',
122141
} as any,
123-
'https://accounts.clerk.com/sign-in',
124-
),
142+
baseUrl: 'https://accounts.clerk.com/sign-in',
143+
intent: 'sign-in',
144+
}),
125145
).toBe('https://accounts.clerk.com/sign-in#/verify');
126146
});
147+
148+
it('returns the magic link redirect url for components using the combined flow based on intent', function () {
149+
expect(
150+
buildEmailLinkRedirectUrl({
151+
ctx: {
152+
routing: 'path',
153+
path: '/sign-up',
154+
isCombinedFlow: true,
155+
} as any,
156+
baseUrl: '',
157+
intent: 'sign-up',
158+
}),
159+
).toBe('http://localhost/sign-up/create/verify');
160+
161+
expect(
162+
buildEmailLinkRedirectUrl({
163+
ctx: {
164+
routing: 'path',
165+
path: '/sign-in',
166+
isCombinedFlow: true,
167+
} as any,
168+
baseUrl: '',
169+
intent: 'sign-in',
170+
}),
171+
).toBe('http://localhost/sign-in/verify');
172+
});
127173
});
128174

129175
describe('buildSSOCallbackURL(ctx, baseUrl)', () => {

‎packages/clerk-js/src/ui/common/redirects.ts

+12-6
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,24 @@ import type { SignInContextType, SignUpContextType, UserProfileContextType } fro
44
export const SSO_CALLBACK_PATH_ROUTE = '/sso-callback';
55
export const MAGIC_LINK_VERIFY_PATH_ROUTE = '/verify';
66

7-
export function buildEmailLinkRedirectUrl(
8-
ctx: SignInContextType | SignUpContextType | UserProfileContextType,
9-
baseUrl: string | undefined = '',
10-
): string {
7+
export function buildEmailLinkRedirectUrl({
8+
ctx,
9+
baseUrl = '',
10+
intent = 'sign-in',
11+
}: {
12+
ctx: SignInContextType | SignUpContextType | UserProfileContextType;
13+
baseUrl?: string;
14+
intent?: 'sign-in' | 'sign-up' | 'profile';
15+
}): string {
1116
const { routing, authQueryString, path } = ctx;
12-
const isCombinedFlow = '__experimental' in ctx && ctx.__experimental?.combinedProps;
17+
const isCombinedFlow = 'isCombinedFlow' in ctx && ctx.isCombinedFlow;
1318
return buildRedirectUrl({
1419
routing,
1520
baseUrl,
1621
authQueryString,
1722
path,
18-
endpoint: isCombinedFlow ? `/create${MAGIC_LINK_VERIFY_PATH_ROUTE}` : MAGIC_LINK_VERIFY_PATH_ROUTE,
23+
endpoint:
24+
isCombinedFlow && intent === 'sign-up' ? `/create${MAGIC_LINK_VERIFY_PATH_ROUTE}` : MAGIC_LINK_VERIFY_PATH_ROUTE,
1925
});
2026
}
2127

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

+3-4
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import type { SignUpContextType } from '../../contexts';
88
import {
99
SignInContext,
1010
SignUpContext,
11-
useOptions,
1211
useSignInContext,
1312
useSignUpContext,
1413
withCoreSessionSwitchGuard,
@@ -39,7 +38,6 @@ function RedirectToSignIn() {
3938
function SignInRoutes(): JSX.Element {
4039
const signInContext = useSignInContext();
4140
const signUpContext = useSignUpContext();
42-
const options = useOptions();
4341

4442
return (
4543
<Flow.Root flow='signIn'>
@@ -78,7 +76,7 @@ function SignInRoutes(): JSX.Element {
7876
redirectUrl='../factor-two'
7977
/>
8078
</Route>
81-
{options.experimental?.combinedFlow && (
79+
{signInContext.isCombinedFlow && (
8280
<Route path='create'>
8381
<Route
8482
path='verify-email-address'
@@ -149,9 +147,10 @@ function SignInRoot() {
149147
const signInContext = useSignInContext();
150148
const normalizedSignUpContext = {
151149
componentName: 'SignUp',
152-
...signInContext.__experimental?.combinedProps,
153150
emailLinkRedirectUrl: signInContext.emailLinkRedirectUrl,
154151
ssoCallbackUrl: signInContext.ssoCallbackUrl,
152+
forceRedirectUrl: signInContext.signUpForceRedirectUrl,
153+
fallbackRedirectUrl: signInContext.signUpFallbackRedirectUrl,
155154
...normalizeRoutingOptions({ routing: signInContext?.routing, path: signInContext?.path }),
156155
} as SignUpContextType;
157156

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export const SignInFactorOneEmailLinkCard = (props: SignInFactorOneEmailLinkCard
4545
const startEmailLinkVerification = () => {
4646
startEmailLinkFlow({
4747
emailAddressId: props.factor.emailAddressId,
48-
redirectUrl: buildEmailLinkRedirectUrl(signInContext, signInUrl),
48+
redirectUrl: buildEmailLinkRedirectUrl({ ctx: signInContext, baseUrl: signInUrl, intent: 'sign-in' }),
4949
})
5050
.then(res => handleVerificationResult(res))
5151
.catch(err => {

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

+7-9
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { getClerkQueryParam, removeClerkQueryParam } from '../../../utils';
99
import type { SignInStartIdentifier } from '../../common';
1010
import { getIdentifierControlDisplayValues, groupIdentifiers, withRedirectToAfterSignIn } from '../../common';
1111
import { buildSSOCallbackURL } from '../../common/redirects';
12-
import { useCoreSignIn, useEnvironment, useOptions, useSignInContext } from '../../contexts';
12+
import { useCoreSignIn, useEnvironment, useSignInContext } from '../../contexts';
1313
import { Col, descriptors, Flow, localizationKeys } from '../../customizables';
1414
import {
1515
Card,
@@ -66,10 +66,8 @@ export function _SignInStart(): JSX.Element {
6666
const { displayConfig, userSettings } = useEnvironment();
6767
const signIn = useCoreSignIn();
6868
const { navigate } = useRouter();
69-
const options = useOptions();
7069
const ctx = useSignInContext();
71-
const { afterSignInUrl, signUpUrl, waitlistUrl } = ctx;
72-
const isCombinedFlow = !!options?.experimental?.combinedFlow;
70+
const { afterSignInUrl, signUpUrl, waitlistUrl, isCombinedFlow } = ctx;
7371
const supportEmail = useSupportEmail();
7472
const identifierAttributes = useMemo<SignInStartIdentifier[]>(
7573
() => groupIdentifiers(userSettings.enabledFirstFactorIdentifiers),
@@ -175,9 +173,13 @@ export function _SignInStart(): JSX.Element {
175173
}
176174

177175
if (clerkStatus === 'sign_up') {
176+
const paramsToForward = new URLSearchParams();
177+
if (organizationTicket) {
178+
paramsToForward.set('__clerk_ticket', organizationTicket);
179+
}
178180
// We explicitly navigate to 'create' in the combined flow to trigger a client-side navigation. Navigating to
179181
// signUpUrl triggers a full page reload when used with the hash router.
180-
navigate(isCombinedFlow ? 'create' : signUpUrl);
182+
void navigate(isCombinedFlow ? `create` : signUpUrl, { searchParams: paramsToForward });
181183
return;
182184
}
183185

@@ -376,10 +378,6 @@ export function _SignInStart(): JSX.Element {
376378
}
377379

378380
clerk.client.signUp[attribute] = identifierField.value;
379-
const paramsToForward = new URLSearchParams();
380-
if (organizationTicket) {
381-
paramsToForward.set('__clerk_ticket', organizationTicket);
382-
}
383381

384382
const redirectUrl = buildSSOCallbackURL(ctx, displayConfig.signUpUrl);
385383
const redirectUrlComplete = ctx.afterSignUpUrl || '/';

‎packages/clerk-js/src/ui/components/SignIn/handleCombinedFlowTransfer.ts

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import type { LoadedClerk, SignUpModes, SignUpResource } from '@clerk/types';
22

33
import { SIGN_UP_MODES } from '../../../core/constants';
4+
import type { RouteContextValue } from '../../router/RouteContext';
45
import { completeSignUpFlow } from '../SignUp/util';
56

67
type HandleCombinedFlowTransferProps = {
78
identifierAttribute: 'emailAddress' | 'phoneNumber' | 'username';
89
identifierValue: string;
910
signUpMode: SignUpModes;
10-
navigate: (to: string) => Promise<unknown>;
11+
navigate: RouteContextValue['navigate'];
1112
organizationTicket?: string;
1213
afterSignUpUrl: string;
1314
clerk: LoadedClerk;
@@ -78,7 +79,7 @@ export function handleCombinedFlowTransfer({
7879
.catch(err => handleError(err));
7980
}
8081

81-
return navigate(`create?${paramsToForward.toString()}`);
82+
return navigate(`create`, { searchParams: paramsToForward });
8283
}
8384

8485
function hasOptionalFields(signUp: SignUpResource) {

‎packages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx

+9-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useClerk } from '@clerk/shared/react';
22
import React, { useEffect, useMemo } from 'react';
33

4-
import { SignInContext, useCoreSignUp, useEnvironment, useOptions, useSignUpContext } from '../../contexts';
4+
import { SignInContext, useCoreSignUp, useEnvironment, useSignUpContext } from '../../contexts';
55
import { descriptors, Flex, Flow, localizationKeys, useLocalizations } from '../../customizables';
66
import {
77
Card,
@@ -32,11 +32,16 @@ function _SignUpContinue() {
3232
const { displayConfig, userSettings } = useEnvironment();
3333
const { attributes, usernameSettings } = userSettings;
3434
const { t, locale } = useLocalizations();
35-
const { afterSignUpUrl, signInUrl, unsafeMetadata, initialValues = {} } = useSignUpContext();
35+
const {
36+
afterSignUpUrl,
37+
signInUrl,
38+
unsafeMetadata,
39+
initialValues = {},
40+
isCombinedFlow: _isCombinedFlow,
41+
} = useSignUpContext();
3642
const signUp = useCoreSignUp();
37-
const options = useOptions();
3843
const isWithinSignInContext = !!React.useContext(SignInContext);
39-
const isCombinedFlow = !!(options.experimental?.combinedFlow && !!isWithinSignInContext);
44+
const isCombinedFlow = !!(_isCombinedFlow && !!isWithinSignInContext);
4045
const isProgressiveSignUp = userSettings.signUp.progressive;
4146
const [activeCommIdentifierType, setActiveCommIdentifierType] = React.useState<ActiveIdentifier>(
4247
getInitialActiveIdentifier(attributes, userSettings.signUp.progressive),

‎packages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import React from 'react';
44
import { ERROR_CODES, SIGN_UP_MODES } from '../../../core/constants';
55
import { getClerkQueryParam, removeClerkQueryParam } from '../../../utils/getClerkQueryParam';
66
import { withRedirectToAfterSignUp } from '../../common';
7-
import { SignInContext, useCoreSignUp, useEnvironment, useOptions, useSignUpContext } from '../../contexts';
7+
import { SignInContext, useCoreSignUp, useEnvironment, useSignUpContext } from '../../contexts';
88
import { descriptors, Flex, Flow, localizationKeys, useAppearance, useLocalizations } from '../../customizables';
99
import {
1010
Card,
@@ -39,10 +39,9 @@ function _SignUpStart(): JSX.Element {
3939
const { attributes } = userSettings;
4040
const { setActive } = useClerk();
4141
const ctx = useSignUpContext();
42-
const options = useOptions();
4342
const isWithinSignInContext = !!React.useContext(SignInContext);
4443
const { afterSignUpUrl, signInUrl, unsafeMetadata } = ctx;
45-
const isCombinedFlow = !!(options.experimental?.combinedFlow && !!isWithinSignInContext);
44+
const isCombinedFlow = !!(ctx.isCombinedFlow && !!isWithinSignInContext);
4645
const [activeCommIdentifierType, setActiveCommIdentifierType] = React.useState<ActiveIdentifier>(
4746
getInitialActiveIdentifier(attributes, userSettings.signUp.progressive),
4847
);

‎packages/clerk-js/src/ui/components/UserProfile/VerifyWithLink.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ export const VerifyWithLink = (props: VerifyWithLinkProps) => {
3737
const { routing } = profileContext;
3838
const baseUrl = routing === 'virtual' ? displayConfig.userProfileUrl : '';
3939

40-
const redirectUrl = buildEmailLinkRedirectUrl(profileContext, baseUrl);
40+
const redirectUrl = buildEmailLinkRedirectUrl({ ctx: profileContext, baseUrl, intent: 'profile' });
4141
startEmailLinkFlow({ redirectUrl })
4242
.then(() => nextStep())
4343
.catch(err => handleError(err, [], card.setError));

‎packages/clerk-js/src/ui/contexts/components/SignIn.ts

+12-8
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { useClerk } from '@clerk/shared/react';
2+
import { isAbsoluteUrl } from '@clerk/shared/url';
23
import { createContext, useContext, useMemo } from 'react';
34

45
import { SIGN_IN_INITIAL_VALUE_KEYS } from '../../../core/constants';
@@ -24,6 +25,7 @@ export type SignInContextType = SignInCtx & {
2425
waitlistUrl: string;
2526
emailLinkRedirectUrl: string;
2627
ssoCallbackUrl: string;
28+
isCombinedFlow: boolean;
2729
};
2830

2931
export const SignInContext = createContext<SignInCtx | null>(null);
@@ -35,14 +37,17 @@ export const useSignInContext = (): SignInContextType => {
3537
const { queryParams, queryString } = useRouter();
3638
const options = useOptions();
3739
const clerk = useClerk();
38-
const isCombinedFlow = options.experimental?.combinedFlow;
3940

4041
if (context === null || context.componentName !== 'SignIn') {
4142
throw new Error(`Clerk: useSignInContext called outside of the mounted SignIn component.`);
4243
}
4344

44-
const { componentName, mode, ..._ctx } = context;
45-
const ctx = _ctx.__experimental?.combinedProps ? { ..._ctx, ..._ctx.__experimental?.combinedProps } : _ctx;
45+
const isCombinedFlow =
46+
Boolean(!options.signUpUrl && options.signInUrl && !isAbsoluteUrl(options.signInUrl)) ||
47+
context.withSignUp ||
48+
false;
49+
50+
const { componentName, mode, ...ctx } = context;
4651
const initialValuesFromQueryParams = useMemo(
4752
() => getInitialValuesFromQueryParams(queryString, SIGN_IN_INITIAL_VALUE_KEYS),
4853
[],
@@ -82,16 +87,14 @@ export const useSignInContext = (): SignInContextType => {
8287
baseUrl: signUpUrl,
8388
authQueryString: '',
8489
path: ctx.path,
85-
endpoint: options.experimental?.combinedFlow
86-
? '/create' + MAGIC_LINK_VERIFY_PATH_ROUTE
87-
: MAGIC_LINK_VERIFY_PATH_ROUTE,
90+
endpoint: isCombinedFlow ? '/create' + MAGIC_LINK_VERIFY_PATH_ROUTE : MAGIC_LINK_VERIFY_PATH_ROUTE,
8891
});
8992
const ssoCallbackUrl = buildRedirectUrl({
9093
routing: ctx.routing,
9194
baseUrl: signUpUrl,
9295
authQueryString: '',
9396
path: ctx.path,
94-
endpoint: options.experimental?.combinedFlow ? '/create' + SSO_CALLBACK_PATH_ROUTE : SSO_CALLBACK_PATH_ROUTE,
97+
endpoint: isCombinedFlow ? '/create' + SSO_CALLBACK_PATH_ROUTE : SSO_CALLBACK_PATH_ROUTE,
9598
});
9699

97100
if (isCombinedFlow) {
@@ -119,5 +122,6 @@ export const useSignInContext = (): SignInContextType => {
119122
queryParams,
120123
initialValues: { ...ctx.initialValues, ...initialValuesFromQueryParams },
121124
authQueryString: redirectUrls.toSearchParams().toString(),
122-
} as SignInContextType;
125+
isCombinedFlow,
126+
};
123127
};

‎packages/clerk-js/src/ui/contexts/components/SignUp.ts

+6-4
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { useClerk } from '@clerk/shared/react';
2+
import { isAbsoluteUrl } from '@clerk/shared/url';
23
import { createContext, useContext, useMemo } from 'react';
34

45
import { SIGN_UP_INITIAL_VALUE_KEYS } from '../../../core/constants';
@@ -21,6 +22,7 @@ export type SignUpContextType = SignUpCtx & {
2122
afterSignUpUrl: string;
2223
afterSignInUrl: string;
2324
waitlistUrl: string;
25+
isCombinedFlow: boolean;
2426
emailLinkRedirectUrl: string;
2527
ssoCallbackUrl: string;
2628
};
@@ -34,6 +36,7 @@ export const useSignUpContext = (): SignUpContextType => {
3436
const { queryParams, queryString } = useRouter();
3537
const options = useOptions();
3638
const clerk = useClerk();
39+
const isCombinedFlow = Boolean(!options.signUpUrl && options.signInUrl && !isAbsoluteUrl(options.signInUrl));
3740

3841
const initialValuesFromQueryParams = useMemo(
3942
() => getInitialValuesFromQueryParams(queryString, SIGN_UP_INITIAL_VALUE_KEYS),
@@ -81,9 +84,7 @@ export const useSignUpContext = (): SignUpContextType => {
8184
baseUrl: signUpUrl,
8285
authQueryString: '',
8386
path: ctx.path,
84-
endpoint: options.experimental?.combinedFlow
85-
? '/create' + MAGIC_LINK_VERIFY_PATH_ROUTE
86-
: MAGIC_LINK_VERIFY_PATH_ROUTE,
87+
endpoint: isCombinedFlow ? '/create' + MAGIC_LINK_VERIFY_PATH_ROUTE : MAGIC_LINK_VERIFY_PATH_ROUTE,
8788
});
8889
const ssoCallbackUrl =
8990
ctx.ssoCallbackUrl ??
@@ -92,7 +93,7 @@ export const useSignUpContext = (): SignUpContextType => {
9293
baseUrl: signUpUrl,
9394
authQueryString: '',
9495
path: ctx.path,
95-
endpoint: options.experimental?.combinedFlow ? '/create' + SSO_CALLBACK_PATH_ROUTE : SSO_CALLBACK_PATH_ROUTE,
96+
endpoint: isCombinedFlow ? '/create' + SSO_CALLBACK_PATH_ROUTE : SSO_CALLBACK_PATH_ROUTE,
9697
});
9798

9899
// TODO: Avoid building this url again to remove duplicate code. Get it from window.Clerk instead.
@@ -113,5 +114,6 @@ export const useSignUpContext = (): SignUpContextType => {
113114
queryParams,
114115
initialValues: { ...ctx.initialValues, ...initialValuesFromQueryParams },
115116
authQueryString: redirectUrls.toSearchParams().toString(),
117+
isCombinedFlow,
116118
};
117119
};

‎packages/clerk-js/src/ui/router/Route.tsx

+6-3
Original file line numberDiff line numberDiff line change
@@ -58,8 +58,11 @@ export function Route(props: RouteProps): JSX.Element | null {
5858

5959
const [indexPath, fullPath] = newPaths(router.indexPath, router.fullPath, props.path, props.index);
6060

61-
const resolve = (to: string) => {
61+
const resolve = (to: string, { searchParams }: { searchParams?: URLSearchParams } = {}) => {
6262
const url = new URL(to, window.location.origin + fullPath + '/');
63+
if (searchParams) {
64+
url.search = searchParams.toString();
65+
}
6366
url.pathname = trimTrailingSlash(url.pathname);
6467
return url;
6568
};
@@ -109,8 +112,8 @@ export function Route(props: RouteProps): JSX.Element | null {
109112
return newGetMatchData(path, index) ? true : false;
110113
},
111114
resolve: resolve,
112-
navigate: (to: string) => {
113-
const toURL = resolve(to);
115+
navigate: (to: string, { searchParams } = {}) => {
116+
const toURL = resolve(to, { searchParams });
114117
return router.baseNavigate(toURL);
115118
},
116119
refresh: router.refresh,

‎packages/clerk-js/src/ui/router/RouteContext.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export interface RouteContextValue {
99
currentPath: string;
1010
matches: (path?: string, index?: boolean) => boolean;
1111
baseNavigate: (toURL: URL) => Promise<unknown>;
12-
navigate: (to: string) => Promise<unknown>;
12+
navigate: (to: string, options?: { searchParams?: URLSearchParams }) => Promise<unknown>;
1313
resolve: (to: string) => URL;
1414
refresh: () => void;
1515
params: { [key: string]: string };

‎packages/react/src/components/SignInButton.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ export const SignInButton = withClerk(
1414
signUpForceRedirectUrl,
1515
mode,
1616
initialValues,
17+
withSignUp,
1718
...rest
1819
} = props;
1920
children = normalizeWithDefaultValue(children, 'Sign in');
@@ -26,6 +27,7 @@ export const SignInButton = withClerk(
2627
signUpFallbackRedirectUrl,
2728
signUpForceRedirectUrl,
2829
initialValues,
30+
withSignUp,
2931
};
3032

3133
if (mode === 'modal') {

‎packages/react/src/types.ts

+1
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,7 @@ export type SignInButtonProps = ButtonProps &
122122
| 'signUpForceRedirectUrl'
123123
| 'signUpFallbackRedirectUrl'
124124
| 'initialValues'
125+
| 'withSignUp'
125126
>;
126127

127128
export type SignUpButtonProps = {

‎packages/types/src/clerk.ts

+4-44
Original file line numberDiff line numberDiff line change
@@ -894,50 +894,6 @@ export type RoutingOptions =
894894
| { path?: never; routing?: Extract<RoutingStrategy, 'hash' | 'virtual'> };
895895

896896
export type SignInProps = RoutingOptions & {
897-
/**
898-
* Full URL or path to navigate after successful sign in.
899-
* This value has precedence over other redirect props, environment variables or search params.
900-
* Use this prop to override the redirect URL when needed.
901-
* @default undefined
902-
*/
903-
forceRedirectUrl?: string | null;
904-
/**
905-
* Full URL or path to navigate after successful sign in.
906-
* This value is used when no other redirect props, environment variables or search params are present.
907-
* @default undefined
908-
*/
909-
fallbackRedirectUrl?: string | null;
910-
/**
911-
* Full URL or path to for the sign up process.
912-
* Used to fill the "Sign up" link in the SignUp component.
913-
*/
914-
signUpUrl?: string;
915-
/**
916-
* Customisation options to fully match the Clerk components to your own brand.
917-
* These options serve as overrides and will be merged with the global `appearance`
918-
* prop of ClerkProvider (if one is provided)
919-
*/
920-
appearance?: SignInTheme;
921-
/**
922-
* Initial values that are used to prefill the sign in form.
923-
*/
924-
initialValues?: SignInInitialValues;
925-
/**
926-
* Enable experimental flags to gain access to new features. These flags are not guaranteed to be stable and may change drastically in between patch or minor versions.
927-
*/
928-
__experimental?: Record<string, any> & { newComponents?: boolean; combinedProps?: SignInCombinedProps };
929-
/**
930-
* Full URL or path to for the waitlist process.
931-
* Used to fill the "Join waitlist" link in the SignUp component.
932-
*/
933-
waitlistUrl?: string;
934-
} & TransferableOption &
935-
SignUpForceRedirectUrl &
936-
SignUpFallbackRedirectUrl &
937-
LegacyRedirectProps &
938-
AfterSignOutUrl;
939-
940-
export type SignInCombinedProps = RoutingOptions & {
941897
/**
942898
* Full URL or path to navigate after successful sign in.
943899
* This value has precedence over other redirect props, environment variables or search params.
@@ -984,6 +940,10 @@ export type SignInCombinedProps = RoutingOptions & {
984940
* Additional arbitrary metadata to be stored alongside the User object
985941
*/
986942
unsafeMetadata?: SignUpUnsafeMetadata;
943+
/**
944+
* Enable sign-in-or-up flow for `<SignIn />` component instance.
945+
*/
946+
withSignUp?: boolean;
987947
} & TransferableOption &
988948
SignUpForceRedirectUrl &
989949
SignUpFallbackRedirectUrl &

‎packages/vue/src/components/SignInButton.ts

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import type { SignInProps } from '@clerk/types';
2+
import { defineComponent, h } from 'vue';
3+
4+
import { useClerk } from '../composables/useClerk';
5+
import { assertSingleChild, normalizeWithDefaultValue } from '../utils';
6+
7+
type SignInButtonProps = Pick<
8+
SignInProps,
9+
| 'fallbackRedirectUrl'
10+
| 'forceRedirectUrl'
11+
| 'signUpForceRedirectUrl'
12+
| 'signUpFallbackRedirectUrl'
13+
| 'initialValues'
14+
| 'withSignUp'
15+
>;
16+
17+
export const SignInButton = defineComponent(
18+
(
19+
props: SignInButtonProps & {
20+
mode?: 'modal' | 'redirect';
21+
},
22+
{ slots, attrs },
23+
) => {
24+
const clerk = useClerk();
25+
26+
function clickHandler() {
27+
const { mode, ...opts } = props;
28+
29+
if (mode === 'modal') {
30+
return clerk.value?.openSignIn(opts);
31+
}
32+
33+
const { withSignUp, ...redirectOpts } = opts;
34+
35+
void clerk.value?.redirectToSignIn({
36+
...redirectOpts,
37+
signInFallbackRedirectUrl: props.fallbackRedirectUrl,
38+
signInForceRedirectUrl: props.forceRedirectUrl,
39+
});
40+
}
41+
42+
return () => {
43+
const children = normalizeWithDefaultValue(slots.default?.(), 'Sign in');
44+
const child = assertSingleChild(children, 'SignInButton');
45+
return h(child, {
46+
...attrs,
47+
onClick: clickHandler,
48+
});
49+
};
50+
},
51+
{
52+
props: [
53+
'signUpForceRedirectUrl',
54+
'signUpFallbackRedirectUrl',
55+
'fallbackRedirectUrl',
56+
'forceRedirectUrl',
57+
'mode',
58+
'initialValues',
59+
'withSignUp',
60+
],
61+
},
62+
);

‎packages/vue/src/components/SignInButton.vue

+9-2
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,12 @@ import { assertSingleChild, normalizeWithDefaultValue } from '../utils';
66
77
type SignInButtonProps = Pick<
88
SignInProps,
9-
'fallbackRedirectUrl' | 'forceRedirectUrl' | 'signUpForceRedirectUrl' | 'signUpFallbackRedirectUrl' | 'initialValues'
9+
| 'fallbackRedirectUrl'
10+
| 'forceRedirectUrl'
11+
| 'signUpForceRedirectUrl'
12+
| 'signUpFallbackRedirectUrl'
13+
| 'initialValues'
14+
| 'withSignUp'
1015
> & {
1116
mode?: 'modal' | 'redirect';
1217
};
@@ -29,8 +34,10 @@ function clickHandler() {
2934
return clerk.value?.openSignIn(opts);
3035
}
3136
37+
const { withSignUp, ...redirectOpts } = opts;
38+
3239
void clerk.value?.redirectToSignIn({
33-
...opts,
40+
...redirectOpts,
3441
signInFallbackRedirectUrl: props.fallbackRedirectUrl,
3542
signInForceRedirectUrl: props.forceRedirectUrl,
3643
});

0 commit comments

Comments
 (0)
Please sign in to comment.