feat(clerk-js): __session cookie Partitioned attribute (#5514)

Author: jacekradko

.changeset/plain-crabs-move.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': minor
+---
+
+Setting the Partitioned attribute on \_\_session cookie

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: '<rootDir>/jest.jsdom-with-timezone.ts',

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]) {

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();

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> | void;

packages/clerk-js/src/index.chips.ts

@@ -0,0 +1 @@
+export * from './index';