Organizations

Learn how to manage organizations and their members

Organizations is a premium feature. Please get in touch if you would like us to enable it for your account. You can contact us at support@clerk.dev.

Demo Repo

A good way to explore Clerk's organizations functionality is to check out this demo repo:

https://github.com/clerkinc/organizations-demo

Overview

Organizations are shared accounts, useful for project and team leaders. Organization members can usually collaborate across shared resources. There are members with elevated privileges who can manage member access to the organization's data and resources.

Each member of an organization needs to have a user account in your application. All organization members have access to most of the organization resources, but some members can take advantage of administrative features.

Roles

This distinction in member permissions is possible with organization member roles. Roles determine a user's level of access to the organization. There are currently two roles; administrators and members.

admin - The "admin" role offers full access to organization resources. Members with the admin role have administrator privileges and can fully manage organizations and organization memberships.
basic_member - The "basic_member" role is the standard role for a user that is part of the organization. Access to organization resources is limited. Basic members cannot manage organizations and organization memberships, but can view information about the organization and other members in it.

Available actions

You can use Clerk's organizations feature to provide team grouping and sharing functionality for users of your applications.

Your users can create organizations. Organization owners effectively get the "admin" role.

Administrators can then invite other users to join the organization. An invitation email is sent out, and organization invitations support adding existing users of your application, or new ones. They can register once they accept the invitation.

Administrators can also revoke an invitation for a user that hasn't joined yet, as well as remove a user who's already a member from the organization or change their role. When removing organization members or updating their role, there needs to be at least one administrator for the organization at all times.

Administrators can also update an organization, in order to change the organization name for example.

Finally, all members of an organization, regardless of their role can view information about other members in the same organization.

Before you start

You need to create a Clerk Application in your Clerk Dashboard. For more information, check out our Setup your application guide.
You need to install Clerk React or ClerkJS to your application.
The organizations feature needs to be enabled for your account. Contact us at support@clerk.dev to turn the feature on.

Custom flow

Let's follow a simple scenario for setting up an organization and managing its members.

In the following guide, we'll create a new organization, update it and then invite a couple of members. We'll see how to revoke one of the two invitations, and update the other member's role. Finally, we'll remove the other member from the organization.

This tutorial assumes that a signed in user already exists. All snippets below require a session and user to be present.

Create a new organization

1
// pages/organizations/new.js
2
import { useState } from "react";
3
import { useRouter } from "next/router";
4
import { useOrganizations } from "@clerk/nextjs";
5

6
// Form to create a new organization. The current user
7
// will become the organization administrator.
8
export default function NewOrganization() {
9
  const [name, setName] = useState("");
10
  const router = useRouter();
11

12
  const { createOrganization } = useOrganizations();
13

14
  async function submit(e) {
15
    e.preventDefault();
16
    try {
17
      // Create a new organization.
18
      await createOrganization({ name });
19
      setName("");
20
      router.push("/organizations");
21
    } catch (err) {
22
      console.error(err);
23
    }
24
  }
25

26
  return (
27
    <div>
28
      <h2>Create an organization</h2>
29
      <form onSubmit={submit}>
30
        <div>
31
          <label>Name</label>
32
          <br />
33
          <input
34
            name="name"
35
            value={name}
36
            onChange={(e) => setName(e.target.value)}
37
          />
38
        </div>
39
        <button>Create organization</button>
40
      </form>
41
    </div>
42
  );
43
}

1
import { useState } from "react";
2
import { useOrganizations } from "@clerk/react";
3

