+ ```html {{ filename: 'index.html' }}
+
+
+
+
+
+
+ Clerk + JavaScript App
+
+
+
+
+
+
+ Error:
+
+
+
+ Memberships List
+
+
+
+ | User ID |
+ Identifier |
+ Role |
+ Update role |
+ Remove member |
+
+
+
+
+
+
+
Add member
+
+
+
+
+ Response:
+
+
+
+
+
+ ```
+
+ ```js {{ filename: 'main.js', mark: [13, 41, 58, 75] }}
+ import { Clerk } from '@clerk/clerk-js'
+
+ // Initialize Clerk with your Clerk publishable key
+ const clerk = new Clerk('{{pub_key}}')
+ await clerk.load()
+
+ if (clerk.user) {
+ // Check for an active organization
+ if (clerk.organization) {
+ // Render list of organization memberships
+ async function renderMemberships(organization, isAdmin) {
+ try {
+ const { data } = await organization.getMemberships()
+
+ const memberships = data
+ console.log(`getMemberships:`, memberships)
+
+ memberships.map((membership) => {
+ const membershipTable = document.getElementById('memberships_table')
+ const row = membershipTable.insertRow()
+ row.insertCell().textContent = membership.publicUserData.userId
+ row.insertCell().textContent = membership.publicUserData.identifier
+ row.insertCell().textContent = membership.role
+
+ // Add administrative actions:
+ // Add and remove a member, and update a member's role.
+ if (isAdmin) {
+ // Show add, update, remove member buttons
+ document.getElementById('add-member-container').removeAttribute('hidden')
+ document.getElementById('update-role-head').removeAttribute('hidden')
+ document.getElementById('remove-member-head').removeAttribute('hidden')
+
+ // Get the user ID of the member
+ const userId = membership.publicUserData.userId
+
+ // Update a member's role
+ const updateBtn = document.createElement('button')
+ updateBtn.textContent = 'Change role'
+ updateBtn.addEventListener('click', async function (e) {
+ e.preventDefault()
+ const role = membership.role === 'org:admin' ? 'org:member' : 'org:admin'
+ await organization
+ .updateMember({ userId, role })
+ .then((res) => {
+ document.getElementById('response').innerHTML = JSON.stringify(res)
+ })
+ .catch((error) => {
+ document.getElementById('error-container').removeAttribute('hidden')
+ document.getElementById('error-message').innerHTML = error.errors[0].longMessage
+ console.log('An error occurred:', error.errors)
+ })
+ })
+ row.insertCell().appendChild(updateBtn)
+
+ // Remove a member
+ const removeBtn = document.createElement('button')
+ removeBtn.textContent = 'Remove'
+ removeBtn.addEventListener('click', async function (e) {
+ e.preventDefault()
+ await organization
+ .removeMember(userId)
+ .then((res) => {
+ document.getElementById('response').innerHTML = JSON.stringify(res)
+ })
+ .catch((error) => {
+ document.getElementById('error-container').removeAttribute('hidden')
+ document.getElementById('error-message').innerHTML = error.errors[0].longMessage
+ console.log('An error occurred:', error.errors)
+ })
+ })
+ row.insertCell().appendChild(removeBtn)
+
+ // Add a new member to the organization
+ document.getElementById('add-member').addEventListener('click', () => {
+ const userId = document.getElementById('member-user-id').value
+
+ organization
+ .addMember({ userId, role: 'org:member' })
+ .then((res) => {
+ document.getElementById('response').innerHTML = JSON.stringify(res)
+ })
+ .catch((error) => {
+ document.getElementById('error-container').removeAttribute('hidden')
+ document.getElementById('error-message').innerHTML = error.errors[0].longMessage
+ console.log('An error occurred:', error.errors)
+ })
+ })
+ }
+ })
+ } catch (error) {
+ document.getElementById('error-container').removeAttribute('hidden')
+ document.getElementById('error-message').innerHTML = error.errors[0].longMessage
+ console.log('An error occurred:', error.errors)
+ }
}
- /* Style for table cells */
- td,
- th {
- border: 1px solid black; /* Border for each cell */
- padding: 2px; /* Optional: Add padding to cells */
- }
-
-
-
-
+ /**
+ * Checks if a user is an admin of the
+ * currently active organization and
+ * renders the organization's memberships.
+ */
+ async function checkAdminAndRenderMemberships() {
+ const organizationId = clerk.organization.id
-
- Error:
-
-
+ const { data } = await clerk.user.getOrganizationMemberships()
- Memberships List
-
-
-
- | User ID |
- Identifier |
- Role |
- Update role |
- Remove member |
-
-
-
-
-
-
-
Add member
-
-
-
+ const organizationMemberships = data
- Response:
-
-
-
-
-