# View Expired Org Invites Component

PropelAuth's View Expired Org Invites Component allows you to customize the UI around viewing expired invites to join an organization. [Check out the documentation here](https://docs.propelauth.com/getting-started/basics/organizations) for more information about organizations.

## Organization Expired Invitations

| Email                   | Role  | Expired                    |
|-------------------------|-------|----------------------------|
| user1@acmeinc.com      | Owner | 6/4/2026, 9:36:07 PM      |
| user2@acmeinc.com      | Admin | 6/4/2026, 9:36:07 PM      |
| user3@acmeinc.com      | Member| 6/4/2026, 9:36:07 PM      |

## [Shadcn Installation](https://ui.propelauth.com/org-membership-components/view-expired-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-expired-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.

## [fetchExpiredInvites](https://ui.propelauth.com/org-membership-components/view-expired-invites#fetch-expired-invites)

Fetches a paginated list of an org's expired invites.

## Arguments

- Name `orgId`  *Type string*
  Description: The ID of the org to fetch expired invites for.
- 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 invite email.

## Success Response

- Name `expired_invites` *Type ExpiredOrgInvite[]*
  Description: An array of expired 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 expired org invites.
- 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 { fetchExpiredInvites } = useAuthFrontendApis()

const response = await fetchExpiredInvites("1189c444-8a2d-4c41-8b4b-ae43ce79a492", {
    page_number: 0,
    page_size: 10,
    email_search: "Acme",
});
await response.handle({
    success: (data) => {
        setResponse(data);
    },
    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
{
    "expired_invites": [
        {
            "email": "test@example.com",
            "role": "Admin",
            "additional_roles": [
                "Member"
            ],
            "expired_at_seconds": 1737217437
        }
    ],
    "total_count": 1,
    "page_number": 0,
    "page_size": 10,
    "has_more_results": false
}
```