4
// Form to create a new organization. The current user
5
// will become the organization administrator.
6
export default function NewOrganization() {
7
  const [name, setName] = useState("");
8

9
  const { createOrganization } = useOrganizations();
10

11
  async function submit(e) {
12
    e.preventDefault();
13
    try {
14
      // Create a new organization.
15
      await createOrganization({ name });
16
      setName("");
17
      // Assuming there's an organizations index 
18
      // page, navigate there.
19
      window.location = "/organizations";
20
    } catch (err) {
21
      console.error(err);
22
    }
23
  }
24

25
  return (
26
    <div>
27
      <h2>Create an organization</h2>
28
      <form onSubmit={submit}>
29
        <div>
30
          <label>Name</label>
31
          <br />
32
          <input
33
            name="name"
34
            value={name}
35
            onChange={(e) => setName(e.target.value)}
36
          />
37
        </div>
38
        <button>Create organization</button>
39
      </form>
40
    </div>
41
  );
42
}

1
<!-- Form to create an organization -->
2
<form id="new_organization">
3
  <div>
4
    <label>Name</label>
5
    <br />
6
    <input name="name" />
7
  </div>
8
  <button>Create organization</button>
9
</form>
10

11
<script>
12
  const form = document.getElementById("new_organization");
13
  form.addEventListener('submit', function(e) {
14
    e.preventDefault();
15
    const inputEl = form.getElementsByTagName("input")[0];
16
    if (!inputEl) {
17
      return;
18
    }
19
    try {
20
      await window.Clerk.createOrganization({ name: inputEl.value });
21
    } catch (err) {
22
      console.error(err);
23
    }
24
  });
25
</script>
26

View all organizations the current user belongs to

1
import { useState, useEffect } from "react";
2
import Link from "next/link";
3
import { useOrganizations } from "@clerk/nextjs";
4
import { OrganizationMembershipResource } from "@clerk/types";
5

6
// Lists all organization the user is a member of.
7
// Each entry is a link to a page to manage organization
8
// members.
9
export default function Organizations() {
10
  const [organizationMemberships, setOrganizationMemberships] = useState<
11
    OrganizationMembershipResource[]
12
  >([]);
13

14
  const { getOrganizationMemberships } = useOrganizations();
15

16
  useEffect(() => {
17
    async function fetchOrganizationMemberships() {
18
      try {
19
        const orgs = await getOrganizationMemberships();
20
        setOrganizationMemberships(orgs);
21
      } catch (err) {
22
        console.error(err);
23
      }
24
    }
25

26
    fetchOrganizationMemberships();
27
  }, []);
28

29
  return (
30
    <div>
31
      <h2>Your organizations</h2>
32
      <ul>
33
        {organizationMemberships.map(({ organization }) => (
34
            <Link
35
              key={organization.id}
36
              href={`/organizations/${organization.id}`}
37
            >
38
              {organization.name}
39
            </Link>
40
          ))}
41
      </ul>
42
    </div>
43
  );
44
}
45

46

1
import { useState, useEffect } from "react";
2
import { useOrganizations } from "@clerk/react";
3

4
// Lists all organization the user is a member of.
5
// Each entry is a link to a page to manage organization
6
// members.
7
export default function Organizations() {
8
  const [organizationMemberships, setOrganizationMemberships] = useState<
9
    OrganizationMembershipResource[]
10
  >([]);
11

12
  const { getOrganizationMemberships } = useOrganizations();
13

14
  useEffect(() => {
15
    async function fetchOrganizationMemberships() {
16
      try {
17
        const orgs = await getOrganizationMemberships();
18
        setOrganizationMemberships(orgs);
19
      } catch (err) {
20
        console.error(err);
21
      }
22
    }
23

24
    fetchOrganizationMemberships();
25
  }, []);
26

27
  return (
28
    <div>
29
      <h2>Your organizations</h2>
30
      <ul>
31
        {organizationMemberships.map(({ organization }) => (
32
          <a key={organization.id} href={`/organizations/${organization.id}`}>
33
            {organization.name}
34
          </a>
35
        ))}
36
      </ul>
37
    </div>
38
  );
39
}
40

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

Update the organization name

