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

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

Last updated on November 21, 2023