Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/remove-chips-build-variant.md
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
---
"@clerk/clerk-js": patch
"@clerk/shared": patch
---

Remove CHIPS build variant and use `partitioned_cookies` environment flag from the Clerk API to control partitioned cookie behavior at runtime.
1 change: 0 additions & 1 deletion packages/clerk-js/package.json
Original file line numberDiff line numberDiff line change
Expand Up@@ -42,7 +42,6 @@
"bundlewatch:fix": "node bundlewatch-fix.mjs",
"clean": "rimraf ./dist",
"dev": "rspack serve --config rspack.config.js",
"dev:chips": "rspack serve --config rspack.config.js --env variant=\"clerk.chips.browser\"",
"dev:headless": "rspack serve --config rspack.config.js --env variant=\"clerk.headless.browser\"",
"dev:origin": "rspack serve --config rspack.config.js --env devOrigin=http://localhost:${PORT:-4000}",
"dev:sandbox": "rspack serve --config rspack.config.js --env devOrigin=http://localhost:${PORT:-4000} --env sandbox=1",
Expand Down
16 changes: 0 additions & 16 deletions packages/clerk-js/rspack.config.js
Original file line numberDiff line numberDiff line change
Expand Up@@ -16,7 +16,6 @@ const variants = {
clerkHeadless: 'clerk.headless',
clerkHeadlessBrowser: 'clerk.headless.browser',
clerkLegacyBrowser: 'clerk.legacy.browser',
clerkCHIPS: 'clerk.chips.browser',
};