1
// pages/organizations/[id]/edit.js
2
import { useState, useEffect } from "react";
3
import { useRouter } from "next/router";
4
import { useOrganizations } from "@clerk/nextjs";
5

6
export default function EditOrganization() {
7
  const [organization, setOrganization] = useState(null);
8
  const [name, setName] = useState("");
9

10
  const { query } = useRouter();
11
  const organizationId = query.id;
12

13
  const { getOrganization } = useOrganizations();
14

15
  useEffect(() => {
16
    async function fetchOrganization() {
17
      try {
18
        const org = await getOrganization(organizationId);
19
        setOrganization(org);
20
      } catch (err) {
21
        console.log(err);
22
      }
23
    }
24

25
    fetchOrganization();
26
  }, [organizationId, getOrganization]);
27

28
  useEffect(() => {
29
    if (!organization) {
30
      return;
31
    }
32
    setName(organization.name);
33
  }, [organization]);
34

35
  async function submit(e) {
36
    e.preventDefault();
37
    try {
38
      await organization.update({ name });
39
      router.push(`/organizations/${organization.id}`);
40
    } catch (err) {
41
      console.error(err);
42
    }
43
  }
44

45
  if (!organization) {
46
    return null;
47
  }
48

49
  return (
50
    <div>
51
      <h2>Edit organization</h2>
52
      <form onSubmit={submit}>
53
        <div>
54
          <label>Name</label>
55
          <br />
56
          <input
57
            name="name"
58
            value={name}
59
            onChange={(e) => setName(e.target.value)}
60
          />
61
        </div>
62
        <button>Save</button>
63
      </form>
64
    </div>
65
  );
66
}

1
import { useState, useEffect } from "react";
2
import { useOrganizations } from "@clerk/react";
3

4
export default function EditOrganization({ organizationId }) {
5
  const [organization, setOrganization] = useState(null);
6
  const [name, setName] = useState("");
7

8
  const { getOrganization } = useOrganizations();
9

10
  useEffect(() => {
11
    async function fetchOrganization() {
12
      try {
13
        const org = await getOrganization(organizationId);
14
        setOrganization(org);
15
      } catch (err) {
16
        console.log(err);
17
      }
18
    }
19

20
    fetchOrganization();
21
  }, [organizationId, getOrganization]);
22

23
  useEffect(() => {
24
    if (!organization) {
25
      return;
26
    }
27
    setName(organization.name);
28
  }, [organization]);
29

30
  async function submit(e) {
31
    e.preventDefault();
32
    try {
33
      await organization.update({ name });
34
      router.push(`/organizations/${organization.id}`);
35
    } catch (err) {
36
      console.error(err);
37
    }
38
  }
39

40
  if (!organization) {
41
    return null;
42
  }
43

44
  return (
45
    <div>
46
      <h2>Edit organization</h2>
47
      <form onSubmit={submit}>
48
        <div>
49
          <label>Name</label>
50
          <br />
51
          <input
52
            name="name"
53
            value={name}
54
            onChange={(e) => setName(e.target.value)}
55
          />
56
        </div>
57
        <button>Save</button>
58
      </form>
59
    </div>
60
  );
61
}

1
<form id="edit_organization">
2
  <div>
3
    <label>Name</label>
4
    <br />
5
    <input name="name" />
6
  </div>
7
  <button>Save</button>
8
</form>
9

10
<script>
11
  async function init() {
12
    // This is the current organization ID.
13
    const organizationId = "org_XXXXXXX";
14
    const organizationMemberships = await window.Clerk.getOrganizationMemberships()
15
    const currentMembership = organizationMemberships.find(membership 
16
      => membership.organization.id === organizationId);
17
    const currentOrganization = currentMembership.organization;
18
    
19
    if (!currentOrganization) {
20
      return;
21
    }
22
    
23
    editOrganization(currentOrganization);
24
  }
25
  
