diff --git a/.changeset/nextjs-revalidate-organizations.md b/.changeset/nextjs-revalidate-organizations.md new file mode 100644 index 000000000..80e3160a6 --- /dev/null +++ b/.changeset/nextjs-revalidate-organizations.md @@ -0,0 +1,5 @@ +--- +'@asgardeo/nextjs': patch +--- + +The organization list refreshes after an organization is created. `AsgardeoProvider` never passed a `revalidateMyOrganizations` function to the organization context, so `` skipped the refresh and the switcher kept showing the old list until the page was reloaded. The provider now re-fetches the user's organizations through the `getMyOrganizations` server action and stores the result, as the React SDK does. diff --git a/packages/nextjs/src/client/contexts/Asgardeo/AsgardeoProvider.tsx b/packages/nextjs/src/client/contexts/Asgardeo/AsgardeoProvider.tsx index de77065f8..d22e7f784 100644 --- a/packages/nextjs/src/client/contexts/Asgardeo/AsgardeoProvider.tsx +++ b/packages/nextjs/src/client/contexts/Asgardeo/AsgardeoProvider.tsx @@ -78,7 +78,11 @@ export type AsgardeoClientProviderProps = Partial Promise; - revalidateMyOrganizations?: (sessionId?: string) => Promise; + /** + * Server action that re-fetches the organizations of the signed-in user (same signature as the + * `getMyOrganizations` action). The provider stores the result so every consumer sees the new list. + */ + revalidateMyOrganizations?: (options?: any, sessionId?: string) => Promise; signIn: AsgardeoContextProps['signIn']; signOut: AsgardeoContextProps['signOut']; signUp: AsgardeoContextProps['signUp']; @@ -111,7 +115,7 @@ const AsgardeoClientProvider: FC> updateProfile, applicationId, organizationHandle, - myOrganizations, + myOrganizations: _myOrganizations, revalidateMyOrganizations, getAllOrganizations, switchOrganization, @@ -125,11 +129,16 @@ const AsgardeoClientProvider: FC> const [isLoading, setIsLoading] = useState(true); const [user, setUser] = useState(_user); const [userProfile, setUserProfile] = useState(_userProfile); + const [myOrganizations, setMyOrganizations] = useState(_myOrganizations); useEffect(() => { setUserProfile(_userProfile); }, [_userProfile]); + useEffect(() => { + setMyOrganizations(_myOrganizations); + }, [_myOrganizations]); + useEffect(() => { setUser(_user); }, [_user]); @@ -397,6 +406,22 @@ const AsgardeoClientProvider: FC> })); }; + /** + * Re-fetches the user's organizations through the server action and stores them, so components such as + * `CreateOrganization` and `OrganizationSwitcher` reflect a newly created organization without a reload. + */ + const handleRevalidateMyOrganizations = async (): Promise => { + if (!revalidateMyOrganizations) { + return myOrganizations; + } + + const organizations: Organization[] = await revalidateMyOrganizations(); + + setMyOrganizations(organizations); + + return organizations; + }; + return ( @@ -414,7 +439,7 @@ const AsgardeoClientProvider: FC> myOrganizations={myOrganizations} currentOrganization={currentOrganization} onOrganizationSwitch={switchOrganization as any} - revalidateMyOrganizations={revalidateMyOrganizations as any} + revalidateMyOrganizations={handleRevalidateMyOrganizations} > {children} diff --git a/packages/nextjs/src/server/AsgardeoProvider.tsx b/packages/nextjs/src/server/AsgardeoProvider.tsx index 5015697ac..336d61850 100644 --- a/packages/nextjs/src/server/AsgardeoProvider.tsx +++ b/packages/nextjs/src/server/AsgardeoProvider.tsx @@ -235,6 +235,7 @@ const AsgardeoServerProvider: FC> updateProfile={updateUserProfileAction} isSignedIn={signedIn} myOrganizations={myOrganizations} + revalidateMyOrganizations={getMyOrganizations} getAllOrganizations={getAllOrganizations} switchOrganization={switchOrganization} brandingPreference={brandingPreference}