View current organization memberships
Clerk provides the ability for the currently signed-in user to view all the organizations they are members of.
In React and Next.js applications, the useOrganizationList() hook can be used to return the list of invitations or memberships for the currently active user. In JavaScript applications, the getOrganizationMemberships() method is used to retrieve the list of organizations the current user is a part of and can be accessed through the User object.
Usage
import { useOrganizationList } from "@clerk/nextjs";
import React from "react";
const JoinedOrganizationList = () => {
const { isLoaded, setActive, userMemberships } = useOrganizationList({
userMemberships: {
infinite: true,
},
});
if (!isLoaded) {
return <>Loading</>;
}
return (
<>
<ul>
{userMemberships.data?.map((mem) => (
<li key={mem.id}>
<span>{mem.organization.name}</span>
<button
onClick={() => setActive({ organization: mem.organization.id })}
>
Select
</button>
</li>
))}
</ul>
<button
disabled={!userMemberships.hasNextPage}
onClick={() => userMemberships.fetchNext()}
>
Load more
</button>
</>
);
};
export default JoinedOrganizationList;import { useOrganizationList } from "@clerk/nextjs";
import React from "react";
const JoinedOrganizationList = () => {
const { isLoaded, setActive, userMemberships } = useOrganizationList({
userMemberships: {
infinite: true,
},
});
if (!isLoaded) {
return <>Loading</>;
}
return (
<>
<ul>
{userMemberships.data?.map((mem) => (
<li key={mem.id}>
<span>{mem.organization.name}</span>
<button
onClick={() => setActive({ organization: mem.organization.id })}
>
Select
</button>
</li>
))}
</ul>
<button
disabled={!userMemberships.hasNextPage}
onClick={() => userMemberships.fetchNext()}
>
Load more
</button>
</>
);
};
export default JoinedOrganizationList;<ul id="organizations_list"></ul>
<script>
const list = document.getElementById("organizations_list");
try {
const organizationMemberships = await window.Clerk.user.getOrganizationMemberships();
organizationMemberships.map((membership) => {
const li = document.createElement("li");
li.textContent = `${membership.organization.name} - ${membership.role}`;
list.appendChild(li);
});
} catch (err) {
console.error(err);
}
</script>