26
  async function editOrganization(organization) {
27
    const form = document.getElementById("edit_organization");
28
    const inputEl = form.getElementsByTagName("input")[0];
29
    if (inputEl) {
30
      inputEl.value = organization.name;
31
    }
32
    
33
    form.addEventListener('submit', function(e) {
34
      e.preventDefault();
35
      const inputEl = form.getElementsByTagName("input")[0];
36
      if (!inputEl) {
37
        return;
38
      }
39
      try {
40
        await organization.update({ name: inputEl.value });
41
      } catch (err) {
42
        console.error(err);
43
      }
44
    });
45
  }
46
  
47
  init();
48
</script>

Manage organization members

1
// pages/organizations/[id].js
2
import { useState, useEffect } from "react";
3
import { useRouter } from "next/router";
4
import { useOrganizations } from "@clerk/nextjs";
5

6
// View and manage organization members, along with any
7
// pending invitations.
8
// Invite new members.
9
export default function Organization() {
10
  const [organizationMemberships, setOrganizationMemberships] = useState([]);
11

12
  const { query } = useRouter();
13
  const organizationId = query.id;
14

15
  const { getOrganizationMemberships } = useOrganizations();
16

17
  useEffect(() => {
18
    async function fetchOrganizationMemberships() {
19
      try {
20
        const orgMemberships = await getOrganizationMemberships();
21
        setOrganizationMemberships(orgMemberships);
22
      } catch (err) {
23
        console.log(err);
24
      }
25
    }
26

27
    fetchOrganizationMemberships();
28
  }, [organizationId, getOrganizationMemberships]);
29

30
  const currentOrganizationMembership = organizationMemberships.find(membership => 
31
    membership.organization.id === organizationId);
32

33
  if (!currentOrganizationMembership) {
34
    return null;
35
  }
36
  
37
  const isAdmin = currentOrganizationMembership.role === "admin";
38

39
  return (
40
    <div>
41
      <h2>{currentOrganizationMembership.organization.name}</h2>
42

43
      <Memberships organization={currentOrganizationMembership.organization} isAdmin={isAdmin} />
44
      {isAdmin && <Invitations organization={currentOrganizationMembership.organization} />}
45
    </div>
46
  );
47
}
48

49
// List of organization memberships. Administrators can
50
// change member roles or remove members from the organization.
51
function Memberships({ organization, isAdmin }) {
52
  const [memberships, setMemberships] = useState([]);
53

54
  const getMemberships = organization.getMemberships;
55

56
  const fetchMemberships = useCallback(async () => {
57
    try {
58
      const membs = await getMemberships();
59
      setMemberships(membs);
60
    } catch (err) {
61
      console.error(err);
62
    }
63
  }, [getMemberships]);
64

65
  useEffect(() => {
66
    fetchMemberships();
67
  }, [fetchMemberships]);
68

69
  async function remove(userId) {
70
    try {
71
      await organization.removeMember(userId);
72
      fetchMemberships();
73
    } catch (err) {
74
      console.error(err);
75
    }
76
  }
77

78
  async function switchRole(membership) {
79
    const role = membership.role === "admin" ? "basic_member" : "admin";
80
    try {
81
      await membership.update({ role });
82
      fetchMemberships();
83
    } catch (err) {
84
      console.error(err);
85
    }
86
  }
87

88
  return (
89
    <div>
90
      <b>Members</b>
91
      <ul>
92
        {memberships.map((membership) => (
93
          <li key={membership.id}>
94
            {membership.publicUserData.identifier} - {membership.role}
95
            {isAdmin && (
96
              <>
97
                <br />
98
                <button
99
                  onClick={(e) => {
100
                    switchRole(membership);
101
                  }}
102
                >
103
                  Change role
104
                </button>
105
                &nbsp;or&nbsp;
106
                <button
107
                  onClick={(e) => {
108
                    e.preventDefault();
109
                    remove(membership.publicUserData.userId);
110
                  }}
111
                >
112
                  Remove
113
                </button>
114
              </>
115
            )}
116
          </li>
117
        ))}
118
      </ul>
119
    </div>
120
  );
121
}
122

