diff --git a/.changeset/plain-crabs-move.md b/.changeset/plain-crabs-move.md new file mode 100644 index 00000000000..857ab6538ae --- /dev/null +++ b/.changeset/plain-crabs-move.md @@ -0,0 +1,5 @@ +--- +'@clerk/clerk-js': minor +--- + +Setting the Partitioned attribute on \_\_session cookie diff --git a/packages/clerk-js/jest.config.js b/packages/clerk-js/jest.config.js index 3b4fa34e57c..4bd7f7dc7d2 100644 --- a/packages/clerk-js/jest.config.js +++ b/packages/clerk-js/jest.config.js @@ -7,6 +7,7 @@ const config = { globals: { __PKG_NAME__: '@clerk/clerk-js', __PKG_VERSION__: 'test', + __BUILD_VARIANT_CHIPS__: false, }, testEnvironment: '/jest.jsdom-with-timezone.ts', diff --git a/packages/clerk-js/rspack.config.js b/packages/clerk-js/rspack.config.js index eb8d70bb87c..81c90a1ff61 100644 --- a/packages/clerk-js/rspack.config.js +++ b/packages/clerk-js/rspack.config.js @@ -16,6 +16,7 @@ const variants = { clerkHeadless: 'clerk.headless', clerkHeadlessBrowser: 'clerk.headless.browser', clerkLegacyBrowser: 'clerk.legacy.browser', + clerkCHIPS: 'clerk.chips.browser', }; const variantToSourceFile = { @@ -25,6 +26,7 @@ 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.chips.ts', }; /** @@ -53,6 +55,7 @@ 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, @@ -100,22 +103,24 @@ const common = ({ mode, variant, disableRHC = false }) => { signUp: { minChunks: 1, name: 'signup', - test: module => module.resource && module.resource.includes('/ui/components/SignUp'), + test: module => !!(module.resource && module.resource.includes('/ui/components/SignUp')), }, paymentSources: { minChunks: 1, name: 'paymentSources', test: module => - module.resource && - (module.resource.includes('/ui/components/PaymentSources') || - // Include `@stripe/react-stripe-js` and `@stripe/stripe-js` in the checkout chunk - module.resource.includes('/node_modules/@stripe')), + !!( + module.resource && + (module.resource.includes('/ui/components/PaymentSources') || + // Include `@stripe/react-stripe-js` and `@stripe/stripe-js` in the checkout chunk + module.resource.includes('/node_modules/@stripe')) + ), }, common: { minChunks: 1, name: 'ui-common', priority: -20, - test: module => module.resource && !module.resource.includes('/ui/components'), + test: module => !!(module.resource && !module.resource.includes('/ui/components')), }, defaultVendors: { minChunks: 1, @@ -406,6 +411,13 @@ 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 }), @@ -513,6 +525,7 @@ const prodConfig = ({ mode, env, analysis }) => { clerkLegacyBrowser, clerkHeadless, clerkHeadlessBrowser, + clerkCHIPS, clerkEsm, clerkEsmNoRHC, clerkCjs, @@ -614,6 +627,11 @@ const devConfig = ({ mode, env }) => { commonForDev(), // externalsForHeadless(), ), + [variants.clerkCHIPS]: merge( + entryForVariant(variants.clerkCHIPS), + common({ mode, variant: variants.clerkCHIPS }), + commonForDev(), + ), }; if (!entryToConfigMap[variant]) { diff --git a/packages/clerk-js/src/core/auth/cookies/session.ts b/packages/clerk-js/src/core/auth/cookies/session.ts index fbdb4bc70ae..529ba1ff585 100644 --- a/packages/clerk-js/src/core/auth/cookies/session.ts +++ b/packages/clerk-js/src/core/auth/cookies/session.ts @@ -23,17 +23,24 @@ export const createSessionCookie = (cookieSuffix: string): SessionCookieHandler const suffixedSessionCookie = createCookieHandler(getSuffixedCookieName(SESSION_COOKIE_NAME, cookieSuffix)); const remove = () => { - suffixedSessionCookie.remove(); sessionCookie.remove(); + suffixedSessionCookie.remove(); }; const set = (token: string) => { const expires = addYears(Date.now(), 1); const sameSite = inCrossOriginIframe() ? 'None' : 'Lax'; const secure = getSecureAttribute(sameSite); + const partitioned = __BUILD_VARIANT_CHIPS__ && secure && sameSite === 'None'; + + // If setting Partitioned to true, remove the existing session cookies. + // This is to avoid conflicts with the same cookie name without Partitioned attribute. + if (partitioned) { + remove(); + } - suffixedSessionCookie.set(token, { expires, sameSite, secure }); - sessionCookie.set(token, { expires, sameSite, secure }); + sessionCookie.set(token, { expires, sameSite, secure, partitioned }); + suffixedSessionCookie.set(token, { expires, sameSite, secure, partitioned }); }; const get = () => suffixedSessionCookie.get() || sessionCookie.get(); diff --git a/packages/clerk-js/src/global.d.ts b/packages/clerk-js/src/global.d.ts index 44ce8ced094..7751ef82378 100644 --- a/packages/clerk-js/src/global.d.ts +++ b/packages/clerk-js/src/global.d.ts @@ -11,6 +11,7 @@ declare const __DEV__: boolean; * Build time feature flags. */ declare const __BUILD_DISABLE_RHC__: string; +declare const __BUILD_VARIANT_CHIPS__: boolean; interface Window { __unstable__onBeforeSetActive: (intent?: 'sign-out') => Promise | void; diff --git a/packages/clerk-js/src/index.chips.ts b/packages/clerk-js/src/index.chips.ts new file mode 100644 index 00000000000..ea465c2a34a --- /dev/null +++ b/packages/clerk-js/src/index.chips.ts @@ -0,0 +1 @@ +export * from './index';