Skip to content

Commit a4cddf1

Browse files
nikosdouvlisnikosdouvlis
committed
feat(clerk-js): add experimental SWR initialization for faster page loads
Clerk initialization blocks on /client (slow server roundtrip). This adds an opt-in experimental.swr flag that lets clerk-js initialize immediately from a cached client snapshot, validated by a fast token check, then silently swap to fresh /client data in the background. The flow: read cached client from localStorage, check if the __session cookie JWT is still valid (SSR apps always have one from middleware refresh). If valid, emit ready instantly with zero network. If expired, call getToken (edge-routed, fast) to validate session liveness. If revoked (4xx), discard cache and fall through to normal flow. If transient error, emit degraded with cached data. Cache is scoped by publishable key, versioned for schema safety, strips JWTs and signIn/signUp state before saving, and clears on sign-out (including cross-tab via BroadcastChannel).
1 parent 737d11d commit a4cddf1

File tree

8 files changed

+1002
-5
lines changed

8 files changed

+1002
-5
lines changed

‎integration/presets/envs.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,11 @@ const withEmailCodes_destroy_client = withEmailCodes
112112
.clone()
113113
.setEnvVariable('public', 'EXPERIMENTAL_PERSIST_CLIENT', 'false');
114114

115+
const withEmailCodes_swr = withEmailCodes
116+
.clone()
117+
.setId('withEmailCodes_swr')
118+
.setEnvVariable('public', 'EXPERIMENTAL_SWR', 'true');
119+
115120
const withSharedUIVariant = withEmailCodes
116121
.clone()
117122
.setId('withSharedUIVariant')
@@ -257,6 +262,7 @@ export const envs = {
257262
withDynamicKeys,
258263
withEmailCodes,
259264
withEmailCodes_destroy_client,
265+
withEmailCodes_swr,
260266
withEmailCodesProxy,
261267
withEmailCodesQuickstart,
262268
withEmailLinks,

‎integration/templates/react-vite/src/main.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ const Root = () => {
4343
persistClient: import.meta.env.VITE_EXPERIMENTAL_PERSIST_CLIENT
4444
? import.meta.env.VITE_EXPERIMENTAL_PERSIST_CLIENT === 'true'
4545
: undefined,
46+
swr: import.meta.env.VITE_EXPERIMENTAL_SWR ? import.meta.env.VITE_EXPERIMENTAL_SWR === 'true' : undefined,
4647
}}
4748
>
4849
<Outlet />

‎integration/tests/swr.test.ts‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import type { Page } from '@playwright/test';
2+
import { expect, test } from '@playwright/test';
3+
4+
import { appConfigs } from '../presets';
5+
import type { FakeUser } from '../testUtils';
6+
import { createTestUtils, testAgainstRunningApps } from '../testUtils';
7+
8+
// SafeLocalStorage prepends '__clerk_' to all keys
9+
const SWR_CACHE_KEY_PREFIX = '__clerk_swr_client_';
10+
11+
async function hasSWRCache(page: Page): Promise<boolean> {
12+
return page.evaluate((prefix: string) => {
13+
for (let i = 0; i < localStorage.length; i++) {
14+
const key = localStorage.key(i);
15+
if (key && key.startsWith(prefix)) {
16+
return true;
17+
}
18+
}
19+
return false;
20+
}, SWR_CACHE_KEY_PREFIX);
21+
}
22+
23+
testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes_swr] })('swr initialization @generic', ({ app }) => {
24+
test.describe.configure({ mode: 'serial' });
25+
26+
let fakeUser: FakeUser;
27+
28+
test.beforeAll(async () => {
29+
const u = createTestUtils({ app });
30+
fakeUser = u.services.users.createFakeUser();
31+
await u.services.users.createBapiUser(fakeUser);
32+
});
33+
34+
test.afterAll(async () => {
35+
await fakeUser.deleteIfExists();
36+
await app.teardown();
37+
});
38+
39+
test('signed-in user loads from cache on second visit (page reload)', async ({ page, context }) => {
40+
const u = createTestUtils({ app, page, context });
41+
42+
// First visit: sign in normally
43+
await u.po.signIn.goTo();
44+
await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
45+
await u.po.expect.toBeSignedIn();
46+
47+
expect(await hasSWRCache(page)).toBe(true);
48+
49+
// Second visit: should load from cache
50+
await page.reload();
51+
await u.po.clerk.toBeLoaded();
52+
await u.po.expect.toBeSignedIn();
53+
});
54+
55+
test('cache is cleared on sign-out', async ({ page, context }) => {
56+
const u = createTestUtils({ app, page, context });
57+
58+
await u.po.signIn.goTo();
59+
await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
60+
await u.po.expect.toBeSignedIn();
61+
62+
expect(await hasSWRCache(page)).toBe(true);
63+
64+
await page.evaluate(async () => {
65+
await window.Clerk.signOut();
66+
});
67+
await u.po.expect.toBeSignedOut();
68+
69+
expect(await hasSWRCache(page)).toBe(false);
70+
});
71+
72+
test('revoked session falls back to normal flow', async ({ page, context }) => {
73+
const u = createTestUtils({ app, page, context });
74+
75+
await u.po.signIn.goTo();
76+
await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
77+
await u.po.expect.toBeSignedIn();
78+
79+
const sessionId = await page.evaluate(() => window.Clerk?.session?.id);
80+
expect(sessionId).toBeTruthy();
81+
expect(await hasSWRCache(page)).toBe(true);
82+
83+
// Revoke session server-side, then reload
84+
await u.services.clerk.sessions.revokeSession(sessionId!);
85+
await page.reload();
86+
await u.po.clerk.toBeLoaded();
87+
88+
await u.po.expect.toBeSignedOut();
89+
});
90+
});

0 commit comments

Comments
 (0)