Get started with Organizations and Next.js

'use client'

import { useOrganization, useOrganizationList } from '@clerk/nextjs'

export default function Page() {
  const { organization } = useOrganization()
  const { userMemberships } = useOrganizationList({
    userMemberships: true,
  })

  return (
    <div className="p-8">
      <h1 className="text-2xl font-bold mb-4">
        Welcome to the <strong>{organization?.name}</strong> organization
      </h1>
      <p className="mb-6">
        Your role in this organization:{' '}
        <strong>
          {/* Find the organization membership that matches the
            currently active organization and return the role */}
          {
            userMemberships?.data?.find(
              (membership) => membership.organization.id === organization?.id,
            )?.role
          }
        </strong>
      </p>
    </div>
  )
}

import { auth, clerkClient } from '@clerk/nextjs/server'
import { OrganizationSwitcher } from '@clerk/nextjs'

export default async function Page() {
  const { isAuthenticated, orgId, has } = await auth()

  // Check if the user is authenticated
  if (!isAuthenticated) return <p>You must be signed in to access this page.</p>

  // Check if there is an Active Organization
  if (!orgId) return <p>Set an Active Organization to access this page.</p>

  // Check if the user has the `org:admin` Role
  if (!has({ role: 'org:admin' })) return <p>You must be an admin to access this page.</p>

  // Initialize the JS Backend SDK
  // This varies depending on the SDK you're using
  // https://clerk.com/docs/js-backend/getting-started/quickstart
  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 (
      <p>
        This page is only accessible in the <strong>{requiredOrgName}</strong> Organization. Switch
        to the <strong>{requiredOrgName}</strong> Organization to access this page.
      </p>
    )

  return (
    <p>
      You are currently signed in as an <strong>admin</strong> in the{' '}
      <strong>{organization.name}</strong> Organization.
    </p>
  )
}

'use client'
import { OrganizationSwitcher, 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 <p>You must be signed in to access this page.</p>

  // Check if there is an Active Organization
  if (!organization) return <p>Set an active organization to access this page.</p>

  // Check if the user has the `org:admin` Role
  if (!has({ role: 'org:admin' })) return <p>You must be an admin to access this page.</p>

  // Check if Organization name matches (e.g. 'Acme Corp')
  if (organization.name !== requiredOrgName)
    return (
      <p>
        This page is only accessible in the <strong>{requiredOrgName}</strong> Organization. Switch
        to the <strong>{requiredOrgName}</strong> Organization to access this page.
      </p>
    )

  return (
    <p>
      You are currently signed in as an <strong>admin</strong> in the{' '}
      <strong>{organization.name}</strong> Organization.
    </p>
  )
}