Create Organization Component

PropelAuth's Create Organization component allows you to customize the flow around a user creating an organization in your app.

Create Organization

Organization Name

• Allow anyone with an @example.com email address to join this organization
• Only users with an @example.com email address can join this organization

Shadcn Installation

Install this component from our shadcn registry.

npx shadcn@latest add https://components.propelauth.com/r/create-organization.json

Reference APIs

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

createOrg

Creates a new org and automatically adds the logged in user to it.

Arguments

• Name name Type string
  Description: The name of the org to be created
• Name allow_users_to_join_by_domain Type boolean
  Description: If a domain is set for the org, allow users to the org if their domain matches the org's domain.
• Name restrict_invites_by_domain Type boolean
  Description: If a domain is set for the org, only allow users with that domain to join.

Success Response

• Name org_id Type string
  Description: The ID of the new org.
• Name first_org Type boolean
  Description: If the new org is the first org the user belongs to.

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 cannotCreateOrgs
  Description: The user does not have permission to create orgs.
• Name cannotUsePersonalDomain
  Description: The user provided a domain such as "gmail.com", "microsoft.com", etc.
• Name userAlreadyInTooManyOrgs
  Description: User already belongs to the maximum amount of orgs.
• Name badRequest
  Description: Incorrect arguments provided.
• Name unauthorized
  Description: The user is not logged in.
• Name unexpectedOrUnhandled
  Description: An unexpected error occurred.

Request

const { createOrg } = useAuthFrontendApis()

const response = await createOrg({
    name: 'Acme Inc',
    allow_users_to_join_by_domain: true,
    restrict_invites_by_domain: true,
})
response.handle({
    success(data) {
        console.log(data)
    },
    cannotCreateOrgs(error) {
        console.log('Cannot create orgs', error.user_facing_error)
    },
    cannotUsePersonalDomain(error) {
        console.log('Cannot use personal domain', error.user_facing_error)
    },
    badRequest(error) {
        for (const [field, fieldErrorMessage] of Object.entries(error.user_facing_errors)) {
            console.log('Error: "' + fieldErrorMessage + '" for field: "' + field + '"')
        }
    },
    userAlreadyInTooManyOrgs(error) {
        console.log('User already in too many orgs', error.user_facing_error)
    },
    unexpectedOrUnhandled(error) {
        console.log('Unexpected or unhandled error', error.user_facing_error)
    },
})

Successful Response

{
    "org_id": "1189c444-8a2d-4c41-8b4b-ae43ce79a492",
    "first_org": true
}