123
// List of organization pending invitations. 
124
// You can invite new organization members and 
125
// revoke already sent invitations.
126
function Invitations({ organization }) {
127
  const [invitations, setInvitations] = useState([]);
128
  const [emailAddress, setEmailAddress] = useState("");
129

130
  const getPendingInvitations = organization.getPendingInvitations;
131

132
  const fetchInvitations = useCallback(async () => {
133
    try {
134
      const invites = await getPendingInvitations();
135
      setInvitations(invites);
136
    } catch (err) {
137
      console.error(err);
138
    }
139
  }, [getPendingInvitations]);
140

141
  useEffect(() => {
142
    fetchInvitations();
143
  }, [fetchInvitations]);
144

145
  async function invite(e) {
146
    e.preventDefault();
147
    try {
148
      await organization.inviteMember({ 
149
        emailAddress, 
150
        role: "basic_member", 
151
      });
152
      setEmailAddress("");
153
      fetchInvitations();
154
    } catch (err) {
155
      console.error(err);
156
    }
157
  }
158

159
  async function revoke(invitation) {
160
    try {
161
      await invitation.revoke();
162
      fetchInvitations();
163
    } catch (err) {
164
      console.error(err);
165
    }
166
  }
167

168
  return (
169
    <div>
170
      <b>Pending invitations</b>
171
      <ul>
172
        {invitations.map((invitation) => (
173
          <li key={invitation.id}>
174
            {invitation.emailAddress}
175
            &nbsp;
176
            <button
177
              onClick={(e) => {
178
                e.preventDefault();
179
                revoke(invitation);
180
              }}
181
            >
182
              Revoke
183
            </button>
184
          </li>
185
        ))}
186
      </ul>
187

188
      <b>Invite new member</b>
189
      <form onSubmit={invite}>
190
        <div>
191
          <label>Email address</label>
192
          <br />
193
          <input
194
            type="email"
195
            name="email_address"
196
            value={emailAddress}
197
            onChange={(e) => setEmailAddress(e.target.value)}
198
          />
199
        </div>
200
        <button>Invite</button>
201
      </form>
202
    </div>
203
  );
204
}

1
import { useState, useEffect } from "react";
2
import { useOrganizations } from "@clerk/react";
3

4
// View and manage organization members, along with any
5
// pending invitations.
6
// Invite new members.
7
export default function Organization({ organizationId }) {
8
  const [organizationMemberships, setOrganizationMemberships] = useState([]);
9

10
  const { getOrganizationMemberships } = useOrganizations();
11

12
  useEffect(() => {
13
    async function fetchOrganizationMemberships() {
14
      try {
15
        const orgMemberships = await getOrganizationMemberships();
16
        setOrganizationMemberships(orgMemberships);
17
      } catch (err) {
18
        console.log(err);
19
      }
20
    }
21

22
    fetchOrganizationMemberships();
23
  }, [organizationId, getOrganizationMemberships]);
24

25
  const currentOrganizationMembership = organizationMemberships.find(membership => 
26
    membership.organization.id === organizationId);
27

28
  if (!currentOrganizationMembership) {
29
    return null;
30
  }
31
  
32
  const isAdmin = currentOrganizationMembership.role === "admin";
33

34
  return (
35
    <div>
36
      <h2>{currentOrganizationMembership.organization.name}</h2>
37

38
      <Memberships organization={currentOrganizationMembership.organization} isAdmin={isAdmin} />
39
      {isAdmin && <Invitations organization={currentOrganizationMembership.organization} />}
40
    </div>
41
  );
42
}
43

