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

Email	Status	Role	Remove User
user1@acmeinc.com	Active
user2@acmeinc.com	Active
user3@acmeinc.com	Inactive

Not sure how to use this component? Check out the Using the Documentation page.

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

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
users
Type
OrgMember[]
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
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 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.

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 { 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

Name
org_id *
Type
string
Description
The ID of the org.
Name
user_id *
Type
string
Description
The 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.

Name
success
Description
Successful request.
Name
orgNotFound
Description
The org ID cannot be found.
Name
userNotFoundInOrg
Description
User ID not found.
Name
noRemovePermission
Description
The user doing the action does not have permission to remove the provided user from the org.
Name
orgsNotEnabled
Description
Organizations not enabled for this project.
Name
mustBeAtLeastOneOwner
Description
The user you're trying to remove is the only Owner of the org.
Name
badRequest
Description
Incorrect arguments given.
Name
unauthorized
Description
The user is not logged in.
Name
unexpectedOrUnhandled
Description
An 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

Name
org_id *
Type
string
Description
The ID of the org.
Name
user_id *
Type
string
Description
The ID of the user.
Name
role *
Type
string
Description
The role the user will be updated to.
Name
additional_roles
Type
string[]
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.

Name
success
Description
Successful request.
Name
noUpdateRolePermission
Description
User does not have permission to update this user's role.
Name
userNotFoundInOrg
Description
User ID not found.
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 { 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

{}