Build a custom flow for creating and managing organization invitations
Organization members with appropriate permissions can invite new users to their organization and manage those invitations. The invitation recipient can be either an existing user of your application or a new user. If they are a new user, they will need to sign up in order to accept the invitation.
Users with the appropriate permissions can also revoke organization invitations for users that have not yet joined, which will prevent the user from becoming an organization member.
This guide will demonstrate how to use Clerk's API to build a custom flow for inviting users to an organization and managing an organization's pending invitations.
To invite a user:
- Use the
useOrganization()
hook to getorganization
, which is the active organization. - Use
organization
to call theinviteMember()
method, with the recipient's email address and desired role passed as arguments.
To revoke an invitation:
- Use the
useOrganization()
hook to getinvitations
, which is a list of invitations for the active organization. invitations
is an array ofOrganizationInvitation
objects. EachOrganizationInvitation
object has arevoke()
method that can be called to revoke the invitation.
The following example includes:
- An
<InviteMember />
component that allows administrators to invite new members to their organization. - An
<InvitationList />
component that lists all pending invitations and allows administrators to revoke them.
This example is written for Next.js App Router but can be adapted for any React meta framework, such as Remix.
To check if the current user is an organization admin:
- Get the active organization's ID from the
clerk
object. - Call the
getOrganizationMemberships()
method to get a list of organizations that the user is a member of. This method returnsdata
, which is an array ofOrganizationMembership
objects. - In the list of organizations that the user is a member of, find the
OrganizationMembership
object that has an ID that matches the active organization's ID. - Check the
role
property of theOrganizationMembership
object to see if the user is an admin.
To invite a user:
- Use the active
organization
object to call theinviteMember()
method, with the recipient's email address and desired role passed as arguments.
To revoke an invitation:
- Use the active
organization
object to call thegetInvitations()
method to get an array ofOrganizationInvitation
objects. - Each
OrganizationInvitation
object has arevoke()
method that can be called to revoke the invitation.
The following example includes:
- A
renderInvitations()
function that lists all invitations and allows administrators to revoke them. - An
checkAdminAndRenderInvitations()
function that gets the current organization, checks if the current user is an admin, renders invitations, and sets up a form that allows administrators to invite new members to their organization.
Use the tabs to view the code necessary for the index.html
and main.js
files.
Next steps
Now that you've created a flow for managing organization invitations, you might want to create a flow for accepting invitations. See the dedicated custom flow guide for more information.
Feedback
Last updated on