Manage Member Roles

1
// Lists all organization the user is a member of.
2
// Each entry can be a link to a page to manage organization
3
// members. 
4

5
// If you create a new Organization, this list will update automatically.
6
import { useOrganizationList } from "@clerk/clerk-react";
7

8
const OrganizationList = () => {
9
  const { organizationList, isLoaded } = useOrganizationList();
10

11
  if (!isLoaded) {
12
    // Any loading state
13
    return null;
14
  }
15

16
  return (
17
    <div>
18
      <h2>Your organizations</h2>
19
      {organizationList.length === 0 ? (
20
        <div>You do not belong to any organizations yet.</div>
21
      ) : (
22
        <ul>
23
          {organizationList.map(({ organization }) => (
24
            <li key={organization.id}>
25
              <a href={`/organizations/${organization.id}`}>{organization.name}</a>
26
            </li>
27
          ))}
28
        </ul>
29
      )}
30
    </div>
31
  );
32
};

1
<ul id="organizations_list"></ul>
2

3
<script>
4
  const list = document.getElementById("organizations_list");
5
  try {
6
    const organizationMemberships = await window.Clerk.getOrganizationMemberships();
7
    organizationMemberships.map((membership) => {
8
      const li = document.createElement("li");
9
      li.textContent = `${membership.organization.name} - ${membership.role}`;
10
      list.appendChild(li);
11
    });
12
  } catch (err) {
13
    console.error(err);
14
  }
15
</script>
16

1
import { useState, useEffect } from "react";
2
import { useOrganization } from "@clerk/clerk-react";
3
import type { OrganizationMembershipResource } from "@clerk/types";
4

5
// View and manage active organization members, along with any
6
// pending invitations.
7
// Invite new members.
8
export default function Organization() {
9
  const {
10
    organization: currentOrganization,
11
    membership,
12
    isLoaded,
13
  } = useOrganization();
14

15
  if (!isLoaded || !currentOrganization) {
16
    return null;
17
  }
18

19
  const isAdmin = membership.role === "admin";
20
  return (
21
    <>
22
      <h1>Organization: {currentOrganization.name}</h1>
23
      <MemberList />
24
      {isAdmin && <InvitationList />}
25
    </>
26
  );
27
}
28

29
// List of organization memberships. Administrators can
30
// change member roles or remove members from the organization.
31
function MemberList() {
32
  const { membershipList, membership } = useOrganization({
33
    membershipList: {},
34
  });
35

36
  if (!membershipList) {
37
    return null;
38
  }
39

40
  const isCurrentUserAdmin = membership.role === "admin";
41

42
  return (
43
    <div>
44
      <h2>Organization members</h2>
45
      <ul>
46
        {membershipList.map((m) => (
47
          <li key={m.id}>
48
            {m.publicUserData.firstName} {m.publicUserData.lastName} &lt;
49
            {m.publicUserData.identifier}&gt; :: {m.role}
50
            {isCurrentUserAdmin && <AdminControls membership={m} />}
51
          </li>
52
        ))}
53
      </ul>
54
    </div>
55
  );
56
}
57

58
function AdminControls({
59
  membership,
60
}: {
61
  membership: OrganizationMembershipResource;
62
}){
63
  const [disabled, setDisabled] = useState(false);
64
  const {
65
    user: { id: userId },
66
  } = useUser();
67

68
  if (membership.publicUserData.userId === userId) {
69
    return null;
70
  }
71

72
  const remove = async () => {
73
    setDisabled(true);
74
    await membership.destroy();
75
  };
76

77
  const changeRole = async (role: MembershipRole) => {
78
    setDisabled(true);
79
    await membership.update({ role });
80
    setDisabled(false);
81
  };
82

83
  return (
84
    <>
85
      ::{" "}
86
      <button disabled={disabled} onClick={remove}>
87
        Remove member
88
      </button>{" "}
89
      {membership.role === "admin" ? (
90
        <button disabled={disabled} onClick={() => changeRole("basic_member")}>
91
          Change to member
92
        </button>
93
      ) : (
94
        <button disabled={disabled} onClick={() => changeRole("admin")}>
95
          Change to admin
96
        </button>
97
      )}
98
    </>
99
  );
100
};
101

102
// List of organization pending invitations. 
103
// You can invite new organization members and 
104
// revoke already sent invitations.
105
function InvitationList() {
106
  const { invitationList } = useOrganization();
107

108
  if (!invitationList) {
109
    return null;
110
  }
111

112
  const revoke = async (inv) => {
113
    await inv.revoke();
114
  };
115

116
  return (
117
    <div>
118
      <h2>Invite member</h2>
119
      <InviteMember />
120

121
      <h2>Pending invitations</h2>
122
      <ul>
123
        {invitationList.map((i) => (
124
          <li key={i.id}>
125
            {i.emailAddress} <button onClick={() => revoke(i)}>Revoke</button>
126
          </li>
127
        ))}
128
      </ul>
129
    </div>
130
  );
131
}
132