44
// List of organization memberships. Administrators can
45
// change member roles or remove members from the organization.
46
function Memberships({ organization, isAdmin }) {
47
  const [memberships, setMemberships] = useState([]);
48

49
  const getMemberships = organization.getMemberships;
50

51
  const fetchMemberships = useCallback(async () => {
52
    try {
53
      const membs = await getMemberships();
54
      setMemberships(membs);
55
    } catch (err) {
56
      console.error(err);
57
    }
58
  }, [getMemberships]);
59

60
  useEffect(() => {
61
    fetchMemberships();
62
  }, [fetchMemberships]);
63

64
  async function remove(userId) {
65
    try {
66
      await organization.removeMember(userId);
67
      fetchMemberships();
68
    } catch (err) {
69
      console.error(err);
70
    }
71
  }
72

73
  async function switchRole(membership) {
74
    const role = membership.role === "admin" ? "basic_member" : "admin";
75
    try {
76
      await membership.update({ role });
77
      fetchMemberships();
78
    } catch (err) {
79
      console.error(err);
80
    }
81
  }
82

83
  return (
84
    <div>
85
      <b>Members</b>
86
      <ul>
87
        {memberships.map((membership) => (
88
          <li key={membership.id}>
89
            {membership.publicUserData.identifier} - {membership.role}
90
            {isAdmin && (
91
              <>
92
                <br />
93
                <button
94
                  onClick={(e) => {
95
                    switchRole(membership);
96
                  }}
97
                >
98
                  Change role
99
                </button>
100
                &nbsp;or&nbsp;
101
                <button
102
                  onClick={(e) => {
103
                    e.preventDefault();
104
                    remove(membership.publicUserData.userId);
105
                  }}
106
                >
107
                  Remove
108
                </button>
109
              </>
110
            )}
111
          </li>
112
        ))}
113
      </ul>
114
    </div>
115
  );
116
}
117

118
// List of organization pending invitations. 
119
// You can invite new organization members and 
120
// revoke already sent invitations.
121
function Invitations({ organization }) {
122
  const [invitations, setInvitations] = useState([]);
123
  const [emailAddress, setEmailAddress] = useState("");
124

125
  const getPendingInvitations = organization.getPendingInvitations;
126

127
  const fetchInvitations = useCallback(async () => {
128
    try {
129
      const invites = await getPendingInvitations();
130
      setInvitations(invites);
131
    } catch (err) {
132
      console.error(err);
133
    }
134
  }, [getPendingInvitations]);
135

136
  useEffect(() => {
137
    fetchInvitations();
138
  }, [fetchInvitations]);
139

140
  async function invite(e) {
141
    e.preventDefault();
142
    try {
143
      await organization.inviteMember({ 
144
        emailAddress, 
145
        role: "basic_member", 
146
      });
147
      setEmailAddress("");
148
      fetchInvitations();
149
    } catch (err) {
150
      console.error(err);
151
    }
152
  }
153

154
  async function revoke(invitation) {
155
    try {
156
      await invitation.revoke();
157
      fetchInvitations();
158
    } catch (err) {
159
      console.error(err);
160
    }
161
  }
162

163
  return (
164
    <div>
165
      <b>Pending invitations</b>
166
      <ul>
167
        {invitations.map((invitation) => (
168
          <li key={invitation.id}>
169
            {invitation.emailAddress}
170
            &nbsp;
171
            <button
172
              onClick={(e) => {
173
                e.preventDefault();
174
                revoke(invitation);
175
              }}
176
            >
177
              Revoke
178
            </button>
179
          </li>
180
        ))}
181
      </ul>
182

183
      <b>Invite new member</b>
184
      <form onSubmit={invite}>
185
        <div>
186
          <label>Email address</label>
187
          <br />
188
          <input
189
            type="email"
190
            name="email_address"
191
            value={emailAddress}
192
            onChange={(e) => setEmailAddress(e.target.value)}
193
          />
194
        </div>
195
        <button>Invite</button>
196
      </form>
197
    </div>
198
  );
199
}

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