# Get started with Organizations
**Before you start**
- [Follow the quickstart guide.](https://clerk.com/docs/getting-started/quickstart.md?sdk=nextjs)
Organizations let you group users with Roles and Permissions, enabling you to build multi-tenant B2B apps like Slack (workspaces), Linear (teams), or Vercel (projects) where users can switch between different team contexts. This tutorial will demonstrate how to add Organizations, create and switch Organizations, and protect routes by Organization and Roles.
1. ## Add `` to your app
The [](https://clerk.com/docs/nextjs/reference/components/organization/organization-switcher.md) component is the easiest way to let users create, switch between, and manage Organizations. It's recommended to place it in your app's header or navigation so it's always accessible to your users. For example:
filename: app/layout.tsx
```tsx
import type { Metadata } from 'next'
import {
ClerkProvider,
Show,
UserButton,
SignInButton,
+ OrganizationSwitcher,
} from '@clerk/nextjs'
import { Geist, Geist_Mono } from 'next/font/google'
import './globals.css'
const geistSans = Geist({
variable: '--font-geist-sans',
subsets: ['latin'],
})
const geistMono = Geist_Mono({
variable: '--font-geist-mono',
subsets: ['latin'],
})
export const metadata: Metadata = {
title: 'Clerk Next.js Quickstart',
description: 'Generated by create next app',
}
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode
}>) {
return (
{children}
)
}
```
2. ## Access Organization data
**Server-side**
To access information about the currently Active Organization on the server-side, use [`clerkClient()`](https://clerk.com/docs/reference/backend/overview.md?sdk=nextjs) to call the [`getOrganization()`](https://clerk.com/docs/reference/backend/organization/get-organization.md?sdk=nextjs) method, which returns the Backend [`Organization`](https://clerk.com/docs/reference/backend/types/backend-organization.md?sdk=nextjs) object. You'll need to pass an `orgId`, which you can access from the [`Auth`](https://clerk.com/docs/reference/backend/types/auth-object.md?sdk=nextjs) object.
filename: app/page.tsx
```tsx
import { auth, clerkClient } from '@clerk/nextjs/server'
export default async function Page() {
// Use `auth()` to access the `Auth` object
// https://clerk.com/docs/reference/backend/types/auth-object
const { isAuthenticated, orgId, orgRole } = await auth()
// Check if user is authenticated
if (!isAuthenticated) return You must be signed in to access this page.
// Check if there is an Active Organization
if (!orgId) return Set an Active Organization to access this page.
// Initialize clerkClient
const client = await clerkClient()
// Use the `getOrganization()` method to get the Backend `Organization` object
const organization = await client.organizations.getOrganization({ organizationId: orgId })
return (
Welcome to the {organization.name} organization
Your role in this organization: {orgRole}
)
}
```
**Client-side**
Use the [useOrganization()](https://clerk.com/docs/nextjs/reference/hooks/use-organization.md) hook to access information about the currently Active Organization. Use the [useOrganizationList()](https://clerk.com/docs/nextjs/reference/hooks/use-organization-list.md) hook to access information about the current user's Organization memberships.
filename: app/page.tsx
```tsx
'use client'
import { useOrganization, useOrganizationList } from '@clerk/nextjs'
export default function Page() {
const { organization } = useOrganization()
const { userMemberships } = useOrganizationList({
userMemberships: true,
})
return (
Welcome to the {organization?.name} organization
Your role in this organization:{' '}
{/* Find the organization membership that matches the
currently active organization and return the role */}
{
userMemberships?.data?.find(
(membership) => membership.organization.id === organization?.id,
)?.role
}
)
}
```
3. ## Visit your app
Run your project with the following command:
```npm
npm run dev
```
Visit your app locally at [localhost:3000](http://localhost:3000).
When you visit your app, Clerk will prompt you to enable Organizations.
4. ### Enable Organizations
When prompted, select **Enable Organizations**. Choose to make membership required.
5. ### Create first user and Organization
You must sign in to use Organizations. When prompted, select **Sign in to continue**. Then, authenticate to create your first user.
Since you chose to make membership required when you enabled Organizations, every user must be in at least one Organization. Clerk will prompt you to create an Organization for your user.
6. ## Create and switch Organizations
At this point, Clerk should have redirected you to a page with the [](https://clerk.com/docs/nextjs/reference/components/organization/organization-switcher.md) component. This component allows you to create, switch between, and manage organizations.
1. Select the `` component, then **Create an organization**.
2. Enter `Acme Corp` as the Organization name.
3. Invite users to your Organization and select their Role.
7. ## Protect routes by Organization and Roles
You can protect content and even entire routes based on Organization membership, Roles, and Permissions by performing authorization checks.
In the following example, the page is protected from unauthenticated users, users that don't have the `org:admin` Role, and users that are not in the `Acme Corp` Organization. It uses the [`has()`](https://clerk.com/docs/reference/backend/types/auth-object.md?sdk=nextjs#has) helper to perform the authorization check for the `org:admin` Role.
**Server-side**
filename: app/protected/page.tsx
```tsx
import { auth, clerkClient } from '@clerk/nextjs/server'
export default async function Page() {
const { isAuthenticated, orgId, has } = await auth()
// Check if the user is authenticated
if (!isAuthenticated) return You must be signed in to access this page.
// Check if there is an Active Organization
if (!orgId) return Set an Active Organization to access this page.
// Check if the user has the `org:admin` Role
if (!has({ role: 'org:admin' })) return You must be an admin to access this page.
// Initialize clerkClient
const client = await clerkClient()
// Use the `getOrganization()` method to get the Backend `Organization` object
const organization = await client.organizations.getOrganization({ organizationId: orgId })
// Check if Organization name matches (e.g. 'Acme Corp')
if (organization.name !== requiredOrgName)
return (
This page is only accessible in the {requiredOrgName} Organization. Switch
to the {requiredOrgName} Organization to access this page.
)
return (
You are currently signed in as an admin in the{' '}
{organization.name} Organization.
)
}
```
**Client-side**
filename: app/protected/page.tsx
```tsx
'use client'
import { useAuth, useOrganization } from '@clerk/nextjs'
export default function Page() {
// The `useAuth()` hook gives you access to properties like `isSignedIn` and `has()`
const { isSignedIn, has } = useAuth()
const { organization } = useOrganization()
const requiredOrgName = 'Acme Corp'
// Check if the user is authenticated
if (!isSignedIn) return You must be signed in to access this page.
// Check if there is an Active Organization
if (!organization) return Set an active organization to access this page.
// Check if the user has the `org:admin` Role
if (!has({ role: 'org:admin' })) return You must be an admin to access this page.
// Check if Organization name matches (e.g. 'Acme Corp')
if (organization.name !== requiredOrgName)
return (
This page is only accessible in the {requiredOrgName} Organization. Switch
to the {requiredOrgName} Organization to access this page.
)
return (
You are currently signed in as an admin in the{' '}
{organization.name} Organization.
)
}
```
Navigate to [localhost:3000/protected](http://localhost:3000/protected). You should see a green message confirming you are an admin in `Acme Corp`. Use the `` to switch Organizations or rename the Organization to show the red message.
Learn more about protecting routes and checking Organization Roles in the [authorization guide](https://clerk.com/docs/guides/organizations/control-access/roles-and-permissions.md?sdk=nextjs).
8. ## It's time to build your B2B SaaS!
You've added Clerk Organizations to your app 🎉.
Here are some next steps you can take to scale your app:
- **Control access** with [Custom Roles and Permissions](https://clerk.com/docs/guides/organizations/control-access/roles-and-permissions.md?sdk=nextjs): define granular Permissions for different user types within Organizations.
- **Onboard entire companies** with [Verified Domains](https://clerk.com/docs/guides/organizations/add-members/verified-domains.md?sdk=nextjs): automatically invite users with approved email domains (e.g. `@company.com`) to join Organizations without manual invitations.
- **Enable Enterprise SSO** with [SAML and OIDC](https://clerk.com/docs/guides/organizations/add-members/sso.md?sdk=nextjs): let customers authenticate through their identity provider (e.g. Okta, Entra ID, Google Workspace) with unlimited connections, no per-connection fees.
---
## Sitemap
[Overview of all docs pages](https://clerk.com/docs/llms.txt)