const variantToSourceFile = {
Expand All@@ -26,7 +25,6 @@ const variantToSourceFile = {
[variants.clerkHeadless]: './src/index.headless.ts',
[variants.clerkHeadlessBrowser]: './src/index.headless.browser.ts',
[variants.clerkLegacyBrowser]: './src/index.legacy.browser.ts',
[variants.clerkCHIPS]: './src/index.browser.ts',
};

/**
Expand DownExpand Up@@ -58,7 +56,6 @@ const common = ({ mode, variant, disableRHC = false }) => {
*/
__BUILD_FLAG_KEYLESS_UI__: isDevelopment(mode),
__BUILD_DISABLE_RHC__: JSON.stringify(disableRHC),
__BUILD_VARIANT_CHIPS__: variant === variants.clerkCHIPS,
}),
new rspack.EnvironmentPlugin({
CLERK_ENV: mode,
Expand DownExpand Up@@ -447,13 +444,6 @@ const prodConfig = ({ mode, env, analysis }) => {
// externalsForHeadless(),
);

const clerkCHIPS = merge(
entryForVariant(variants.clerkCHIPS),
common({ mode, variant: variants.clerkCHIPS }),
commonForProd(),
commonForProdChunked(),
);

const clerkEsm = merge(
entryForVariant(variants.clerk),
common({ mode, variant: variants.clerk }),
Expand DownExpand Up@@ -567,7 +557,6 @@ const prodConfig = ({ mode, env, analysis }) => {
clerkLegacyBrowser,
clerkHeadless,
clerkHeadlessBrowser,
clerkCHIPS,
clerkEsm,
clerkEsmNoRHC,
clerkCjs,
Expand DownExpand Up@@ -670,11 +659,6 @@ const devConfig = ({ mode, env }) => {
commonForDev(),
// externalsForHeadless(),
),
[variants.clerkCHIPS]: merge(
entryForVariant(variants.clerkCHIPS),
common({ mode, variant: variants.clerkCHIPS }),
commonForDev(),
),
};

if (!entryToConfigMap[variant]) {
Expand Down
16 changes: 14 additions & 2 deletions packages/clerk-js/src/core/auth/AuthCookieService.ts
Original file line numberDiff line numberDiff line change
Expand Up@@ -12,6 +12,7 @@ import { debugLogger } from '@/utils/debug';
import { clerkMissingDevBrowserJwt } from '../errors';
import { eventBus, events } from '../events';
import type { FapiClient } from '../fapiClient';
import { Environment } from '../resources/Environment';
import { createActiveContextCookie } from './cookies/activeContext';
import type { ClientUatCookieHandler } from './cookies/clientUat';
import { createClientUatCookie } from './cookies/clientUat';
Expand DownExpand Up@@ -74,16 +75,27 @@ export class AuthCookieService {

eventBus.on(events.UserSignOut, () => this.handleSignOut());

// After Environment resolves, re-write dev browser cookies with correct
// partitioned attributes. Dev browser cookies are initially written before
// Environment is fetched, so they may have stale attributes.
eventBus.on(events.EnvironmentUpdate, () => {
this.devBrowser.refreshCookies();
});

this.refreshTokenOnFocus();
this.startPollingForToken();

this.clientUat = createClientUatCookie(cookieSuffix);
this.sessionCookie = createSessionCookie(cookieSuffix);
const cookieOptions = {
usePartitionedCookies: () => Environment.getInstance().partitionedCookies,
};
this.clientUat = createClientUatCookie(cookieSuffix, cookieOptions);
this.sessionCookie = createSessionCookie(cookieSuffix, cookieOptions);
this.activeCookie = createActiveContextCookie();
this.devBrowser = createDevBrowser({
frontendApi: clerk.frontendApi,
fapiClient,
cookieSuffix,
cookieOptions,
});
}

Expand Down
Original file line numberDiff line numberDiff line change
Expand Up@@ -50,7 +50,8 @@ describe('Thrown errors', () => {
const devBrowserHandler = createDevBrowser({
frontendApi: 'white-koala-42.clerk.accounts.dev',
fapiClient: mockFapiClient,
publishableKey: 'pk_test_d2hpdGUta29hbGEtNDIuY2xlcmsuYWNjb3VudHMuZGV2JA',
cookieSuffix: 'test-suffix',
cookieOptions: { usePartitionedCookies: () => false },
});

await expect(devBrowserHandler.setup()).rejects.toThrow(
Expand Down
Original file line numberDiff line numberDiff line change
Expand Up@@ -19,6 +19,7 @@ describe('createClientUatCookie', () => {
const mockCookieSuffix = 'test-suffix';
const mockExpires = new Date('2024-12-31');
const mockDomain = 'test.domain';
const defaultOptions = { usePartitionedCookies: () => false };
const mockSet = vi.fn();
const mockRemove = vi.fn();
const mockGet = vi.fn();
Expand All@@ -39,14 +40,14 @@ describe('createClientUatCookie', () => {
});

it('should create both suffixed and non-suffixed cookie handlers', () => {
createClientUatCookie(mockCookieSuffix);
createClientUatCookie(mockCookieSuffix, defaultOptions);
expect(createCookieHandler).toHaveBeenCalledTimes(2);
expect(createCookieHandler).toHaveBeenCalledWith('__client_uat');
expect(createCookieHandler).toHaveBeenCalledWith('__client_uat_test-suffix');
});

it('should set cookies with correct parameters in non-cross-origin context', () => {
const cookieHandler = createClientUatCookie(mockCookieSuffix);
const cookieHandler = createClientUatCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set({
id: 'test-client',
updatedAt: new Date('2024-01-01'),
Expand All@@ -65,7 +66,7 @@ describe('createClientUatCookie', () => {

it('should set cookies with None sameSite in cross-origin context', () => {
(inCrossOriginIframe as ReturnType<typeof vi.fn>).mockReturnValue(true);
const cookieHandler = createClientUatCookie(mockCookieSuffix);
const cookieHandler = createClientUatCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set({
id: 'test-client',
updatedAt: new Date('2024-01-01'),
Expand All@@ -82,7 +83,7 @@ describe('createClientUatCookie', () => {
});

it('should set value to 0 when client is undefined', () => {
const cookieHandler = createClientUatCookie(mockCookieSuffix);
const cookieHandler = createClientUatCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set(undefined);

expect(mockSet).toHaveBeenCalledWith('0', {
Expand All@@ -95,7 +96,7 @@ describe('createClientUatCookie', () => {
});

it('should set value to 0 when client has no signed in sessions', () => {
const cookieHandler = createClientUatCookie(mockCookieSuffix);
const cookieHandler = createClientUatCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set({
id: 'test-client',
updatedAt: new Date('2024-01-01'),
Expand All@@ -114,7 +115,7 @@ describe('createClientUatCookie', () => {
it('should get cookie value from suffixed cookie first, then fallback to non-suffixed', () => {
mockGet.mockImplementationOnce(() => '1234567890').mockImplementationOnce(() => '9876543210');

const cookieHandler = createClientUatCookie(mockCookieSuffix);
const cookieHandler = createClientUatCookie(mockCookieSuffix, defaultOptions);
const result = cookieHandler.get();

expect(result).toBe(1234567890);
Expand All@@ -123,15 +124,15 @@ describe('createClientUatCookie', () => {
it('should return 0 when no cookie value is present', () => {
mockGet.mockImplementationOnce(() => undefined).mockImplementationOnce(() => undefined);

const cookieHandler = createClientUatCookie(mockCookieSuffix);
const cookieHandler = createClientUatCookie(mockCookieSuffix, defaultOptions);
const result = cookieHandler.get();

expect(result).toBe(0);
});

it('should set cookies with SameSite=None when the host requires it', () => {
(requiresSameSiteNone as ReturnType<typeof vi.fn>).mockReturnValue(true);
const cookieHandler = createClientUatCookie(mockCookieSuffix);
const cookieHandler = createClientUatCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set({
id: 'test-client',
updatedAt: new Date('2024-01-01'),
Expand All@@ -146,4 +147,21 @@ describe('createClientUatCookie', () => {
partitioned: false,
});
});

it('should set partitioned cookies when usePartitionedCookies returns true', () => {
const cookieHandler = createClientUatCookie(mockCookieSuffix, { usePartitionedCookies: () => true });
cookieHandler.set({
id: 'test-client',
updatedAt: new Date('2024-01-01'),
signedInSessions: ['session1'],
});

expect(mockSet).toHaveBeenCalledWith('1704067200', {
domain: mockDomain,
expires: mockExpires,
sameSite: 'None',
secure: true,
partitioned: true,
});
});
});
Original file line numberDiff line numberDiff line change
Expand Up@@ -17,6 +17,7 @@ describe('createSessionCookie', () => {
const mockCookieSuffix = 'test-suffix';
const mockToken = 'test-token';
const mockExpires = new Date('2024-12-31');
const defaultOptions = { usePartitionedCookies: () => false };
const mockSet = vi.fn();
const mockRemove = vi.fn();
const mockGet = vi.fn();
Expand All@@ -36,14 +37,14 @@ describe('createSessionCookie', () => {
});

it('should create both suffixed and non-suffixed cookie handlers', () => {
createSessionCookie(mockCookieSuffix);
createSessionCookie(mockCookieSuffix, defaultOptions);
expect(createCookieHandler).toHaveBeenCalledTimes(2);
expect(createCookieHandler).toHaveBeenCalledWith('__session');
expect(createCookieHandler).toHaveBeenCalledWith('__session_test-suffix');
});

it('should set cookies with correct parameters in non-cross-origin context', () => {
const cookieHandler = createSessionCookie(mockCookieSuffix);
const cookieHandler = createSessionCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set(mockToken);

expect(mockSet).toHaveBeenCalledTimes(2);
Expand All@@ -57,7 +58,7 @@ describe('createSessionCookie', () => {

it('should set cookies with None sameSite in cross-origin context', () => {
(inCrossOriginIframe as ReturnType<typeof vi.fn>).mockReturnValue(true);
const cookieHandler = createSessionCookie(mockCookieSuffix);
const cookieHandler = createSessionCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set(mockToken);

expect(mockSet).toHaveBeenCalledWith(mockToken, {
Expand All@@ -69,14 +70,14 @@ describe('createSessionCookie', () => {
});

it('should remove both cookies when remove is called', () => {
const cookieHandler = createSessionCookie(mockCookieSuffix);
const cookieHandler = createSessionCookie(mockCookieSuffix, defaultOptions);
cookieHandler.remove();

expect(mockRemove).toHaveBeenCalledTimes(2);
});

it('should remove cookies with the same attributes as set', () => {
const cookieHandler = createSessionCookie(mockCookieSuffix);
const cookieHandler = createSessionCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set(mockToken);
cookieHandler.remove();

Expand All@@ -102,7 +103,7 @@ describe('createSessionCookie', () => {
it('should get cookie value from suffixed cookie first, then fallback to non-suffixed', () => {
mockGet.mockImplementationOnce(() => 'suffixed-value').mockImplementationOnce(() => 'non-suffixed-value');

const cookieHandler = createSessionCookie(mockCookieSuffix);
const cookieHandler = createSessionCookie(mockCookieSuffix, defaultOptions);
const result = cookieHandler.get();

expect(result).toBe('suffixed-value');
Expand All@@ -111,15 +112,15 @@ describe('createSessionCookie', () => {
it('should fallback to non-suffixed cookie when suffixed cookie is not present', () => {
mockGet.mockImplementationOnce(() => undefined).mockImplementationOnce(() => 'non-suffixed-value');

const cookieHandler = createSessionCookie(mockCookieSuffix);
const cookieHandler = createSessionCookie(mockCookieSuffix, defaultOptions);
const result = cookieHandler.get();

expect(result).toBe('non-suffixed-value');
});

it('should set cookies with None sameSite on .replit.dev origins', () => {
(requiresSameSiteNone as ReturnType<typeof vi.fn>).mockReturnValue(true);
const cookieHandler = createSessionCookie(mockCookieSuffix);
const cookieHandler = createSessionCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set(mockToken);

expect(mockSet).toHaveBeenCalledWith(mockToken, {
Expand All@@ -129,4 +130,17 @@ describe('createSessionCookie', () => {
partitioned: false,
});
});

it('should set partitioned cookies when usePartitionedCookies returns true', () => {
const cookieHandler = createSessionCookie(mockCookieSuffix, { usePartitionedCookies: () => true });
cookieHandler.set(mockToken);

expect(mockRemove).toHaveBeenCalledTimes(2);
expect(mockSet).toHaveBeenCalledWith(mockToken, {
expires: mockExpires,
sameSite: 'None',
secure: true,
partitioned: true,
});
});
});
18 changes: 11 additions & 7 deletions packages/clerk-js/src/core/auth/cookies/clientUat.ts
Original file line numberDiff line numberDiff line change
Expand Up@@ -15,13 +15,20 @@ export type ClientUatCookieHandler = {
get: () => number;
};

export type ClientUatCookieOptions = {
usePartitionedCookies: () => boolean;
};

/**
* Create a long-lived JS cookie to store the client last updated_at timestamp
* for development instances (for production instance is set by FAPI).
* The cookie is used as hint from the Clerk Backend packages to identify
* if the user is authenticated or not.
*/
export const createClientUatCookie = (cookieSuffix: string): ClientUatCookieHandler => {
export const createClientUatCookie = (
cookieSuffix: string,
options: ClientUatCookieOptions,
): ClientUatCookieHandler => {
const clientUatCookie = createCookieHandler(CLIENT_UAT_COOKIE_NAME);
const suffixedClientUatCookie = createCookieHandler(getSuffixedCookieName(CLIENT_UAT_COOKIE_NAME, cookieSuffix));

Expand All@@ -38,13 +45,10 @@ export const createClientUatCookie = (cookieSuffix: string): ClientUatCookieHand
* Generally, this is handled by redirectWithAuth() being called and relying on the dev browser ID in the URL,
* but if that isn't used we rely on this. In production, nothing is cross-domain and Lax is used when client_uat is set from FAPI.
*/
const sameSite = __BUILD_VARIANT_CHIPS__
? 'None'
: inCrossOriginIframe() || requiresSameSiteNone()
? 'None'
: 'Strict';
const isPartitioned = options.usePartitionedCookies();
const sameSite = isPartitioned || inCrossOriginIframe() || requiresSameSiteNone() ? 'None' : 'Strict';
const secure = getSecureAttribute(sameSite);
const partitioned = __BUILD_VARIANT_CHIPS__ && secure;
const partitioned = isPartitioned && secure;
const domain = getCookieDomain(undefined, undefined, { sameSite, secure });

// '0' indicates the user is signed out
Expand Down
Loading
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/remove-chips-build-variant.md
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
---
"@clerk/clerk-js": patch
"@clerk/shared": patch
---

Remove CHIPS build variant and use `partitioned_cookies` environment flag from the Clerk API to control partitioned cookie behavior at runtime.
1 change: 0 additions & 1 deletion packages/clerk-js/package.json
Original file line numberDiff line numberDiff line change
Expand Up@@ -42,7 +42,6 @@
"bundlewatch:fix": "node bundlewatch-fix.mjs",
"clean": "rimraf ./dist",
"dev": "rspack serve --config rspack.config.js",
"dev:chips": "rspack serve --config rspack.config.js --env variant=\"clerk.chips.browser\"",
"dev:headless": "rspack serve --config rspack.config.js --env variant=\"clerk.headless.browser\"",
"dev:origin": "rspack serve --config rspack.config.js --env devOrigin=http://localhost:${PORT:-4000}",
"dev:sandbox": "rspack serve --config rspack.config.js --env devOrigin=http://localhost:${PORT:-4000} --env sandbox=1",
Expand Down
16 changes: 0 additions & 16 deletions packages/clerk-js/rspack.config.js
Original file line numberDiff line numberDiff line change
Expand Up@@ -16,7 +16,6 @@ const variants = {
clerkHeadless: 'clerk.headless',
clerkHeadlessBrowser: 'clerk.headless.browser',
clerkLegacyBrowser: 'clerk.legacy.browser',
clerkCHIPS: 'clerk.chips.browser',
};

const variantToSourceFile = {
Expand All@@ -26,7 +25,6 @@ const variantToSourceFile = {
[variants.clerkHeadless]: './src/index.headless.ts',
[variants.clerkHeadlessBrowser]: './src/index.headless.browser.ts',
[variants.clerkLegacyBrowser]: './src/index.legacy.browser.ts',
[variants.clerkCHIPS]: './src/index.browser.ts',
};

/**
Expand DownExpand Up@@ -58,7 +56,6 @@ const common = ({ mode, variant, disableRHC = false }) => {
*/
__BUILD_FLAG_KEYLESS_UI__: isDevelopment(mode),
__BUILD_DISABLE_RHC__: JSON.stringify(disableRHC),
__BUILD_VARIANT_CHIPS__: variant === variants.clerkCHIPS,
}),
new rspack.EnvironmentPlugin({
CLERK_ENV: mode,
Expand DownExpand Up@@ -447,13 +444,6 @@ const prodConfig = ({ mode, env, analysis }) => {
// externalsForHeadless(),
);

const clerkCHIPS = merge(
entryForVariant(variants.clerkCHIPS),
common({ mode, variant: variants.clerkCHIPS }),
commonForProd(),
commonForProdChunked(),
);

const clerkEsm = merge(
entryForVariant(variants.clerk),
common({ mode, variant: variants.clerk }),
Expand DownExpand Up@@ -567,7 +557,6 @@ const prodConfig = ({ mode, env, analysis }) => {
clerkLegacyBrowser,
clerkHeadless,
clerkHeadlessBrowser,
clerkCHIPS,
clerkEsm,
clerkEsmNoRHC,
clerkCjs,
Expand DownExpand Up@@ -670,11 +659,6 @@ const devConfig = ({ mode, env }) => {
commonForDev(),
// externalsForHeadless(),
),
[variants.clerkCHIPS]: merge(
entryForVariant(variants.clerkCHIPS),
common({ mode, variant: variants.clerkCHIPS }),
commonForDev(),
),
};

if (!entryToConfigMap[variant]) {
Expand Down
16 changes: 14 additions & 2 deletions packages/clerk-js/src/core/auth/AuthCookieService.ts
Original file line numberDiff line numberDiff line change
Expand Up@@ -12,6 +12,7 @@ import { debugLogger } from '@/utils/debug';
import { clerkMissingDevBrowserJwt } from '../errors';
import { eventBus, events } from '../events';
import type { FapiClient } from '../fapiClient';
import { Environment } from '../resources/Environment';
import { createActiveContextCookie } from './cookies/activeContext';
import type { ClientUatCookieHandler } from './cookies/clientUat';
import { createClientUatCookie } from './cookies/clientUat';
Expand DownExpand Up@@ -74,16 +75,27 @@ export class AuthCookieService {

eventBus.on(events.UserSignOut, () => this.handleSignOut());

// After Environment resolves, re-write dev browser cookies with correct
// partitioned attributes. Dev browser cookies are initially written before
// Environment is fetched, so they may have stale attributes.
eventBus.on(events.EnvironmentUpdate, () => {
this.devBrowser.refreshCookies();
});

this.refreshTokenOnFocus();
this.startPollingForToken();

this.clientUat = createClientUatCookie(cookieSuffix);
this.sessionCookie = createSessionCookie(cookieSuffix);
const cookieOptions = {
usePartitionedCookies: () => Environment.getInstance().partitionedCookies,
};
this.clientUat = createClientUatCookie(cookieSuffix, cookieOptions);
this.sessionCookie = createSessionCookie(cookieSuffix, cookieOptions);
this.activeCookie = createActiveContextCookie();
this.devBrowser = createDevBrowser({
frontendApi: clerk.frontendApi,
fapiClient,
cookieSuffix,
cookieOptions,
});
}

Expand Down
Original file line numberDiff line numberDiff line change
Expand Up@@ -50,7 +50,8 @@ describe('Thrown errors', () => {
const devBrowserHandler = createDevBrowser({
frontendApi: 'white-koala-42.clerk.accounts.dev',
fapiClient: mockFapiClient,
publishableKey: 'pk_test_d2hpdGUta29hbGEtNDIuY2xlcmsuYWNjb3VudHMuZGV2JA',
cookieSuffix: 'test-suffix',
cookieOptions: { usePartitionedCookies: () => false },
});

await expect(devBrowserHandler.setup()).rejects.toThrow(
Expand Down
Original file line numberDiff line numberDiff line change
Expand Up@@ -19,6 +19,7 @@ describe('createClientUatCookie', () => {
const mockCookieSuffix = 'test-suffix';
const mockExpires = new Date('2024-12-31');
const mockDomain = 'test.domain';
const defaultOptions = { usePartitionedCookies: () => false };
const mockSet = vi.fn();
const mockRemove = vi.fn();
const mockGet = vi.fn();
Expand All@@ -39,14 +40,14 @@ describe('createClientUatCookie', () => {
});

it('should create both suffixed and non-suffixed cookie handlers', () => {
createClientUatCookie(mockCookieSuffix);
createClientUatCookie(mockCookieSuffix, defaultOptions);
expect(createCookieHandler).toHaveBeenCalledTimes(2);
expect(createCookieHandler).toHaveBeenCalledWith('__client_uat');
expect(createCookieHandler).toHaveBeenCalledWith('__client_uat_test-suffix');
});

it('should set cookies with correct parameters in non-cross-origin context', () => {
const cookieHandler = createClientUatCookie(mockCookieSuffix);
const cookieHandler = createClientUatCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set({
id: 'test-client',
updatedAt: new Date('2024-01-01'),
Expand All@@ -65,7 +66,7 @@ describe('createClientUatCookie', () => {

it('should set cookies with None sameSite in cross-origin context', () => {
(inCrossOriginIframe as ReturnType<typeof vi.fn>).mockReturnValue(true);
const cookieHandler = createClientUatCookie(mockCookieSuffix);
const cookieHandler = createClientUatCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set({
id: 'test-client',
updatedAt: new Date('2024-01-01'),
Expand All@@ -82,7 +83,7 @@ describe('createClientUatCookie', () => {
});

it('should set value to 0 when client is undefined', () => {
const cookieHandler = createClientUatCookie(mockCookieSuffix);
const cookieHandler = createClientUatCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set(undefined);

expect(mockSet).toHaveBeenCalledWith('0', {
Expand All@@ -95,7 +96,7 @@ describe('createClientUatCookie', () => {
});

it('should set value to 0 when client has no signed in sessions', () => {
const cookieHandler = createClientUatCookie(mockCookieSuffix);
const cookieHandler = createClientUatCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set({
id: 'test-client',
updatedAt: new Date('2024-01-01'),
Expand All@@ -114,7 +115,7 @@ describe('createClientUatCookie', () => {
it('should get cookie value from suffixed cookie first, then fallback to non-suffixed', () => {
mockGet.mockImplementationOnce(() => '1234567890').mockImplementationOnce(() => '9876543210');

const cookieHandler = createClientUatCookie(mockCookieSuffix);
const cookieHandler = createClientUatCookie(mockCookieSuffix, defaultOptions);
const result = cookieHandler.get();

expect(result).toBe(1234567890);
Expand All@@ -123,15 +124,15 @@ describe('createClientUatCookie', () => {
it('should return 0 when no cookie value is present', () => {
mockGet.mockImplementationOnce(() => undefined).mockImplementationOnce(() => undefined);

const cookieHandler = createClientUatCookie(mockCookieSuffix);
const cookieHandler = createClientUatCookie(mockCookieSuffix, defaultOptions);
const result = cookieHandler.get();

expect(result).toBe(0);
});

it('should set cookies with SameSite=None when the host requires it', () => {
(requiresSameSiteNone as ReturnType<typeof vi.fn>).mockReturnValue(true);
const cookieHandler = createClientUatCookie(mockCookieSuffix);
const cookieHandler = createClientUatCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set({
id: 'test-client',
updatedAt: new Date('2024-01-01'),
Expand All@@ -146,4 +147,21 @@ describe('createClientUatCookie', () => {
partitioned: false,
});
});

it('should set partitioned cookies when usePartitionedCookies returns true', () => {
const cookieHandler = createClientUatCookie(mockCookieSuffix, { usePartitionedCookies: () => true });
cookieHandler.set({
id: 'test-client',
updatedAt: new Date('2024-01-01'),
signedInSessions: ['session1'],
});

expect(mockSet).toHaveBeenCalledWith('1704067200', {
domain: mockDomain,
expires: mockExpires,
sameSite: 'None',
secure: true,
partitioned: true,
});
});
});
Original file line numberDiff line numberDiff line change
Expand Up@@ -17,6 +17,7 @@ describe('createSessionCookie', () => {
const mockCookieSuffix = 'test-suffix';
const mockToken = 'test-token';
const mockExpires = new Date('2024-12-31');
const defaultOptions = { usePartitionedCookies: () => false };
const mockSet = vi.fn();
const mockRemove = vi.fn();
const mockGet = vi.fn();
Expand All@@ -36,14 +37,14 @@ describe('createSessionCookie', () => {
});

it('should create both suffixed and non-suffixed cookie handlers', () => {
createSessionCookie(mockCookieSuffix);
createSessionCookie(mockCookieSuffix, defaultOptions);
expect(createCookieHandler).toHaveBeenCalledTimes(2);
expect(createCookieHandler).toHaveBeenCalledWith('__session');
expect(createCookieHandler).toHaveBeenCalledWith('__session_test-suffix');
});

it('should set cookies with correct parameters in non-cross-origin context', () => {
const cookieHandler = createSessionCookie(mockCookieSuffix);
const cookieHandler = createSessionCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set(mockToken);

expect(mockSet).toHaveBeenCalledTimes(2);
Expand All@@ -57,7 +58,7 @@ describe('createSessionCookie', () => {

it('should set cookies with None sameSite in cross-origin context', () => {
(inCrossOriginIframe as ReturnType<typeof vi.fn>).mockReturnValue(true);
const cookieHandler = createSessionCookie(mockCookieSuffix);
const cookieHandler = createSessionCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set(mockToken);

expect(mockSet).toHaveBeenCalledWith(mockToken, {
Expand All@@ -69,14 +70,14 @@ describe('createSessionCookie', () => {
});

it('should remove both cookies when remove is called', () => {
const cookieHandler = createSessionCookie(mockCookieSuffix);
const cookieHandler = createSessionCookie(mockCookieSuffix, defaultOptions);
cookieHandler.remove();

expect(mockRemove).toHaveBeenCalledTimes(2);
});

it('should remove cookies with the same attributes as set', () => {
const cookieHandler = createSessionCookie(mockCookieSuffix);
const cookieHandler = createSessionCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set(mockToken);
cookieHandler.remove();

Expand All@@ -102,7 +103,7 @@ describe('createSessionCookie', () => {
it('should get cookie value from suffixed cookie first, then fallback to non-suffixed', () => {
mockGet.mockImplementationOnce(() => 'suffixed-value').mockImplementationOnce(() => 'non-suffixed-value');

const cookieHandler = createSessionCookie(mockCookieSuffix);
const cookieHandler = createSessionCookie(mockCookieSuffix, defaultOptions);
const result = cookieHandler.get();

expect(result).toBe('suffixed-value');
Expand All@@ -111,15 +112,15 @@ describe('createSessionCookie', () => {
it('should fallback to non-suffixed cookie when suffixed cookie is not present', () => {
mockGet.mockImplementationOnce(() => undefined).mockImplementationOnce(() => 'non-suffixed-value');

const cookieHandler = createSessionCookie(mockCookieSuffix);
const cookieHandler = createSessionCookie(mockCookieSuffix, defaultOptions);
const result = cookieHandler.get();

expect(result).toBe('non-suffixed-value');
});

it('should set cookies with None sameSite on .replit.dev origins', () => {
(requiresSameSiteNone as ReturnType<typeof vi.fn>).mockReturnValue(true);
const cookieHandler = createSessionCookie(mockCookieSuffix);
const cookieHandler = createSessionCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set(mockToken);

expect(mockSet).toHaveBeenCalledWith(mockToken, {
Expand All@@ -129,4 +130,17 @@ describe('createSessionCookie', () => {
partitioned: false,
});
});

it('should set partitioned cookies when usePartitionedCookies returns true', () => {
const cookieHandler = createSessionCookie(mockCookieSuffix, { usePartitionedCookies: () => true });
cookieHandler.set(mockToken);

expect(mockRemove).toHaveBeenCalledTimes(2);
expect(mockSet).toHaveBeenCalledWith(mockToken, {
expires: mockExpires,
sameSite: 'None',
secure: true,
partitioned: true,
});
});
});
18 changes: 11 additions & 7 deletions packages/clerk-js/src/core/auth/cookies/clientUat.ts
Original file line numberDiff line numberDiff line change
Expand Up@@ -15,13 +15,20 @@ export type ClientUatCookieHandler = {
get: () => number;
};

export type ClientUatCookieOptions = {
usePartitionedCookies: () => boolean;
};

/**
* Create a long-lived JS cookie to store the client last updated_at timestamp
* for development instances (for production instance is set by FAPI).
* The cookie is used as hint from the Clerk Backend packages to identify
* if the user is authenticated or not.
*/
export const createClientUatCookie = (cookieSuffix: string): ClientUatCookieHandler => {
export const createClientUatCookie = (
cookieSuffix: string,
options: ClientUatCookieOptions,
): ClientUatCookieHandler => {
const clientUatCookie = createCookieHandler(CLIENT_UAT_COOKIE_NAME);
const suffixedClientUatCookie = createCookieHandler(getSuffixedCookieName(CLIENT_UAT_COOKIE_NAME, cookieSuffix));

Expand All@@ -38,13 +45,10 @@ export const createClientUatCookie = (cookieSuffix: string): ClientUatCookieHand
* Generally, this is handled by redirectWithAuth() being called and relying on the dev browser ID in the URL,
* but if that isn't used we rely on this. In production, nothing is cross-domain and Lax is used when client_uat is set from FAPI.
*/
const sameSite = __BUILD_VARIANT_CHIPS__
? 'None'
: inCrossOriginIframe() || requiresSameSiteNone()
? 'None'
: 'Strict';
const isPartitioned = options.usePartitionedCookies();
const sameSite = isPartitioned || inCrossOriginIframe() || requiresSameSiteNone() ? 'None' : 'Strict';
const secure = getSecureAttribute(sameSite);
const partitioned = __BUILD_VARIANT_CHIPS__ && secure;
const partitioned = isPartitioned && secure;
const domain = getCookieDomain(undefined, undefined, { sameSite, secure });

// '0' indicates the user is signed out
Expand Down
Loading
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix"); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/remove-chips-build-variant.md
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
---
"@clerk/clerk-js": patch
"@clerk/shared": patch
---

Remove CHIPS build variant and use `partitioned_cookies` environment flag from the Clerk API to control partitioned cookie behavior at runtime.
1 change: 0 additions & 1 deletion packages/clerk-js/package.json
Original file line numberDiff line numberDiff line change
Expand Up@@ -42,7 +42,6 @@
"bundlewatch:fix": "node bundlewatch-fix.mjs",
"clean": "rimraf ./dist",
"dev": "rspack serve --config rspack.config.js",
"dev:chips": "rspack serve --config rspack.config.js --env variant=\"clerk.chips.browser\"",
"dev:headless": "rspack serve --config rspack.config.js --env variant=\"clerk.headless.browser\"",
"dev:origin": "rspack serve --config rspack.config.js --env devOrigin=http://localhost:${PORT:-4000}",
"dev:sandbox": "rspack serve --config rspack.config.js --env devOrigin=http://localhost:${PORT:-4000} --env sandbox=1",
Expand Down
16 changes: 0 additions & 16 deletions packages/clerk-js/rspack.config.js
Original file line numberDiff line numberDiff line change
Expand Up@@ -16,7 +16,6 @@ const variants = {
clerkHeadless: 'clerk.headless',
clerkHeadlessBrowser: 'clerk.headless.browser',
clerkLegacyBrowser: 'clerk.legacy.browser',
clerkCHIPS: 'clerk.chips.browser',
};

const variantToSourceFile = {
Expand All@@ -26,7 +25,6 @@ const variantToSourceFile = {
[variants.clerkHeadless]: './src/index.headless.ts',
[variants.clerkHeadlessBrowser]: './src/index.headless.browser.ts',
[variants.clerkLegacyBrowser]: './src/index.legacy.browser.ts',
[variants.clerkCHIPS]: './src/index.browser.ts',
};

/**
Expand DownExpand Up@@ -58,7 +56,6 @@ const common = ({ mode, variant, disableRHC = false }) => {
*/
__BUILD_FLAG_KEYLESS_UI__: isDevelopment(mode),
__BUILD_DISABLE_RHC__: JSON.stringify(disableRHC),
__BUILD_VARIANT_CHIPS__: variant === variants.clerkCHIPS,
}),
new rspack.EnvironmentPlugin({
CLERK_ENV: mode,
Expand DownExpand Up@@ -447,13 +444,6 @@ const prodConfig = ({ mode, env, analysis }) => {
// externalsForHeadless(),
);

const clerkCHIPS = merge(
entryForVariant(variants.clerkCHIPS),
common({ mode, variant: variants.clerkCHIPS }),
commonForProd(),
commonForProdChunked(),
);

const clerkEsm = merge(
entryForVariant(variants.clerk),
common({ mode, variant: variants.clerk }),
Expand DownExpand Up@@ -567,7 +557,6 @@ const prodConfig = ({ mode, env, analysis }) => {
clerkLegacyBrowser,
clerkHeadless,
clerkHeadlessBrowser,
clerkCHIPS,
clerkEsm,
clerkEsmNoRHC,
clerkCjs,
Expand DownExpand Up@@ -670,11 +659,6 @@ const devConfig = ({ mode, env }) => {
commonForDev(),
// externalsForHeadless(),
),
[variants.clerkCHIPS]: merge(
entryForVariant(variants.clerkCHIPS),
common({ mode, variant: variants.clerkCHIPS }),
commonForDev(),
),
};

if (!entryToConfigMap[variant]) {
Expand Down
16 changes: 14 additions & 2 deletions packages/clerk-js/src/core/auth/AuthCookieService.ts
Original file line numberDiff line numberDiff line change
Expand Up@@ -12,6 +12,7 @@ import { debugLogger } from '@/utils/debug';
import { clerkMissingDevBrowserJwt } from '../errors';
import { eventBus, events } from '../events';
import type { FapiClient } from '../fapiClient';
import { Environment } from '../resources/Environment';
import { createActiveContextCookie } from './cookies/activeContext';
import type { ClientUatCookieHandler } from './cookies/clientUat';
import { createClientUatCookie } from './cookies/clientUat';
Expand DownExpand Up@@ -74,16 +75,27 @@ export class AuthCookieService {

eventBus.on(events.UserSignOut, () => this.handleSignOut());

// After Environment resolves, re-write dev browser cookies with correct
// partitioned attributes. Dev browser cookies are initially written before
// Environment is fetched, so they may have stale attributes.
eventBus.on(events.EnvironmentUpdate, () => {
this.devBrowser.refreshCookies();
});

this.refreshTokenOnFocus();
this.startPollingForToken();

this.clientUat = createClientUatCookie(cookieSuffix);
this.sessionCookie = createSessionCookie(cookieSuffix);
const cookieOptions = {
usePartitionedCookies: () => Environment.getInstance().partitionedCookies,
};
this.clientUat = createClientUatCookie(cookieSuffix, cookieOptions);
this.sessionCookie = createSessionCookie(cookieSuffix, cookieOptions);
this.activeCookie = createActiveContextCookie();
this.devBrowser = createDevBrowser({
frontendApi: clerk.frontendApi,
fapiClient,
cookieSuffix,
cookieOptions,
});
}

Expand Down
Original file line numberDiff line numberDiff line change
Expand Up@@ -50,7 +50,8 @@ describe('Thrown errors', () => {
const devBrowserHandler = createDevBrowser({
frontendApi: 'white-koala-42.clerk.accounts.dev',
fapiClient: mockFapiClient,
publishableKey: 'pk_test_d2hpdGUta29hbGEtNDIuY2xlcmsuYWNjb3VudHMuZGV2JA',
cookieSuffix: 'test-suffix',
cookieOptions: { usePartitionedCookies: () => false },
});

await expect(devBrowserHandler.setup()).rejects.toThrow(
Expand Down
Original file line numberDiff line numberDiff line change
Expand Up@@ -19,6 +19,7 @@ describe('createClientUatCookie', () => {
const mockCookieSuffix = 'test-suffix';
const mockExpires = new Date('2024-12-31');
const mockDomain = 'test.domain';
const defaultOptions = { usePartitionedCookies: () => false };
const mockSet = vi.fn();
const mockRemove = vi.fn();
const mockGet = vi.fn();
Expand All@@ -39,14 +40,14 @@ describe('createClientUatCookie', () => {
});

it('should create both suffixed and non-suffixed cookie handlers', () => {
createClientUatCookie(mockCookieSuffix);
createClientUatCookie(mockCookieSuffix, defaultOptions);
expect(createCookieHandler).toHaveBeenCalledTimes(2);
expect(createCookieHandler).toHaveBeenCalledWith('__client_uat');
expect(createCookieHandler).toHaveBeenCalledWith('__client_uat_test-suffix');
});

it('should set cookies with correct parameters in non-cross-origin context', () => {
const cookieHandler = createClientUatCookie(mockCookieSuffix);
const cookieHandler = createClientUatCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set({
id: 'test-client',
updatedAt: new Date('2024-01-01'),
Expand All@@ -65,7 +66,7 @@ describe('createClientUatCookie', () => {

it('should set cookies with None sameSite in cross-origin context', () => {
(inCrossOriginIframe as ReturnType<typeof vi.fn>).mockReturnValue(true);
const cookieHandler = createClientUatCookie(mockCookieSuffix);
const cookieHandler = createClientUatCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set({
id: 'test-client',
updatedAt: new Date('2024-01-01'),
Expand All@@ -82,7 +83,7 @@ describe('createClientUatCookie', () => {
});

it('should set value to 0 when client is undefined', () => {
const cookieHandler = createClientUatCookie(mockCookieSuffix);
const cookieHandler = createClientUatCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set(undefined);

expect(mockSet).toHaveBeenCalledWith('0', {
Expand All@@ -95,7 +96,7 @@ describe('createClientUatCookie', () => {
});

it('should set value to 0 when client has no signed in sessions', () => {
const cookieHandler = createClientUatCookie(mockCookieSuffix);
const cookieHandler = createClientUatCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set({
id: 'test-client',
updatedAt: new Date('2024-01-01'),
Expand All@@ -114,7 +115,7 @@ describe('createClientUatCookie', () => {
it('should get cookie value from suffixed cookie first, then fallback to non-suffixed', () => {
mockGet.mockImplementationOnce(() => '1234567890').mockImplementationOnce(() => '9876543210');

const cookieHandler = createClientUatCookie(mockCookieSuffix);
const cookieHandler = createClientUatCookie(mockCookieSuffix, defaultOptions);
const result = cookieHandler.get();

expect(result).toBe(1234567890);
Expand All@@ -123,15 +124,15 @@ describe('createClientUatCookie', () => {
it('should return 0 when no cookie value is present', () => {
mockGet.mockImplementationOnce(() => undefined).mockImplementationOnce(() => undefined);

const cookieHandler = createClientUatCookie(mockCookieSuffix);
const cookieHandler = createClientUatCookie(mockCookieSuffix, defaultOptions);
const result = cookieHandler.get();

expect(result).toBe(0);
});

it('should set cookies with SameSite=None when the host requires it', () => {
(requiresSameSiteNone as ReturnType<typeof vi.fn>).mockReturnValue(true);
const cookieHandler = createClientUatCookie(mockCookieSuffix);
const cookieHandler = createClientUatCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set({
id: 'test-client',
updatedAt: new Date('2024-01-01'),
Expand All@@ -146,4 +147,21 @@ describe('createClientUatCookie', () => {
partitioned: false,
});
});

it('should set partitioned cookies when usePartitionedCookies returns true', () => {
const cookieHandler = createClientUatCookie(mockCookieSuffix, { usePartitionedCookies: () => true });
cookieHandler.set({
id: 'test-client',
updatedAt: new Date('2024-01-01'),
signedInSessions: ['session1'],
});

expect(mockSet).toHaveBeenCalledWith('1704067200', {
domain: mockDomain,
expires: mockExpires,
sameSite: 'None',
secure: true,
partitioned: true,
});
});
});
Original file line numberDiff line numberDiff line change
Expand Up@@ -17,6 +17,7 @@ describe('createSessionCookie', () => {
const mockCookieSuffix = 'test-suffix';
const mockToken = 'test-token';
const mockExpires = new Date('2024-12-31');
const defaultOptions = { usePartitionedCookies: () => false };
const mockSet = vi.fn();
const mockRemove = vi.fn();
const mockGet = vi.fn();
Expand All@@ -36,14 +37,14 @@ describe('createSessionCookie', () => {
});

it('should create both suffixed and non-suffixed cookie handlers', () => {
createSessionCookie(mockCookieSuffix);
createSessionCookie(mockCookieSuffix, defaultOptions);
expect(createCookieHandler).toHaveBeenCalledTimes(2);
expect(createCookieHandler).toHaveBeenCalledWith('__session');
expect(createCookieHandler).toHaveBeenCalledWith('__session_test-suffix');
});

it('should set cookies with correct parameters in non-cross-origin context', () => {
const cookieHandler = createSessionCookie(mockCookieSuffix);
const cookieHandler = createSessionCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set(mockToken);

expect(mockSet).toHaveBeenCalledTimes(2);
Expand All@@ -57,7 +58,7 @@ describe('createSessionCookie', () => {

it('should set cookies with None sameSite in cross-origin context', () => {
(inCrossOriginIframe as ReturnType<typeof vi.fn>).mockReturnValue(true);
const cookieHandler = createSessionCookie(mockCookieSuffix);
const cookieHandler = createSessionCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set(mockToken);

expect(mockSet).toHaveBeenCalledWith(mockToken, {
Expand All@@ -69,14 +70,14 @@ describe('createSessionCookie', () => {
});

it('should remove both cookies when remove is called', () => {
const cookieHandler = createSessionCookie(mockCookieSuffix);
const cookieHandler = createSessionCookie(mockCookieSuffix, defaultOptions);
cookieHandler.remove();

expect(mockRemove).toHaveBeenCalledTimes(2);
});

it('should remove cookies with the same attributes as set', () => {
const cookieHandler = createSessionCookie(mockCookieSuffix);
const cookieHandler = createSessionCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set(mockToken);
cookieHandler.remove();

Expand All@@ -102,7 +103,7 @@ describe('createSessionCookie', () => {
it('should get cookie value from suffixed cookie first, then fallback to non-suffixed', () => {
mockGet.mockImplementationOnce(() => 'suffixed-value').mockImplementationOnce(() => 'non-suffixed-value');

const cookieHandler = createSessionCookie(mockCookieSuffix);
const cookieHandler = createSessionCookie(mockCookieSuffix, defaultOptions);
const result = cookieHandler.get();

expect(result).toBe('suffixed-value');
Expand All@@ -111,15 +112,15 @@ describe('createSessionCookie', () => {
it('should fallback to non-suffixed cookie when suffixed cookie is not present', () => {
mockGet.mockImplementationOnce(() => undefined).mockImplementationOnce(() => 'non-suffixed-value');

const cookieHandler = createSessionCookie(mockCookieSuffix);
const cookieHandler = createSessionCookie(mockCookieSuffix, defaultOptions);
const result = cookieHandler.get();

expect(result).toBe('non-suffixed-value');
});

it('should set cookies with None sameSite on .replit.dev origins', () => {
(requiresSameSiteNone as ReturnType<typeof vi.fn>).mockReturnValue(true);
const cookieHandler = createSessionCookie(mockCookieSuffix);
const cookieHandler = createSessionCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set(mockToken);

expect(mockSet).toHaveBeenCalledWith(mockToken, {
Expand All@@ -129,4 +130,17 @@ describe('createSessionCookie', () => {
partitioned: false,
});
});

it('should set partitioned cookies when usePartitionedCookies returns true', () => {
const cookieHandler = createSessionCookie(mockCookieSuffix, { usePartitionedCookies: () => true });
cookieHandler.set(mockToken);

expect(mockRemove).toHaveBeenCalledTimes(2);
expect(mockSet).toHaveBeenCalledWith(mockToken, {
expires: mockExpires,
sameSite: 'None',
secure: true,
partitioned: true,
});
});
});
18 changes: 11 additions & 7 deletions packages/clerk-js/src/core/auth/cookies/clientUat.ts
Original file line numberDiff line numberDiff line change
Expand Up@@ -15,13 +15,20 @@ export type ClientUatCookieHandler = {
get: () => number;
};

export type ClientUatCookieOptions = {
usePartitionedCookies: () => boolean;
};

/**
* Create a long-lived JS cookie to store the client last updated_at timestamp
* for development instances (for production instance is set by FAPI).
* The cookie is used as hint from the Clerk Backend packages to identify
* if the user is authenticated or not.
*/
export const createClientUatCookie = (cookieSuffix: string): ClientUatCookieHandler => {
export const createClientUatCookie = (
cookieSuffix: string,
options: ClientUatCookieOptions,
): ClientUatCookieHandler => {
const clientUatCookie = createCookieHandler(CLIENT_UAT_COOKIE_NAME);
const suffixedClientUatCookie = createCookieHandler(getSuffixedCookieName(CLIENT_UAT_COOKIE_NAME, cookieSuffix));

Expand All@@ -38,13 +45,10 @@ export const createClientUatCookie = (cookieSuffix: string): ClientUatCookieHand
* Generally, this is handled by redirectWithAuth() being called and relying on the dev browser ID in the URL,
* but if that isn't used we rely on this. In production, nothing is cross-domain and Lax is used when client_uat is set from FAPI.
*/
const sameSite = __BUILD_VARIANT_CHIPS__
? 'None'
: inCrossOriginIframe() || requiresSameSiteNone()
? 'None'
: 'Strict';
const isPartitioned = options.usePartitionedCookies();
const sameSite = isPartitioned || inCrossOriginIframe() || requiresSameSiteNone() ? 'None' : 'Strict';
const secure = getSecureAttribute(sameSite);
const partitioned = __BUILD_VARIANT_CHIPS__ && secure;
const partitioned = isPartitioned && secure;
const domain = getCookieDomain(undefined, undefined, { sameSite, secure });

// '0' indicates the user is signed out
Expand Down
Loading
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms"); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/remove-chips-build-variant.md
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
---
"@clerk/clerk-js": patch
"@clerk/shared": patch
---

Remove CHIPS build variant and use `partitioned_cookies` environment flag from the Clerk API to control partitioned cookie behavior at runtime.
1 change: 0 additions & 1 deletion packages/clerk-js/package.json
Original file line numberDiff line numberDiff line change
Expand Up@@ -42,7 +42,6 @@
"bundlewatch:fix": "node bundlewatch-fix.mjs",
"clean": "rimraf ./dist",
"dev": "rspack serve --config rspack.config.js",
"dev:chips": "rspack serve --config rspack.config.js --env variant=\"clerk.chips.browser\"",
"dev:headless": "rspack serve --config rspack.config.js --env variant=\"clerk.headless.browser\"",
"dev:origin": "rspack serve --config rspack.config.js --env devOrigin=http://localhost:${PORT:-4000}",
"dev:sandbox": "rspack serve --config rspack.config.js --env devOrigin=http://localhost:${PORT:-4000} --env sandbox=1",
Expand Down
16 changes: 0 additions & 16 deletions packages/clerk-js/rspack.config.js
Original file line numberDiff line numberDiff line change
Expand Up@@ -16,7 +16,6 @@ const variants = {
clerkHeadless: 'clerk.headless',
clerkHeadlessBrowser: 'clerk.headless.browser',
clerkLegacyBrowser: 'clerk.legacy.browser',
clerkCHIPS: 'clerk.chips.browser',
};

const variantToSourceFile = {
Expand All@@ -26,7 +25,6 @@ const variantToSourceFile = {
[variants.clerkHeadless]: './src/index.headless.ts',
[variants.clerkHeadlessBrowser]: './src/index.headless.browser.ts',
[variants.clerkLegacyBrowser]: './src/index.legacy.browser.ts',
[variants.clerkCHIPS]: './src/index.browser.ts',
};

/**
Expand DownExpand Up@@ -58,7 +56,6 @@ const common = ({ mode, variant, disableRHC = false }) => {
*/
__BUILD_FLAG_KEYLESS_UI__: isDevelopment(mode),
__BUILD_DISABLE_RHC__: JSON.stringify(disableRHC),
__BUILD_VARIANT_CHIPS__: variant === variants.clerkCHIPS,
}),
new rspack.EnvironmentPlugin({
CLERK_ENV: mode,
Expand DownExpand Up@@ -447,13 +444,6 @@ const prodConfig = ({ mode, env, analysis }) => {
// externalsForHeadless(),
);

const clerkCHIPS = merge(
entryForVariant(variants.clerkCHIPS),
common({ mode, variant: variants.clerkCHIPS }),
commonForProd(),
commonForProdChunked(),
);

const clerkEsm = merge(
entryForVariant(variants.clerk),
common({ mode, variant: variants.clerk }),
Expand DownExpand Up@@ -567,7 +557,6 @@ const prodConfig = ({ mode, env, analysis }) => {
clerkLegacyBrowser,
clerkHeadless,
clerkHeadlessBrowser,
clerkCHIPS,
clerkEsm,
clerkEsmNoRHC,
clerkCjs,
Expand DownExpand Up@@ -670,11 +659,6 @@ const devConfig = ({ mode, env }) => {
commonForDev(),
// externalsForHeadless(),
),
[variants.clerkCHIPS]: merge(
entryForVariant(variants.clerkCHIPS),
common({ mode, variant: variants.clerkCHIPS }),
commonForDev(),
),
};

if (!entryToConfigMap[variant]) {
Expand Down
16 changes: 14 additions & 2 deletions packages/clerk-js/src/core/auth/AuthCookieService.ts
Original file line numberDiff line numberDiff line change
Expand Up@@ -12,6 +12,7 @@ import { debugLogger } from '@/utils/debug';
import { clerkMissingDevBrowserJwt } from '../errors';
import { eventBus, events } from '../events';
import type { FapiClient } from '../fapiClient';
import { Environment } from '../resources/Environment';
import { createActiveContextCookie } from './cookies/activeContext';
import type { ClientUatCookieHandler } from './cookies/clientUat';
import { createClientUatCookie } from './cookies/clientUat';
Expand DownExpand Up@@ -74,16 +75,27 @@ export class AuthCookieService {

eventBus.on(events.UserSignOut, () => this.handleSignOut());

// After Environment resolves, re-write dev browser cookies with correct
// partitioned attributes. Dev browser cookies are initially written before
// Environment is fetched, so they may have stale attributes.
eventBus.on(events.EnvironmentUpdate, () => {
this.devBrowser.refreshCookies();
});

this.refreshTokenOnFocus();
this.startPollingForToken();

this.clientUat = createClientUatCookie(cookieSuffix);
this.sessionCookie = createSessionCookie(cookieSuffix);
const cookieOptions = {
usePartitionedCookies: () => Environment.getInstance().partitionedCookies,
};
this.clientUat = createClientUatCookie(cookieSuffix, cookieOptions);
this.sessionCookie = createSessionCookie(cookieSuffix, cookieOptions);
this.activeCookie = createActiveContextCookie();
this.devBrowser = createDevBrowser({
frontendApi: clerk.frontendApi,
fapiClient,
cookieSuffix,
cookieOptions,
});
}

Expand Down
Original file line numberDiff line numberDiff line change
Expand Up@@ -50,7 +50,8 @@ describe('Thrown errors', () => {
const devBrowserHandler = createDevBrowser({
frontendApi: 'white-koala-42.clerk.accounts.dev',
fapiClient: mockFapiClient,
publishableKey: 'pk_test_d2hpdGUta29hbGEtNDIuY2xlcmsuYWNjb3VudHMuZGV2JA',
cookieSuffix: 'test-suffix',
cookieOptions: { usePartitionedCookies: () => false },
});

await expect(devBrowserHandler.setup()).rejects.toThrow(
Expand Down
Original file line numberDiff line numberDiff line change
Expand Up@@ -19,6 +19,7 @@ describe('createClientUatCookie', () => {
const mockCookieSuffix = 'test-suffix';
const mockExpires = new Date('2024-12-31');
const mockDomain = 'test.domain';
const defaultOptions = { usePartitionedCookies: () => false };
const mockSet = vi.fn();
const mockRemove = vi.fn();
const mockGet = vi.fn();
Expand All@@ -39,14 +40,14 @@ describe('createClientUatCookie', () => {
});

it('should create both suffixed and non-suffixed cookie handlers', () => {
createClientUatCookie(mockCookieSuffix);
createClientUatCookie(mockCookieSuffix, defaultOptions);
expect(createCookieHandler).toHaveBeenCalledTimes(2);
expect(createCookieHandler).toHaveBeenCalledWith('__client_uat');
expect(createCookieHandler).toHaveBeenCalledWith('__client_uat_test-suffix');
});

it('should set cookies with correct parameters in non-cross-origin context', () => {
const cookieHandler = createClientUatCookie(mockCookieSuffix);
const cookieHandler = createClientUatCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set({
id: 'test-client',
updatedAt: new Date('2024-01-01'),
Expand All@@ -65,7 +66,7 @@ describe('createClientUatCookie', () => {

it('should set cookies with None sameSite in cross-origin context', () => {
(inCrossOriginIframe as ReturnType<typeof vi.fn>).mockReturnValue(true);
const cookieHandler = createClientUatCookie(mockCookieSuffix);
const cookieHandler = createClientUatCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set({
id: 'test-client',
updatedAt: new Date('2024-01-01'),
Expand All@@ -82,7 +83,7 @@ describe('createClientUatCookie', () => {
});

it('should set value to 0 when client is undefined', () => {
const cookieHandler = createClientUatCookie(mockCookieSuffix);
const cookieHandler = createClientUatCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set(undefined);

expect(mockSet).toHaveBeenCalledWith('0', {
Expand All@@ -95,7 +96,7 @@ describe('createClientUatCookie', () => {
});

it('should set value to 0 when client has no signed in sessions', () => {
const cookieHandler = createClientUatCookie(mockCookieSuffix);
const cookieHandler = createClientUatCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set({
id: 'test-client',
updatedAt: new Date('2024-01-01'),
Expand All@@ -114,7 +115,7 @@ describe('createClientUatCookie', () => {
it('should get cookie value from suffixed cookie first, then fallback to non-suffixed', () => {
mockGet.mockImplementationOnce(() => '1234567890').mockImplementationOnce(() => '9876543210');

const cookieHandler = createClientUatCookie(mockCookieSuffix);
const cookieHandler = createClientUatCookie(mockCookieSuffix, defaultOptions);
const result = cookieHandler.get();

expect(result).toBe(1234567890);
Expand All@@ -123,15 +124,15 @@ describe('createClientUatCookie', () => {
it('should return 0 when no cookie value is present', () => {
mockGet.mockImplementationOnce(() => undefined).mockImplementationOnce(() => undefined);

const cookieHandler = createClientUatCookie(mockCookieSuffix);
const cookieHandler = createClientUatCookie(mockCookieSuffix, defaultOptions);
const result = cookieHandler.get();

expect(result).toBe(0);
});

it('should set cookies with SameSite=None when the host requires it', () => {
(requiresSameSiteNone as ReturnType<typeof vi.fn>).mockReturnValue(true);
const cookieHandler = createClientUatCookie(mockCookieSuffix);
const cookieHandler = createClientUatCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set({
id: 'test-client',
updatedAt: new Date('2024-01-01'),
Expand All@@ -146,4 +147,21 @@ describe('createClientUatCookie', () => {
partitioned: false,
});
});

it('should set partitioned cookies when usePartitionedCookies returns true', () => {
const cookieHandler = createClientUatCookie(mockCookieSuffix, { usePartitionedCookies: () => true });
cookieHandler.set({
id: 'test-client',
updatedAt: new Date('2024-01-01'),
signedInSessions: ['session1'],
});

expect(mockSet).toHaveBeenCalledWith('1704067200', {
domain: mockDomain,
expires: mockExpires,
sameSite: 'None',
secure: true,
partitioned: true,
});
});
});
Original file line numberDiff line numberDiff line change
Expand Up@@ -17,6 +17,7 @@ describe('createSessionCookie', () => {
const mockCookieSuffix = 'test-suffix';
const mockToken = 'test-token';
const mockExpires = new Date('2024-12-31');
const defaultOptions = { usePartitionedCookies: () => false };
const mockSet = vi.fn();
const mockRemove = vi.fn();
const mockGet = vi.fn();
Expand All@@ -36,14 +37,14 @@ describe('createSessionCookie', () => {
});

it('should create both suffixed and non-suffixed cookie handlers', () => {
createSessionCookie(mockCookieSuffix);
createSessionCookie(mockCookieSuffix, defaultOptions);
expect(createCookieHandler).toHaveBeenCalledTimes(2);
expect(createCookieHandler).toHaveBeenCalledWith('__session');
expect(createCookieHandler).toHaveBeenCalledWith('__session_test-suffix');
});

it('should set cookies with correct parameters in non-cross-origin context', () => {
const cookieHandler = createSessionCookie(mockCookieSuffix);
const cookieHandler = createSessionCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set(mockToken);

expect(mockSet).toHaveBeenCalledTimes(2);
Expand All@@ -57,7 +58,7 @@ describe('createSessionCookie', () => {

it('should set cookies with None sameSite in cross-origin context', () => {
(inCrossOriginIframe as ReturnType<typeof vi.fn>).mockReturnValue(true);
const cookieHandler = createSessionCookie(mockCookieSuffix);
const cookieHandler = createSessionCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set(mockToken);

expect(mockSet).toHaveBeenCalledWith(mockToken, {
Expand All@@ -69,14 +70,14 @@ describe('createSessionCookie', () => {
});

it('should remove both cookies when remove is called', () => {
const cookieHandler = createSessionCookie(mockCookieSuffix);
const cookieHandler = createSessionCookie(mockCookieSuffix, defaultOptions);
cookieHandler.remove();

expect(mockRemove).toHaveBeenCalledTimes(2);
});

it('should remove cookies with the same attributes as set', () => {
const cookieHandler = createSessionCookie(mockCookieSuffix);
const cookieHandler = createSessionCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set(mockToken);
cookieHandler.remove();

Expand All@@ -102,7 +103,7 @@ describe('createSessionCookie', () => {
it('should get cookie value from suffixed cookie first, then fallback to non-suffixed', () => {
mockGet.mockImplementationOnce(() => 'suffixed-value').mockImplementationOnce(() => 'non-suffixed-value');

const cookieHandler = createSessionCookie(mockCookieSuffix);
const cookieHandler = createSessionCookie(mockCookieSuffix, defaultOptions);
const result = cookieHandler.get();

expect(result).toBe('suffixed-value');
Expand All@@ -111,15 +112,15 @@ describe('createSessionCookie', () => {
it('should fallback to non-suffixed cookie when suffixed cookie is not present', () => {
mockGet.mockImplementationOnce(() => undefined).mockImplementationOnce(() => 'non-suffixed-value');

const cookieHandler = createSessionCookie(mockCookieSuffix);
const cookieHandler = createSessionCookie(mockCookieSuffix, defaultOptions);
const result = cookieHandler.get();

expect(result).toBe('non-suffixed-value');
});

it('should set cookies with None sameSite on .replit.dev origins', () => {
(requiresSameSiteNone as ReturnType<typeof vi.fn>).mockReturnValue(true);
const cookieHandler = createSessionCookie(mockCookieSuffix);
const cookieHandler = createSessionCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set(mockToken);

expect(mockSet).toHaveBeenCalledWith(mockToken, {
Expand All@@ -129,4 +130,17 @@ describe('createSessionCookie', () => {
partitioned: false,
});
});

it('should set partitioned cookies when usePartitionedCookies returns true', () => {
const cookieHandler = createSessionCookie(mockCookieSuffix, { usePartitionedCookies: () => true });
cookieHandler.set(mockToken);

expect(mockRemove).toHaveBeenCalledTimes(2);
expect(mockSet).toHaveBeenCalledWith(mockToken, {
expires: mockExpires,
sameSite: 'None',
secure: true,
partitioned: true,
});
});
});
18 changes: 11 additions & 7 deletions packages/clerk-js/src/core/auth/cookies/clientUat.ts
Original file line numberDiff line numberDiff line change
Expand Up@@ -15,13 +15,20 @@ export type ClientUatCookieHandler = {
get: () => number;
};

export type ClientUatCookieOptions = {
usePartitionedCookies: () => boolean;
};

/**
* Create a long-lived JS cookie to store the client last updated_at timestamp
* for development instances (for production instance is set by FAPI).
* The cookie is used as hint from the Clerk Backend packages to identify
* if the user is authenticated or not.
*/
export const createClientUatCookie = (cookieSuffix: string): ClientUatCookieHandler => {
export const createClientUatCookie = (
cookieSuffix: string,
options: ClientUatCookieOptions,
): ClientUatCookieHandler => {
const clientUatCookie = createCookieHandler(CLIENT_UAT_COOKIE_NAME);
const suffixedClientUatCookie = createCookieHandler(getSuffixedCookieName(CLIENT_UAT_COOKIE_NAME, cookieSuffix));

Expand All@@ -38,13 +45,10 @@ export const createClientUatCookie = (cookieSuffix: string): ClientUatCookieHand
* Generally, this is handled by redirectWithAuth() being called and relying on the dev browser ID in the URL,
* but if that isn't used we rely on this. In production, nothing is cross-domain and Lax is used when client_uat is set from FAPI.
*/
const sameSite = __BUILD_VARIANT_CHIPS__
? 'None'
: inCrossOriginIframe() || requiresSameSiteNone()
? 'None'
: 'Strict';
const isPartitioned = options.usePartitionedCookies();
const sameSite = isPartitioned || inCrossOriginIframe() || requiresSameSiteNone() ? 'None' : 'Strict';
const secure = getSecureAttribute(sameSite);
const partitioned = __BUILD_VARIANT_CHIPS__ && secure;
const partitioned = isPartitioned && secure;
const domain = getCookieDomain(undefined, undefined, { sameSite, secure });

// '0' indicates the user is signed out
Expand Down
Loading
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links"); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + '
Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/remove-chips-build-variant.md
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
---
"@clerk/clerk-js": patch
"@clerk/shared": patch
---

Remove CHIPS build variant and use `partitioned_cookies` environment flag from the Clerk API to control partitioned cookie behavior at runtime.
1 change: 0 additions & 1 deletion packages/clerk-js/package.json
Original file line numberDiff line numberDiff line change
Expand Up@@ -42,7 +42,6 @@
"bundlewatch:fix": "node bundlewatch-fix.mjs",
"clean": "rimraf ./dist",
"dev": "rspack serve --config rspack.config.js",
"dev:chips": "rspack serve --config rspack.config.js --env variant=\"clerk.chips.browser\"",
"dev:headless": "rspack serve --config rspack.config.js --env variant=\"clerk.headless.browser\"",
"dev:origin": "rspack serve --config rspack.config.js --env devOrigin=http://localhost:${PORT:-4000}",
"dev:sandbox": "rspack serve --config rspack.config.js --env devOrigin=http://localhost:${PORT:-4000} --env sandbox=1",
Expand Down
16 changes: 0 additions & 16 deletions packages/clerk-js/rspack.config.js
Original file line numberDiff line numberDiff line change
Expand Up@@ -16,7 +16,6 @@ const variants = {
clerkHeadless: 'clerk.headless',
clerkHeadlessBrowser: 'clerk.headless.browser',
clerkLegacyBrowser: 'clerk.legacy.browser',
clerkCHIPS: 'clerk.chips.browser',
};

const variantToSourceFile = {
Expand All@@ -26,7 +25,6 @@ const variantToSourceFile = {
[variants.clerkHeadless]: './src/index.headless.ts',
[variants.clerkHeadlessBrowser]: './src/index.headless.browser.ts',
[variants.clerkLegacyBrowser]: './src/index.legacy.browser.ts',
[variants.clerkCHIPS]: './src/index.browser.ts',
};

/**
Expand DownExpand Up@@ -58,7 +56,6 @@ const common = ({ mode, variant, disableRHC = false }) => {
*/
__BUILD_FLAG_KEYLESS_UI__: isDevelopment(mode),
__BUILD_DISABLE_RHC__: JSON.stringify(disableRHC),
__BUILD_VARIANT_CHIPS__: variant === variants.clerkCHIPS,
}),
new rspack.EnvironmentPlugin({
CLERK_ENV: mode,
Expand DownExpand Up@@ -447,13 +444,6 @@ const prodConfig = ({ mode, env, analysis }) => {
// externalsForHeadless(),
);

const clerkCHIPS = merge(
entryForVariant(variants.clerkCHIPS),
common({ mode, variant: variants.clerkCHIPS }),
commonForProd(),
commonForProdChunked(),
);

const clerkEsm = merge(
entryForVariant(variants.clerk),
common({ mode, variant: variants.clerk }),
Expand DownExpand Up@@ -567,7 +557,6 @@ const prodConfig = ({ mode, env, analysis }) => {
clerkLegacyBrowser,
clerkHeadless,
clerkHeadlessBrowser,
clerkCHIPS,
clerkEsm,
clerkEsmNoRHC,
clerkCjs,
Expand DownExpand Up@@ -670,11 +659,6 @@ const devConfig = ({ mode, env }) => {
commonForDev(),
// externalsForHeadless(),
),
[variants.clerkCHIPS]: merge(
entryForVariant(variants.clerkCHIPS),
common({ mode, variant: variants.clerkCHIPS }),
commonForDev(),
),
};

if (!entryToConfigMap[variant]) {
Expand Down
16 changes: 14 additions & 2 deletions packages/clerk-js/src/core/auth/AuthCookieService.ts
Original file line numberDiff line numberDiff line change
Expand Up@@ -12,6 +12,7 @@ import { debugLogger } from '@/utils/debug';
import { clerkMissingDevBrowserJwt } from '../errors';
import { eventBus, events } from '../events';
import type { FapiClient } from '../fapiClient';
import { Environment } from '../resources/Environment';
import { createActiveContextCookie } from './cookies/activeContext';
import type { ClientUatCookieHandler } from './cookies/clientUat';
import { createClientUatCookie } from './cookies/clientUat';
Expand DownExpand Up@@ -74,16 +75,27 @@ export class AuthCookieService {

eventBus.on(events.UserSignOut, () => this.handleSignOut());

// After Environment resolves, re-write dev browser cookies with correct
// partitioned attributes. Dev browser cookies are initially written before
// Environment is fetched, so they may have stale attributes.
eventBus.on(events.EnvironmentUpdate, () => {
this.devBrowser.refreshCookies();
});

this.refreshTokenOnFocus();
this.startPollingForToken();

this.clientUat = createClientUatCookie(cookieSuffix);
this.sessionCookie = createSessionCookie(cookieSuffix);
const cookieOptions = {
usePartitionedCookies: () => Environment.getInstance().partitionedCookies,
};
this.clientUat = createClientUatCookie(cookieSuffix, cookieOptions);
this.sessionCookie = createSessionCookie(cookieSuffix, cookieOptions);
this.activeCookie = createActiveContextCookie();
this.devBrowser = createDevBrowser({
frontendApi: clerk.frontendApi,
fapiClient,
cookieSuffix,
cookieOptions,
});
}

Expand Down
Original file line numberDiff line numberDiff line change
Expand Up@@ -50,7 +50,8 @@ describe('Thrown errors', () => {
const devBrowserHandler = createDevBrowser({
frontendApi: 'white-koala-42.clerk.accounts.dev',
fapiClient: mockFapiClient,
publishableKey: 'pk_test_d2hpdGUta29hbGEtNDIuY2xlcmsuYWNjb3VudHMuZGV2JA',
cookieSuffix: 'test-suffix',
cookieOptions: { usePartitionedCookies: () => false },
});

await expect(devBrowserHandler.setup()).rejects.toThrow(
Expand Down
Original file line numberDiff line numberDiff line change
Expand Up@@ -19,6 +19,7 @@ describe('createClientUatCookie', () => {
const mockCookieSuffix = 'test-suffix';
const mockExpires = new Date('2024-12-31');
const mockDomain = 'test.domain';
const defaultOptions = { usePartitionedCookies: () => false };
const mockSet = vi.fn();
const mockRemove = vi.fn();
const mockGet = vi.fn();
Expand All@@ -39,14 +40,14 @@ describe('createClientUatCookie', () => {
});

it('should create both suffixed and non-suffixed cookie handlers', () => {
createClientUatCookie(mockCookieSuffix);
createClientUatCookie(mockCookieSuffix, defaultOptions);
expect(createCookieHandler).toHaveBeenCalledTimes(2);
expect(createCookieHandler).toHaveBeenCalledWith('__client_uat');
expect(createCookieHandler).toHaveBeenCalledWith('__client_uat_test-suffix');
});

it('should set cookies with correct parameters in non-cross-origin context', () => {
const cookieHandler = createClientUatCookie(mockCookieSuffix);
const cookieHandler = createClientUatCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set({
id: 'test-client',
updatedAt: new Date('2024-01-01'),
Expand All@@ -65,7 +66,7 @@ describe('createClientUatCookie', () => {

it('should set cookies with None sameSite in cross-origin context', () => {
(inCrossOriginIframe as ReturnType<typeof vi.fn>).mockReturnValue(true);
const cookieHandler = createClientUatCookie(mockCookieSuffix);
const cookieHandler = createClientUatCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set({
id: 'test-client',
updatedAt: new Date('2024-01-01'),
Expand All@@ -82,7 +83,7 @@ describe('createClientUatCookie', () => {
});

it('should set value to 0 when client is undefined', () => {
const cookieHandler = createClientUatCookie(mockCookieSuffix);
const cookieHandler = createClientUatCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set(undefined);

expect(mockSet).toHaveBeenCalledWith('0', {
Expand All@@ -95,7 +96,7 @@ describe('createClientUatCookie', () => {
});

it('should set value to 0 when client has no signed in sessions', () => {
const cookieHandler = createClientUatCookie(mockCookieSuffix);
const cookieHandler = createClientUatCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set({
id: 'test-client',
updatedAt: new Date('2024-01-01'),
Expand All@@ -114,7 +115,7 @@ describe('createClientUatCookie', () => {
it('should get cookie value from suffixed cookie first, then fallback to non-suffixed', () => {
mockGet.mockImplementationOnce(() => '1234567890').mockImplementationOnce(() => '9876543210');

const cookieHandler = createClientUatCookie(mockCookieSuffix);
const cookieHandler = createClientUatCookie(mockCookieSuffix, defaultOptions);
const result = cookieHandler.get();

expect(result).toBe(1234567890);
Expand All@@ -123,15 +124,15 @@ describe('createClientUatCookie', () => {
it('should return 0 when no cookie value is present', () => {
mockGet.mockImplementationOnce(() => undefined).mockImplementationOnce(() => undefined);

const cookieHandler = createClientUatCookie(mockCookieSuffix);
const cookieHandler = createClientUatCookie(mockCookieSuffix, defaultOptions);
const result = cookieHandler.get();

expect(result).toBe(0);
});

it('should set cookies with SameSite=None when the host requires it', () => {
(requiresSameSiteNone as ReturnType<typeof vi.fn>).mockReturnValue(true);
const cookieHandler = createClientUatCookie(mockCookieSuffix);
const cookieHandler = createClientUatCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set({
id: 'test-client',
updatedAt: new Date('2024-01-01'),
Expand All@@ -146,4 +147,21 @@ describe('createClientUatCookie', () => {
partitioned: false,
});
});

it('should set partitioned cookies when usePartitionedCookies returns true', () => {
const cookieHandler = createClientUatCookie(mockCookieSuffix, { usePartitionedCookies: () => true });
cookieHandler.set({
id: 'test-client',
updatedAt: new Date('2024-01-01'),
signedInSessions: ['session1'],
});

expect(mockSet).toHaveBeenCalledWith('1704067200', {
domain: mockDomain,
expires: mockExpires,
sameSite: 'None',
secure: true,
partitioned: true,
});
});
});
Original file line numberDiff line numberDiff line change
Expand Up@@ -17,6 +17,7 @@ describe('createSessionCookie', () => {
const mockCookieSuffix = 'test-suffix';
const mockToken = 'test-token';
const mockExpires = new Date('2024-12-31');
const defaultOptions = { usePartitionedCookies: () => false };
const mockSet = vi.fn();
const mockRemove = vi.fn();
const mockGet = vi.fn();
Expand All@@ -36,14 +37,14 @@ describe('createSessionCookie', () => {
});

it('should create both suffixed and non-suffixed cookie handlers', () => {
createSessionCookie(mockCookieSuffix);
createSessionCookie(mockCookieSuffix, defaultOptions);
expect(createCookieHandler).toHaveBeenCalledTimes(2);
expect(createCookieHandler).toHaveBeenCalledWith('__session');
expect(createCookieHandler).toHaveBeenCalledWith('__session_test-suffix');
});

it('should set cookies with correct parameters in non-cross-origin context', () => {
const cookieHandler = createSessionCookie(mockCookieSuffix);
const cookieHandler = createSessionCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set(mockToken);

expect(mockSet).toHaveBeenCalledTimes(2);
Expand All@@ -57,7 +58,7 @@ describe('createSessionCookie', () => {

it('should set cookies with None sameSite in cross-origin context', () => {
(inCrossOriginIframe as ReturnType<typeof vi.fn>).mockReturnValue(true);
const cookieHandler = createSessionCookie(mockCookieSuffix);
const cookieHandler = createSessionCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set(mockToken);

expect(mockSet).toHaveBeenCalledWith(mockToken, {
Expand All@@ -69,14 +70,14 @@ describe('createSessionCookie', () => {
});

it('should remove both cookies when remove is called', () => {
const cookieHandler = createSessionCookie(mockCookieSuffix);
const cookieHandler = createSessionCookie(mockCookieSuffix, defaultOptions);
cookieHandler.remove();

expect(mockRemove).toHaveBeenCalledTimes(2);
});

it('should remove cookies with the same attributes as set', () => {
const cookieHandler = createSessionCookie(mockCookieSuffix);
const cookieHandler = createSessionCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set(mockToken);
cookieHandler.remove();

Expand All@@ -102,7 +103,7 @@ describe('createSessionCookie', () => {
it('should get cookie value from suffixed cookie first, then fallback to non-suffixed', () => {
mockGet.mockImplementationOnce(() => 'suffixed-value').mockImplementationOnce(() => 'non-suffixed-value');

const cookieHandler = createSessionCookie(mockCookieSuffix);
const cookieHandler = createSessionCookie(mockCookieSuffix, defaultOptions);
const result = cookieHandler.get();

expect(result).toBe('suffixed-value');
Expand All@@ -111,15 +112,15 @@ describe('createSessionCookie', () => {
it('should fallback to non-suffixed cookie when suffixed cookie is not present', () => {
mockGet.mockImplementationOnce(() => undefined).mockImplementationOnce(() => 'non-suffixed-value');

const cookieHandler = createSessionCookie(mockCookieSuffix);
const cookieHandler = createSessionCookie(mockCookieSuffix, defaultOptions);
const result = cookieHandler.get();

expect(result).toBe('non-suffixed-value');
});

it('should set cookies with None sameSite on .replit.dev origins', () => {
(requiresSameSiteNone as ReturnType<typeof vi.fn>).mockReturnValue(true);
const cookieHandler = createSessionCookie(mockCookieSuffix);
const cookieHandler = createSessionCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set(mockToken);

expect(mockSet).toHaveBeenCalledWith(mockToken, {
Expand All@@ -129,4 +130,17 @@ describe('createSessionCookie', () => {
partitioned: false,
});
});

it('should set partitioned cookies when usePartitionedCookies returns true', () => {
const cookieHandler = createSessionCookie(mockCookieSuffix, { usePartitionedCookies: () => true });
cookieHandler.set(mockToken);

expect(mockRemove).toHaveBeenCalledTimes(2);
expect(mockSet).toHaveBeenCalledWith(mockToken, {
expires: mockExpires,
sameSite: 'None',
secure: true,
partitioned: true,
});
});
});
18 changes: 11 additions & 7 deletions packages/clerk-js/src/core/auth/cookies/clientUat.ts
Original file line numberDiff line numberDiff line change
Expand Up@@ -15,13 +15,20 @@ export type ClientUatCookieHandler = {
get: () => number;
};

export type ClientUatCookieOptions = {
usePartitionedCookies: () => boolean;
};

/**
* Create a long-lived JS cookie to store the client last updated_at timestamp
* for development instances (for production instance is set by FAPI).
* The cookie is used as hint from the Clerk Backend packages to identify
* if the user is authenticated or not.
*/
export const createClientUatCookie = (cookieSuffix: string): ClientUatCookieHandler => {
export const createClientUatCookie = (
cookieSuffix: string,
options: ClientUatCookieOptions,
): ClientUatCookieHandler => {
const clientUatCookie = createCookieHandler(CLIENT_UAT_COOKIE_NAME);
const suffixedClientUatCookie = createCookieHandler(getSuffixedCookieName(CLIENT_UAT_COOKIE_NAME, cookieSuffix));

Expand All@@ -38,13 +45,10 @@ export const createClientUatCookie = (cookieSuffix: string): ClientUatCookieHand
* Generally, this is handled by redirectWithAuth() being called and relying on the dev browser ID in the URL,
* but if that isn't used we rely on this. In production, nothing is cross-domain and Lax is used when client_uat is set from FAPI.
*/
const sameSite = __BUILD_VARIANT_CHIPS__
? 'None'
: inCrossOriginIframe() || requiresSameSiteNone()
? 'None'
: 'Strict';
const isPartitioned = options.usePartitionedCookies();
const sameSite = isPartitioned || inCrossOriginIframe() || requiresSameSiteNone() ? 'None' : 'Strict';
const secure = getSecureAttribute(sameSite);
const partitioned = __BUILD_VARIANT_CHIPS__ && secure;
const partitioned = isPartitioned && secure;
const domain = getCookieDomain(undefined, undefined, { sameSite, secure });

// '0' indicates the user is signed out
Expand Down
Loading
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default"); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/remove-chips-build-variant.md
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
---
"@clerk/clerk-js": patch
"@clerk/shared": patch
---

Remove CHIPS build variant and use `partitioned_cookies` environment flag from the Clerk API to control partitioned cookie behavior at runtime.
1 change: 0 additions & 1 deletion packages/clerk-js/package.json
Original file line numberDiff line numberDiff line change
Expand Up@@ -42,7 +42,6 @@
"bundlewatch:fix": "node bundlewatch-fix.mjs",
"clean": "rimraf ./dist",
"dev": "rspack serve --config rspack.config.js",
"dev:chips": "rspack serve --config rspack.config.js --env variant=\"clerk.chips.browser\"",
"dev:headless": "rspack serve --config rspack.config.js --env variant=\"clerk.headless.browser\"",
"dev:origin": "rspack serve --config rspack.config.js --env devOrigin=http://localhost:${PORT:-4000}",
"dev:sandbox": "rspack serve --config rspack.config.js --env devOrigin=http://localhost:${PORT:-4000} --env sandbox=1",
Expand Down
16 changes: 0 additions & 16 deletions packages/clerk-js/rspack.config.js
Original file line numberDiff line numberDiff line change
Expand Up@@ -16,7 +16,6 @@ const variants = {
clerkHeadless: 'clerk.headless',
clerkHeadlessBrowser: 'clerk.headless.browser',
clerkLegacyBrowser: 'clerk.legacy.browser',
clerkCHIPS: 'clerk.chips.browser',
};

const variantToSourceFile = {
Expand All@@ -26,7 +25,6 @@ const variantToSourceFile = {
[variants.clerkHeadless]: './src/index.headless.ts',
[variants.clerkHeadlessBrowser]: './src/index.headless.browser.ts',
[variants.clerkLegacyBrowser]: './src/index.legacy.browser.ts',
[variants.clerkCHIPS]: './src/index.browser.ts',
};

/**
Expand DownExpand Up@@ -58,7 +56,6 @@ const common = ({ mode, variant, disableRHC = false }) => {
*/
__BUILD_FLAG_KEYLESS_UI__: isDevelopment(mode),
__BUILD_DISABLE_RHC__: JSON.stringify(disableRHC),
__BUILD_VARIANT_CHIPS__: variant === variants.clerkCHIPS,
}),
new rspack.EnvironmentPlugin({
CLERK_ENV: mode,
Expand DownExpand Up@@ -447,13 +444,6 @@ const prodConfig = ({ mode, env, analysis }) => {
// externalsForHeadless(),
);

const clerkCHIPS = merge(
entryForVariant(variants.clerkCHIPS),
common({ mode, variant: variants.clerkCHIPS }),
commonForProd(),
commonForProdChunked(),
);

const clerkEsm = merge(
entryForVariant(variants.clerk),
common({ mode, variant: variants.clerk }),
Expand DownExpand Up@@ -567,7 +557,6 @@ const prodConfig = ({ mode, env, analysis }) => {
clerkLegacyBrowser,
clerkHeadless,
clerkHeadlessBrowser,
clerkCHIPS,
clerkEsm,
clerkEsmNoRHC,
clerkCjs,
Expand DownExpand Up@@ -670,11 +659,6 @@ const devConfig = ({ mode, env }) => {
commonForDev(),
// externalsForHeadless(),
),
[variants.clerkCHIPS]: merge(
entryForVariant(variants.clerkCHIPS),
common({ mode, variant: variants.clerkCHIPS }),
commonForDev(),
),
};

if (!entryToConfigMap[variant]) {
Expand Down
16 changes: 14 additions & 2 deletions packages/clerk-js/src/core/auth/AuthCookieService.ts
Original file line numberDiff line numberDiff line change
Expand Up@@ -12,6 +12,7 @@ import { debugLogger } from '@/utils/debug';
import { clerkMissingDevBrowserJwt } from '../errors';
import { eventBus, events } from '../events';
import type { FapiClient } from '../fapiClient';
import { Environment } from '../resources/Environment';
import { createActiveContextCookie } from './cookies/activeContext';
import type { ClientUatCookieHandler } from './cookies/clientUat';
import { createClientUatCookie } from './cookies/clientUat';
Expand DownExpand Up@@ -74,16 +75,27 @@ export class AuthCookieService {

eventBus.on(events.UserSignOut, () => this.handleSignOut());

// After Environment resolves, re-write dev browser cookies with correct
// partitioned attributes. Dev browser cookies are initially written before
// Environment is fetched, so they may have stale attributes.
eventBus.on(events.EnvironmentUpdate, () => {
this.devBrowser.refreshCookies();
});

this.refreshTokenOnFocus();
this.startPollingForToken();

this.clientUat = createClientUatCookie(cookieSuffix);
this.sessionCookie = createSessionCookie(cookieSuffix);
const cookieOptions = {
usePartitionedCookies: () => Environment.getInstance().partitionedCookies,
};
this.clientUat = createClientUatCookie(cookieSuffix, cookieOptions);
this.sessionCookie = createSessionCookie(cookieSuffix, cookieOptions);
this.activeCookie = createActiveContextCookie();
this.devBrowser = createDevBrowser({
frontendApi: clerk.frontendApi,
fapiClient,
cookieSuffix,
cookieOptions,
});
}

Expand Down
Original file line numberDiff line numberDiff line change
Expand Up@@ -50,7 +50,8 @@ describe('Thrown errors', () => {
const devBrowserHandler = createDevBrowser({
frontendApi: 'white-koala-42.clerk.accounts.dev',
fapiClient: mockFapiClient,
publishableKey: 'pk_test_d2hpdGUta29hbGEtNDIuY2xlcmsuYWNjb3VudHMuZGV2JA',
cookieSuffix: 'test-suffix',
cookieOptions: { usePartitionedCookies: () => false },
});

await expect(devBrowserHandler.setup()).rejects.toThrow(
Expand Down
Original file line numberDiff line numberDiff line change
Expand Up@@ -19,6 +19,7 @@ describe('createClientUatCookie', () => {
const mockCookieSuffix = 'test-suffix';
const mockExpires = new Date('2024-12-31');
const mockDomain = 'test.domain';
const defaultOptions = { usePartitionedCookies: () => false };
const mockSet = vi.fn();
const mockRemove = vi.fn();
const mockGet = vi.fn();
Expand All@@ -39,14 +40,14 @@ describe('createClientUatCookie', () => {
});

it('should create both suffixed and non-suffixed cookie handlers', () => {
createClientUatCookie(mockCookieSuffix);
createClientUatCookie(mockCookieSuffix, defaultOptions);
expect(createCookieHandler).toHaveBeenCalledTimes(2);
expect(createCookieHandler).toHaveBeenCalledWith('__client_uat');
expect(createCookieHandler).toHaveBeenCalledWith('__client_uat_test-suffix');
});

it('should set cookies with correct parameters in non-cross-origin context', () => {
const cookieHandler = createClientUatCookie(mockCookieSuffix);
const cookieHandler = createClientUatCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set({
id: 'test-client',
updatedAt: new Date('2024-01-01'),
Expand All@@ -65,7 +66,7 @@ describe('createClientUatCookie', () => {

it('should set cookies with None sameSite in cross-origin context', () => {
(inCrossOriginIframe as ReturnType<typeof vi.fn>).mockReturnValue(true);
const cookieHandler = createClientUatCookie(mockCookieSuffix);
const cookieHandler = createClientUatCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set({
id: 'test-client',
updatedAt: new Date('2024-01-01'),
Expand All@@ -82,7 +83,7 @@ describe('createClientUatCookie', () => {
});

it('should set value to 0 when client is undefined', () => {
const cookieHandler = createClientUatCookie(mockCookieSuffix);
const cookieHandler = createClientUatCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set(undefined);

expect(mockSet).toHaveBeenCalledWith('0', {
Expand All@@ -95,7 +96,7 @@ describe('createClientUatCookie', () => {
});

it('should set value to 0 when client has no signed in sessions', () => {
const cookieHandler = createClientUatCookie(mockCookieSuffix);
const cookieHandler = createClientUatCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set({
id: 'test-client',
updatedAt: new Date('2024-01-01'),
Expand All@@ -114,7 +115,7 @@ describe('createClientUatCookie', () => {
it('should get cookie value from suffixed cookie first, then fallback to non-suffixed', () => {
mockGet.mockImplementationOnce(() => '1234567890').mockImplementationOnce(() => '9876543210');

const cookieHandler = createClientUatCookie(mockCookieSuffix);
const cookieHandler = createClientUatCookie(mockCookieSuffix, defaultOptions);
const result = cookieHandler.get();

expect(result).toBe(1234567890);
Expand All@@ -123,15 +124,15 @@ describe('createClientUatCookie', () => {
it('should return 0 when no cookie value is present', () => {
mockGet.mockImplementationOnce(() => undefined).mockImplementationOnce(() => undefined);

const cookieHandler = createClientUatCookie(mockCookieSuffix);
const cookieHandler = createClientUatCookie(mockCookieSuffix, defaultOptions);
const result = cookieHandler.get();

expect(result).toBe(0);
});

it('should set cookies with SameSite=None when the host requires it', () => {
(requiresSameSiteNone as ReturnType<typeof vi.fn>).mockReturnValue(true);
const cookieHandler = createClientUatCookie(mockCookieSuffix);
const cookieHandler = createClientUatCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set({
id: 'test-client',
updatedAt: new Date('2024-01-01'),
Expand All@@ -146,4 +147,21 @@ describe('createClientUatCookie', () => {
partitioned: false,
});
});

it('should set partitioned cookies when usePartitionedCookies returns true', () => {
const cookieHandler = createClientUatCookie(mockCookieSuffix, { usePartitionedCookies: () => true });
cookieHandler.set({
id: 'test-client',
updatedAt: new Date('2024-01-01'),
signedInSessions: ['session1'],
});

expect(mockSet).toHaveBeenCalledWith('1704067200', {
domain: mockDomain,
expires: mockExpires,
sameSite: 'None',
secure: true,
partitioned: true,
});
});
});
Original file line numberDiff line numberDiff line change
Expand Up@@ -17,6 +17,7 @@ describe('createSessionCookie', () => {
const mockCookieSuffix = 'test-suffix';
const mockToken = 'test-token';
const mockExpires = new Date('2024-12-31');
const defaultOptions = { usePartitionedCookies: () => false };
const mockSet = vi.fn();
const mockRemove = vi.fn();
const mockGet = vi.fn();
Expand All@@ -36,14 +37,14 @@ describe('createSessionCookie', () => {
});

it('should create both suffixed and non-suffixed cookie handlers', () => {
createSessionCookie(mockCookieSuffix);
createSessionCookie(mockCookieSuffix, defaultOptions);
expect(createCookieHandler).toHaveBeenCalledTimes(2);
expect(createCookieHandler).toHaveBeenCalledWith('__session');
expect(createCookieHandler).toHaveBeenCalledWith('__session_test-suffix');
});

it('should set cookies with correct parameters in non-cross-origin context', () => {
const cookieHandler = createSessionCookie(mockCookieSuffix);
const cookieHandler = createSessionCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set(mockToken);

expect(mockSet).toHaveBeenCalledTimes(2);
Expand All@@ -57,7 +58,7 @@ describe('createSessionCookie', () => {

it('should set cookies with None sameSite in cross-origin context', () => {
(inCrossOriginIframe as ReturnType<typeof vi.fn>).mockReturnValue(true);
const cookieHandler = createSessionCookie(mockCookieSuffix);
const cookieHandler = createSessionCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set(mockToken);

expect(mockSet).toHaveBeenCalledWith(mockToken, {
Expand All@@ -69,14 +70,14 @@ describe('createSessionCookie', () => {
});

it('should remove both cookies when remove is called', () => {
const cookieHandler = createSessionCookie(mockCookieSuffix);
const cookieHandler = createSessionCookie(mockCookieSuffix, defaultOptions);
cookieHandler.remove();

expect(mockRemove).toHaveBeenCalledTimes(2);
});

it('should remove cookies with the same attributes as set', () => {
const cookieHandler = createSessionCookie(mockCookieSuffix);
const cookieHandler = createSessionCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set(mockToken);
cookieHandler.remove();

Expand All@@ -102,7 +103,7 @@ describe('createSessionCookie', () => {
it('should get cookie value from suffixed cookie first, then fallback to non-suffixed', () => {
mockGet.mockImplementationOnce(() => 'suffixed-value').mockImplementationOnce(() => 'non-suffixed-value');

const cookieHandler = createSessionCookie(mockCookieSuffix);
const cookieHandler = createSessionCookie(mockCookieSuffix, defaultOptions);
const result = cookieHandler.get();

expect(result).toBe('suffixed-value');
Expand All@@ -111,15 +112,15 @@ describe('createSessionCookie', () => {
it('should fallback to non-suffixed cookie when suffixed cookie is not present', () => {
mockGet.mockImplementationOnce(() => undefined).mockImplementationOnce(() => 'non-suffixed-value');

const cookieHandler = createSessionCookie(mockCookieSuffix);
const cookieHandler = createSessionCookie(mockCookieSuffix, defaultOptions);
const result = cookieHandler.get();

expect(result).toBe('non-suffixed-value');
});

it('should set cookies with None sameSite on .replit.dev origins', () => {
(requiresSameSiteNone as ReturnType<typeof vi.fn>).mockReturnValue(true);
const cookieHandler = createSessionCookie(mockCookieSuffix);
const cookieHandler = createSessionCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set(mockToken);

expect(mockSet).toHaveBeenCalledWith(mockToken, {
Expand All@@ -129,4 +130,17 @@ describe('createSessionCookie', () => {
partitioned: false,
});
});

it('should set partitioned cookies when usePartitionedCookies returns true', () => {
const cookieHandler = createSessionCookie(mockCookieSuffix, { usePartitionedCookies: () => true });
cookieHandler.set(mockToken);

expect(mockRemove).toHaveBeenCalledTimes(2);
expect(mockSet).toHaveBeenCalledWith(mockToken, {
expires: mockExpires,
sameSite: 'None',
secure: true,
partitioned: true,
});
});
});
18 changes: 11 additions & 7 deletions packages/clerk-js/src/core/auth/cookies/clientUat.ts
Original file line numberDiff line numberDiff line change
Expand Up@@ -15,13 +15,20 @@ export type ClientUatCookieHandler = {
get: () => number;
};

export type ClientUatCookieOptions = {
usePartitionedCookies: () => boolean;
};

/**
* Create a long-lived JS cookie to store the client last updated_at timestamp
* for development instances (for production instance is set by FAPI).
* The cookie is used as hint from the Clerk Backend packages to identify
* if the user is authenticated or not.
*/
export const createClientUatCookie = (cookieSuffix: string): ClientUatCookieHandler => {
export const createClientUatCookie = (
cookieSuffix: string,
options: ClientUatCookieOptions,
): ClientUatCookieHandler => {
const clientUatCookie = createCookieHandler(CLIENT_UAT_COOKIE_NAME);
const suffixedClientUatCookie = createCookieHandler(getSuffixedCookieName(CLIENT_UAT_COOKIE_NAME, cookieSuffix));

Expand All@@ -38,13 +45,10 @@ export const createClientUatCookie = (cookieSuffix: string): ClientUatCookieHand
* Generally, this is handled by redirectWithAuth() being called and relying on the dev browser ID in the URL,
* but if that isn't used we rely on this. In production, nothing is cross-domain and Lax is used when client_uat is set from FAPI.
*/
const sameSite = __BUILD_VARIANT_CHIPS__
? 'None'
: inCrossOriginIframe() || requiresSameSiteNone()
? 'None'
: 'Strict';
const isPartitioned = options.usePartitionedCookies();
const sameSite = isPartitioned || inCrossOriginIframe() || requiresSameSiteNone() ? 'None' : 'Strict';
const secure = getSecureAttribute(sameSite);
const partitioned = __BUILD_VARIANT_CHIPS__ && secure;
const partitioned = isPartitioned && secure;
const domain = getCookieDomain(undefined, undefined, { sameSite, secure });

// '0' indicates the user is signed out
Expand Down
Loading
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers"); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/remove-chips-build-variant.md
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
---
"@clerk/clerk-js": patch
"@clerk/shared": patch
---

Remove CHIPS build variant and use `partitioned_cookies` environment flag from the Clerk API to control partitioned cookie behavior at runtime.
1 change: 0 additions & 1 deletion packages/clerk-js/package.json
Original file line numberDiff line numberDiff line change
Expand Up@@ -42,7 +42,6 @@
"bundlewatch:fix": "node bundlewatch-fix.mjs",
"clean": "rimraf ./dist",
"dev": "rspack serve --config rspack.config.js",
"dev:chips": "rspack serve --config rspack.config.js --env variant=\"clerk.chips.browser\"",
"dev:headless": "rspack serve --config rspack.config.js --env variant=\"clerk.headless.browser\"",
"dev:origin": "rspack serve --config rspack.config.js --env devOrigin=http://localhost:${PORT:-4000}",
"dev:sandbox": "rspack serve --config rspack.config.js --env devOrigin=http://localhost:${PORT:-4000} --env sandbox=1",
Expand Down
16 changes: 0 additions & 16 deletions packages/clerk-js/rspack.config.js
Original file line numberDiff line numberDiff line change
Expand Up@@ -16,7 +16,6 @@ const variants = {
clerkHeadless: 'clerk.headless',
clerkHeadlessBrowser: 'clerk.headless.browser',
clerkLegacyBrowser: 'clerk.legacy.browser',
clerkCHIPS: 'clerk.chips.browser',
};

const variantToSourceFile = {
Expand All@@ -26,7 +25,6 @@ const variantToSourceFile = {
[variants.clerkHeadless]: './src/index.headless.ts',
[variants.clerkHeadlessBrowser]: './src/index.headless.browser.ts',
[variants.clerkLegacyBrowser]: './src/index.legacy.browser.ts',
[variants.clerkCHIPS]: './src/index.browser.ts',
};

/**
Expand DownExpand Up@@ -58,7 +56,6 @@ const common = ({ mode, variant, disableRHC = false }) => {
*/
__BUILD_FLAG_KEYLESS_UI__: isDevelopment(mode),
__BUILD_DISABLE_RHC__: JSON.stringify(disableRHC),
__BUILD_VARIANT_CHIPS__: variant === variants.clerkCHIPS,
}),
new rspack.EnvironmentPlugin({
CLERK_ENV: mode,
Expand DownExpand Up@@ -447,13 +444,6 @@ const prodConfig = ({ mode, env, analysis }) => {
// externalsForHeadless(),
);

const clerkCHIPS = merge(
entryForVariant(variants.clerkCHIPS),
common({ mode, variant: variants.clerkCHIPS }),
commonForProd(),
commonForProdChunked(),
);

const clerkEsm = merge(
entryForVariant(variants.clerk),
common({ mode, variant: variants.clerk }),
Expand DownExpand Up@@ -567,7 +557,6 @@ const prodConfig = ({ mode, env, analysis }) => {
clerkLegacyBrowser,
clerkHeadless,
clerkHeadlessBrowser,
clerkCHIPS,
clerkEsm,
clerkEsmNoRHC,
clerkCjs,
Expand DownExpand Up@@ -670,11 +659,6 @@ const devConfig = ({ mode, env }) => {
commonForDev(),
// externalsForHeadless(),
),
[variants.clerkCHIPS]: merge(
entryForVariant(variants.clerkCHIPS),
common({ mode, variant: variants.clerkCHIPS }),
commonForDev(),
),
};

if (!entryToConfigMap[variant]) {
Expand Down
16 changes: 14 additions & 2 deletions packages/clerk-js/src/core/auth/AuthCookieService.ts
Original file line numberDiff line numberDiff line change
Expand Up@@ -12,6 +12,7 @@ import { debugLogger } from '@/utils/debug';
import { clerkMissingDevBrowserJwt } from '../errors';
import { eventBus, events } from '../events';
import type { FapiClient } from '../fapiClient';
import { Environment } from '../resources/Environment';
import { createActiveContextCookie } from './cookies/activeContext';
import type { ClientUatCookieHandler } from './cookies/clientUat';
import { createClientUatCookie } from './cookies/clientUat';
Expand DownExpand Up@@ -74,16 +75,27 @@ export class AuthCookieService {

eventBus.on(events.UserSignOut, () => this.handleSignOut());

// After Environment resolves, re-write dev browser cookies with correct
// partitioned attributes. Dev browser cookies are initially written before
// Environment is fetched, so they may have stale attributes.
eventBus.on(events.EnvironmentUpdate, () => {
this.devBrowser.refreshCookies();
});

this.refreshTokenOnFocus();
this.startPollingForToken();

this.clientUat = createClientUatCookie(cookieSuffix);
this.sessionCookie = createSessionCookie(cookieSuffix);
const cookieOptions = {
usePartitionedCookies: () => Environment.getInstance().partitionedCookies,
};
this.clientUat = createClientUatCookie(cookieSuffix, cookieOptions);
this.sessionCookie = createSessionCookie(cookieSuffix, cookieOptions);
this.activeCookie = createActiveContextCookie();
this.devBrowser = createDevBrowser({
frontendApi: clerk.frontendApi,
fapiClient,
cookieSuffix,
cookieOptions,
});
}

Expand Down
Original file line numberDiff line numberDiff line change
Expand Up@@ -50,7 +50,8 @@ describe('Thrown errors', () => {
const devBrowserHandler = createDevBrowser({
frontendApi: 'white-koala-42.clerk.accounts.dev',
fapiClient: mockFapiClient,
publishableKey: 'pk_test_d2hpdGUta29hbGEtNDIuY2xlcmsuYWNjb3VudHMuZGV2JA',
cookieSuffix: 'test-suffix',
cookieOptions: { usePartitionedCookies: () => false },
});

await expect(devBrowserHandler.setup()).rejects.toThrow(
Expand Down
Original file line numberDiff line numberDiff line change
Expand Up@@ -19,6 +19,7 @@ describe('createClientUatCookie', () => {
const mockCookieSuffix = 'test-suffix';
const mockExpires = new Date('2024-12-31');
const mockDomain = 'test.domain';
const defaultOptions = { usePartitionedCookies: () => false };
const mockSet = vi.fn();
const mockRemove = vi.fn();
const mockGet = vi.fn();
Expand All@@ -39,14 +40,14 @@ describe('createClientUatCookie', () => {
});

it('should create both suffixed and non-suffixed cookie handlers', () => {
createClientUatCookie(mockCookieSuffix);
createClientUatCookie(mockCookieSuffix, defaultOptions);
expect(createCookieHandler).toHaveBeenCalledTimes(2);
expect(createCookieHandler).toHaveBeenCalledWith('__client_uat');
expect(createCookieHandler).toHaveBeenCalledWith('__client_uat_test-suffix');
});

it('should set cookies with correct parameters in non-cross-origin context', () => {
const cookieHandler = createClientUatCookie(mockCookieSuffix);
const cookieHandler = createClientUatCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set({
id: 'test-client',
updatedAt: new Date('2024-01-01'),
Expand All@@ -65,7 +66,7 @@ describe('createClientUatCookie', () => {

it('should set cookies with None sameSite in cross-origin context', () => {
(inCrossOriginIframe as ReturnType<typeof vi.fn>).mockReturnValue(true);
const cookieHandler = createClientUatCookie(mockCookieSuffix);
const cookieHandler = createClientUatCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set({
id: 'test-client',
updatedAt: new Date('2024-01-01'),
Expand All@@ -82,7 +83,7 @@ describe('createClientUatCookie', () => {
});

it('should set value to 0 when client is undefined', () => {
const cookieHandler = createClientUatCookie(mockCookieSuffix);
const cookieHandler = createClientUatCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set(undefined);

expect(mockSet).toHaveBeenCalledWith('0', {
Expand All@@ -95,7 +96,7 @@ describe('createClientUatCookie', () => {
});

it('should set value to 0 when client has no signed in sessions', () => {
const cookieHandler = createClientUatCookie(mockCookieSuffix);
const cookieHandler = createClientUatCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set({
id: 'test-client',
updatedAt: new Date('2024-01-01'),
Expand All@@ -114,7 +115,7 @@ describe('createClientUatCookie', () => {
it('should get cookie value from suffixed cookie first, then fallback to non-suffixed', () => {
mockGet.mockImplementationOnce(() => '1234567890').mockImplementationOnce(() => '9876543210');

const cookieHandler = createClientUatCookie(mockCookieSuffix);
const cookieHandler = createClientUatCookie(mockCookieSuffix, defaultOptions);
const result = cookieHandler.get();

expect(result).toBe(1234567890);
Expand All@@ -123,15 +124,15 @@ describe('createClientUatCookie', () => {
it('should return 0 when no cookie value is present', () => {
mockGet.mockImplementationOnce(() => undefined).mockImplementationOnce(() => undefined);

const cookieHandler = createClientUatCookie(mockCookieSuffix);
const cookieHandler = createClientUatCookie(mockCookieSuffix, defaultOptions);
const result = cookieHandler.get();

expect(result).toBe(0);
});

it('should set cookies with SameSite=None when the host requires it', () => {
(requiresSameSiteNone as ReturnType<typeof vi.fn>).mockReturnValue(true);
const cookieHandler = createClientUatCookie(mockCookieSuffix);
const cookieHandler = createClientUatCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set({
id: 'test-client',
updatedAt: new Date('2024-01-01'),
Expand All@@ -146,4 +147,21 @@ describe('createClientUatCookie', () => {
partitioned: false,
});
});

it('should set partitioned cookies when usePartitionedCookies returns true', () => {
const cookieHandler = createClientUatCookie(mockCookieSuffix, { usePartitionedCookies: () => true });
cookieHandler.set({
id: 'test-client',
updatedAt: new Date('2024-01-01'),
signedInSessions: ['session1'],
});

expect(mockSet).toHaveBeenCalledWith('1704067200', {
domain: mockDomain,
expires: mockExpires,
sameSite: 'None',
secure: true,
partitioned: true,
});
});
});
Original file line numberDiff line numberDiff line change
Expand Up@@ -17,6 +17,7 @@ describe('createSessionCookie', () => {
const mockCookieSuffix = 'test-suffix';
const mockToken = 'test-token';
const mockExpires = new Date('2024-12-31');
const defaultOptions = { usePartitionedCookies: () => false };
const mockSet = vi.fn();
const mockRemove = vi.fn();
const mockGet = vi.fn();
Expand All@@ -36,14 +37,14 @@ describe('createSessionCookie', () => {
});

it('should create both suffixed and non-suffixed cookie handlers', () => {
createSessionCookie(mockCookieSuffix);
createSessionCookie(mockCookieSuffix, defaultOptions);
expect(createCookieHandler).toHaveBeenCalledTimes(2);
expect(createCookieHandler).toHaveBeenCalledWith('__session');
expect(createCookieHandler).toHaveBeenCalledWith('__session_test-suffix');
});

it('should set cookies with correct parameters in non-cross-origin context', () => {
const cookieHandler = createSessionCookie(mockCookieSuffix);
const cookieHandler = createSessionCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set(mockToken);

expect(mockSet).toHaveBeenCalledTimes(2);
Expand All@@ -57,7 +58,7 @@ describe('createSessionCookie', () => {

it('should set cookies with None sameSite in cross-origin context', () => {
(inCrossOriginIframe as ReturnType<typeof vi.fn>).mockReturnValue(true);
const cookieHandler = createSessionCookie(mockCookieSuffix);
const cookieHandler = createSessionCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set(mockToken);

expect(mockSet).toHaveBeenCalledWith(mockToken, {
Expand All@@ -69,14 +70,14 @@ describe('createSessionCookie', () => {
});

it('should remove both cookies when remove is called', () => {
const cookieHandler = createSessionCookie(mockCookieSuffix);
const cookieHandler = createSessionCookie(mockCookieSuffix, defaultOptions);
cookieHandler.remove();

expect(mockRemove).toHaveBeenCalledTimes(2);
});

it('should remove cookies with the same attributes as set', () => {
const cookieHandler = createSessionCookie(mockCookieSuffix);
const cookieHandler = createSessionCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set(mockToken);
cookieHandler.remove();

Expand All@@ -102,7 +103,7 @@ describe('createSessionCookie', () => {
it('should get cookie value from suffixed cookie first, then fallback to non-suffixed', () => {
mockGet.mockImplementationOnce(() => 'suffixed-value').mockImplementationOnce(() => 'non-suffixed-value');

const cookieHandler = createSessionCookie(mockCookieSuffix);
const cookieHandler = createSessionCookie(mockCookieSuffix, defaultOptions);
const result = cookieHandler.get();

expect(result).toBe('suffixed-value');
Expand All@@ -111,15 +112,15 @@ describe('createSessionCookie', () => {
it('should fallback to non-suffixed cookie when suffixed cookie is not present', () => {
mockGet.mockImplementationOnce(() => undefined).mockImplementationOnce(() => 'non-suffixed-value');

const cookieHandler = createSessionCookie(mockCookieSuffix);
const cookieHandler = createSessionCookie(mockCookieSuffix, defaultOptions);
const result = cookieHandler.get();

expect(result).toBe('non-suffixed-value');
});

it('should set cookies with None sameSite on .replit.dev origins', () => {
(requiresSameSiteNone as ReturnType<typeof vi.fn>).mockReturnValue(true);
const cookieHandler = createSessionCookie(mockCookieSuffix);
const cookieHandler = createSessionCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set(mockToken);

expect(mockSet).toHaveBeenCalledWith(mockToken, {
Expand All@@ -129,4 +130,17 @@ describe('createSessionCookie', () => {
partitioned: false,
});
});

it('should set partitioned cookies when usePartitionedCookies returns true', () => {
const cookieHandler = createSessionCookie(mockCookieSuffix, { usePartitionedCookies: () => true });
cookieHandler.set(mockToken);

expect(mockRemove).toHaveBeenCalledTimes(2);
expect(mockSet).toHaveBeenCalledWith(mockToken, {
expires: mockExpires,
sameSite: 'None',
secure: true,
partitioned: true,
});
});
});
18 changes: 11 additions & 7 deletions packages/clerk-js/src/core/auth/cookies/clientUat.ts
Original file line numberDiff line numberDiff line change
Expand Up@@ -15,13 +15,20 @@ export type ClientUatCookieHandler = {
get: () => number;
};

export type ClientUatCookieOptions = {
usePartitionedCookies: () => boolean;
};

/**
* Create a long-lived JS cookie to store the client last updated_at timestamp
* for development instances (for production instance is set by FAPI).
* The cookie is used as hint from the Clerk Backend packages to identify
* if the user is authenticated or not.
*/
export const createClientUatCookie = (cookieSuffix: string): ClientUatCookieHandler => {
export const createClientUatCookie = (
cookieSuffix: string,
options: ClientUatCookieOptions,
): ClientUatCookieHandler => {
const clientUatCookie = createCookieHandler(CLIENT_UAT_COOKIE_NAME);
const suffixedClientUatCookie = createCookieHandler(getSuffixedCookieName(CLIENT_UAT_COOKIE_NAME, cookieSuffix));

Expand All@@ -38,13 +45,10 @@ export const createClientUatCookie = (cookieSuffix: string): ClientUatCookieHand
* Generally, this is handled by redirectWithAuth() being called and relying on the dev browser ID in the URL,
* but if that isn't used we rely on this. In production, nothing is cross-domain and Lax is used when client_uat is set from FAPI.
*/
const sameSite = __BUILD_VARIANT_CHIPS__
? 'None'
: inCrossOriginIframe() || requiresSameSiteNone()
? 'None'
: 'Strict';
const isPartitioned = options.usePartitionedCookies();
const sameSite = isPartitioned || inCrossOriginIframe() || requiresSameSiteNone() ? 'None' : 'Strict';
const secure = getSecureAttribute(sameSite);
const partitioned = __BUILD_VARIANT_CHIPS__ && secure;
const partitioned = isPartitioned && secure;
const domain = getCookieDomain(undefined, undefined, { sameSite, secure });

// '0' indicates the user is signed out
Expand Down
Loading
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode"); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })();
Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/remove-chips-build-variant.md
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
---
"@clerk/clerk-js": patch
"@clerk/shared": patch
---

Remove CHIPS build variant and use `partitioned_cookies` environment flag from the Clerk API to control partitioned cookie behavior at runtime.
1 change: 0 additions & 1 deletion packages/clerk-js/package.json
Original file line numberDiff line numberDiff line change
Expand Up@@ -42,7 +42,6 @@
"bundlewatch:fix": "node bundlewatch-fix.mjs",
"clean": "rimraf ./dist",
"dev": "rspack serve --config rspack.config.js",
"dev:chips": "rspack serve --config rspack.config.js --env variant=\"clerk.chips.browser\"",
"dev:headless": "rspack serve --config rspack.config.js --env variant=\"clerk.headless.browser\"",
"dev:origin": "rspack serve --config rspack.config.js --env devOrigin=http://localhost:${PORT:-4000}",
"dev:sandbox": "rspack serve --config rspack.config.js --env devOrigin=http://localhost:${PORT:-4000} --env sandbox=1",
Expand Down
16 changes: 0 additions & 16 deletions packages/clerk-js/rspack.config.js
Original file line numberDiff line numberDiff line change
Expand Up@@ -16,7 +16,6 @@ const variants = {
clerkHeadless: 'clerk.headless',
clerkHeadlessBrowser: 'clerk.headless.browser',
clerkLegacyBrowser: 'clerk.legacy.browser',
clerkCHIPS: 'clerk.chips.browser',
};

const variantToSourceFile = {
Expand All@@ -26,7 +25,6 @@ const variantToSourceFile = {
[variants.clerkHeadless]: './src/index.headless.ts',
[variants.clerkHeadlessBrowser]: './src/index.headless.browser.ts',
[variants.clerkLegacyBrowser]: './src/index.legacy.browser.ts',
[variants.clerkCHIPS]: './src/index.browser.ts',
};

/**
Expand DownExpand Up@@ -58,7 +56,6 @@ const common = ({ mode, variant, disableRHC = false }) => {
*/
__BUILD_FLAG_KEYLESS_UI__: isDevelopment(mode),
__BUILD_DISABLE_RHC__: JSON.stringify(disableRHC),
__BUILD_VARIANT_CHIPS__: variant === variants.clerkCHIPS,
}),
new rspack.EnvironmentPlugin({
CLERK_ENV: mode,
Expand DownExpand Up@@ -447,13 +444,6 @@ const prodConfig = ({ mode, env, analysis }) => {
// externalsForHeadless(),
);

const clerkCHIPS = merge(
entryForVariant(variants.clerkCHIPS),
common({ mode, variant: variants.clerkCHIPS }),
commonForProd(),
commonForProdChunked(),
);

const clerkEsm = merge(
entryForVariant(variants.clerk),
common({ mode, variant: variants.clerk }),
Expand DownExpand Up@@ -567,7 +557,6 @@ const prodConfig = ({ mode, env, analysis }) => {
clerkLegacyBrowser,
clerkHeadless,
clerkHeadlessBrowser,
clerkCHIPS,
clerkEsm,
clerkEsmNoRHC,
clerkCjs,
Expand DownExpand Up@@ -670,11 +659,6 @@ const devConfig = ({ mode, env }) => {
commonForDev(),
// externalsForHeadless(),
),
[variants.clerkCHIPS]: merge(
entryForVariant(variants.clerkCHIPS),
common({ mode, variant: variants.clerkCHIPS }),
commonForDev(),
),
};

if (!entryToConfigMap[variant]) {
Expand Down
16 changes: 14 additions & 2 deletions packages/clerk-js/src/core/auth/AuthCookieService.ts
Original file line numberDiff line numberDiff line change
Expand Up@@ -12,6 +12,7 @@ import { debugLogger } from '@/utils/debug';
import { clerkMissingDevBrowserJwt } from '../errors';
import { eventBus, events } from '../events';
import type { FapiClient } from '../fapiClient';
import { Environment } from '../resources/Environment';
import { createActiveContextCookie } from './cookies/activeContext';
import type { ClientUatCookieHandler } from './cookies/clientUat';
import { createClientUatCookie } from './cookies/clientUat';
Expand DownExpand Up@@ -74,16 +75,27 @@ export class AuthCookieService {

eventBus.on(events.UserSignOut, () => this.handleSignOut());

// After Environment resolves, re-write dev browser cookies with correct
// partitioned attributes. Dev browser cookies are initially written before
// Environment is fetched, so they may have stale attributes.
eventBus.on(events.EnvironmentUpdate, () => {
this.devBrowser.refreshCookies();
});

this.refreshTokenOnFocus();
this.startPollingForToken();

this.clientUat = createClientUatCookie(cookieSuffix);
this.sessionCookie = createSessionCookie(cookieSuffix);
const cookieOptions = {
usePartitionedCookies: () => Environment.getInstance().partitionedCookies,
};
this.clientUat = createClientUatCookie(cookieSuffix, cookieOptions);
this.sessionCookie = createSessionCookie(cookieSuffix, cookieOptions);
this.activeCookie = createActiveContextCookie();
this.devBrowser = createDevBrowser({
frontendApi: clerk.frontendApi,
fapiClient,
cookieSuffix,
cookieOptions,
});
}

Expand Down
Original file line numberDiff line numberDiff line change
Expand Up@@ -50,7 +50,8 @@ describe('Thrown errors', () => {
const devBrowserHandler = createDevBrowser({
frontendApi: 'white-koala-42.clerk.accounts.dev',
fapiClient: mockFapiClient,
publishableKey: 'pk_test_d2hpdGUta29hbGEtNDIuY2xlcmsuYWNjb3VudHMuZGV2JA',
cookieSuffix: 'test-suffix',
cookieOptions: { usePartitionedCookies: () => false },
});

await expect(devBrowserHandler.setup()).rejects.toThrow(
Expand Down
Original file line numberDiff line numberDiff line change
Expand Up@@ -19,6 +19,7 @@ describe('createClientUatCookie', () => {
const mockCookieSuffix = 'test-suffix';
const mockExpires = new Date('2024-12-31');
const mockDomain = 'test.domain';
const defaultOptions = { usePartitionedCookies: () => false };
const mockSet = vi.fn();
const mockRemove = vi.fn();
const mockGet = vi.fn();
Expand All@@ -39,14 +40,14 @@ describe('createClientUatCookie', () => {
});

it('should create both suffixed and non-suffixed cookie handlers', () => {
createClientUatCookie(mockCookieSuffix);
createClientUatCookie(mockCookieSuffix, defaultOptions);
expect(createCookieHandler).toHaveBeenCalledTimes(2);
expect(createCookieHandler).toHaveBeenCalledWith('__client_uat');
expect(createCookieHandler).toHaveBeenCalledWith('__client_uat_test-suffix');
});

it('should set cookies with correct parameters in non-cross-origin context', () => {
const cookieHandler = createClientUatCookie(mockCookieSuffix);
const cookieHandler = createClientUatCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set({
id: 'test-client',
updatedAt: new Date('2024-01-01'),
Expand All@@ -65,7 +66,7 @@ describe('createClientUatCookie', () => {

it('should set cookies with None sameSite in cross-origin context', () => {
(inCrossOriginIframe as ReturnType<typeof vi.fn>).mockReturnValue(true);
const cookieHandler = createClientUatCookie(mockCookieSuffix);
const cookieHandler = createClientUatCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set({
id: 'test-client',
updatedAt: new Date('2024-01-01'),
Expand All@@ -82,7 +83,7 @@ describe('createClientUatCookie', () => {
});

it('should set value to 0 when client is undefined', () => {
const cookieHandler = createClientUatCookie(mockCookieSuffix);
const cookieHandler = createClientUatCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set(undefined);

expect(mockSet).toHaveBeenCalledWith('0', {
Expand All@@ -95,7 +96,7 @@ describe('createClientUatCookie', () => {
});

it('should set value to 0 when client has no signed in sessions', () => {
const cookieHandler = createClientUatCookie(mockCookieSuffix);
const cookieHandler = createClientUatCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set({
id: 'test-client',
updatedAt: new Date('2024-01-01'),
Expand All@@ -114,7 +115,7 @@ describe('createClientUatCookie', () => {
it('should get cookie value from suffixed cookie first, then fallback to non-suffixed', () => {
mockGet.mockImplementationOnce(() => '1234567890').mockImplementationOnce(() => '9876543210');

const cookieHandler = createClientUatCookie(mockCookieSuffix);
const cookieHandler = createClientUatCookie(mockCookieSuffix, defaultOptions);
const result = cookieHandler.get();

expect(result).toBe(1234567890);
Expand All@@ -123,15 +124,15 @@ describe('createClientUatCookie', () => {
it('should return 0 when no cookie value is present', () => {
mockGet.mockImplementationOnce(() => undefined).mockImplementationOnce(() => undefined);

const cookieHandler = createClientUatCookie(mockCookieSuffix);
const cookieHandler = createClientUatCookie(mockCookieSuffix, defaultOptions);
const result = cookieHandler.get();

expect(result).toBe(0);
});

it('should set cookies with SameSite=None when the host requires it', () => {
(requiresSameSiteNone as ReturnType<typeof vi.fn>).mockReturnValue(true);
const cookieHandler = createClientUatCookie(mockCookieSuffix);
const cookieHandler = createClientUatCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set({
id: 'test-client',
updatedAt: new Date('2024-01-01'),
Expand All@@ -146,4 +147,21 @@ describe('createClientUatCookie', () => {
partitioned: false,
});
});

it('should set partitioned cookies when usePartitionedCookies returns true', () => {
const cookieHandler = createClientUatCookie(mockCookieSuffix, { usePartitionedCookies: () => true });
cookieHandler.set({
id: 'test-client',
updatedAt: new Date('2024-01-01'),
signedInSessions: ['session1'],
});

expect(mockSet).toHaveBeenCalledWith('1704067200', {
domain: mockDomain,
expires: mockExpires,
sameSite: 'None',
secure: true,
partitioned: true,
});
});
});
Original file line numberDiff line numberDiff line change
Expand Up@@ -17,6 +17,7 @@ describe('createSessionCookie', () => {
const mockCookieSuffix = 'test-suffix';
const mockToken = 'test-token';
const mockExpires = new Date('2024-12-31');
const defaultOptions = { usePartitionedCookies: () => false };
const mockSet = vi.fn();
const mockRemove = vi.fn();
const mockGet = vi.fn();
Expand All@@ -36,14 +37,14 @@ describe('createSessionCookie', () => {
});

it('should create both suffixed and non-suffixed cookie handlers', () => {
createSessionCookie(mockCookieSuffix);
createSessionCookie(mockCookieSuffix, defaultOptions);
expect(createCookieHandler).toHaveBeenCalledTimes(2);
expect(createCookieHandler).toHaveBeenCalledWith('__session');
expect(createCookieHandler).toHaveBeenCalledWith('__session_test-suffix');
});

it('should set cookies with correct parameters in non-cross-origin context', () => {
const cookieHandler = createSessionCookie(mockCookieSuffix);
const cookieHandler = createSessionCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set(mockToken);

expect(mockSet).toHaveBeenCalledTimes(2);
Expand All@@ -57,7 +58,7 @@ describe('createSessionCookie', () => {

it('should set cookies with None sameSite in cross-origin context', () => {
(inCrossOriginIframe as ReturnType<typeof vi.fn>).mockReturnValue(true);
const cookieHandler = createSessionCookie(mockCookieSuffix);
const cookieHandler = createSessionCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set(mockToken);

expect(mockSet).toHaveBeenCalledWith(mockToken, {
Expand All@@ -69,14 +70,14 @@ describe('createSessionCookie', () => {
});

it('should remove both cookies when remove is called', () => {
const cookieHandler = createSessionCookie(mockCookieSuffix);
const cookieHandler = createSessionCookie(mockCookieSuffix, defaultOptions);
cookieHandler.remove();

expect(mockRemove).toHaveBeenCalledTimes(2);
});

it('should remove cookies with the same attributes as set', () => {
const cookieHandler = createSessionCookie(mockCookieSuffix);
const cookieHandler = createSessionCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set(mockToken);
cookieHandler.remove();

Expand All@@ -102,7 +103,7 @@ describe('createSessionCookie', () => {
it('should get cookie value from suffixed cookie first, then fallback to non-suffixed', () => {
mockGet.mockImplementationOnce(() => 'suffixed-value').mockImplementationOnce(() => 'non-suffixed-value');

const cookieHandler = createSessionCookie(mockCookieSuffix);
const cookieHandler = createSessionCookie(mockCookieSuffix, defaultOptions);
const result = cookieHandler.get();

expect(result).toBe('suffixed-value');
Expand All@@ -111,15 +112,15 @@ describe('createSessionCookie', () => {
it('should fallback to non-suffixed cookie when suffixed cookie is not present', () => {
mockGet.mockImplementationOnce(() => undefined).mockImplementationOnce(() => 'non-suffixed-value');

const cookieHandler = createSessionCookie(mockCookieSuffix);
const cookieHandler = createSessionCookie(mockCookieSuffix, defaultOptions);
const result = cookieHandler.get();

expect(result).toBe('non-suffixed-value');
});

it('should set cookies with None sameSite on .replit.dev origins', () => {
(requiresSameSiteNone as ReturnType<typeof vi.fn>).mockReturnValue(true);
const cookieHandler = createSessionCookie(mockCookieSuffix);
const cookieHandler = createSessionCookie(mockCookieSuffix, defaultOptions);
cookieHandler.set(mockToken);

expect(mockSet).toHaveBeenCalledWith(mockToken, {
Expand All@@ -129,4 +130,17 @@ describe('createSessionCookie', () => {
partitioned: false,
});
});

it('should set partitioned cookies when usePartitionedCookies returns true', () => {
const cookieHandler = createSessionCookie(mockCookieSuffix, { usePartitionedCookies: () => true });
cookieHandler.set(mockToken);

expect(mockRemove).toHaveBeenCalledTimes(2);
expect(mockSet).toHaveBeenCalledWith(mockToken, {
expires: mockExpires,
sameSite: 'None',
secure: true,
partitioned: true,
});
});
});
18 changes: 11 additions & 7 deletions packages/clerk-js/src/core/auth/cookies/clientUat.ts
Original file line numberDiff line numberDiff line change
Expand Up@@ -15,13 +15,20 @@ export type ClientUatCookieHandler = {
get: () => number;
};

export type ClientUatCookieOptions = {
usePartitionedCookies: () => boolean;
};

/**
* Create a long-lived JS cookie to store the client last updated_at timestamp
* for development instances (for production instance is set by FAPI).
* The cookie is used as hint from the Clerk Backend packages to identify
* if the user is authenticated or not.
*/
export const createClientUatCookie = (cookieSuffix: string): ClientUatCookieHandler => {
export const createClientUatCookie = (
cookieSuffix: string,
options: ClientUatCookieOptions,
): ClientUatCookieHandler => {
const clientUatCookie = createCookieHandler(CLIENT_UAT_COOKIE_NAME);
const suffixedClientUatCookie = createCookieHandler(getSuffixedCookieName(CLIENT_UAT_COOKIE_NAME, cookieSuffix));

Expand All@@ -38,13 +45,10 @@ export const createClientUatCookie = (cookieSuffix: string): ClientUatCookieHand
* Generally, this is handled by redirectWithAuth() being called and relying on the dev browser ID in the URL,
* but if that isn't used we rely on this. In production, nothing is cross-domain and Lax is used when client_uat is set from FAPI.
*/
const sameSite = __BUILD_VARIANT_CHIPS__
? 'None'
: inCrossOriginIframe() || requiresSameSiteNone()
? 'None'
: 'Strict';
const isPartitioned = options.usePartitionedCookies();
const sameSite = isPartitioned || inCrossOriginIframe() || requiresSameSiteNone() ? 'None' : 'Strict';
const secure = getSecureAttribute(sameSite);
const partitioned = __BUILD_VARIANT_CHIPS__ && secure;
const partitioned = isPartitioned && secure;
const domain = getCookieDomain(undefined, undefined, { sameSite, secure });

// '0' indicates the user is signed out
Expand Down
Loading
Loading