Organization invitation methods

These methods on the Organization object allow you to manage the invitations to an organization.

The following examples assume:

you have followed the quickstart in order to add Clerk to your JavaScript application
you have enabled the Organizations feature in your Clerk Dashboard

`getInvitations()`

Retrieves the list of invitations for the currently active organization.


function getInvitations(params?: GetInvitationsParams): Promise<ClerkPaginatedResponse<OrganizationInvitation>>;

`GetInvitationsParams`

Name	Type	Description
`initialPage?`	`number`	A number that can be used to skip the first n-1 pages. For example, if `initialPage` is set to 10, it is will skip the first 9 pages and will fetch the 10th page.
`pageSize?`	`number`	A number that indicates the maximum number of results that should be returned for a specific page.
`status?`	`'pending' \| 'accepted' \| 'revoked'`	The status an invitation can have.

`getInvitations()` returns

Type	Description
`Promise<ClerkPaginatedResponse<OrganizationInvitation>>`	This method returns a `Promise` that resolves to a `ClerkPaginatedResponse` of `OrganizationInvitation` objects.

`getInvitations()` example

main.js
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) {
    await clerk.organization.getInvitations()
      .then((res) => console.log(res))
      .catch((error) => console.log("An error occurred:", error.errors));
  } else {
    // If there is no active organization,
    // mount Clerk's <OrganizationSwitcher />
    // to allow the user to set an organization as active
    document.getElementById("app").innerHTML = `
      <h2>Select an organization to set it as active</h2>
      <div id="org-switcher"></div>
    `;
 
    const orgSwitcherDiv = document.getElementById("org-switcher");
 
    clerk.mountOrganizationSwitcher(orgSwitcherDiv);
  }
} else {
  document.getElementById("app").innerHTML = `
    <div id="sign-in"></div>
  `;
 
  const signInDiv = document.getElementById("sign-in");
 
  clerk.mountSignIn(signInDiv);
}

index.html
  <div id="app"></div>
 
  <!-- Initialize Clerk with your
  Clerk Publishable key and Frontend API URL -->
  <script
    async
    crossorigin="anonymous"
    data-clerk-publishable-key="{{pub_key}}"
    src="https://{{fapi_url}}/npm/@clerk/clerk-js@latest/dist/clerk.browser.js"
    type="text/javascript"
  ></script>
 
  <script>
    window.addEventListener("load", async function () {
      await Clerk.load();
 
      if (Clerk.user) {
        // Check for an active organization
        if (Clerk.organization) {
          await Clerk.organization.getInvitations()
            .then((res) => console.log(res))
            .catch((error) => console.log("An error occurred:", error.errors));
        } else {
          // If there is no active organization,
          // mount Clerk's <OrganizationSwitcher />
          // to allow the user to set an organization as active
          document.getElementById("app").innerHTML = `
            <h2>Select an organization to set it as active</h2>
            <div id="org-switcher"></div>
          `;
 
          const orgSwitcherDiv = document.getElementById("org-switcher");
 
          Clerk.mountOrganizationSwitcher(orgSwitcherDiv);
        }
      } else {
        document.getElementById("app").innerHTML = `
          <div id="sign-in"></div>
        `;
 
        const signInDiv = document.getElementById("sign-in");
 
        Clerk.mountSignIn(signInDiv);
      }
    });
  </script>

`inviteMember()`

Creates and sends an invitation to the target email address for becoming a member with the role passed on the function parameters.


function inviteMember(params: InviteMemberParams): Promise<OrganizationInvitation>;

`InviteMemberParams`

Name	Type	Description
`emailAddress`	`string`	The email address to invite.
`role`	`string`	The role of the new member.

`inviteMember()` returns

Type	Description
`Promise<OrganizationInvitation>`	This method returns a `Promise` that resolves to the `OrganizationInvitation` for the created invitation.

`inviteMember()` example

main.js
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) {
    const emailAddress = "test@test.com";
    const role = "org:member";
 
    await clerk.organization.inviteMember({ emailAddress, role })
      .then((res) => console.log(res))
      .catch((error) => console.log("An error occurred:", error.errors));
  } else {
    // If there is no active organization,
    // mount Clerk's <OrganizationSwitcher />
    // to allow the user to set an organization as active
    document.getElementById("app").innerHTML = `
      <h2>Select an organization to set it as active</h2>
      <div id="org-switcher"></div>
    `;
 
    const orgSwitcherDiv = document.getElementById("org-switcher");
 
    clerk.mountOrganizationSwitcher(orgSwitcherDiv);
  }
} else {
  document.getElementById("app").innerHTML = `
    <div id="sign-in"></div>
  `;
 
  const signInDiv = document.getElementById("sign-in");
 
  clerk.mountSignIn(signInDiv);
}

index.html
  <div id="app"></div>
 
  <!-- Initialize Clerk with your
  Clerk Publishable key and Frontend API URL -->
  <script
    async
    crossorigin="anonymous"
    data-clerk-publishable-key="{{pub_key}}"
    src="https://{{fapi_url}}/npm/@clerk/clerk-js@latest/dist/clerk.browser.js"
    type="text/javascript"
  ></script>
 
  <script>
    window.addEventListener("load", async function () {
      await Clerk.load();
 
      if (Clerk.user) {
        // Check for an active organization
        if (Clerk.organization) {
          const emailAddress = "test@test.com";
          const role = "org:member";
 
          await Clerk.organization.inviteMember({ emailAddress, role })
            .then((res) => console.log(res))
            .catch((error) => console.log("An error occurred:", error.errors));
        } else {
          // If there is no active organization,
          // mount Clerk's <OrganizationSwitcher />
          // to allow the user to set an organization as active
          document.getElementById("app").innerHTML = `
            <h2>Select an organization to set it as active</h2>
            <div id="org-switcher"></div>
          `;
 
          const orgSwitcherDiv = document.getElementById("org-switcher");
 
          Clerk.mountOrganizationSwitcher(orgSwitcherDiv);
        }
      } else {
        document.getElementById("app").innerHTML = `
          <div id="sign-in"></div>
        `;
 
        const signInDiv = document.getElementById("sign-in");
 
        Clerk.mountSignIn(signInDiv);
      }
    });
  </script>

`inviteMembers()`

Creates and sends an invitation to the target email addresses for becoming a member with the role passed in the parameters.


function inviteMembers(params: InviteMembersParams): Promise<OrganizationInvitation[]>;

`InviteMembersParams`

Name	Type	Description
`emailAddresses`	`string[]`	The email addresses to invite.
`role`	`string`	The role of the new members.

`inviteMembers()` returns

Type	Description
`Promise<OrganizationInvitation[]>`	This method returns a `Promise` that resolves to an array of `OrganizationInvitation` objects for the created invitations.

`inviteMembers()` example

main.js
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) {
    const emailAddresses = ["test@test.com", "test2@test.com", "test3@test.com"];
    const role = "org:member";
 
    await clerk.organization.inviteMembers({ emailAddresses, role })
      .then((res) => console.log(res))
      .catch((error) => console.log("An error occurred:", error.errors));
  } else {
    // If there is no active organization,
    // mount Clerk's <OrganizationSwitcher />
    // to allow the user to set an organization as active
    document.getElementById("app").innerHTML = `
      <h2>Select an organization to set it as active</h2>
      <div id="org-switcher"></div>
    `;
 
    const orgSwitcherDiv = document.getElementById("org-switcher");
 
    clerk.mountOrganizationSwitcher(orgSwitcherDiv);
  }
} else {
  document.getElementById("app").innerHTML = `
    <div id="sign-in"></div>
  `;
 
  const signInDiv = document.getElementById("sign-in");
 
  clerk.mountSignIn(signInDiv);
}

index.html
  <div id="app"></div>
 
  <!-- Initialize Clerk with your
  Clerk Publishable key and Frontend API URL -->
  <script
    async
    crossorigin="anonymous"
    data-clerk-publishable-key="{{pub_key}}"
    src="https://{{fapi_url}}/npm/@clerk/clerk-js@latest/dist/clerk.browser.js"
    type="text/javascript"
  ></script>
 
  <script>
    window.addEventListener("load", async function () {
      await Clerk.load();
 
      if (Clerk.user) {
        // Check for an active organization
        if (Clerk.organization) {
          const emailAddresses = ["test@test.com", "test2@test.com", "test3@test.com"];
          const role = "org:member";
 
          await Clerk.organization.inviteMembers({ emailAddresses, role })
            .then((res) => console.log(res))
            .catch((error) => console.log("An error occurred:", error.errors));
        } else {
          // If there is no active organization,
          // mount Clerk's <OrganizationSwitcher />
          // to allow the user to set an organization as active
          document.getElementById("app").innerHTML = `
            <h2>Select an organization to set it as active</h2>
            <div id="org-switcher"></div>
          `;
 
          const orgSwitcherDiv = document.getElementById("org-switcher");
 
          Clerk.mountOrganizationSwitcher(orgSwitcherDiv);
        }
      } else {
        document.getElementById("app").innerHTML = `
          <div id="sign-in"></div>
        `;
 
        const signInDiv = document.getElementById("sign-in");
 
        Clerk.mountSignIn(signInDiv);
      }
    });
  </script>

Last updated on April 1, 2024

getInvitations()

GetInvitationsParams

getInvitations() returns

getInvitations() example

inviteMember()

InviteMemberParams

inviteMember() returns

inviteMember() example

inviteMembers()

InviteMembersParams

inviteMembers() returns

inviteMembers() example