āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/clerk/clerk-docs/guides/development/custom-flows/organizations/manage-user-org-invitations ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
This guide will demonstrate how to use the Clerk API to build a custom flow for managing a user's organization invitations.
<Tabs items={["Next.js", "JavaScript"]}> <Tab> The following example:
1. Uses the [`useOrganizationList()`](/docs/reference/hooks/use-organization) hook to get `userInvitations`, which is a list of the user's organization invitations.
- `userInvitations` is an object with `data` that contains an array of [`UserOrganizationInvitation`](/docs/reference/javascript/types/user-organization-invitation) objects.
- Each `UserOrganizationInvitation` object has an [`accept()`](/docs/reference/javascript/types/organization-membership-request#accept) method that accepts the invitation to the organization.
1. Maps over the `data` array to display the invitations in a table, providing an "Accept" button for each invitation that calls the `accept()` method.
This example is written for Next.js App Router but can be adapted for any React-based framework.
```jsx {{ filename: 'app/components/UserInvitationsList.tsx', collapsible: true }}
'use client'
import { useOrganizationList } from '@clerk/nextjs'
import React from 'react'
export default function UserInvitationsList() {
const { isLoaded, userInvitations } = useOrganizationList({
userInvitations: {
infinite: true,
keepPreviousData: true,
},
})
if (!isLoaded || userInvitations.isLoading) {
return <>Loading</>
}
return (
<>
<h1>Organization invitations</h1>
<table>
<thead>
<tr>
<th>Email</th>
<th>Organization name</th>
<th>Role</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{userInvitations.data?.map((invitation) => (
<tr key={invitation.id}>
<td>{invitation.emailAddress}</td>
<td>{invitation.publicOrganizationData.name}</td>
<td>{invitation.role}</td>
<td>
<button onClick={() => invitation.accept()}>Accept</button>
</td>
</tr>
))}
</tbody>
</table>
<button disabled={!userInvitations.hasNextPage} onClick={userInvitations.fetchNext}>
Load more
</button>
</>
)
}
```
1. Calls the [`getOrganizationInvitations()`](/docs/reference/javascript/user#get-organization-invitations) method to retrieve the list of organization invitations for the active user. This method returns `data`, which is an array of [`UserOrganizationInvitation`](/docs/reference/javascript/types/user-organization-invitation) objects.
1. Maps over the `data` array to display the invitations in a table.
1. Provides an "Accept" button for each invitation that calls the [`accept()`](/docs/reference/javascript/types/user-organization-invitation#accept) method.
Use the following tabs to view the code necessary for the `index.html` and `main.js` files.
<CodeBlockTabs options={["index.html", "main.js"]}>
```html {{ filename: 'index.html', collapsible: true }}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Clerk + JavaScript App</title>
</head>
<body>
<div id="app"></div>
<h1>Organization invitations</h1>
<table>
<thead>
<tr>
<th>Email</th>
<th>Organization name</th>
<th>Role</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody id="invitations-table-body"></tbody>
</table>
<script type="module" src="/src/main.js" async crossorigin="anonymous"></script>
</body>
</html>
```
```js {{ filename: 'main.js', collapsible: true }}
import { Clerk } from '@clerk/clerk-js'
const pubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
if (!pubKey) {
throw new Error('Add your VITE_CLERK_PUBLISHABLE_KEY to .env file')
}
const clerk = new Clerk('{{pub_key}}')
await clerk.load()
if (clerk.isSignedIn) {
const { data } = await clerk.user.getOrganizationInvitations()
const invitations = data
invitations.map((invitation) => {
const tableBody = document.getElementById('invitations-table-body')
const row = tableBody.insertRow()
row.insertCell().textContent = invitation.emailAddress
row.insertCell().textContent = invitation.publicOrganizationData.name
row.insertCell().textContent = invitation.role
row.insertCell().textContent = invitation.status
// Show accept button for pending invitations
if (invitation.status === 'pending') {
const acceptBtn = document.createElement('button')
acceptBtn.textContent = 'Accept'
acceptBtn.addEventListener('click', async function (e) {
e.preventDefault()
await invitation.accept()
})
row.insertCell().appendChild(acceptBtn)
}
})
} else {
// If there is no active user, mount Clerk's <SignIn />
document.getElementById('app').innerHTML = `
<div id="sign-in"></div>
`
const signInDiv = document.getElementById('sign-in')
clerk.mountSignIn(signInDiv)
}
```
</CodeBlockTabs>
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā