View And Revoke Org Invites Component

PropelAuth's View And Revoke Org Invites Component allow you to customize the UI around viewing and revoking invitations to join an organization. Check out the documentation here for more information about organizations.

Organization Pending Invitations

Shadcn Installation

Install this component from our shadcn registry.

npx shadcn@latest add https://components.propelauth.com/r/view-and-revoke-org-invites.json

Reference APIs

These are the APIs that are used by the above component. You can use these APIs directly in your own code.

fetchPendingOrgInvites

Fetches a paginated list of an org's invites.

Arguments

• Name orgId Type string Description The ID of the org.
• Name page_number Type number Description The page number to return. Starts at 0.
• Name page_size Type number Description The amount of results per page.
• Name email_search Type string Description Filter by member email.

Success Response

• Name pending_invites Type PendingOrgInvite[] Description

An array of invites for the provided org.

• email string

  • role string
  • additional_roles string[]
  • expires_at_seconds number

• Name total_count Type number Description The total amount of org members.

• Name page_number Type number Description The current page.

• Name page_size Type number Description The maximum amount of results of the page.

• Name has_more_results Type boolean Description Returns true if there are more results beyond the current page.

Response Functions

The response object has a handle function that you can use to handle the response. These functions can be async, and you can return values from them.

• Name success Description Successful request.
• Name orgNotFound Description The provided Org ID was not found.
• Name orgsNotEnabled Description Organizations are not enabled for the project.
• Name unauthorized Description The user is not logged in.
• Name unexpectedOrUnhandled Description An unexpected error occurred.

Request

const { fetchPendingOrgInvites } = useAuthFrontendApis()

const response = await fetchPendingOrgInvites("1189c444-8a2d-4c41-8b4b-ae43ce79a492", {
    page_number: 0,
    page_size: 10,
    email_search: "test@test.com",
});
await response.handle({
    success: (data) => {
        console.log("success")
    },
    orgNotFound(error) {
        console.error('Org not found', error);
    },
    orgsNotEnabled(error) {
        console.error('Org not enabled', error);
    },
    unexpectedOrUnhandled(error) {
        console.error('Unexpected or unhandled error', error);
    },
});

Successful Response

{
    "pending_invites": [
        {
            "email": "test@example.com",
            "role": "Admin",
            "additional_roles": [],
            "expires_at_seconds": 1737217437
        }
    ],
    "total_count": 1,
    "page_number": 0,
    "page_size": 10,
    "has_more_results": false
}

revokeUserOrgInvitation

Revokes an existing invitation to a user to join an organization.

Arguments

• Name org_id Type string Description The ID of the org.
• Name email Type string Description The email of the user.

Response Functions

The response object has a handle function that you can use to handle the response. These functions can be async, and you can return values from them.

• Name success Description Successful request.
• Name orgNotFound Description The org ID cannot be found.
• Name noRevokeInvitePermission Description The user doing the action does not have permission to revoke an invitation for the org.
• Name orgsNotEnabled Description Organizations not enabled for this project.
• Name badRequest Description Incorrect arguments given.
• Name unauthorized Description The user is not logged in.
• Name unexpectedOrUnhandled Description An unexpected error occurred.

Request

const { revokeUserOrgInvitation } = useAuthFrontendApis()

const response = await revokeUserOrgInvitation({
    org_id: "1189c444-8a2d-4c41-8b4b-ae43ce79a492",
    email: "test@test.com",
});
await response.handle({
    async success() {
        console.log("success")
    },
    badRequest(error) {
        for (const [field, fieldErrorMessage] of Object.entries(error.user_facing_errors)) {
            console.log('Error: "' + fieldErrorMessage + '" for field: "' + field + '"')
        }
    },
    orgNotFound(error) {
        console.error('Org not found', error);
    },
    orgsNotEnabled(error) {
        console.error('Org not enabled', error);
    },
    noRevokeInvitePermission(error) {
        console.error('No revoke invite permission', error);
    },
    unexpectedOrUnhandled(error) {
        console.error('Unexpected or unhandled error', error);
    },
});

Successful Response

{}