Skip to Content
Clerk logo

Clerk Docs

Ctrl + K
Go to clerk.com

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 Clerk object.

Usage

pages/joined-organizations.tsx
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;
joined-organizations.tsx
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;
joined-organizations.js
<ul id="organizations_list"></ul> <script> const list = document.getElementById("organizations_list"); try { const organizationMemberships = await window.Clerk.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>

Last updated on November 21, 2023

What did you think of this content?

Clerk © 2024