Organization Membership Table

PropelAuth's Organization Membership Table Component allow you to customize the UI around displaying members of an org, removing members from the org, and updating the roles of members in the org. Check out the documentation here for more information about organizations.

Organization Members

Shadcn Installation

Install this component from our shadcn registry.

npx shadcn@latest add https://components.propelauth.com/r/org-membership-table.json

Reference APIs

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

fetchOrgMembers

Fetches a paginated list of an org's members.

Arguments

• NameorgId *TypestringDescriptionThe ID of the org.
• Namepage_numberTypenumberDescriptionThe page number to return. Starts at 0.
• Namepage_sizeTypenumberDescriptionThe amount of results per page.
• Nameemail_searchTypestringDescriptionFilter by member email.

Success Response

• NameusersTypeOrgMember[]Description

An array of API Keys belonging to the provided org.

• user_id string

  • email string
  • role string
  • additional_roles string[]
  • possible_roles string[]
  • can_be_deleted boolean
  • is_enabled boolean
  • is_2fa_enabled boolean

• Nametotal_countTypenumberDescriptionThe total amount of org members.

• Namepage_numberTypenumberDescriptionThe current page.

• Namepage_sizeTypenumberDescriptionThe maximum amount of results of the page.

• Namehas_more_resultsTypebooleanDescriptionReturns true of 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.

• NamesuccessDescriptionSuccessful request.
• NameorgNotFoundDescriptionThe provided Org ID was not found.
• NameorgsNotEnabledDescriptionOrganizations are not enabled for the project.
• NameunauthorizedDescriptionThe user is not logged in.
• NameunexpectedOrUnhandledDescriptionAn unexpected error occurred.

Request

const { fetchOrgMembers } = useAuthFrontendApis()

const response = await fetchOrgMembers('1189c444-8a2d-4c41-8b4b-ae43ce79a492', {
    page_number: 0,
    page_size: 10,
    email_search: "test@example.com",
});
await response.handle({
    success: (data) => {
        console.log(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

{
    "users": [\
        {\
            "user_id": "1d31f06...",\
            "email": "test@example.com",\
            "role": "Owner",\
            "additional_roles": [],\
            "possible_roles": [\
                "Owner",\
                "Admin",\
                "Member"\
            ],\
            "can_be_deleted": true,\
            "is_enabled": true,\
            "is_2fa_enabled": true\
        },\
        {\
            "user_id": "d20605...",\
            "email": "test2@example.com",\
            "role": "Admin",\
            "additional_roles": [],\
            "possible_roles": [\
                "Owner",\
                "Admin",\
                "Member"\
            ],\
            "can_be_deleted": true,\
            "is_enabled": true,\
            "is_2fa_enabled": false\
        }\
    ],
    "total_count": 2,
    "page_number": 0,
    "page_size": 10,
    "has_more_results": false
}

removeUserFromOrg

Removes the provided user from the provided organization.

Arguments

• Nameorg_id *TypestringDescriptionThe ID of the org.
• Nameuser_id *TypestringDescriptionThe ID of the user to remove from the org.

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.

• NamesuccessDescriptionSuccessful request.
• NameorgNotFoundDescriptionThe org ID cannot be found.
• NameuserNotFoundInOrgDescriptionUser ID not found.
• NamenoRemovePermissionDescriptionThe user doing the action does not have permission to remove the provided user from the org.
• NameorgsNotEnabledDescriptionOrganizations not enabled for this project.
• NamemustBeAtLeastOneOwnerDescriptionThe user you're trying to remove is the only Owner of the org.
• NamebadRequestDescriptionIncorrect arguments given.
• NameunauthorizedDescriptionThe user is not logged in.
• NameunexpectedOrUnhandledDescriptionAn unexpected error occurred.

Request

const { removeUserFromOrg } = useAuthFrontendApis()

const response = await removeUserFromOrg({
    org_id: "1189c444-8a2d-4c41-8b4b-ae43ce79a492",
    user_id: "31c41c16-c281-44ae-9602-8a047e3bf33d",
});
await response.handle({
    success: async () => {
        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);
    },
    userNotFoundInOrg(error) {
        console.error('User not found', error);
    },
    noRemovePermission(error) {
        console.error('No remove permission', error);
    },
    orgsNotEnabled(error) {
        console.error('Org not enabled', error);
    },
    mustBeAtLeastOneOwner(error) {
        console.error('There must be at least one user with the Owner role in this org', error);
    },
    unexpectedOrUnhandled(error) {
        console.error('Unexpected or unhandled error', error);
    },
})

Successful Response

{}

updateUserRoleInOrg

Updates the provided user's role within the provided organization.

Arguments

• Nameorg_id *TypestringDescriptionThe ID of the org.
• Nameuser_id *TypestringDescriptionThe ID of the user.
• Namerole *TypestringDescriptionThe role the user will be updated to.
• Nameadditional_rolesTypestring[]Description

If using multiple roles per user, an array of additional roles for 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.

• NamesuccessDescriptionSuccessful request.
• NamenoUpdateRolePermissionDescriptionUser does not have permission to update this user's role.
• NameuserNotFoundInOrgDescriptionUser ID not found.
• NameorgsNotEnabledDescriptionOrganizations not enabled for this project.
• NamebadRequestDescriptionIncorrect arguments given.
• NameunauthorizedDescriptionThe user is not logged in.
• NameunexpectedOrUnhandledDescriptionAn unexpected error occurred.

Request

const { updateUserRoleInOrg } = useAuthFrontendApis()

const response = await updateUserRoleInOrg({
    org_id: "1189c444-8a2d-4c41-8b4b-ae43ce79a492",
    user_id: "31c41c16-c281-44ae-9602-8a047e3bf33d",
    role: "Admin",
    // if using multi-role support
    additional_roles: [\
        "Member"\
    ]
});
await response.handle({
    success: async () => {
        console.log('success')
    },
    badRequest(error) {
        for (const [field, fieldErrorMessage] of Object.entries(error.user_facing_errors)) {
            console.log('Error: "' + fieldErrorMessage + '" for field: "' + field + '"')
        }
    },
    userNotFoundInOrg(error) {
        console.error('User not found', error);
    },
    noUpdateRolePermission(error) {
        console.error('No update role permission', error);
    },
    orgsNotEnabled(error) {
        console.error('Org not enabled', error);
    },
    unexpectedOrUnhandled(error) {
        console.error('Unexpected or unhandled error', error);
    },
});

Successful Response

{}