Guide
Organizations
Create and manage organizations with roles and permissions
UNuxt includes a complete organization system with roles, permissions, and member management.
Create an organization
Users can create organizations to collaborate with team members:
composables/useOrganizations.ts
export function useOrganizations() {
const { $auth } = useNuxtApp()
async function createOrganization(name: string, slug: string) {
const org = await $auth.organization.create({
name,
slug
})
return org
}
return { createOrganization }
}
Add members to an organization
Invite members by email and assign them roles:
composables/useOrganization.ts
const { inviteMember } = useOrganization()
async function sendInvite(email: string, role: 'member' | 'admin') {
await inviteMember(email, role)
// Email is automatically sent to the invited user
}
Invited users receive an email with an acceptance link. Once they click it and sign in (or create an account), they automatically join the organization.
Learn more: See the complete invitation flow guide for details on acceptance, edge cases, and customization.
Configure roles and permissions
Define roles in your Better Auth configuration:
packages/auth/src/server.ts
export const auth = betterAuth({
// ...
plugins: [
organization({
roles: {
owner: {
permissions: ['*']
},
admin: {
permissions: [
'member:read',
'member:invite',
'member:remove',
'settings:read',
'settings:update'
]
},
member: {
permissions: ['member:read', 'settings:read']
}
}
})
]
})
Check permissions in your app
Verify user permissions before performing actions:
components/OrgSettings.vue
<script setup lang="ts">
const { activeOrganization, hasPermission } = useOrganization()
const canUpdateSettings = computed(() =>
hasPermission('settings:update')
)
</script>
<template>
<UButton
v-if="canUpdateSettings"
@click="openSettings"
>
Organization Settings
</UButton>
</template>
Handle organization switching
Users can belong to multiple organizations. Handle switching between them:
components/OrgSwitcher.vue
<script setup lang="ts">
const { organizations, activeOrganization, setActiveOrganization } = useOrganization()
async function switchOrg(orgId: string) {
await setActiveOrganization(orgId)
}
</script>
<template>
<USelectMenu
v-model="activeOrganization"
:options="organizations"
option-attribute="name"
@update:model-value="(org) => switchOrg(org.id)"
/>
</template>