133
function InviteMember(){
134
  const { organization } = useOrganization();
135
  const [emailAddress, setEmailAddress] = useState("");
136
  const [role, setRole] = useState<"basic_member" | "admin">("basic_member");
137
  const [disabled, setDisabled] = useState(false);
138

139
  const onSubmit = async (e) => {
140
    e.preventDefault();
141
    setDisabled(true);
142
    await organization.inviteMember({ emailAddress, role });
143
    setEmailAddress("");
144
    setRole("basic_member");
145
    setDisabled(false);
146
  };
147

148
  return (
149
    <form onSubmit={onSubmit}>
150
      <input
151
        type="text"
152
        placeholder="Email address"
153
        value={emailAddress}
154
        onChange={(e) => setEmailAddress(e.target.value)}
155
      />
156
      <label>
157
        <input
158
          type="radio"
159
          checked={role === "admin"}
160
          onChange={() => {
161
            setRole("admin");
162
          }}
163
        />{" "}
164
        Admin
165
      </label>
166
      <label>
167
        <input
168
          type="radio"
169
          checked={role === "basic_member"}
170
          onChange={() => {
171
            setRole("basic_member");
172
          }}
173
        />{" "}
174
        Member
175
      </label>{" "}
176
      <button type="submit" disabled={disabled}>
177
        Invite
178
      </button>
179
    </form>
180
  );
181
};
182

1
<ul id="memberships_list"></ul>
2
<ul id="invitations_list"></ul>
3

4
<form id="new_invitation">
5
  <div>
6
    <label>Email address</div>
7
    <br />
8
    <input type="email" name="email_address" />
9
  </div>
10
  <button>Invite</button>
11
</form>
12

13
<script>
14
  async function renderMemberships(organization, isAdmin) {
15
    const list = document.getElementById("memberships_list");
16
    try {
17
      const memberships = await organization.getMembers();
18
      memberships.map((membership) => {
19
        const li = document.createElement("li");
20
        li.textContent = `${membership.identifier} - ${membership.role}`;
21

22
        // Add administrative actions; update role and remove member.
23
        if (isAdmin) {
24
          const updateBtn = document.createElement("button");
25
          updateBtn.textContent = "Change role";
26
          updateBtn.addEventListener("click", async function(e) {
27
            e.preventDefault();
28
            const role = membership.role === "admin" ?
29
              "basic_member" :
30
              "admin";
31
            await membership.update({ role });
32
          });
33
          li.appendChild(updateBtn);
34

35
          const removeBtn = document.createElement("button");
36
          removeBtn.textContent = "Remove";
37
          removeBtn.addEventListener("click", async function(e) {
38
            e.preventDefault();
39
            await currentOrganization.removeMember(membership.userId);
40
          });
41
          li.appendChild(removeBtn);
42
        }
43

44
        // Add the entry to the list
45
        list.appendChild(li);
46
      });
47
    } catch (err) {
48
      console.error(err);
49
    }
50
  }
51

52
  async function renderInvitations(organization, isAdmin) {
53
    const list = document.getElementById("invitations_list");
54
    try {
55
      const invitations = await organization.getPendingInvitations();
56
      invitations.map((invitation) => {
57
        const li = document.createElement("li");
58
        li.textContent = `${invitation.emailAddress} - ${invitation.role}`;
59

60
        // Add administrative actions; revoke invitation
61
        if (isAdmin) {
62
          const revokeBtn = document.createElement("button");
63
          revokeBtn.textContent = "Revoke";
64
          revokeBtn.addEventListener("click", async function(e) {
65
            e.preventDefault();
66
            await invitation.revoke();
67
          });
68
          li.appendChild(revokeBtn);
69
        }
70
        // Add the entry to the list
71
        list.appendChild(li);
72
      });
73
    } catch (err) {
74
      console.error(err);
75
    }
76
  }
77

78
  async function init() {
79
    // This is the current organization ID.
80
    const organizationId = "org_XXXXXXX";
81
    const organizationMemberships = await window.Clerk.getOrganizationMemberships()
82
    const currentMembership = organizationMemberships.find(membership 
83
      => membership.organization.id === organizationId);
84
    const currentOrganization = currentMembership.organization;
85
    
86
    if (!currentOrganization) {
87
      return;
88
    }
89
    const isAdmin = currentMembership.role === "admin";
90

91
    renderMemberships(currentOrganization, isAdmin);
92
    renderInvitations(currentOrganization, isAdmin);
93

94
    if (isAdmin) {
95
      const form = document.getElementById("new_invitation");
96
      form.addEventListener("submit", async function(e) {
97
        e.preventDefault();
98
        const inputEl = form.getElementsByTagName("input");
99
        if (!inputEl) {
100
          return;
101
        }
102

103
        try {
104
          await currentOrganization.inviteMember({
105
            emailAddress: inputEl.value,
106
            role: "basic_member",
107
          });
108
        } catch (err) {
109
          console.error(err);
110
        }
111
      });
112
    }
113
  }
114

115
  init();
116
</script>
117