Get started with Organizations and React Router

import { useOrganization, useOrganizationList } from '@clerk/react-router'

export function Welcome() {
  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>
          {
            userMemberships?.data?.find(
              (membership) => membership.organization.id === organization?.id,
            )?.role
          }
        </strong>
      </p>
    </div>
  )
}

import { redirect } from 'react-router'
import { clerkClient, getAuth } from '@clerk/react-router/server'
import type { Organization } from '@clerk/backend'
import type { Route } from './+types/home'
import { Welcome } from '../welcome/welcome'

export function meta({}: Route.MetaArgs) {
  return [
    { title: 'New React Router App' },
    { name: 'description', content: 'Welcome to React Router!' },
  ]
}

export async function loader(args: Route.LoaderArgs) {
  // Use the `getAuth()` helper to access the `Auth` object
  // https://clerk.com/docs/reference/backend/types/auth-object
  const { isAuthenticated, orgId, orgRole } = await getAuth(args)

  // Check if the user is authenticated
  if (!isAuthenticated) {
    return redirect('/sign-in?redirect_url=' + args.request.url)
  }

  // Check if there is an Active Organization
  if (!orgId) {
    return { organization: null, orgRole: null, hasOrganization: false }
  }

  // Initialize the JS Backend SDK
  // This varies depending on the SDK you're using
  // https://clerk.com/docs/js-backend/getting-started/quickstart
  // Use the `getOrganization()` method to get the Backend `Organization` object
  const organization = await clerkClient(args).organizations.getOrganization({
    organizationId: orgId,
  })

  return { organization, orgRole }
}

export default function Home({ loaderData }: Route.ComponentProps) {
  return (
    <Welcome
      loaderData={
        loaderData as {
          organization: Organization
          orgRole: string | undefined
          hasOrganization?: undefined
        }
      }
    />
  )
}

type LoaderData = Awaited<ReturnType<typeof import('../routes/home').loader>>

interface WelcomeProps {
  loaderData: LoaderData
}

export function Welcome({ loaderData }: WelcomeProps) {
  if (!loaderData || loaderData instanceof Response) return null

  return (
    <div>
      <h1>Welcome to the {loaderData.organization?.name} Organization</h1>
      <p>Your role in this organization: {loaderData.orgRole}</p>
    </div>
  )
}

import type { Route } from './+types/protected'
import { useAuth, useOrganization } from '@clerk/react-router'

export function meta({}: Route.MetaArgs) {
  return [
    { title: 'Protected Page' },
    { name: 'description', content: 'A protected page requiring admin access' },
  ]
}

export default function Protected() {
  const { isSignedIn, has } = useAuth()
  const { organization } = useOrganization()

  // 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")
  const requiredOrgName = '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>
  )
}

import { clerkClient, getAuth } from '@clerk/react-router/server'
import { redirect } from 'react-router'
import type { Route } from '../+types/protected'

export function meta({}: Route.MetaArgs) {
  return [
    { title: 'Protected Page' },
    { name: 'description', content: 'A protected page requiring admin access' },
  ]
}

export async function loader(args: Route.LoaderArgs) {
  // Use the `getAuth()` helper to access the `Auth` object
  // https://clerk.com/docs/reference/backend/types/auth-object
  const { isAuthenticated, orgId, has } = await getAuth(args)

  // Check if the user is authenticated
  if (!isAuthenticated) {
    return redirect('/sign-in?redirect_url=' + args.request.url)
  }

  // Check if there is an Active Organization
  if (!orgId) return { error: 'Set an Active Organization to access this page.' }

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

  // Initialize the JS Backend SDK
  // This varies depending on the SDK you're using
  // https://clerk.com/docs/js-backend/getting-started/quickstart
  // Use the `getOrganization()` method to get the Backend `Organization` object
  const organization = await clerkClient(args).organizations.getOrganization({
    organizationId: orgId,
  })

  // Check if Organization name matches (e.g. 'Acme Corp')
  const requiredOrgName = 'Acme Corp'
  if (organization.name !== requiredOrgName)
    return {
      error: `This page is only accessible in the ${requiredOrgName} Organization. Switch to the ${requiredOrgName} Organization to access this page.`,
    }

  return { organization }
}

export default function Protected({ loaderData }: Route.ComponentProps) {
  return (
    <p>
      You are currently signed in as an <strong>admin</strong> in the{' '}
      <strong>{loaderData?.organization?.name}</strong> Organization.
    </p>
  )
}