Skip to content

Commit cc0987a

Browse files
wobsorianowobsoriano
committed
feat(react-router): Add support for keyless mode (#7794)
1 parent dca634a commit cc0987a

19 files changed

Lines changed: 593 additions & 228 deletions

File tree

‎.changeset/curvy-jobs-pump.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@clerk/react-router": minor
3+
---
4+
5+
Introduce Keyless quickstart for React Router. This allows the Clerk SDK to be used without having to sign up and paste your keys manually.

‎integration/testUtils/keylessHelpers.ts‎

Lines changed: 129 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
1-
import type { Page } from '@playwright/test';
1+
import type { BrowserContext, Page } from '@playwright/test';
2+
import { expect } from '@playwright/test';
3+
4+
import type { Application } from '../models/application';
5+
import { createTestUtils } from './index';
26

37
/**
48
* Mocks the environment API call to return a claimed instance.
@@ -18,3 +22,127 @@ export const mockClaimedInstanceEnvironmentCall = async (page: Page): Promise<vo
1822
await route.fulfill({ response, json: newJson });
1923
});
2024
};
25+
26+
/**
27+
* Tests that the keyless popover can be toggled and the claim link opens the dashboard.
28+
*/
29+
export async function testToggleCollapsePopoverAndClaim({
30+
page,
31+
context,
32+
app,
33+
dashboardUrl,
34+
framework,
35+
}: {
36+
page: Page;
37+
context: BrowserContext;
38+
app: Application;
39+
dashboardUrl: string;
40+
framework: string;
41+
}): Promise<void> {
42+
const u = createTestUtils({ app, page, context });
43+
await u.page.goToAppHome();
44+
await u.page.waitForClerkJsLoaded();
45+
await u.po.expect.toBeSignedOut();
46+
47+
await u.po.keylessPopover.waitForMounted();
48+
49+
expect(await u.po.keylessPopover.isExpanded()).toBe(false);
50+
await u.po.keylessPopover.toggle();
51+
expect(await u.po.keylessPopover.isExpanded()).toBe(true);
52+
53+
const claim = u.po.keylessPopover.promptsToClaim();
54+
55+
const [newPage] = await Promise.all([context.waitForEvent('page'), claim.click()]);
56+
57+
await newPage.waitForLoadState();
58+
59+
await newPage.waitForURL(url => {
60+
const signInForceRedirectUrl = url.searchParams.get('sign_in_force_redirect_url');
61+
const signUpForceRedirectUrl = url.searchParams.get('sign_up_force_redirect_url');
62+
63+
const signInHasRequiredParams =
64+
signInForceRedirectUrl?.includes(`${dashboardUrl}apps/claim`) &&
65+
signInForceRedirectUrl?.includes('token=') &&
66+
signInForceRedirectUrl?.includes(`framework=${framework}`);
67+
68+
const signUpRegularCase =
69+
signUpForceRedirectUrl?.includes(`${dashboardUrl}apps/claim`) &&
70+
signUpForceRedirectUrl?.includes('token=') &&
71+
signUpForceRedirectUrl?.includes(`framework=${framework}`);
72+
73+
const signUpPrepareAccountCase =
74+
signUpForceRedirectUrl?.startsWith(`${dashboardUrl}prepare-account`) &&
75+
signUpForceRedirectUrl?.includes(encodeURIComponent('apps/claim')) &&
76+
signUpForceRedirectUrl?.includes(encodeURIComponent('token=')) &&
77+
signUpForceRedirectUrl?.includes(encodeURIComponent(`framework=${framework}`));
78+
79+
const signUpHasRequiredParams = signUpRegularCase || signUpPrepareAccountCase;
80+
81+
return url.pathname === '/apps/claim/sign-in' && signInHasRequiredParams && signUpHasRequiredParams;
82+
});
83+
}
84+
85+
/**
86+
* Tests that a claimed application with missing explicit keys shows the popover expanded
87+
* with a prompt to get keys from the dashboard.
88+
*/
89+
export async function testClaimedAppWithMissingKeys({
90+
page,
91+
context,
92+
app,
93+
dashboardUrl,
94+
}: {
95+
page: Page;
96+
context: BrowserContext;
97+
app: Application;
98+
dashboardUrl: string;
99+
}): Promise<void> {
100+
await mockClaimedInstanceEnvironmentCall(page);
101+
const u = createTestUtils({ app, page, context });
102+
await u.page.goToAppHome();
103+
await u.page.waitForClerkJsLoaded();
104+
105+
await u.po.keylessPopover.waitForMounted();
106+
expect(await u.po.keylessPopover.isExpanded()).toBe(true);
107+
await expect(u.po.keylessPopover.promptToUseClaimedKeys()).toBeVisible();
108+
109+
const [newPage] = await Promise.all([
110+
context.waitForEvent('page'),
111+
u.po.keylessPopover.promptToUseClaimedKeys().click(),
112+
]);
113+
114+
await newPage.waitForLoadState();
115+
await newPage.waitForURL(url => {
116+
return url.href.startsWith(`${dashboardUrl}sign-in?redirect_url=${encodeURIComponent(dashboardUrl)}apps%2Fapp_`);
117+
});
118+
}
119+
120+
/**
121+
* Tests that the keyless popover is removed after adding keys to .env and restarting the dev server.
122+
*/
123+
export async function testKeylessRemovedAfterEnvAndRestart({
124+
page,
125+
context,
126+
app,
127+
}: {
128+
page: Page;
129+
context: BrowserContext;
130+
app: Application;
131+
}): Promise<void> {
132+
const u = createTestUtils({ app, page, context });
133+
await u.page.goToAppHome();
134+
135+
await u.po.keylessPopover.waitForMounted();
136+
expect(await u.po.keylessPopover.isExpanded()).toBe(false);
137+
138+
// Copy keys from keyless.json to .env
139+
await app.keylessToEnv();
140+
141+
// Restart the dev server to pick up new env vars (Vite doesn't hot-reload .env)
142+
await app.restart();
143+
144+
await u.page.goToAppHome();
145+
146+
// Keyless popover should no longer be present since we now have explicit keys
147+
await u.po.keylessPopover.waitForUnmounted();
148+
}

‎integration/tests/next-quickstart-keyless.test.ts‎

Lines changed: 2 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,12 @@
1-
import type { Page } from '@playwright/test';
21
import { expect, test } from '@playwright/test';
32

43
import type { Application } from '../models/application';
54
import { appConfigs } from '../presets';
65
import { createTestUtils } from '../testUtils';
6+
import { mockClaimedInstanceEnvironmentCall, testToggleCollapsePopoverAndClaim } from '../testUtils/keylessHelpers';
77

88
const commonSetup = appConfigs.next.appRouterQuickstart.clone();
99

10-
const mockClaimedInstanceEnvironmentCall = async (page: Page) => {
11-
await page.route('*/**/v1/environment*', async route => {
12-
const response = await route.fetch();
13-
const json = await response.json();
14-
const newJson = {
15-
...json,
16-
auth_config: {
17-
...json.auth_config,
18-
claimed_at: Date.now(),
19-
},
20-
};
21-
await route.fulfill({ response, json: newJson });
22-
});
23-
};
24-
2510
test.describe('Keyless mode @quickstart', () => {
2611
test.describe.configure({ mode: 'serial' });
2712

@@ -71,47 +56,7 @@ test.describe('Keyless mode @quickstart', () => {
7156
});
7257

7358
test('Toggle collapse popover and claim.', async ({ page, context }) => {
74-
const u = createTestUtils({ app, page, context });
75-
await u.page.goToAppHome();
76-
await u.page.waitForClerkJsLoaded();
77-
await u.po.expect.toBeSignedOut();
78-
79-
await u.po.keylessPopover.waitForMounted();
80-
81-
expect(await u.po.keylessPopover.isExpanded()).toBe(false);
82-
await u.po.keylessPopover.toggle();
83-
expect(await u.po.keylessPopover.isExpanded()).toBe(true);
84-
85-
const claim = await u.po.keylessPopover.promptsToClaim();
86-
87-
const [newPage] = await Promise.all([context.waitForEvent('page'), claim.click()]);
88-
89-
await newPage.waitForLoadState();
90-
91-
await newPage.waitForURL(url => {
92-
const signInForceRedirectUrl = url.searchParams.get('sign_in_force_redirect_url');
93-
const signUpForceRedirectUrl = url.searchParams.get('sign_up_force_redirect_url');
94-
95-
const signInHasRequiredParams =
96-
signInForceRedirectUrl?.includes(`${dashboardUrl}apps/claim`) &&
97-
signInForceRedirectUrl?.includes('token=') &&
98-
signInForceRedirectUrl?.includes('framework=nextjs');
99-
100-
const signUpRegularCase =
101-
signUpForceRedirectUrl?.includes(`${dashboardUrl}apps/claim`) &&
102-
signUpForceRedirectUrl?.includes('token=') &&
103-
signUpForceRedirectUrl?.includes('framework=nextjs');
104-
105-
const signUpPrepareAccountCase =
106-
signUpForceRedirectUrl?.startsWith(`${dashboardUrl}prepare-account`) &&
107-
signUpForceRedirectUrl?.includes(encodeURIComponent('apps/claim')) &&
108-
signUpForceRedirectUrl?.includes(encodeURIComponent('token=')) &&
109-
signUpForceRedirectUrl?.includes(encodeURIComponent('framework=nextjs'));
110-
111-
const signUpHasRequiredParams = signUpRegularCase || signUpPrepareAccountCase;
112-
113-
return url.pathname === '/apps/claim/sign-in' && signInHasRequiredParams && signUpHasRequiredParams;
114-
});
59+
await testToggleCollapsePopoverAndClaim({ page, context, app, dashboardUrl, framework: 'nextjs' });
11560
});
11661

11762
test('Lands on claimed application with missing explicit keys, expanded by default, click to get keys from dashboard.', async ({

‎integration/tests/react-router/keyless.test.ts‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import { test } from '@playwright/test';
2+
3+
import type { Application } from '../../models/application';
4+
import { appConfigs } from '../../presets';
5+
import {
6+
testClaimedAppWithMissingKeys,
7+
testKeylessRemovedAfterEnvAndRestart,
8+
testToggleCollapsePopoverAndClaim,
9+
} from '../../testUtils/keylessHelpers';
10+
11+
const commonSetup = appConfigs.reactRouter.reactRouterNode.clone();
12+
13+
test.describe('Keyless mode @react-router', () => {
14+
test.describe.configure({ mode: 'serial' });
15+
test.setTimeout(90_000);
16+
17+
test.use({
18+
extraHTTPHeaders: {
19+
'x-vercel-protection-bypass': process.env.VERCEL_AUTOMATION_BYPASS_SECRET || '',
20+
},
21+
});
22+
23+
let app: Application;
24+
let dashboardUrl = 'https://dashboard.clerk.com/';
25+
26+
test.beforeAll(async () => {
27+
app = await commonSetup.commit();
28+
await app.setup();
29+
await app.withEnv(appConfigs.envs.withKeyless);
30+
if (appConfigs.envs.withKeyless.privateVariables.get('CLERK_API_URL')?.includes('clerkstage')) {
31+
dashboardUrl = 'https://dashboard.clerkstage.dev/';
32+
}
33+
await app.dev();
34+
});
35+
36+
test.afterAll(async () => {
37+
// Keep files for debugging
38+
await app?.teardown();
39+
});
40+
41+
test('Toggle collapse popover and claim.', async ({ page, context }) => {
42+
await testToggleCollapsePopoverAndClaim({ page, context, app, dashboardUrl, framework: 'react-router' });
43+
});
44+
45+
test('Lands on claimed application with missing explicit keys, expanded by default, click to get keys from dashboard.', async ({
46+
page,
47+
context,
48+
}) => {
49+
await testClaimedAppWithMissingKeys({ page, context, app, dashboardUrl });
50+
});
51+
52+
test('Keyless popover is removed after adding keys to .env and restarting.', async ({ page, context }) => {
53+
await testKeylessRemovedAfterEnvAndRestart({ page, context, app });
54+
});
55+
});

0 commit comments

Comments
 (0)