# 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](https://docs.propelauth.com/getting-started/basics/organizations) for more information about organizations.

## Organization Pending Invitations

| Email                    | Role  | Expires                 | Revoke Invite |
|--------------------------|-------|-------------------------|---------------|
| user1@acmeinc.come      | Owner | 6/4/2026, 9:36:06 PM   | Revoke        |
| user2@acmeinc.come      | Admin | 6/4/2026, 9:36:06 PM   | Revoke        |
| user3@acmeinc.come      | Member| 6/4/2026, 9:36:06 PM   | Revoke        |

## [Shadcn Installation](https://ui.propelauth.com/org-membership-components/view-and-revoke-invites#shadcn-installation)

Install this component from our [shadcn registry](https://ui.propelauth.com/getting-started/component-registry).

```bash
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](https://ui.propelauth.com/org-membership-components/view-and-revoke-invites#fetch-pending-org-invites)

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

```javascript
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

```json
{
    "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](https://ui.propelauth.com/org-membership-components/view-and-revoke-invites#revoke-user-org-invitation)

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

```javascript
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

```json
{}
```