From 0ba509a1a4810795c60a2c88d24c74cee32bb538 Mon Sep 17 00:00:00 2001
From: Sokratis Vidros <SokratisVidros@users.noreply.github.com>
Date: Wed, 13 Nov 2024 14:41:54 +0200
Subject: [PATCH] fix(web): Preserve last active organization across full page
 reloads (#6978)

---
 .../src/context/auth/auth-provider.tsx        | 22 +++++----------
 .../providers/EnterpriseAuthProvider.tsx      | 27 ++++++-------------
 2 files changed, 14 insertions(+), 35 deletions(-)

diff --git a/apps/dashboard/src/context/auth/auth-provider.tsx b/apps/dashboard/src/context/auth/auth-provider.tsx
index 61e3491cda2..8741d380623 100644
--- a/apps/dashboard/src/context/auth/auth-provider.tsx
+++ b/apps/dashboard/src/context/auth/auth-provider.tsx
@@ -1,5 +1,5 @@
 import { ReactNode, useCallback, useEffect, useMemo } from 'react';
-import { useAuth, useOrganization, useOrganizationList, useUser } from '@clerk/clerk-react';
+import { useAuth, useOrganization, useUser } from '@clerk/clerk-react';
 import type { UserResource } from '@clerk/types';
 import { ROUTES } from '@/utils/routes';
 import type { AuthContextValue } from './types';
@@ -10,7 +10,6 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
   const { orgId } = useAuth();
   const { user: clerkUser, isLoaded: isUserLoaded } = useUser();
   const { organization: clerkOrganization, isLoaded: isOrganizationLoaded } = useOrganization();
-  const { setActive, isLoaded: isOrgListLoaded } = useOrganizationList({ userMemberships: { infinite: true } });
 
   const redirectTo = useCallback(
     ({
@@ -44,23 +43,14 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
     []
   );
 
-  // check if user has active organization
   useEffect(() => {
-    if (orgId) {
-      return;
-    }
-
-    if (isOrgListLoaded && clerkUser) {
-      const hasOrgs = clerkUser.organizationMemberships.length > 0;
+    if (!clerkUser || orgId) return;
 
-      if (hasOrgs) {
-        const firstOrg = clerkUser.organizationMemberships[0].organization;
-        setActive({ organization: firstOrg });
-      } else if (!window.location.href.includes(ROUTES.SIGNUP_ORGANIZATION_LIST)) {
-        redirectTo({ url: ROUTES.SIGNUP_ORGANIZATION_LIST });
-      }
+    const hasOrganizations = clerkUser.organizationMemberships.length > 0;
+    if (!hasOrganizations && window.location.pathname !== ROUTES.SIGNUP_ORGANIZATION_LIST) {
+      return redirectTo({ url: ROUTES.SIGNUP_ORGANIZATION_LIST });
     }
-  }, [setActive, isOrgListLoaded, clerkUser, orgId, redirectTo]);
+  }, [clerkUser, orgId, redirectTo]);
 
   const currentUser = useMemo(() => (clerkUser ? toUserEntity(clerkUser as UserResource) : undefined), [clerkUser]);
   const currentOrganization = useMemo(
diff --git a/apps/web/src/ee/clerk/providers/EnterpriseAuthProvider.tsx b/apps/web/src/ee/clerk/providers/EnterpriseAuthProvider.tsx
index 9a7d3a4f6e0..2ca457a4ef3 100644
--- a/apps/web/src/ee/clerk/providers/EnterpriseAuthProvider.tsx
+++ b/apps/web/src/ee/clerk/providers/EnterpriseAuthProvider.tsx
@@ -1,6 +1,6 @@
-import { createContext, useCallback, useEffect, useState, useMemo } from 'react';
-import type { IOrganizationEntity, IUserEntity, ProductUseCases } from '@novu/shared';
-import { useAuth, useUser, useOrganization, useOrganizationList } from '@clerk/clerk-react';
+import { createContext, useCallback, useEffect, useMemo } from 'react';
+import type { IOrganizationEntity, IUserEntity } from '@novu/shared';
+import { useAuth, useUser, useOrganization } from '@clerk/clerk-react';
 import { OrganizationResource, UserResource } from '@clerk/types';
 
 import { useNavigate } from 'react-router-dom';
@@ -20,8 +20,6 @@ export const EnterpriseAuthProvider = ({ children }: { children: React.ReactNode
   const { signOut, orgId } = useAuth();
   const { user: clerkUser, isLoaded: isUserLoaded } = useUser();
   const { organization: clerkOrganization, isLoaded: isOrganizationLoaded } = useOrganization();
-  // TODO @ChmaraX: Can we use setActive from useSession, useSignIn, or useSignUp to avoid loading the list?
-  const { setActive, isLoaded: isOrgListLoaded } = useOrganizationList({ userMemberships: { infinite: true } });
 
   const segment = useSegment();
   const queryClient = useQueryClient();
@@ -90,23 +88,14 @@ export const EnterpriseAuthProvider = ({ children }: { children: React.ReactNode
     return {};
   }, [clerkOrganization]);
 
-  // check if user has active organization
   useEffect(() => {
-    if (orgId) {
-      return;
-    }
-
-    if (isOrgListLoaded && clerkUser) {
-      const hasOrgs = clerkUser.organizationMemberships.length > 0;
+    if (!clerkUser || orgId) return;
 
-      if (hasOrgs) {
-        const firstOrg = clerkUser.organizationMemberships[0].organization;
-        setActive({ organization: firstOrg });
-      } else if (!window.location.href.includes(ROUTES.AUTH_SIGNUP_ORGANIZATION_LIST)) {
-        redirectTo({ url: ROUTES.AUTH_SIGNUP_ORGANIZATION_LIST });
-      }
+    const hasOrganizations = clerkUser.organizationMemberships.length > 0;
+    if (!hasOrganizations && window.location.pathname !== ROUTES.AUTH_SIGNUP_ORGANIZATION_LIST) {
+      return redirectTo({ url: ROUTES.AUTH_SIGNUP_ORGANIZATION_LIST });
     }
-  }, [setActive, isOrgListLoaded, clerkUser, orgId, redirectTo]);
+  }, [clerkUser, orgId, redirectTo]);
 
   const currentUser = useMemo(() => (clerkUser ? toUserEntity(clerkUser) : undefined), [clerkUser]);
   const currentOrganization = useMemo(