fix(clerk-js): Use a cookie instead of localStorage for active org (#4394)

Co-authored-by: Jacek Radko <[email protected]>

Author: brkalow

.changeset/eleven-pants-juggle.md

@@ -0,0 +1,5 @@
+---
+"@clerk/clerk-js": patch
+---
+
+Use a cookie instead of localStorage for the active org ID to avoid issues when localStorage is disabled at the browser level.

packages/clerk-js/src/core/auth/AuthCookieService.ts

@@ -1,3 +1,4 @@
+import { createCookieHandler } from '@clerk/shared/cookie';
 import { setDevBrowserJWTInURL } from '@clerk/shared/devBrowser';
 import { is4xxError, isClerkAPIResponseError, isNetworkError } from '@clerk/shared/error';
 import type { Clerk, InstanceType } from '@clerk/types';
@@ -36,6 +37,7 @@ export class AuthCookieService {
   private poller: SessionCookiePoller | null = null;
   private clientUat: ClientUatCookieHandler;
   private sessionCookie: SessionCookieHandler;
+  private activeOrgCookie: ReturnType<typeof createCookieHandler>;
   private devBrowser: DevBrowser;
 
   public static async create(clerk: Clerk, fapiClient: FapiClient, instanceType: InstanceType) {
@@ -62,6 +64,7 @@ export class AuthCookieService {
 
     this.clientUat = createClientUatCookie(cookieSuffix);
     this.sessionCookie = createSessionCookie(cookieSuffix);
+    this.activeOrgCookie = createCookieHandler('clerk_active_org');
     this.devBrowser = createDevBrowser({
       frontendApi: clerk.frontendApi,
       fapiClient,
@@ -191,20 +194,20 @@ export class AuthCookieService {
    * The below methods are used to determine whether or not an unfocused tab can be responsible
    * for setting the session cookie. A session cookie should only be set by a tab who's selected
    * organization matches the session's active organization. By storing the active organization
-   * ID in local storage, we can check the value across tabs. If a tab's organization ID does not
-   * match the value in local storage, it is not responsible for updating the session cookie.
+   * ID in a cookie, we can check the value across tabs. If a tab's organization ID does not
+   * match the value in the active org cookie, it is not responsible for updating the session cookie.
    */
 
   public setActiveOrganizationInStorage() {
     if (this.clerk.organization?.id) {
-      localStorage.setItem('clerk_active_org', this.clerk.organization.id);
+      this.activeOrgCookie.set(this.clerk.organization.id);
     } else {
-      localStorage.removeItem('clerk_active_org');
+      this.activeOrgCookie.remove();
     }
   }
 
   private isCurrentOrganizationActive() {
-    const activeOrganizationId = localStorage.getItem('clerk_active_org');
+    const activeOrganizationId = this.activeOrgCookie.get();
 
     if (!activeOrganizationId && !this.clerk.organization?.id) {
       return true;